/* ═════════════════════════════════════════════════════════════════
   ANIMATIONS — Scroll reveals, keyframes, split-text, and effects
   ═════════════════════════════════════════════════════════════════ */

/* ── Section dividers ── */
.sec-divider { height: 1px; background: var(--rule); transform: scaleX(0); transform-origin: left; transition: transform 1s cubic-bezier(.16,1,.3,1); }
.sec-divider.vis { transform: scaleX(1); }

/* ── Scroll-reveal initial states ── */
.reveal        { opacity: 0; transform: translateY(40px); transition: none; }
.reveal-fade   { opacity: 0; transition: none; }
.reveal-scale  { opacity: 0; transform: scale(.96); transition: none; }
.reveal-left   { opacity: 0; transform: translateX(-40px); transition: none; }
.reveal-right  { opacity: 0; transform: translateX(40px); transition: none; }
.stagger > *   { opacity: 0; transform: translateY(28px); }

/* ── Keyframes ── */
@keyframes fadeUp     { from{opacity:0;transform:translateY(40px);} to{opacity:1;transform:translateY(0);} }
@keyframes fadeIn     { from{opacity:0;} to{opacity:1;} }
@keyframes fadeScale  { from{opacity:0;transform:scale(.96);} to{opacity:1;transform:scale(1);} }
@keyframes fadeLeft   { from{opacity:0;transform:translateX(-40px);} to{opacity:1;transform:translateX(0);} }
@keyframes fadeRight  { from{opacity:0;transform:translateX(40px);} to{opacity:1;transform:translateX(0);} }

/* ── Reveal triggered states ── */
.reveal.visible       { animation: fadeUp    .8s cubic-bezier(.16,1,.3,1) forwards; }
.reveal-fade.visible  { animation: fadeIn    .7s ease forwards; }
.reveal-scale.visible { animation: fadeScale .8s cubic-bezier(.16,1,.3,1) forwards; }
.reveal-left.visible  { animation: fadeLeft  .8s cubic-bezier(.16,1,.3,1) forwards; }
.reveal-right.visible { animation: fadeRight .8s cubic-bezier(.16,1,.3,1) forwards; }
.stagger.visible > *  { animation: fadeUp    .7s cubic-bezier(.16,1,.3,1) forwards; }
.stagger.visible > *:nth-child(1){animation-delay:0s;}
.stagger.visible > *:nth-child(2){animation-delay:.08s;}
.stagger.visible > *:nth-child(3){animation-delay:.16s;}
.stagger.visible > *:nth-child(4){animation-delay:.24s;}
.stagger.visible > *:nth-child(5){animation-delay:.32s;}
.stagger.visible > *:nth-child(6){animation-delay:.40s;}

/* ── Split-word text reveal ── */
.split-word { display: inline-block; overflow: hidden; line-height: inherit; margin-bottom: clamp(6px, 0.7vw, 10px); }
/* Italic serif swashes extend past the glyph box on all sides — pad the
   clipping container so the `overflow: hidden` reveal mask doesn't cut
   off descenders or side-swashes. Negative margins keep layout intact. */
.it-tail .split-word {
	padding-top: 5px;
	margin-top: -5px;
	padding-bottom: 23px;
	margin-bottom: -23px;
}
/* Reverse case: .it-tail sits inside .split-word (e.g. hl-line that is
   entirely italic). Same padding/margin trick keeps descenders visible. */
.split-word:has(.it-tail) {
	padding-bottom: 23px;
	margin-bottom: -23px;
}
.split-word .sw-inner {
	display: inline-block;
	transform: translateY(110%);
	opacity: 0;
	transition: transform .8s cubic-bezier(.16,1,.3,1), opacity .8s cubic-bezier(.16,1,.3,1);
	will-change: transform;
}
.split-word.vis .sw-inner { transform: translateY(0); opacity: 1; }

/* ── Pre-hide split-text heading lines before GSAP animates them in ── */
.section .display .hl-line,
.section .h2 .hl-line,
.finalcta h2 .hl-line,
.section .display .it-tail,
.section .h2 .it-tail,
.finalcta h2 .it-tail {
	opacity: 0;
	/* transform: translateY(36px); */
}

/* ── Reduced motion override ── */
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation: none !important;
		transition: none !important;
	}
	.reveal, .reveal-fade, .reveal-scale, .reveal-left, .reveal-right, .stagger > *,
	.split-word .sw-inner,
	.hero-headline .hl-line, .hero-headline .it-tail,
	.section .display .hl-line, .section .h2 .hl-line, .finalcta h2 .hl-line,
	.section .display .it-tail, .section .h2 .it-tail, .finalcta h2 .it-tail { opacity: 1 !important; transform: none !important; }
}

/* ── Glass shimmer (applied to cards on hover via JS) ── */
.glass-shimmer { position: relative; overflow: hidden; }
.glass-shimmer::after {
	content: ''; position: absolute; inset: 0; pointer-events: none;
	background: linear-gradient(110deg, transparent 30%, rgba(255,255,255,.18) 50%, transparent 70%);
	transform: translateX(var(--shimmer-x, -120%));
	transition: transform .6s ease-out;
	mix-blend-mode: overlay;
}

/* ── 3D card tilt (applied via JS on hover) ── */
.tilt-card { transition: transform .4s cubic-bezier(.16,1,.3,1), box-shadow .4s; will-change: transform; }