/* Page curtain (intro-init.js builds it): the opening of every page and the transition between pages.
   Only transform-type properties and opacity move, so the browser can run it off the main thread while the
   page is still loading. No images. */
.luma-intro{position:fixed;inset:0;z-index:1000;container-type:size;overflow:hidden;animation:luma-intro-safety 0s 8s forwards}
/* No overflow:hidden scroll lock on the page: on the homepage it drops the frame rate badly. intro-init.js
   holds wheel/touch/key scrolling instead while the curtain is up. */
@keyframes luma-intro-safety{to{visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.luma-intro{display:none}}

/* Each page cuts its own way, in the same style:
   rise ／ homepage · fall ＼ gallery · across — studio (a shutter) · down | credits.
   The line always grows from its left end (rotations are chosen so that end sits where the cut starts).
   --ax/--ay: how far the upper/left half travels (the other half mirrors it); --tilt: its slight turn. */
.luma-intro{--cut:atan2(100cqh,100cqw)}
.luma-intro[data-cut=rise]{--clip-a:polygon(0 0,100% 0,0 100%);--clip-b:polygon(100% 0,100% 100%,0 100%);--len:hypot(100cqw,100cqh);--turn:calc(180deg - var(--cut));
 --ax:calc(-112cqw * sin(var(--cut)) * sin(var(--cut)));--ay:calc(-112cqw * sin(var(--cut)) * cos(var(--cut)));--tilt:-3deg}
.luma-intro[data-cut=fall]{--clip-a:polygon(0 0,100% 0,100% 100%);--clip-b:polygon(0 0,100% 100%,0 100%);--len:hypot(100cqw,100cqh);--turn:var(--cut);
 --ax:calc(112cqw * sin(var(--cut)) * sin(var(--cut)));--ay:calc(-112cqw * sin(var(--cut)) * cos(var(--cut)));--tilt:3deg}
.luma-intro[data-cut=across]{--clip-a:polygon(0 0,100% 0,100% 50%,0 50%);--clip-b:polygon(0 50%,100% 50%,100% 100%,0 100%);--len:100cqw;--turn:0deg;--ax:0px;--ay:-56cqh;--tilt:0deg}
/* shallow: a straight slope through the centre, rising to the right by --slope (negative falls). About: 12° (the page's
   own light line); AI 比較: -14°; チェック表: 64°. The line is only as long as the screen it crosses, and each half
   moves straight away from it, just far enough to clear the screen. */
.luma-intro[data-cut=shallow]{--s:var(--slope,12deg);--sin:max(sin(var(--s)),sin(var(--s)) * -1);--rise:calc(50cqw * tan(var(--s)));--clip-a:polygon(0 0,100% 0,100% calc(50% - var(--rise)),0 calc(50% + var(--rise)));--clip-b:polygon(0 calc(50% + var(--rise)),100% calc(50% - var(--rise)),100% 100%,0 100%);
 --len:min(calc(100cqw / cos(var(--s))),calc(100cqh / max(var(--sin),.01)));--turn:calc(var(--s) * -1);--clear:calc(56cqh * cos(var(--s)) + 56cqw * var(--sin));--ax:calc(var(--clear) * sin(var(--s)) * -1);--ay:calc(var(--clear) * cos(var(--s)) * -1);--tilt:-2deg}
.luma-intro[data-cut=down]{--clip-a:polygon(0 0,50% 0,50% 100%,0 100%);--clip-b:polygon(50% 0,100% 0,100% 100%,50% 100%);--len:100cqh;--turn:90deg;--ax:-56cqw;--ay:0px;--tilt:0deg}

/* Two copies of the same curtain. The upper copy stays whole until the halves start to move, so no clipping
   hairline crosses the name before the cut; from then on each copy shows one side of the cut. */
.intro-half{position:absolute;inset:0;will-change:translate}
.intro-half-a{z-index:2}
.intro-half-b{z-index:1}
/* The shadow sits outside the clip, so each half casts depth onto the page as it slides. */
.is-open .intro-half,.is-closing .intro-half{filter:drop-shadow(0 0 36px var(--curtain-shadow))}
/* The curtain carries the same faint rings as the homepage stage, so both read as one space. */
.intro-panel::before{content:"";position:absolute;inset:-40%;border-radius:50%;background:repeating-radial-gradient(ellipse at 65% 45%,transparent 0,transparent 118px,var(--curtain-rings) 119px,transparent 120px);transform:rotate(-20deg) scaleY(.65);pointer-events:none}
.intro-panel{position:absolute;inset:0;overflow:hidden;background:radial-gradient(ellipse at 50% 50%,var(--curtain-glow),transparent 58%),linear-gradient(135deg,var(--curtain-ink) 30%,var(--curtain-ink-2))}
.intro-half-b .intro-panel{clip-path:var(--clip-b)}
.is-closing .intro-half-a .intro-panel{clip-path:var(--clip-a)}
.is-open .intro-half-a .intro-panel{animation:intro-clip-a 0s .24s both}
.intro-face{position:absolute;inset:0;display:grid;place-items:center}

.intro-brand{display:flex;align-items:center;gap:.24em;font-size:clamp(60px,10.5vw,160px);color:var(--curtain-text);translate:-.12em 0}
.intro-brand.is-long{font-size:clamp(40px,8.4vw,128px)}
.intro-brand.is-long small{font-size:max(11px,.14em);letter-spacing:.32em}
.intro-mark{position:relative;width:.8em;height:.8em;flex:none;color:var(--curtain-mark);animation:intro-turn 1.05s cubic-bezier(.16,1,.3,1) both}
.intro-mark::after{content:"";position:absolute;inset:-70%;border-radius:50%;background:radial-gradient(closest-side,var(--curtain-halo),var(--curtain-light-0));opacity:0;animation:intro-halo 1.3s .3s ease-out both}
.intro-mark i{position:absolute;left:50%;top:50%;width:83.4%;height:7.4%;border-radius:999px;background:currentColor;translate:-50% -50%;animation:intro-bar .5s cubic-bezier(.22,1,.36,1) both}
.intro-mark i:nth-child(1){rotate:90deg;animation-delay:.04s}
.intro-mark i:nth-child(2){rotate:45deg;animation-delay:.11s}
.intro-mark i:nth-child(3){rotate:0deg;animation-delay:.18s}
.intro-mark i:nth-child(4){rotate:-45deg;animation-delay:.25s}
.intro-name{display:flex;flex-direction:column;gap:.1em}
.intro-word{display:flex;overflow:clip;font:800 1em/.86 Arial,sans-serif;letter-spacing:-.075em;padding:.04em .08em .02em 0}
.intro-word span{display:block;animation:intro-rise .7s calc(.36s + var(--i) * .06s) cubic-bezier(.16,1,.3,1) both}
.intro-name small{font-size:max(10px,.085em);font-weight:500;letter-spacing:.46em;color:var(--curtain-sub);padding-left:.75em;animation:intro-sub .8s .7s cubic-bezier(.16,1,.3,1) both}

/* The short version (other pages, and every arrival from another page): same moves, tighter. */
.is-quick .intro-mark{animation-duration:.5s}
.is-quick .intro-mark::after{animation-duration:.6s;animation-delay:.08s}
.is-quick .intro-mark i{animation-duration:.26s}
.is-quick .intro-mark i:nth-child(1){animation-delay:0s}
.is-quick .intro-mark i:nth-child(2){animation-delay:.03s}
.is-quick .intro-mark i:nth-child(3){animation-delay:.06s}
.is-quick .intro-mark i:nth-child(4){animation-delay:.09s}
.is-quick .intro-word span{animation-duration:.38s;animation-delay:calc(.06s + var(--i) * .022s)}
.is-quick .intro-name small{animation-duration:.36s;animation-delay:.18s}

/* The cut: a line of light runs across, a spark riding its tip, then the halves part along it. */
.intro-cut{position:absolute;left:50%;top:50%;z-index:3;width:var(--len);height:2px;translate:-50% -50%;rotate:var(--turn)}
.intro-cut::before{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--curtain-line),var(--curtain-light) 50%,var(--curtain-line));box-shadow:0 0 18px 2px var(--curtain-halo);scale:0 1;transform-origin:0 50%}
.intro-cut::after{content:"";position:absolute;left:0;top:50%;width:100%;height:96px;margin-top:-48px;background:radial-gradient(closest-side,var(--curtain-light),var(--curtain-line) 18%,var(--curtain-halo) 45%,var(--curtain-light-0)) no-repeat 0 50%/96px 96px;opacity:0;translate:-48px 0}
.is-open .intro-cut::before{animation:intro-slice .34s cubic-bezier(.65,0,.35,1) forwards}
.is-open .intro-cut::after{animation:intro-spark .34s cubic-bezier(.65,0,.35,1) forwards,intro-spark-out .26s .3s ease-out forwards}
/* As the light runs through, the ✳ turns one more step (45° looks identical, so it lands back in shape). */
.is-open .intro-mark{animation:intro-turn 1.05s cubic-bezier(.16,1,.3,1) both,intro-spin .6s cubic-bezier(.65,0,.35,1) forwards}
.is-open.is-quick .intro-mark{animation-duration:.5s,.36s}
.is-open.is-quick .intro-cut::before{animation-duration:.22s}
.is-open.is-quick .intro-cut::after{animation-duration:.22s,.18s;animation-delay:0s,.2s}
.is-open.is-quick .intro-half-a .intro-panel{animation-delay:.14s}
.is-open .intro-half-a{animation:intro-open-a .95s .24s cubic-bezier(.77,0,.18,1) forwards}
.is-open .intro-half-b{animation:intro-open-b .95s .24s cubic-bezier(.77,0,.18,1) forwards}
.is-open.is-quick .intro-half{animation-duration:.58s;animation-delay:.14s}

/* Leaving: the next page's halves slide in and meet, their edges lit, with no name yet. */
.is-closing{animation:none}
.is-closing .intro-brand,.is-closing .intro-cut::after{display:none}
.is-closing .intro-cut::before{scale:1 1;animation:intro-fade-out .12s .28s ease forwards}
.is-closing .intro-half-a{animation:intro-close-a .38s cubic-bezier(.7,0,.25,1) both}
.is-closing .intro-half-b{animation:intro-close-b .38s cubic-bezier(.7,0,.25,1) both}

@keyframes intro-turn{from{rotate:-150deg;scale:.55}}
@keyframes intro-bar{from{scale:0 1}}
@keyframes intro-halo{0%{opacity:0;scale:.5}35%{opacity:1}100%{opacity:0;scale:1.5}}
@keyframes intro-rise{from{translate:0 108%}}
@keyframes intro-sub{from{opacity:0;translate:-.8em 0}}
@keyframes intro-slice{to{scale:1 1}}
@keyframes intro-spark{from{opacity:1}to{opacity:1;translate:calc(100% - 48px) 0}}
@keyframes intro-spark-out{from{opacity:1;translate:calc(100% - 48px) 0}to{opacity:0;translate:calc(100% - 48px) 0}}
@keyframes intro-clip-a{from{clip-path:none}to{clip-path:var(--clip-a)}}
@keyframes intro-spin{from{rotate:0deg}to{rotate:45deg}}
/* Each half moves straight away from the cut, just far enough to clear the screen. */
@keyframes intro-open-a{to{translate:var(--ax) var(--ay);rotate:var(--tilt)}}
@keyframes intro-open-b{to{translate:calc(var(--ax) * -1) calc(var(--ay) * -1);rotate:var(--tilt)}}
@keyframes intro-close-a{from{translate:var(--ax) var(--ay);rotate:var(--tilt)}}
@keyframes intro-close-b{from{translate:calc(var(--ax) * -1) calc(var(--ay) * -1);rotate:var(--tilt)}}
@keyframes intro-fade-out{to{opacity:0}}

/* The page arrives as the curtain parts. Independent properties (translate/opacity) leave the homepage scroll
   story's own transforms untouched. */
html.intro-open :is(.nav,.credits-nav){animation:intro-fade .6s .35s ease both}
html.intro-open main:not(#showcase){animation:intro-fade .5s .18s ease both}
html.intro-open .stage-light{animation:intro-fade 1.2s .2s ease both}
html.intro-open .space-grid{animation:intro-depth 1.8s .2s cubic-bezier(.16,1,.3,1) both}
html.intro-open .light-orbit{animation:intro-fade 1.4s .5s ease both}
html.intro-open .film-word{animation:intro-word 1.5s .2s cubic-bezier(.16,1,.3,1) both}
html.intro-open .film-intro .eyebrow{animation:intro-up .8s .34s cubic-bezier(.16,1,.3,1) both}
html.intro-open .film-intro .reveal-line>span{animation:intro-line .95s .4s cubic-bezier(.16,1,.3,1) both}
html.intro-open .film-intro .reveal-line+.reveal-line>span{animation-delay:.48s}
html.intro-open .film-description{animation:intro-up .8s .58s cubic-bezier(.16,1,.3,1) both}
html.intro-open .film-actions{animation:intro-up .8s .66s cubic-bezier(.16,1,.3,1) both}
html.intro-open .film-scroll-note,html.intro-open .cinema-timeline{animation:intro-fade .8s .85s ease both}
html.intro-open .orbit-images,html.intro-open .turntable{animation:intro-fade 1s .45s ease both}
@keyframes intro-fade{from{opacity:0}}
@keyframes intro-up{from{opacity:0;translate:0 26px}}
@keyframes intro-line{from{translate:0 112%}}
@keyframes intro-depth{from{opacity:0;scale:1.18}}
@keyframes intro-word{from{opacity:0;translate:7vw 0}}