/* ============================================================
   SmileTrue — Animation foundation
   ------------------------------------------------------------
   Ported from source animations.css (lines 6-128, 415-434, 605, 607-619).
   ONLY the base/chrome animations live here: keyframes, [data-anim],
   eyebrow + display em underlines, topbar dot pulse, logo float,
   nav-link hover, base .btn hover/shimmer, prefers-reduced-motion.

   Per-widget reveal sequences (e.g. .system .relapse staggers,
   .choice .paths card reveal) live with each widget in widgets.css.
   ============================================================ */


/* ============== KEYFRAMES ============== */
@keyframes st-fade-up {
	from { opacity: 0; transform: translate3d(0, 28px, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes st-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

@keyframes st-fade-left {
	from { opacity: 0; transform: translate3d(-32px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes st-fade-right {
	from { opacity: 0; transform: translate3d(32px, 0, 0); }
	to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

@keyframes st-rise {
	from { opacity: 0; transform: translate3d(0, 56px, 0) scale(0.97); }
	to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes st-blur-in {
	from { opacity: 0; filter: blur(14px); transform: translate3d(0, 14px, 0); }
	to   { opacity: 1; filter: blur(0);    transform: translate3d(0, 0, 0); }
}

@keyframes st-line-grow {
	from { transform: scaleX(0); }
	to   { transform: scaleX(1); }
}

@keyframes st-line-grow-y {
	from { transform: scaleY(0); }
	to   { transform: scaleY(1); }
}

@keyframes st-shimmer {
	0%   { background-position: -200% 0; }
	100% { background-position: 200% 0; }
}

@keyframes st-pulse-gold {
	0%, 100% { box-shadow: 0 0 0 0  rgba(201, 164, 73, 0.6); }
	50%      { box-shadow: 0 0 0 14px rgba(201, 164, 73, 0); }
}

@keyframes st-arrow-pulse {
	0%, 100% { transform: translateY(-50%) translateX(0);  opacity: 0.85; }
	50%      { transform: translateY(-50%) translateX(4px); opacity: 1;    }
}

@keyframes st-soft-float {
	0%, 100% { transform: translate3d(0, 0,    0); }
	50%      { transform: translate3d(0, -10px, 0); }
}

@keyframes st-spin-slow {
	from { transform: rotate(0deg);   }
	to   { transform: rotate(360deg); }
}

@keyframes st-marquee {
	from { transform: translateX(0);    }
	to   { transform: translateX(-50%); }
}

@keyframes st-cursor-blink {
	0%, 49%   { opacity: 1; }
	50%, 100% { opacity: 0; }
}


/* ============== [data-anim] REVEAL SYSTEM ============== */

[data-anim] {
	opacity: 0;
	will-change: transform, opacity;
}

[data-anim].in {
	animation-duration:        0.9s;
	animation-fill-mode:       both;
	animation-timing-function: cubic-bezier(0.2, 0.7, 0.2, 1);
	/* Stagger via inline `style="--d: <index>"` set by reveal.js on [data-anim-group] children */
	animation-delay:           calc(var(--d, 0) * 90ms);
}

[data-anim="fade-up"].in    { animation-name: st-fade-up; }
[data-anim="fade-in"].in    { animation-name: st-fade-in; }
[data-anim="fade-left"].in  { animation-name: st-fade-left; }
[data-anim="fade-right"].in { animation-name: st-fade-right; }
[data-anim="rise"].in       { animation-name: st-rise;    animation-duration: 1.1s; }
[data-anim="blur-in"].in    { animation-name: st-blur-in; animation-duration: 1.2s; }


/* ============== [data-st-reveal] PRE-STATE ============== */
/* Elements tagged data-st-reveal start hidden; reveal.js adds .in to fade them in. */

[data-st-reveal]:not(.in) {
	opacity: 0;
	transform: translate3d(0, 28px, 0);
	will-change: transform, opacity;
}

[data-st-reveal].in {
	opacity: 1;
	transform: none;
	transition: opacity 0.9s cubic-bezier(0.2, 0.7, 0.2, 1),
				transform 0.9s cubic-bezier(0.2, 0.7, 0.2, 1);
}


/* ============== EYEBROW + DISPLAY EM — gold underline draws on scroll ============== */

.eyebrow::before {
	transform-origin: left center;
	transform: scaleX(0);
	transition: transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.eyebrow.in::before {
	transform: scaleX(1);
}

.display em {
	position: relative;
	display: inline-block;
}

.display em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0.04em;
	height: 2px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 1s cubic-bezier(0.2, 0.7, 0.2, 1) 0.35s;
}

.display.in em::after {
	transform: scaleX(1);
}


/* ============== LOGO MARK — gentle float ============== */
.logo .mark {
	animation: st-soft-float 5s ease-in-out infinite;
}


/* ============== NAV LINKS — underline on hover ============== */

.nav-links a {
	position: relative;
	transition: color 0.25s ease;
}

.nav-links a::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -6px;
	height: 1px;
	background: var(--gold);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}

.nav-links a:hover {
	color: var(--teal-700);
	cursor: pointer;
}

.nav-links a:hover::after {
	transform: scaleX(1);
}


/* ============== BASE BUTTON — hover + shimmer ============== */

.btn {
	position: relative;
	overflow: hidden;
	transition: transform 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.btn::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, 0.28) 50%, transparent 70%);
	background-size: 200% 100%;
	background-position: -200% 0;
	pointer-events: none;
}

.btn:hover {
	transform: translateY(-1px);
}

.btn.primary:hover { background: var(--teal-700); }
.btn.gold:hover    { background: var(--gold-soft); }

.btn:hover::before {
	animation: st-shimmer 1s ease forwards;
}


/* ============== REDUCED MOTION ============== */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.001ms !important;
		animation-delay:    0ms      !important;
		transition-duration:0.001ms !important;
		transition-delay:   0ms      !important;
	}
	[data-anim],
	[data-st-reveal] {
		opacity: 1 !important;
		transform: none !important;
	}
	.eyebrow::before { transform: scaleX(1) !important; }
}