/* ========================================================================== pages/splash.css — cinematic entry screen Opt-in: default display:none. The script adds `.splash-on` only when JS runs, the session hasn't seen it, and reduced-motion is off. So crawlers, JS-off, returning and reduced-motion visitors never see or wait for it. The splash is a dark cinematic moment even though the site itself is light. ========================================================================== */ .splash { display: none; } .splash-on .splash { display: grid; place-items: center; position: fixed; inset: 0; z-index: 10000; background: var(--deep); overflow: hidden; cursor: default; transition: opacity 700ms var(--ease), visibility 0s linear 700ms; contain: layout style paint; /* isolate its animations from the page */ } .splash-on body { overflow: hidden; } .splash-on.splash-out .splash { opacity: 0; visibility: hidden; pointer-events: none; } .splash-on.splash-out body { overflow: visible; } /* ---------- backdrop: photo crossfade + optional video ---------- */ .splash__bg { position: absolute; inset: 0; } .splash__shot { position: absolute; inset: 0; opacity: 0; transition: opacity 1800ms var(--ease); } .splash__shot.is-active { opacity: 1; } .splash__shot img { width: 100%; height: 100%; object-fit: cover; } .splash__shot.is-active img { animation: splashburns 12s var(--ease) forwards; } @keyframes splashburns { from { transform: scale(1.05); } to { transform: scale(1.16) translate3d(-1.5%, -1%, 0); } } .splash__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 900ms var(--ease); } .splash__video.is-playing { opacity: 1; } .splash__scrim { position: absolute; inset: 0; background: linear-gradient(to top, var(--deep) 4%, color-mix(in srgb, var(--deep) 55%, transparent) 45%, color-mix(in srgb, var(--deep) 72%, transparent) 100%), radial-gradient(circle at 50% 42%, transparent 30%, color-mix(in srgb, var(--deep) 60%, transparent) 100%); } /* ---------- woven threads ---------- */ .splash__weave { position: absolute; inset: 0; pointer-events: none; } .splash__thread { position: absolute; left: 0; width: 100%; height: 1px; transform: scaleX(0); transform-origin: left center; animation: weft 1200ms var(--ease) forwards; animation-delay: calc(var(--i) * 90ms); } .splash__thread:nth-child(1) { top: 26%; background: var(--gold); } .splash__thread:nth-child(2) { top: 40%; background: var(--clay); transform-origin: right center; } .splash__thread:nth-child(3) { top: 60%; background: var(--jade); } .splash__thread:nth-child(4) { top: 74%; background: var(--gold); opacity: .5; transform-origin: right center; } .splash__thread:nth-child(5) { top: 88%; background: var(--clay); opacity: .4; } @keyframes weft { to { transform: scaleX(1); } } .splash__warp { position: absolute; top: 0; width: 1px; height: 100%; background: color-mix(in srgb, var(--gold) 40%, transparent); transform: scaleY(0); transform-origin: top; opacity: .3; animation: warp 1400ms var(--ease) forwards; animation-delay: calc(360ms + var(--i) * 120ms); } .splash__warp:nth-child(6) { left: 22%; } .splash__warp:nth-child(7) { left: 55%; background: color-mix(in srgb, var(--jade) 50%, transparent); } .splash__warp:nth-child(8) { left: 80%; } @keyframes warp { to { transform: scaleY(1); } } /* ---------- content ---------- */ .splash__inner { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); padding: var(--gutter); text-align: center; color: var(--on-image); } .splash__mask { overflow: hidden; display: block; } .splash__mask > * { display: block; transform: translateY(115%); animation: rise 780ms var(--ease) forwards; animation-delay: var(--d, 0ms); } @keyframes rise { to { transform: translateY(0); } } .splash__eyebrow { color: color-mix(in srgb, var(--on-image) 80%, transparent); } .splash__word { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; font-family: var(--font-display); font-size: clamp(2.8rem, 1.2rem + 9vw, 8rem); font-weight: 800; letter-spacing: var(--tr-hero); line-height: 0.92; color: var(--on-image); } .splash__word > span { display: inline-block; transform: translateY(115%); animation: letter 900ms var(--ease) forwards; animation-delay: calc(420ms + var(--c) * 42ms); } .splash__sp { width: .3em; animation: none !important; transform: none !important; } .splash__break { flex-basis: 100%; height: 0; animation: none !important; transform: none !important; } .splash__gold { color: var(--gold); } @keyframes letter { to { transform: translateY(0); } } .splash__tag { color: color-mix(in srgb, var(--on-image) 72%, transparent); font-size: var(--step-small); max-width: 40ch; } .splash__enter { position: relative; margin-top: var(--s-5); padding: var(--s-4) var(--s-8); overflow: hidden; border: 1px solid var(--line-gold); border-radius: var(--r-full); font-family: var(--font-mono); font-size: var(--step-util); letter-spacing: var(--tr-util); text-transform: uppercase; color: var(--on-image); transition: color var(--d-fast) var(--ease), background-color var(--d-fast) var(--ease); } .splash__enter-label { position: relative; z-index: 2; } .splash__enter-fill { position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform var(--d-base) var(--ease); } .splash__enter:hover { background: var(--gold); color: var(--on-accent); border-color: var(--gold); } .splash__enter:hover .splash__enter-fill { transform: scaleX(1); } .splash__enter:focus-visible { outline: 2px solid var(--gold); outline-offset: 4px; } @media (prefers-reduced-motion: reduce) { .splash { display: none !important; } } @media (max-width: 520px) { .splash__thread:nth-child(4), .splash__thread:nth-child(5), .splash__warp:nth-child(8) { display: none; } }