/* A quiet film entrance: a turning eclipse, one comet and the original moon mark. */
body.cinema-intro-active{overflow:hidden}
.cinema-intro{position:fixed;inset:0;z-index:900;display:grid;place-items:center;overflow:hidden;background:#030404;color:#edece6;opacity:1;transition:opacity 1s ease;isolation:isolate}
.cinema-intro[hidden]{display:none!important}
.cinema-intro.is-leaving{opacity:0;pointer-events:none}
.cinema-intro::after{content:"";position:absolute;inset:-6%;z-index:4;background:url('assets/grain.svg') repeat;background-size:160px;opacity:.09;pointer-events:none;mix-blend-mode:screen;animation:cinema-grain 1.1s steps(3,end) infinite}
.cinema-intro-halo{position:absolute;left:50%;top:25%;width:125vmin;height:67vmin;transform:translateX(-50%);background:radial-gradient(ellipse,rgba(201,202,195,.15),rgba(143,145,135,.045) 39%,transparent 69%);opacity:0;animation:cinema-atmosphere var(--cinema-intro-duration,15s) ease-out both;pointer-events:none}
.cinema-intro-eclipse{position:absolute;left:50%;top:40%;width:137vmin;aspect-ratio:1;overflow:hidden;border-radius:50%;background:#010202;box-shadow:none;transform:translateX(-50%);animation:cinema-eclipse var(--cinema-intro-duration,15s) cubic-bezier(.18,.68,.25,1) both;pointer-events:none}
.cinema-intro-eclipse::before{content:"";position:absolute;inset:-5%;border-radius:50%;background:url('assets/moon-map-surface.png') center/cover;filter:grayscale(1) brightness(.32) contrast(1.15);opacity:.46;animation:cinema-lunar-turn var(--cinema-intro-duration,15s) ease-in-out both}
.cinema-intro-eclipse::after{content:"";position:absolute;inset:0;border-radius:50%;background:radial-gradient(ellipse at 43% 0%,transparent,#010202b8 39%,#010202 64%),linear-gradient(180deg,#01020230,#010202e8 42%,#010202 70%)}
.cinema-intro-comet{position:absolute;z-index:2;left:50%;top:2%;width:1.25px;height:clamp(100px,20vh,220px);background:linear-gradient(transparent 2%,rgba(219,225,211,.12) 30%,rgba(239,242,231,.7) 88%,#f3f5eb);transform:translate(-50%,-10vh);opacity:0;animation:cinema-comet calc(var(--cinema-intro-duration,15s) - 1.7s) cubic-bezier(.25,.35,.35,.8) .1s both;pointer-events:none}
.cinema-intro-comet::before{content:"";position:absolute;inset:38% -2px 0;background:linear-gradient(transparent,#e5ebd6aa);filter:blur(2px);opacity:.55}
.cinema-intro-comet::after{content:"";position:absolute;bottom:-1px;left:50%;width:3px;height:3px;transform:translateX(-50%);border-radius:50%;background:#f3f5ed;box-shadow:0 0 5px #f4f8dcba,0 0 15px #e2e7d966,0 0 32px #e2e7d92e}
.cinema-intro-identity{position:absolute;z-index:3;left:50%;top:50%;width:clamp(100px,11vw,154px);aspect-ratio:4500/2685;transform:translate(-50%,-50%);pointer-events:none}
/* Three complete phases retain the original alpha silhouette; no moving cut through the curves. */
.cinema-intro-mark{position:absolute;inset:0;animation:cinema-symbol-arrive var(--cinema-intro-duration,15s) ease both}
.cinema-intro-phase{position:absolute;inset:0;display:block;background:#edece6;-webkit-mask:url('assets/lua-moon.png') center/contain no-repeat;mask:url('assets/lua-moon.png') center/contain no-repeat}
.cinema-intro-phase--a{clip-path:inset(0 89.4889% 0 0);transform-origin:5.25555% 50%;animation:cinema-phase-a var(--cinema-intro-duration,15s) cubic-bezier(.45,0,.22,1) both}
.cinema-intro-phase--b{clip-path:inset(0 59.6667% 0 10.5111%);transform-origin:25.4222% 50%;animation:cinema-phase-b var(--cinema-intro-duration,15s) cubic-bezier(.45,0,.22,1) both}
.cinema-intro-phase--disc{clip-path:inset(0 0 0 40.3333%);transform-origin:70.16665% 50%;animation:cinema-disc-record var(--cinema-intro-duration,15s) cubic-bezier(.45,0,.22,1) both}
.cinema-intro-frame{position:absolute;z-index:5;inset:clamp(12px,1.4vw,24px);border:1px solid #7f24246b;pointer-events:none;opacity:0;animation:cinema-frame var(--cinema-intro-duration,15s) ease both}
.cinema-intro-skip{position:absolute;z-index:6;right:clamp(25px,2.4vw,43px);bottom:clamp(25px,2.4vw,43px);display:grid;place-items:center;width:44px;height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#a5a69f;opacity:.7;transition:color .2s ease,opacity .2s ease}
.cinema-intro-skip svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.1;stroke-linecap:round}
.cinema-intro-skip:hover{color:#f0eee7;opacity:1}
.cinema-intro-skip:focus-visible{outline:1px solid #edece6;outline-offset:3px;opacity:1}
body.rec-cursor-ready .cinema-intro{cursor:auto}
body.rec-cursor-ready .cinema-intro button{cursor:pointer}
body.cinema-intro-active .rec-cursor{opacity:0!important}
@keyframes cinema-grain{0%,100%{transform:translate(0,0)}33%{transform:translate(-1%,1%)}66%{transform:translate(1%,-1%)}}
@keyframes cinema-atmosphere{0%{opacity:0}24%{opacity:.8}70%,100%{opacity:1}}
@keyframes cinema-eclipse{0%{opacity:.2;transform:translate(-50%,16px) scale(1.015)}30%{opacity:1}100%{opacity:1;transform:translate(-50%,0) scale(1)}}
@keyframes cinema-lunar-turn{from{transform:rotate(-4deg) scale(1.06)}to{transform:rotate(4deg) scale(1.06)}}
@keyframes cinema-comet{0%{opacity:0;transform:translate(-50%,-10vh)}17%{opacity:.7}48%{opacity:1}78%{opacity:.9}100%{opacity:0;transform:translate(-50%,15vh)}}
/* Folding moves whole silhouettes; the full disc becomes the recording point. */
@keyframes cinema-symbol-arrive{0%,100%{opacity:.96}}
@keyframes cinema-logo-turn{
  0%,12%{transform:translate(-50%,-50%) rotate(-90deg)}
  30%,100%{transform:translate(-50%,-50%) rotate(0deg)}
}
@keyframes cinema-phase-a{
  0%,64%{opacity:1;transform:translateX(0) scaleX(1)}
  73%,100%{opacity:0;transform:translateX(19%) scaleX(.08)}
}
@keyframes cinema-phase-b{
  0%,66%{opacity:1;transform:translateX(0) scaleX(1)}
  74%,100%{opacity:0;transform:translateX(10%) scaleX(.08)}
}
@keyframes cinema-disc-record{
  0%,22%{background:#7f2424;transform:translateX(0) scale(1)}
  30%,60%{background:#030303;transform:translateX(0) scale(1)}
  68%,70%{background:#edece6;transform:translateX(0) scale(1)}
  73%{background:#edece6;transform:translateX(-20.16665%) scale(.7)}
  77%,100%{background:#7f2424;transform:translateX(-20.16665%) scale(.16);opacity:1}
  81%,89%,97%{opacity:.3}
  85%,93%{opacity:1}
}
@keyframes cinema-phase-color{
  0%,22%{background:#7f2424}
  30%,60%{background:#030303}
  68%,100%{background:#edece6}
}

body.cinema-intro-active .site-header>.brand{opacity:0}
@keyframes cinema-frame{0%,64%{opacity:0}73%{opacity:.65}77%,81%{opacity:1}92%,100%{opacity:.45}}
@media(max-width:700px){.cinema-intro-identity{width:clamp(96px,25vw,126px)}.cinema-intro-halo{top:31%;width:170vmin;height:83vmin}.cinema-intro-eclipse{top:43%;width:190vmin}.cinema-intro-comet{height:clamp(90px,19vh,170px)}.cinema-intro-skip{right:23px;bottom:23px}}
@media(prefers-reduced-motion:reduce){.cinema-intro{display:none!important;transition:none}.cinema-intro *,.cinema-intro::before,.cinema-intro::after,.cinema-intro-eclipse::before{animation:none!important}}



/* A user gesture unlocks sound before the opening animation starts. */
.cinema-intro.is-waiting *, .cinema-intro.is-waiting *::before, .cinema-intro.is-waiting *::after, .cinema-intro.is-waiting::before, .cinema-intro.is-waiting::after{animation-play-state:paused!important}
.cinema-intro-enter{position:absolute;z-index:20;top:50%;left:50%;transform:translate(-50%,-50%);border:0;border-bottom:1px solid #eeede760;background:transparent;color:#eeede7;padding:18px 6px;font:inherit;font-size:11px;letter-spacing:.25em;white-space:nowrap;cursor:pointer}
.cinema-intro-enter:focus-visible{outline:1px solid #eeede7;outline-offset:8px}
.cinema-intro.is-waiting .cinema-intro-skip{opacity:1}

/* Moonlight entry: the original mark leads, the invitation stays quiet. */
.cinema-intro-enter{top:65%;padding:18px 8px;font-size:clamp(10px,.8vw,13px);letter-spacing:.28em;color:#f0efe9;border-bottom-color:#eeede740;text-shadow:0 0 16px #eeede760;transition:text-shadow .3s,border-color .3s}
.cinema-intro-enter:hover{border-bottom-color:#eeede7a0;text-shadow:0 0 10px #fff9,0 0 28px #eeede770}
.cinema-intro-identity{filter:drop-shadow(0 0 12px #eeede730) drop-shadow(0 0 38px #eeede718)}
.cinema-intro.is-waiting .cinema-intro-mark{opacity:1!important}
.cinema-intro.is-waiting .cinema-intro-halo{opacity:.7!important}

/* Deep lunar blacks with enough surface detail to read the camera movement. */
.cinema-intro.is-waiting{background:#020202}
.cinema-intro.is-waiting .cinema-intro-halo{opacity:.22!important}
.cinema-intro.is-waiting .cinema-intro-eclipse::before{filter:grayscale(1) brightness(.26) contrast(1.1);opacity:.42}
.cinema-intro.is-waiting::after{opacity:.19;mix-blend-mode:screen}
.cinema-intro-enter{color:#b9b9b1;text-shadow:none;border-bottom-color:#b9b9b12e}
.cinema-intro-enter:focus-visible{outline:1px solid #b9b9b145;outline-offset:7px}

/* Original signature: red, black, white; a separate red REC point closes the shot. */
.cinema-intro-phase--a{animation-name:cinema-phase-a,cinema-phase-color}
.cinema-intro-phase--b{animation-name:cinema-phase-b,cinema-phase-color}
.cinema-intro.is-waiting .cinema-intro-phase{background:#7f2424!important}
.cinema-intro.is-waiting .cinema-intro-identity{filter:drop-shadow(0 0 14px #7f242422)}

/* Vertical signature turns before the eclipse; recording follows the white moon. */
.cinema-intro-identity{animation:cinema-logo-turn var(--cinema-intro-duration,15s) cubic-bezier(.45,0,.22,1) both;filter:drop-shadow(.5px 0 0 #a5a59b40) drop-shadow(0 0 18px #eeede718)}
.cinema-intro.is-waiting .cinema-intro-identity{filter:drop-shadow(0 0 14px #7f242422)}