/* The world chain after the film (owner decision 2026-10-28): one work = one world. scripts/work/build-worlds.mjs renders
   the markup from scripts/work/worlds.json; worlds.js adds the silent loops and each world's one touch. A world carries
   its own tokens inline (--accent, --accent-lo, --tint). Every hidden state lives under html.fx; page.js adds .is-in
   and .is-lit, worlds.js adds .is-onscreen, .has-reticle and .is-measuring. Loaded after page.css and making-of.css. */

/* The section: its head is the one headline of the chain, then the worlds follow with no gap. */
.pg-worlds{padding-bottom:0}
.pg-worlds .worlds-head{padding-bottom:clamp(56px,7vw,112px)}
.worlds-index{margin-top:var(--s-7)}
.worlds-index a{position:relative;display:grid;grid-template-columns:3ch auto minmax(0,1fr) 16px;align-items:baseline;column-gap:16px;min-height:56px;padding:14px 0;border-top:1px solid var(--line-1);text-decoration:none;transition:opacity var(--d-1) var(--ease-std)}
.worlds-index li:last-child a{border-bottom:1px solid var(--line-1)}
.worlds-index-n{font:400 12px/1.4 var(--font-mono);letter-spacing:.16em;color:var(--text-3)}
.worlds-index-name{font:500 16px/1.4 var(--font-sans);color:var(--text-1)}
.worlds-index-name[lang=ko]{font-family:var(--font-ko);letter-spacing:-.01em;word-break:keep-all}
.worlds-index a>.pg-label{text-align:right}
.worlds-index a>.i{align-self:center;font-size:14px;color:var(--text-2);transition:transform var(--d-1) var(--ease-std)}
.worlds-index a::before{content:"";position:absolute;top:-1px;left:0;right:0;height:1px;background:var(--line-3);transform:scaleX(0);transform-origin:0 50%;pointer-events:none}
.fx .worlds-index a::before{transition:transform var(--d-4) var(--ease-expo)}
.fx .worlds-index-name{transition:translate var(--d-3) var(--ease-expo)}
.worlds-index a:focus-visible::before{transform:scaleX(1)}
.worlds-index a:focus-visible .worlds-index-name{translate:4px 0}
.worlds-index a:focus-visible .i{transform:translateY(2px)}
@media (hover:hover) and (pointer:fine){.worlds-index a:hover::before{transform:scaleX(1)}.worlds-index a:hover .worlds-index-name{translate:4px 0}.worlds-index a:hover .i{transform:translateY(2px)}}
.worlds-index a:active{opacity:.72}
@media (max-width:599.98px){.worlds-index a{grid-template-columns:3ch minmax(0,1fr) 16px}.worlds-index a>.pg-label{display:none}}
@media (min-width:900px){
  .worlds-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap)}
  .worlds-head>.slate{grid-column:1/-1}
  .worlds-head>.pg-display{grid-column:1/8;grid-row:2}
  .worlds-head>.worlds-index{grid-column:8/13;grid-row:2;align-self:end;margin-top:0}
}

/* A world: its light, its accent hairline and its one frame. */
.world{position:relative;isolation:isolate;overflow:clip;padding:clamp(64px,8vw,128px) 0;border-top:1px solid var(--line-1);scroll-margin-top:var(--header-h);color:var(--text-1)}
.world:focus{outline:none}
.world-light{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(70% 55% at 50% 0%,var(--tint),transparent 70%)}
.fx .world-light{opacity:0;transition:opacity var(--d-7) var(--ease-std)}
.fx .world.is-lit .world-light{opacity:1}
.world::before{content:"";position:absolute;top:-1px;left:0;z-index:1;width:100%;height:1px;background:linear-gradient(90deg,var(--accent),transparent 62%);opacity:.6;transform-origin:0 50%;pointer-events:none}
.fx .world::before{transform:scaleX(0);transition:transform var(--d-7) var(--ease-expo)}
.fx .world.is-lit::before{transform:none}
.world-frame{position:relative;margin:0}
.world-cover{position:relative;display:block;width:min(100%,calc(84svh*16/9));margin-inline:auto;aspect-ratio:16/9;overflow:hidden;background:var(--stage-3);color:var(--text-1);text-decoration:none}
.world-frame.pg-gate{padding:12px}
.world-poster,.world-cover>.film-poster,.world-loop{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover}
.world-loop{opacity:0;pointer-events:none;transition:opacity var(--d-4) var(--ease-std)}
.world-loop.is-playing{opacity:1}
.world-hud{position:absolute;left:16px;right:16px;bottom:14px;z-index:2;display:flex;justify-content:space-between;gap:12px;font:400 11px/1.2 var(--font-mono);letter-spacing:.14em;color:rgba(243,241,233,.86);text-shadow:0 1px 8px rgba(0,0,0,.7);pointer-events:none}
.world-hud-signal>span:first-child{color:#ff4a4f}
@media (max-width:899.98px){.world-hud{right:auto;max-width:calc(100% - 32px);flex-direction:column;align-items:flex-start;gap:3px;font-size:10px;letter-spacing:.1em;white-space:nowrap}.world-hud>span{max-width:100%;overflow:hidden;text-overflow:ellipsis}}
.world-arrow{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--line-3);border-radius:50%;background:rgba(8,11,16,.55);color:var(--text-1);transition:background-color var(--d-1) var(--ease-std)}
.world-arrow .i{width:16px;height:16px}
a.world-cover:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
a.world-cover:focus-visible .world-arrow{background:rgba(8,11,16,.8)}
@media (hover:hover) and (pointer:fine){a.world-cover:hover .world-arrow{background:rgba(8,11,16,.8)}}
@media (max-width:899.98px){.world-frame.pg-gate{padding:0}.world-cover{width:100%}}
/* Old featured-film rules (featured-film.css) do not reach the cover: its poster is positioned by the rules above. */
.world .pg-frame{width:100%}
.world .pg-frame::after{content:none}

/* The copy under the frame: number and kind, the title in the work's own face, one line, one fact, one action. */
.world-copy{margin-top:var(--s-6)}
.world-kind{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px 14px;font:400 12px/1.5 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.world-n{color:var(--accent)}
.world-kind [lang=ja]{font:400 13px/1.5 var(--font-ja);letter-spacing:.06em;text-transform:none}
.world-title{margin-top:14px;font:300 clamp(36px,4.4vw,76px)/1.02 var(--font-sans);letter-spacing:-.04em;color:var(--text-1);text-wrap:balance}
.world .world-title em{font:400 .62em/1 var(--font-serif);letter-spacing:var(--tr-serif);white-space:nowrap;color:var(--text-1)}
.world-bloom .world-title{font:400 var(--fs-ko-title)/1.2 var(--font-ko-title);letter-spacing:-.04em;color:var(--text-warm)}
.world-celea .world-title{padding-left:.16em;letter-spacing:.16em}
.world-line{margin-top:20px;font:400 var(--fs-lede)/1.5 var(--font-sans);color:var(--text-1);text-wrap:pretty}
.world .world-line em{font:inherit;color:var(--text-2)}
.world-bloom :is(.world-line,.world-body){font-family:var(--font-ko);letter-spacing:-.01em;word-break:keep-all}
.world-bloom .world-line{font-size:18px;line-height:1.8}
.world-bloom .world-body{line-height:1.9}
.world-copy .pg-ja{margin-top:12px}
.world-body{margin-top:16px}
.world-fact{margin-top:var(--s-5);font:400 12px/1.6 var(--font-mono);letter-spacing:.14em;color:var(--text-3)}
.world .pg-award{margin-top:var(--s-5);font-family:var(--font-mono);letter-spacing:0}
.world-actions{display:flex;flex-wrap:wrap;gap:8px 28px;margin-top:var(--s-5)}
.world-actions .film-watch{margin-top:0;border-bottom-color:var(--line-3);color:var(--text-1)}
.world .film-note{margin-top:var(--s-7)}
@media (min-width:900px){
  .world-copy{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start;margin-top:var(--s-7)}
  .world-head{grid-column:1/7}
  .world-detail{grid-column:7/13;padding-top:28px}
  .world-detail>.world-line{margin-top:0}
}
@media (min-width:1200px){.world-head{grid-column:1/6}.world-detail{grid-column:7/12}}

/* 01 the award film: tulip gold, film grain, and petals that gather into the frame (worlds.js). */
.world-bloom .world-cover::after{content:"";position:absolute;inset:-8%;z-index:1;pointer-events:none;background:url("/assets/featured-film/grain-v1.png") 0 0/80px 80px;opacity:.085;mix-blend-mode:overlay;will-change:transform}
.fx .world-bloom.is-onscreen .world-cover::after{animation:world-grain 1.1s steps(6) infinite}
@keyframes world-grain{0%{transform:translate(0,0)}20%{transform:translate(-4%,3%)}40%{transform:translate(3%,-5%)}60%{transform:translate(-6%,-2%)}80%{transform:translate(5%,4%)}100%{transform:translate(0,0)}}
.world-petals{position:absolute;inset:0;z-index:3;width:100%;height:100%;pointer-events:none}
.world-bloom .world-hud{color:rgba(255,242,218,.9)}
@media (min-width:900px){.world-bloom .film-play-prompt{right:16px;bottom:30px}}

/* 02 CELEA: three lights. The section lights and the frame's rim follow --l-earth / --l-moon / --l-sol (worlds.js: the
   pointer across the frame, a member chip, or the frame's position on touch screens). */
.world-celea .pg-celea-lights{position:absolute;inset:0;z-index:-1;pointer-events:none}
.world-celea .pg-celea-lights>i{position:absolute;inset:0;transition:opacity var(--d-4) var(--ease-std)}
.world-celea .pg-celea-lights>[data-for=trio]{background:radial-gradient(50% 45% at 12% 30%,rgba(117,191,232,.09),transparent 70%),radial-gradient(45% 45% at 90% 25%,rgba(255,207,137,.09),transparent 70%);opacity:calc(1 - .6*max(var(--l-earth,0),var(--l-moon,0),var(--l-sol,0)))}
.world-celea .pg-celea-lights>[data-for=haruka]{background:radial-gradient(55% 60% at 18% 45%,rgba(117,191,232,.2),transparent 70%);opacity:var(--l-earth,0)}
.world-celea .pg-celea-lights>[data-for=luna]{background:radial-gradient(55% 60% at 50% 45%,rgba(219,238,255,.14),transparent 70%);opacity:var(--l-moon,0)}
.world-celea .pg-celea-lights>[data-for=sol]{background:radial-gradient(55% 60% at 82% 45%,rgba(255,207,137,.2),transparent 70%);opacity:var(--l-sol,0)}
.fx .world-celea.is-lit .pg-celea-lights{opacity:1}
.fx .world-celea .pg-celea-lights{opacity:0;transition:opacity var(--d-7) var(--ease-std)}
.world-celea .world-rim{position:absolute;inset:0;z-index:1;pointer-events:none;mix-blend-mode:screen;opacity:0}
.world-celea .world-rim[data-for=earth]{background:linear-gradient(90deg,rgba(117,191,232,.38),transparent 42%);opacity:var(--l-earth,0)}
.world-celea .world-rim[data-for=moon]{background:linear-gradient(0deg,rgba(219,238,255,.22),transparent 55%);opacity:var(--l-moon,0)}
.world-celea .world-rim[data-for=sol]{background:linear-gradient(270deg,rgba(255,207,137,.38),transparent 42%);opacity:var(--l-sol,0)}
.world-members{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:var(--s-5)}
.world-member{--member:var(--earth)}
.world-member[data-member=luna]{--member:var(--moon)}
.world-member[data-member=sol]{--member:var(--sun)}
.world-member a{display:grid;grid-template-columns:48px minmax(0,1fr);grid-template-rows:auto auto;column-gap:12px;align-items:center;min-height:44px;padding:8px;border:1px solid var(--line-1);color:var(--text-1);text-decoration:none;transition:border-color var(--d-2) var(--ease-std),background-color var(--d-2) var(--ease-std)}
.world-member img{grid-row:1/span 3;width:48px;height:auto;aspect-ratio:551/632;object-fit:cover;object-position:50% 0;background:var(--stage-2)}
.world-member-place{display:flex;align-items:center;gap:8px;font:400 11px/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.world-member-place::before{content:"";flex:none;width:6px;height:6px;background:var(--member);transform:rotate(45deg)}
.world-member-name{display:block;font:600 16px/1.2 var(--font-sans);letter-spacing:-.03em}
.world-member-line{display:none;font-size:13px;line-height:1.5;color:var(--text-3)}
.world-member a:focus-visible{outline:2px solid var(--focus);outline-offset:4px;border-color:var(--member)}
@media (hover:hover) and (pointer:fine){.world-member a:hover{border-color:var(--member);background:rgba(243,241,233,.04)}}
.world-member a:active{opacity:.72}
@media (max-width:599.98px){.world-members{grid-template-columns:1fr;gap:8px}}
@media (min-width:1200px){.world-member-line{display:block;margin-top:2px}}

/* 03 HARU 「NO CENTER」: paper, ink and signal red. On fine pointers the cursor becomes a measuring reticle that reads the
   pointer in bars and beats, and HARU slips away from it (worlds.js). */
.world-nocenter .world-cover{background:#0b0b0c}
.world-nocenter .world-poster,.world-nocenter .world-loop{transform:translate3d(var(--nx,0px),var(--ny,0px),0) scale(1.03);transition:transform var(--d-3) var(--ease-std),opacity var(--d-4) var(--ease-std)}
.world-nocenter.has-reticle .world-cover{cursor:none}
.world-reticle{position:absolute;left:0;top:0;z-index:3;width:44px;height:44px;margin:-22px 0 0 -22px;border:1px solid rgba(255,74,79,.9);border-radius:50%;opacity:0;transform:translate3d(var(--rx,0px),var(--ry,0px),0);pointer-events:none;transition:opacity var(--d-1) var(--ease-std)}
.world-reticle::before,.world-reticle::after{content:"";position:absolute;background:rgba(255,74,79,.9)}
.world-reticle::before{left:50%;top:-10px;width:1px;height:calc(100% + 20px)}
.world-reticle::after{top:50%;left:-10px;height:1px;width:calc(100% + 20px)}
.world-reticle b{position:absolute;left:calc(100% + 12px);top:-2px;font:400 10px/1 var(--font-mono);letter-spacing:.14em;color:#ff4a4f;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.8)}
.world-nocenter.is-measuring .world-reticle{opacity:1}
.world-nocenter .pg-ja.pg-case-lyric{font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,"Noto Serif CJK JP","Noto Serif JP",serif;letter-spacing:.12em}

/* 04 IRUHA ONE: the trailer frame (its loop, then the delivered file in an in-page player on Play, worlds.js), and two
   blocks under the copy: the live Blender previz (blueprint.js) and the previz / generation comparison (making-of.js). */
.world-iruha .world-cover{aspect-ratio:1920/804;width:min(100%,calc(84svh*1920/804));background:#05080d}
.world-player{cursor:default}
.world-play{position:absolute;inset:0;z-index:3;display:grid;place-content:center;justify-items:center;gap:16px;width:100%;height:100%;margin:0;padding:0;border:0;background:transparent;color:var(--text-1);font:inherit;cursor:pointer}
.world-play::before{content:"";position:absolute;inset:0;background:linear-gradient(transparent 55%,rgba(5,8,13,.62));pointer-events:none}
.world-play-symbol{position:relative;display:grid;place-items:center;width:76px;height:76px;border:1px solid rgba(243,241,233,.4);border-radius:50%;background:rgba(5,8,13,.5);transition:background-color var(--d-1) var(--ease-std),transform var(--d-2) var(--ease-expo)}
.world-play-symbol::after{content:"";width:0;height:0;margin-left:5px;border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent currentColor}
.world-play-text{position:relative;font:400 11px/1.2 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:rgba(243,241,233,.86);text-shadow:0 1px 8px rgba(0,0,0,.7)}
.world-play-text b{font-weight:400;color:var(--accent)}
.world-play:focus-visible{outline:none}
.world-play:focus-visible .world-play-symbol{outline:2px solid var(--focus);outline-offset:4px}
@media (hover:hover) and (pointer:fine){.world-play:hover .world-play-symbol{background:rgba(5,8,13,.82);transform:scale(1.06)}}
@media (max-width:599.98px){.world-play{gap:0}.world-play-text{display:none}.world-play-symbol{width:56px;height:56px}.world-play-symbol::after{border-width:9px 0 9px 15px;margin-left:4px}}
.world-trailer{position:absolute;inset:0;z-index:4;display:block;width:100%;height:100%;background:#000;object-fit:cover}
.world-player-close{position:absolute;top:14px;right:14px;z-index:5;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid var(--line-3);border-radius:50%;background:rgba(8,11,16,.72);color:var(--text-1);cursor:pointer;transition:background-color var(--d-1) var(--ease-std)}
.world-player-close .i{width:14px;height:14px}
.world-player-close:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.world-player-close:hover{background:rgba(8,11,16,.95)}}
.world-player-fallback{position:absolute;left:16px;right:16px;bottom:44px;z-index:5;font:400 12px/1.5 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-1);text-shadow:0 1px 8px rgba(0,0,0,.8)}
.world-player-fallback:focus-visible{outline:2px solid var(--focus);outline-offset:4px}
.world-player[data-player-state=open] :is(.world-play,.world-hud){opacity:0;pointer-events:none}
.world-player[data-player-state=open] .world-loop{visibility:hidden}

/* blocks: a slate, a two-line title and the text, then the figure; same grid as the copy */
.world-block{margin-top:clamp(72px,9vw,128px)}
.world-block-head .slate{margin:0}
.world-block-title{margin-top:16px;font:300 clamp(28px,3.1vw,52px)/1.08 var(--font-sans);letter-spacing:-.035em;color:var(--text-1);text-wrap:balance}
.world-block-title .ln{display:block;overflow:hidden}
.world-block-title .ln>span{display:block}
.world-block-title em{font:400 .74em/1 var(--font-serif);letter-spacing:var(--tr-serif);color:var(--text-2)}
.world-block-text{margin-top:16px}
.world-block-text .pg-ja{margin-top:0}
.world-block-text .pg-body{margin-top:12px}
.world-block-credit{margin-top:var(--s-6);font-size:13px;line-height:1.6;color:var(--text-3)}
@media (min-width:900px){
  .world-block-head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--grid-gap);align-items:start}
  .world-block-head>.slate{grid-column:1/-1}
  .world-block-title{grid-column:1/7;grid-row:2}
  .world-block-text{grid-column:7/13;grid-row:2;margin-top:22px}
}
@media (min-width:1200px){.world-block-title{grid-column:1/6}.world-block-text{grid-column:7/12}}

/* the blueprint stage: a dark grid, WebGL lines over it, the poster until the first draw, four HUD readouts and the scrub bar */
.bp-viewer{margin:var(--s-7) 0 0}
.bp-stage{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line-1);background:linear-gradient(rgba(117,191,232,.06) 1px,transparent 1px) 0 0/48px 48px,linear-gradient(90deg,rgba(117,191,232,.06) 1px,transparent 1px) 0 0/48px 48px #061019;touch-action:pan-y;-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.bp.is-ready .bp-stage{cursor:grab}
.bp-stage.is-dragging{cursor:grabbing}
.bp-stage canvas,.bp-poster{position:absolute;inset:0;display:block;width:100%;height:100%}
.bp-stage canvas{z-index:1}
.bp-poster{z-index:2;object-fit:cover;transition:opacity var(--d-3) var(--ease-std)}
.bp.is-drawn .bp-poster{opacity:0}
.bp-hud{position:absolute;z-index:3;font:400 11px/1.4 var(--font-mono);font-style:normal;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);text-shadow:0 1px 8px rgba(0,0,0,.8);white-space:nowrap;pointer-events:none}
.bp-hud-tl{top:14px;left:16px}
.bp-hud-tr{top:14px;right:16px}
.bp-hud b,.bp-hud i{font:inherit}
.bp-hud-bl{bottom:40px;left:16px}
.bp-hud-br{bottom:40px;right:16px}
.bp-status{position:absolute;z-index:3;left:50%;top:50%;translate:-50% -50%;font:400 11px/1.4 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-2);text-shadow:0 1px 8px rgba(0,0,0,.8);white-space:nowrap;pointer-events:none}
.bp-status:empty{display:none}
.bp-range{position:absolute;z-index:3;left:16px;bottom:8px;width:calc(100% - 32px);height:24px;margin:0;padding:0;border:0;background:transparent;appearance:none;-webkit-appearance:none;cursor:pointer}
.bp-range::-webkit-slider-runnable-track{height:2px;background:rgba(243,241,233,.22)}
.bp-range::-webkit-slider-thumb{-webkit-appearance:none;appearance:none;width:12px;height:12px;margin-top:-5px;border:0;border-radius:50%;background:var(--accent)}
.bp-range::-moz-range-track{height:2px;background:rgba(243,241,233,.22)}
.bp-range::-moz-range-thumb{width:12px;height:12px;border:0;border-radius:50%;background:var(--accent)}
.bp-range:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
.bp:not(.is-ready) :is(.bp-range,.bp-tools){display:none}
.bp-bar{display:flex;flex-wrap:wrap;align-items:flex-start;justify-content:space-between;gap:16px 32px;margin-top:20px}
.bp-caption{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 14px;flex:1 1 28em;min-width:0}
.bp-n{font:400 12px/1.5 var(--font-mono);letter-spacing:.16em;color:var(--accent)}
.bp-name{font:400 24px/1.2 var(--font-serif);letter-spacing:var(--tr-serif);color:var(--text-1)}
.bp-note{flex-basis:100%;font:400 15px/1.6 var(--font-sans);color:var(--text-3)}
.bp-file{flex-basis:100%;font:400 11px/1.6 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.bp-tools{display:flex;align-items:center;gap:12px 20px}
.bp-hint{font:400 12px/1.5 var(--font-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--text-3)}
.bp-view{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border:1px solid var(--line-3);border-radius:var(--r-pill);background:none;color:var(--text-1);font:500 14px/1 var(--font-sans);cursor:pointer;transition:border-color var(--d-1) var(--ease-std),color var(--d-1) var(--ease-std),background-color var(--d-1) var(--ease-std)}
.bp-view[aria-pressed=true]{border-color:var(--accent);color:var(--accent)}
@media (hover:hover) and (pointer:fine){.bp-view:hover{border-color:var(--text-1);background:rgba(243,241,233,.06)}}
.bp .mk-play{display:inline-flex}
.bp-scenes{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin:var(--s-6) 0 0;padding:0;list-style:none}
.bp-scene{display:grid;grid-template-columns:3ch minmax(0,1fr);column-gap:12px;align-items:baseline;width:100%;min-height:56px;padding:12px 14px;border:1px solid var(--line-1);background:none;color:var(--text-2);font:400 14px/1.4 var(--font-sans);text-align:left;cursor:pointer;transition:border-color var(--d-2) var(--ease-std),color var(--d-2) var(--ease-std)}
.bp-scene b{font:400 12px/1.4 var(--font-mono);letter-spacing:.16em;color:var(--text-3)}
.bp-scene span{display:block;color:inherit}
.bp-scene i{grid-column:2;display:block;margin-top:2px;font:400 11px/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;font-style:normal;color:var(--text-3)}
.bp-scene[aria-pressed=true]{border-color:var(--accent);color:var(--text-1)}
.bp-scene[aria-pressed=true] b{color:var(--accent)}
.bp-scene:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
@media (hover:hover) and (pointer:fine){.bp-scene:hover{border-color:var(--line-3);color:var(--text-1)}}

/* the comparison block keeps making-of.css; only its place and colours change here */
.world-block-compare .mk-viewer{margin-top:var(--s-7)}
.world-iruha .mk-stage{border-color:var(--line-1)}
.world-iruha .mk-bar{padding-inline:12px}
.world-iruha .mk-shots{margin-top:var(--s-7)}
.world-iruha .mk-tag::before{background:var(--accent)}
.world-iruha .mk-tag-gen::before{background:var(--sun)}
@media (max-width:899.98px){
  .world-iruha .mk-bar,.world-iruha .bp-bar{padding-inline:0}
  .bp-stage{border-inline-width:0}
  .bp-hud{font-size:10px;letter-spacing:.1em}
  .bp-hud b{font-weight:400}
  .bp-hud-br i{display:none}
  .bp-hud-tr,.bp-hud-br{max-width:46%;overflow:hidden;text-overflow:ellipsis}
  .bp-hint{display:none}
  .bp-scenes{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(60vw,220px);overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding-inline:var(--gutter);margin-inline:calc(var(--gutter)*-1);padding:0 var(--gutter) 8px;overscroll-behavior-x:contain;scrollbar-width:none}
  .bp-scenes::-webkit-scrollbar{display:none}
  .bp-scenes li{scroll-snap-align:start}
}

/* Reveals: the frame opens like the old projector gate (page.css .pg-gate); the copy rises after it. */
.fx .world-copy{transition:opacity var(--d-4) var(--ease-std) 240ms,translate var(--d-4) var(--ease-expo) 240ms}
.fx .world:has(.world-frame:not(.is-in)) .world-copy{opacity:0;translate:0 16px}
.fx .world .film-note,.fx .world .mk-shots,.fx .world .mk-credit{transition:opacity var(--d-4) var(--ease-std) 360ms}
.fx .world:has(.world-frame:not(.is-in)) :is(.film-note,.mk-shots,.mk-credit){opacity:0}
@media print{
  .world-copy,.world .film-note,.world .mk-shots,.world .mk-credit,.world-light,.world::before{opacity:1!important;translate:none!important;transform:none!important}
  .world-loop,.world-petals,.world-reticle,.world-trailer,.world-player-close,.bp-stage canvas{display:none!important}
  .bp-poster,.world-block-title .ln>span{opacity:1!important;transform:none!important}
}

/* The world's title slams in when its section first lights (page.js adds .is-lit once): scale and lift settle with the
   expo ease, the kind line follows. Landing pass, owner decision 2026-10-29. Motion off keeps everything in place. */
.fx .world .world-title{transition:transform var(--d-5) var(--ease-expo),opacity var(--d-3) var(--ease-std);transform-origin:0 100%}
.fx .world:not(.is-lit) .world-title{opacity:0;transform:translate3d(0,.18em,0) scale(1.08)}
.fx .world .world-kind{transition:opacity var(--d-3) var(--ease-std) 120ms,transform var(--d-4) var(--ease-expo) 120ms}
.fx .world:not(.is-lit) .world-kind{opacity:0;transform:translate3d(-8px,0,0)}
@media print{.world .world-title,.world .world-kind{opacity:1!important;transform:none!important}}