/* ============================================================ Adssembly — opening animation (preloader) overlay • Plays ONCE per session (gated by an inline script that adds html.intro-on; this file styles nothing unless that class is present, so there is zero impact on normal/return loads). • Decorative only: #intro is aria-hidden + pointer-events:none and the real page sits underneath, fully in the DOM and crawlable. • Visuals are entirely CSS-driven, so the site still reveals itself even if intro.js never runs. • prefers-reduced-motion: overlay is force-hidden (and the head script also skips it) — site shows instantly, no animation. ============================================================ */ #intro { display: none; } html.intro-on #intro { display: flex; position: fixed; inset: 0; z-index: 100000; align-items: center; justify-content: center; background: #F4ECDD; /* warm paper */ pointer-events: none; /* purely decorative, never blocks input */ transform-origin: 50% 50%; will-change: transform, opacity; /* recede backward (curtain into the distance) after logo + brief hold */ animation: introOut 0.72s cubic-bezier(0.65, 0, 0.35, 1) 1.55s forwards; } html.intro-on .intro-stage { display: inline-flex; flex-direction: column; align-items: stretch; /* dotted rule stretches to word width */ gap: clamp(0.5rem, 1.6vw, 1rem); font-family: "Bricolage Grotesque", "Hanken Grotesque", system-ui, sans-serif; } html.intro-on .intro-word { display: inline-flex; align-items: baseline; font-weight: 800; font-size: clamp(2.6rem, 9vw, 5.2rem); letter-spacing: -0.04em; line-height: 1; color: #1C1A17; /* black letters */ white-space: nowrap; } /* all glyphs start hidden, then animate in */ html.intro-on .il, html.intro-on .iss { display: inline-block; opacity: 0; will-change: transform, opacity; } /* 1) persimmon "ss" pops in first (scale bounce) */ html.intro-on .iss { color: #E8552D; transform: scale(0); animation: ssPop 0.42s cubic-bezier(0.34, 1.56, 0.5, 1) 0.04s forwards; } /* 2) black letters slide in mechanically and lock into place. left ("Ad") come from the right (+x), right ("embly") from the left (-x), staggered OUTWARD from the centre. Snappy ease = decisive, no soft float. */ html.intro-on .il { animation: letterLock 0.40s cubic-bezier(0.16, 1, 0.3, 1) forwards; } html.intro-on .il-l1 { transform: translateX(0.5em); animation-delay: 0.34s; } /* d (inner) */ html.intro-on .il-l2 { transform: translateX(0.5em); animation-delay: 0.40s; } /* A (outer) */ html.intro-on .il-r1 { transform: translateX(-0.5em); animation-delay: 0.34s; } /* e (inner) */ html.intro-on .il-r2 { transform: translateX(-0.5em); animation-delay: 0.40s; } /* m */ html.intro-on .il-r3 { transform: translateX(-0.5em); animation-delay: 0.46s; } /* b */ html.intro-on .il-r4 { transform: translateX(-0.5em); animation-delay: 0.52s; } /* l */ html.intro-on .il-r5 { transform: translateX(-0.5em); animation-delay: 0.58s; } /* y (outer) */ /* 3) persimmon dotted line draws left-to-right beneath the word */ html.intro-on .intro-rule { height: 5px; background-image: radial-gradient(circle at center, #E8552D 0 2.4px, transparent 2.8px); background-size: 15px 5px; background-repeat: repeat-x; background-position: left center; clip-path: inset(0 100% 0 0); /* hidden, then revealed L→R */ animation: ruleDraw 0.34s cubic-bezier(0.16, 1, 0.3, 1) 1.0s forwards; } @keyframes ssPop { 0% { opacity: 0; transform: scale(0); } 60% { opacity: 1; transform: scale(1.18); } 100% { opacity: 1; transform: scale(1); } } @keyframes letterLock { 0% { opacity: 0; } 45% { opacity: 1; } 100% { opacity: 1; transform: translateX(0); } } @keyframes ruleDraw { to { clip-path: inset(0 0 0 0); } } @keyframes introOut { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(-7%) scale(0.5); } } /* tidy: once the recede finishes, JS adds .intro-done to drop the layer */ html.intro-on.intro-done #intro { display: none; } /* Accessibility: never animate for reduced-motion users. (Belt-and-suspenders — the head script also skips adding .intro-on.) */ @media (prefers-reduced-motion: reduce) { #intro { display: none !important; } }