/* CiCi mascot — hero badge + persistent corner guide */

:root {
	--cici-navy: #103c66;
	--cici-mint: #c0dab4;
	--cici-light-blue: #95c7eb;
}

/* -------------------------------------------------- */
/* Shared pose stack                                   */
/* -------------------------------------------------- */

.cici-pose {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain;
	opacity: 0;
	transition: opacity .25s ease;
	pointer-events: none;
}

.cici-pose.is-active {
	opacity: 1;
}

.cici-pose.is-popping {
	animation: cici-pop .35s ease;
}

.cici-pose.is-celebrating {
	animation: cici-wiggle .6s ease 2;
}

/* -------------------------------------------------- */
/* Hero badge — course landing page                    */
/* -------------------------------------------------- */

/*
 * The hero is injected via the `learndash-course-heading-after` hook, which
 * places it inside LearnDash's own `.ld-section-heading` — a `display:flex`
 * row (no wrap) that also holds the "Course Content" heading and the
 * progress-bar/expand-button row. Without forcing a wrap here, the hero gets
 * squeezed onto that same row as a flex sibling instead of sitting on its
 * own line below the heading.
 */
/* !important needed: LearnDash's own rule is
   `.learndash-wrapper .ld-item-list .ld-section-heading` (3 classes),
   higher specificity than a single-class override. */
.ld-section-heading {
	flex-wrap: wrap !important;
}

.cici-hero {
	display: flex;
	align-items: center;
	gap: 20px;
	flex: 1 1 100%;
	order: 1;
	width: 100%;
	margin: 20px 0 28px;
	animation: cici-entrance .45s cubic-bezier(.34, 1.56, .64, 1) both;
}

@media (max-width: 640px) {
	.cici-hero {
		flex-wrap: wrap;
		justify-content: center;
		text-align: center;
	}

	.cici-hero__intro {
		flex: 1 1 100%;
	}
}

.cici-hero__badge {
	position: relative;
	flex: 0 0 auto;
	width: 150px;
	height: 150px;
	border-radius: 50%;
	border: 4px solid var(--cici-navy);
	box-shadow: inset 0 0 0 3px var(--cici-mint);
	background: var(--cici-mint);
	overflow: hidden;
	animation: cici-bob 3.5s ease-in-out infinite;
}

.cici-hero__badge::before {
	content: '';
	position: absolute;
	inset: 0;
	background:
		linear-gradient(var(--cici-mint), var(--cici-mint)),
		url("../../../../themes/culturalco/images/mascot-cici/cici-globe-bg.png") center / cover no-repeat;
	background-blend-mode: color-burn;
	opacity: .15;
}

.cici-hero__badge .cici-pose {
	padding: 14px;
}

.cici-hero__intro {
	font-family: 'Montserrat', sans-serif;
}

.cici-hero__name {
	margin: 0 0 2px;
	font-size: 22px;
	font-weight: 700;
	color: var(--cici-navy);
}

.cici-hero__motto {
	position: relative;
	margin: 0;
	padding: 6px 16px;
	display: inline-block;
	font-size: 14px;
	font-weight: 600;
	color: var(--cici-navy);
	background: var(--cici-mint);
	border-radius: 999px;
}

.cici-hero__motto::before {
	content: '';
	position: absolute;
	left: -7px;
	top: 50%;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 6px 8px 6px 0;
	border-color: transparent var(--cici-mint) transparent transparent;
}

/* Must come after the base `.cici-hero__motto::before` rule above — same
   specificity, so source order (not just the media query matching)
   determines which one wins. */
@media (max-width: 640px) {
	.cici-hero__motto::before {
		left: 50%;
		top: -8px;
		transform: translateX(-50%);
		border-width: 0 6px 8px 6px;
		border-color: transparent transparent var(--cici-mint) transparent;
	}
}

/* -------------------------------------------------- */
/* Corner widget — lesson / topic / quiz pages         */
/* -------------------------------------------------- */

.cici-widget {
	position: fixed;
	right: clamp(12px, 3vw, 32px);
	bottom: clamp(12px, 3vw, 32px);
	width: clamp(80px, 9vw, 160px);
	height: clamp(80px, 9vw, 160px);
	z-index: 9000;
	display: block;
	background: none;
	border: none;
	padding: 0;
	appearance: none;
	text-transform: none;
	cursor: pointer;
	transition: transform .2s ease;
	animation: cici-entrance .45s cubic-bezier(.34, 1.56, .64, 1) both;
}

.cici-widget:hover {
	transform: scale(1.06);
}

.cici-widget:focus-visible {
	outline: 3px solid var(--cici-navy);
	outline-offset: 4px;
	border-radius: 50%;
}

.cici-widget.is-idle .cici-pose.is-active {
	animation: cici-bob 3.5s ease-in-out infinite;
}

.cici-widget .cici-pose {
	filter: drop-shadow(0 8px 18px rgba(16, 60, 102, .25));
}

.cici-widget__bubble {
	position: absolute;
	right: 0;
	bottom: calc(100% + 14px);
	max-width: 220px;
	padding: 10px 14px;
	font-family: 'Montserrat', sans-serif;
	font-size: 13px;
	font-weight: 600;
	line-height: 1.4;
	color: var(--cici-navy);
	background: var(--cici-mint);
	border-radius: 14px;
	box-shadow: 0 8px 20px rgba(16, 60, 102, .18);
	opacity: 0;
	transform: translateY(6px);
	pointer-events: none;
	transition: opacity .3s ease, transform .3s ease;
}

.cici-widget__bubble.is-visible {
	opacity: 1;
	transform: translateY(0);
}

.cici-widget__bubble::after {
	content: '';
	position: absolute;
	right: 18px;
	top: 100%;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 8px 6px 0 6px;
	border-color: var(--cici-mint) transparent transparent transparent;
}

/* -------------------------------------------------- */
/* Keyframes                                           */
/* -------------------------------------------------- */

@keyframes cici-entrance {
	from {
		opacity: 0;
		transform: scale(.7);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

@keyframes cici-pop {
	0% { transform: scale(1); }
	50% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

@keyframes cici-bob {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-5px); }
}

@keyframes cici-wiggle {
	0%, 100% { transform: rotate(0) scale(1); }
	25% { transform: rotate(-5deg) scale(1.1); }
	75% { transform: rotate(5deg) scale(1.1); }
}

@media (prefers-reduced-motion: reduce) {
	.cici-hero,
	.cici-widget {
		animation: none;
		opacity: 1;
		transform: none;
	}

	.cici-hero__badge,
	.cici-widget.is-idle .cici-pose.is-active,
	.cici-pose.is-popping,
	.cici-pose.is-celebrating {
		animation: none;
	}
}