/* Original signature choreography over the user-supplied night film. Homepage styles stay isolated. */
@font-face { font-family: 'Newsreader Variable'; font-style: italic; font-weight: 200 800; font-display: swap; src: url('fonts/newsreader-latin-wght-italic.woff2') format('woff2-variations'); }
@font-face { font-family: 'Manrope Variable'; font-style: normal; font-weight: 200 800; font-display: swap; src: url('fonts/manrope-latin-wght-normal.woff2') format('woff2-variations'); }
.origin-intro { display: none; --ink: #f5f4ef; --copper: #d8e4e8; --font-sans: 'Manrope Variable', 'Avenir Next', sans-serif; --font-editorial: 'Newsreader Variable', Georgia, serif; --ease-out: cubic-bezier(.16,1,.3,1); font-family: var(--font-sans); }
html:is([data-intro='pending'],[data-intro='playing'],[data-intro='exiting']) .origin-intro { display: block; }
html:is([data-intro='pending'],[data-intro='playing']) .page { visibility: hidden; }
html:is([data-intro='pending'],[data-intro='playing']) .page :is(.header,.anim,.headline > span) { animation-play-state: paused; }
.origin-intro button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; border-radius: 3px; }
.origin-intro:focus { outline: none; }
/* ---- Authored entrance: the approved skywhale awakens the creator name ---- */
.origin-intro { position: fixed; z-index: 150; inset: 0; overflow: hidden; isolation: isolate; background: hsl(201 100% 13%); color: var(--ink); cursor: pointer; opacity: 1; will-change: opacity; transition: opacity .88s cubic-bezier(.4,0,.2,1); }
.origin-intro__backdrop { position: absolute; z-index: 0; inset: 0; background: url('assets/signature-night-poster.webp') center center / cover no-repeat; pointer-events: none; }
.origin-intro__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; pointer-events: none; }
.origin-intro__video:is([data-state='unavailable'],[data-state='autoplay-blocked']) { visibility: hidden; }
.origin-intro--exiting { opacity: 0; pointer-events: none; }
.origin-intro__archive { position: absolute; z-index: 5; left: clamp(20px, 4vw, 64px); top: clamp(22px, 4vw, 48px); margin: 0; color: var(--copper); font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase; opacity: 0; animation: originMetaIn .8s .45s var(--ease-out) forwards; }
.origin-intro__skip { position: absolute; z-index: 6; right: clamp(20px, 4vw, 64px); top: clamp(14px, 3vw, 38px); min-height: 44px; padding: 10px 8px; border: 0; background: transparent; color: #d8e4e8; font-size: 11px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; opacity: 0; animation: originMetaIn .8s .8s var(--ease-out) forwards; }
.origin-intro__stage { position: absolute; z-index: 2; left: 50%; top: 39%; width: min(84vw, 1120px); opacity: 1; transform: translate(-50%,-50%) scale(1); transition: opacity .34s ease, transform .58s var(--ease-out); }
.origin-intro--exiting .origin-intro__stage { opacity: 0; transform: translate(-50%,-53%) scale(.985); transition: opacity .16s ease, transform .58s var(--ease-out); }
.origin-intro--exiting :is(.origin-intro__archive,.origin-intro__skip,.origin-intro__hint) { opacity: 0 !important; transition: opacity .22s ease; }
.origin-intro__name { position: relative; z-index: 3; display: flex; justify-content: center; align-items: baseline; margin: 0; white-space: nowrap; font-family: var(--font-editorial); font-size: clamp(54px, 8.25vw, 132px); font-weight: 450; letter-spacing: -.055em; line-height: 1; }
.origin-intro__letter { --letter-tilt: 0deg; --letter-color: var(--ink); --night-letter: color-mix(in srgb,var(--letter-color) 68%,white); position: relative; display: inline-block; color: var(--ink); opacity: 0; transform: translateY(.48em) rotate(1.4deg); transform-origin: 50% 82%; will-change: transform, opacity, color; animation-name: originLetterIn, originLetterWake; animation-duration: .72s, 1.35s; animation-delay: var(--letter-in), var(--letter-cross); animation-timing-function: var(--ease-out), cubic-bezier(.34,1.3,.64,1); animation-fill-mode: forwards, forwards; }

.origin-intro__space { width: .26em; }
.origin-intro__role { position: absolute; z-index: 3; left: 50%; top: calc(100% + 25px); margin: 0; color: var(--copper); font-family: var(--font-sans); font-size: clamp(10px, .82vw, 13px); font-weight: 750; letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; opacity: 0; clip-path: inset(0 100% 0 0); transform: translate(-50%,8px); animation: originRolePixelLock .92s 6.22s steps(8,end) forwards; }

.skywhale-scene { position: absolute; z-index: 5; inset: 0; overflow: visible; pointer-events: none; }
.skywhale { position: absolute; z-index: 2; left: -18%; top: 56%; width: clamp(80px,6.75vw,110px); aspect-ratio: 861 / 319; opacity: 0; transform: translate(-50%,-50%); transform-origin: 68% 52%; will-change: left,top,opacity,transform; animation: skywhaleFlight 5.4s 1.8s ease-in-out forwards; }
.skywhale__rig { position: absolute; z-index: 2; inset: 0; display: block; transform-origin: 58% 52%; filter: drop-shadow(0 6px 9px rgba(23,39,33,.14)); animation: skywhaleAlive 1.04s 1.84s ease-in-out 5; }
.skywhale__body,.skywhale__tail { position: absolute; inset: 0; display: block; }
.skywhale__body { z-index: 2; clip-path: polygon(27% 0,100% 0,100% 100%,27% 100%); }
.skywhale__tail { z-index: 1; clip-path: polygon(0 0,36% 0,36% 100%,0 100%); transform-origin: 31% 49%; animation: skywhaleTailSwim .46s 1.86s ease-in-out 12; }
.skywhale__layer { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: contain; user-select: none; }
.skywhale__wake { position: absolute; z-index: 1; inset: 0; }
.skywhale__wake i { position: absolute; left: var(--wake-x); top: var(--wake-y); width: 4px; height: 4px; border-radius: 50%; background: var(--wake-color); opacity: 0; filter: blur(.2px); box-shadow: 7px 4px 0 color-mix(in srgb,var(--wake-color) 52%,transparent); animation: skywhaleWake 1.05s var(--wake-delay) ease-out forwards; }
.skywhale-water { position: absolute; z-index: 4; left: 93%; top: 78%; width: clamp(72px,6.8vw,100px); height: 34px; opacity: 0; transform: translate(-50%,-50%); animation: skywhaleWaterVisibility 1.72s 6.02s ease-out forwards; }
.skywhale-water__surface,.skywhale-water__ripple { position: absolute; left: 50%; top: 55%; border-radius: 50%; transform: translate(-50%,-50%) scale(.2); }
.skywhale-water__surface { z-index: 2; width: 66%; height: 17px; border: 1px solid rgba(57,133,145,.68); background: radial-gradient(ellipse at center,rgba(105,167,169,.31) 0 28%,rgba(105,167,169,.11) 48%,transparent 70%); box-shadow: 0 5px 18px rgba(53,139,151,.16); animation: skywhaleSurface 1.35s 6.08s ease-out forwards; }
.skywhale-water__ripple { width: 74%; height: 20px; border: 1px solid rgba(50,132,147,.52); opacity: 0; }
.skywhale-water__ripple--one { animation: skywhaleRipple 1.2s 6.7s ease-out forwards; }
.skywhale-water__ripple--two { animation: skywhaleRipple 1.05s 6.93s ease-out forwards; }
.skywhale-water__splash { position: absolute; inset: 0; }
.skywhale-water__splash i { --splash-x: 0px; --splash-y: -13px; --splash-r: 0deg; position: absolute; left: 50%; top: 54%; width: 3px; height: 11px; border-radius: 50% 50% 45% 45%; background: linear-gradient(180deg,#7bb9bd,#d7efea); opacity: 0; transform-origin: 50% 100%; animation: skywhaleSplash .82s 6.73s cubic-bezier(.18,.72,.2,1) forwards; }
.skywhale-water__splash i:nth-child(1) { --splash-x: -21px; --splash-y: -16px; --splash-r: -42deg; height: 9px; }
.skywhale-water__splash i:nth-child(2) { --splash-x: -10px; --splash-y: -23px; --splash-r: -18deg; }
.skywhale-water__splash i:nth-child(3) { --splash-x: 0px; --splash-y: -27px; --splash-r: 2deg; height: 13px; }
.skywhale-water__splash i:nth-child(4) { --splash-x: 12px; --splash-y: -21px; --splash-r: 23deg; height: 10px; }
.skywhale-water__splash i:nth-child(5) { --splash-x: 22px; --splash-y: -14px; --splash-r: 46deg; height: 8px; }

.origin-intro__hint { position: absolute; z-index: 5; left: 50%; bottom: max(34px, env(safe-area-inset-bottom)); display: grid; justify-items: center; gap: 12px; color: #f3f4ef; text-shadow: 0 1px 4px #001924, 0 2px 12px #001924; font-size: 10px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; opacity: 0; transform: translate(-50%,8px); animation: originHintIn .8s 7.02s var(--ease-out) forwards; }
.origin-intro__hint i { display: block; width: 1px; height: 28px; background: rgba(243,244,239,.65); animation: originHintPulse 1.8s 6.8s ease-in-out infinite; }

@keyframes originMetaIn { to { opacity: 1; transform: translateY(0); } }
@keyframes originLetterIn { from { opacity: 0; transform: translateY(.48em) rotate(1.4deg); } to { opacity: 1; transform: translateY(0) rotate(0); } }
@keyframes originLetterWake { 0% { color: var(--ink); text-shadow: none; transform: translate(0,0) rotate(0) scale(1); } 24% { color: color-mix(in srgb,var(--night-letter) 54%,var(--ink)); text-shadow: 0 0 20px color-mix(in srgb,var(--night-letter) 28%,transparent); transform: translate(.02em,.23em) rotate(var(--letter-tilt)) scale(.95); } 58% { color: var(--night-letter); text-shadow: 0 0 13px color-mix(in srgb,var(--night-letter) 24%,transparent); transform: translate(-.008em,-.065em) rotate(0deg) scale(1.018); } 100% { color: var(--night-letter); text-shadow: none; transform: translate(0,0) rotate(0) scale(1); } }

@keyframes skywhaleFlight { 0% { left: -18%; top: 55%; opacity: 0; transform: translate(-50%,-50%) scale(.9) rotate(0deg); } 8% { left: -5%; top: 52%; opacity: 1; transform: translate(-50%,-50%) scale(.96) rotate(-2deg); } 21% { left: 15%; top: 45%; transform: translate(-50%,-50%) scale(1) rotate(-3.4deg); } 37% { left: 37%; top: 52%; transform: translate(-50%,-50%) scale(1) rotate(2.8deg); } 54% { left: 59%; top: 44%; transform: translate(-50%,-50%) scale(1) rotate(-3.2deg); } 69% { left: 77%; top: 50%; transform: translate(-50%,-50%) scale(1) rotate(2.4deg); } 76% { left: 85%; top: 43%; transform: translate(-50%,-50%) scale(1) rotate(-5deg); } 81% { left: 90%; top: 35%; transform: translate(-50%,-50%) scale(1) rotate(-8deg); } 85% { left: 93%; top: 38%; transform: translate(-50%,-50%) scale(1) rotate(3deg); } 89% { left: 94%; top: 49%; opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(20deg); } 93% { left: 94%; top: 64%; opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(50deg); } 96% { left: 94%; top: 78%; opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(78deg); } 98%,100% { left: 94%; top: 92%; opacity: 0; transform: translate(-50%,-50%) scale(1) rotate(88deg); } }
@keyframes skywhaleFlightMobile { 0% { left: -22%; top: 55%; opacity: 0; transform: translate(-50%,-50%) scale(.9) rotate(0deg); } 8% { left: -8%; top: 52%; opacity: 1; transform: translate(-50%,-50%) scale(.96) rotate(-2deg); } 21% { left: 10%; top: 45%; transform: translate(-50%,-50%) scale(1) rotate(-3.4deg); } 37% { left: 31%; top: 52%; transform: translate(-50%,-50%) scale(1) rotate(2.8deg); } 54% { left: 51%; top: 44%; transform: translate(-50%,-50%) scale(1) rotate(-3.2deg); } 69% { left: 68%; top: 50%; transform: translate(-50%,-50%) scale(1) rotate(2.4deg); } 76% { left: 77%; top: 43%; transform: translate(-50%,-50%) scale(1) rotate(-5deg); } 81% { left: 81%; top: 35%; transform: translate(-50%,-50%) scale(1) rotate(-8deg); } 85% { left: 83%; top: 38%; transform: translate(-50%,-50%) scale(1) rotate(3deg); } 89% { left: 84%; top: 49%; opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(20deg); } 93% { left: 84%; top: 64%; opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(50deg); } 96% { left: 84%; top: 78%; opacity: 1; transform: translate(-50%,-50%) scale(1) rotate(78deg); } 98%,100% { left: 84%; top: 92%; opacity: 0; transform: translate(-50%,-50%) scale(1) rotate(88deg); } }
@keyframes skywhaleAlive { 0%,100% { transform: translateY(.5px) rotate(.18deg); filter: brightness(.99) saturate(.99); } 50% { transform: translateY(-.8px) rotate(-.2deg); filter: brightness(1.018) saturate(1.02); } }
@keyframes skywhaleTailSwim { 0%,100% { transform: rotate(-6deg) translateY(1px); } 50% { transform: rotate(6deg) translateY(-1px); } }
@keyframes skywhaleWake { 0% { opacity: 0; transform: translate(10px,0) scale(.2); } 28% { opacity: .82; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(-24px,7px) scale(.5); } }
@keyframes skywhaleWaterVisibility { 0% { opacity: 0; } 10%,74% { opacity: 1; } 100% { opacity: 0; } }
@keyframes skywhaleSurface { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.18); } 30% { opacity: 1; } 100% { opacity: .35; transform: translate(-50%,-50%) scale(1.06); } }
@keyframes skywhaleRipple { 0% { opacity: 0; transform: translate(-50%,-50%) scale(.25); } 24% { opacity: .72; } 100% { opacity: 0; transform: translate(-50%,-50%) scale(1.55); } }
@keyframes skywhaleSplash { 0% { opacity: 0; transform: translate(-50%,0) rotate(var(--splash-r)) scaleY(.25); } 28% { opacity: .92; } 66% { opacity: .78; transform: translate(calc(-50% + var(--splash-x)),var(--splash-y)) rotate(var(--splash-r)) scaleY(1); } 100% { opacity: 0; transform: translate(calc(-50% + var(--splash-x)),calc(var(--splash-y) + 10px)) rotate(var(--splash-r)) scale(.55); } }
@keyframes originRolePixelLock { 0% { opacity: 0; clip-path: inset(0 100% 0 0); transform: translate(-50%,8px); letter-spacing: .34em; } 25% { opacity: .58; } 72% { opacity: 1; clip-path: inset(0 8% 0 0); } 100% { opacity: 1; clip-path: inset(0); transform: translate(-50%,0); letter-spacing: .2em; } }

@keyframes originHintIn { to { opacity: 1; transform: translate(-50%,0); } }
@keyframes originHintPulse { 50% { transform: translateY(7px); opacity: .35; } }


@media (max-width: 720px) {
  .origin-intro__archive { top: max(24px, env(safe-area-inset-top)); font-size: 8px; }
  .origin-intro__skip { top: max(15px, env(safe-area-inset-top)); font-size: 10px; }
  .origin-intro__stage { top: 37%; width: 92vw; }
  .origin-intro__name { font-size: clamp(38px, 12.4vw, 58px); letter-spacing: -.058em; }
  .origin-intro__space { width: .21em; }
  .origin-intro__role { top: calc(100% + 19px); font-size: 9px; letter-spacing: .16em; }
  .skywhale { top: 56%; width: 71px; animation-name: skywhaleFlightMobile; }
  .skywhale-water { left: 84%; top: 80%; width: 76px; height: 32px; }
  .origin-intro__hint { bottom: max(28px, env(safe-area-inset-bottom)); width: 100%; font-size: 9px; }
}
@media (prefers-reduced-motion: reduce) {
  .origin-intro { display: none !important; }
  .page { visibility: visible !important; }
  .origin-intro.origin-intro--still { display: block !important; }
  html[data-intro='playing'] .page { visibility: hidden !important; }
  .origin-intro--still :is(.skywhale-scene,.origin-intro__video) { display: none; }
  .origin-intro--still .origin-intro__letter { opacity: 1; transform: none; color: var(--night-letter); }
  .origin-intro--still :is(.origin-intro__archive,.origin-intro__skip) { opacity: 1; }
  .origin-intro--still .origin-intro__role { opacity: 1; clip-path: none; transform: translate(-50%,0); }
  .origin-intro--still .origin-intro__hint { opacity: 1; transform: translate(-50%,0); }
}