/* ───────────────────────────────────────────── Slytherin · Animations GSAP-driven reveals via [data-reveal] ───────────────────────────────────────────── */ /* Default state — visible. JS opts elements into the hidden state by adding `.js-anim` to , which lets reveals animate in. If JS never loads, everything stays visible (graceful no-JS / failed-import fallback). */ .js-anim [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 900ms var(--ease-soft), transform 900ms var(--ease-soft); will-change: opacity, transform; } .js-anim [data-reveal].is-revealed { opacity: 1; transform: none; } .js-anim [data-reveal="fade"] { transform: none; } .js-anim [data-reveal="up"] { transform: translateY(28px); } .js-anim [data-reveal="up-strong"] { transform: translateY(56px); } .js-anim [data-reveal="left"] { transform: translateX(-28px); } .js-anim [data-reveal="right"] { transform: translateX(28px); } .js-anim [data-reveal="scale"] { transform: scale(0.96); } .js-anim [data-reveal="blur"] { filter: blur(12px); transition: opacity 900ms var(--ease-soft), filter 900ms var(--ease-soft); } .js-anim [data-reveal="blur"].is-revealed { filter: blur(0); } .js-anim [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); } /* Split text — characters / words */ .split-line { overflow: hidden; display: block; } .js-anim .split-line .char, .js-anim .split-line .word { display: inline-block; transform: translateY(110%); transition: transform 900ms var(--ease-soft); will-change: transform; } .js-anim .split-line.is-revealed .char, .js-anim .split-line.is-revealed .word { transform: none; } /* Magnetic targets (cursor effect handled by JS) */ .magnetic { display: inline-flex; transition: transform 200ms var(--ease-out); will-change: transform; } /* Marquee gold accent line that draws on reveal */ .gold-rule { display: block; width: 80px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform 800ms var(--ease-soft) 100ms; } .is-revealed .gold-rule, [data-reveal].is-revealed .gold-rule { transform: scaleX(1); } /* Slow drift utility for hero glow elements */ @keyframes drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8px, -10px) scale(1.04); } } .drift { animation: drift 14s var(--ease-soft) infinite; } /* Gentle hover lift utility */ .lift { transition: transform var(--d-mid) var(--ease-spring); } .lift:hover { transform: translateY(-3px); } /* Hidden until ready */ .until-ready { visibility: hidden; } .is-ready .until-ready { visibility: visible; } /* Scrolling number counter (animated by JS) */ .counter { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; } /* Subtle shine sweep — applied to elements with .shine on hover */ .shine { position: relative; overflow: hidden; } .shine::after { content: ""; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(120deg, transparent 30%, rgba(229, 188, 133, 0.18) 50%, transparent 70%); transition: left 1100ms var(--ease-soft); pointer-events: none; } .shine:hover::after { left: 130%; }