/* The Home opening, option A: four artistic 3D worlds, one per current board, crossfading behind Merline's name.
   Replaces the rocket film (src/cinema) when src/content/worlds.html exists. Site tokens come from styles.css. */
.worlds{position:relative;background:var(--navy);color:var(--ivory);padding-top:var(--header-h)}
.worlds-stage{position:relative;isolation:isolate;overflow:hidden;height:calc(100svh - var(--header-h) - 64px);min-height:560px;max-height:1080px;background:#050b1a;contain:layout paint}
.worlds-reel,.worlds-shot{position:absolute;inset:0;margin:0}
.worlds-shot{opacity:0;transition:opacity 1.2s ease}
.worlds-shot[data-active]{opacity:1}
.worlds-shot video{width:100%;height:100%;object-fit:cover;display:block;background:#050b1a}
.worlds-scrim{position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(90deg,rgba(3,7,16,.9) 0%,rgba(3,7,16,.66) 30%,rgba(3,7,16,.12) 58%,transparent 72%),linear-gradient(0deg,rgba(3,7,16,.92) 0%,rgba(3,7,16,.5) 22%,transparent 42%)}
.worlds-slate{position:absolute;z-index:2;inset:0 0 auto;top:clamp(48px,11vh,130px)}
.worlds-kicker{font-size:11px;line-height:1.5;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-light);margin:0 0 22px}
.worlds h1{font:400 clamp(64px,8.2vw,140px)/.92 var(--display);letter-spacing:-.03em;margin:0 0 30px;max-width:7ch;color:var(--ivory)}
.worlds h1 span{color:var(--ignition)}
.worlds-deck{font-size:clamp(18px,1.6vw,23px);line-height:1.5;letter-spacing:-.02em;font-weight:450;max-width:24ch;color:#e4e6eb;margin:0}
.worlds-boards{position:absolute;z-index:2;left:0;right:0;bottom:22px}
.worlds-boards .worlds-kicker{margin-bottom:12px;color:var(--silver)}
.worlds-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:28px;border-top:1px solid rgba(243,240,232,.22)}
.worlds-list button{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:3px;width:100%;min-height:44px;padding:18px 0 4px;margin:0;border:0;background:none;color:#c9d0da;text-align:left;font:inherit;cursor:pointer;transition:color .3s}
.worlds-list button::before{content:'';position:absolute;top:-1px;left:0;height:2px;width:100%;background:var(--ignition);transform:scaleX(0);transform-origin:left}
.worlds-list li[data-active] button{color:var(--ivory)}
.worlds-list li[data-active] button::before{animation:worlds-progress var(--worlds-dur,7s) linear forwards}
.worlds[data-paused] .worlds-list li[data-active] button::before,.worlds[data-still] .worlds-list li[data-active] button::before{animation:none;transform:scaleX(1)}
@keyframes worlds-progress{to{transform:scaleX(1)}}
.worlds-list button:hover{color:var(--ivory)}
.worlds-list button:focus-visible{outline:3px solid var(--blue-light);outline-offset:4px}
.worlds-sector{font-size:9px;line-height:1.5;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-light)}
.worlds-list strong{font:400 clamp(22px,2vw,30px)/1.1 var(--display);letter-spacing:-.02em;margin:4px 0 2px}
.worlds-list span{font-size:12px;line-height:1.45;max-width:34ch}
.worlds-list .worlds-duty{font-size:11px;color:var(--on-navy-muted)}
.worlds-list li:not([data-active]) button span{opacity:.62}
.worlds-meta{display:flex;align-items:center;gap:16px;margin-top:14px}
.worlds-toggle{flex:none;display:grid;place-items:center;width:44px;height:44px;padding:0;border:1px solid rgba(243,240,232,.45);border-radius:50%;background:rgba(3,7,16,.35);color:var(--ivory)}
.worlds-toggle svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.worlds-toggle .worlds-play{display:none;fill:currentColor}
.worlds[data-paused] .worlds-toggle .worlds-pause{display:none}
.worlds[data-paused] .worlds-toggle .worlds-play{display:block}
.worlds-toggle:hover{background:var(--ivory);color:var(--navy)}
.worlds-credit{margin:0;font-size:10px;line-height:1.5;color:var(--silver);max-width:none}
.worlds-continuation{display:flex;align-items:center;gap:32px;padding:8px var(--gutter);min-height:64px;background:#061521;font-size:13px}
.worlds-continuation a{display:flex;align-items:center;justify-content:space-between;gap:26px;min-height:44px;color:#c9d7df;text-decoration:none}
.worlds-continuation .cinema-primary{color:var(--ivory);font-weight:650}
.worlds-continuation a:hover{color:var(--blue-light)}
@media (max-width:1100px){.worlds-list{gap:18px}.worlds-list span{font-size:11px}.worlds-list .worlds-duty{display:none}}
@media (max-width:760px){
  .worlds-stage{height:calc(100svh - var(--header-h) - 64px);min-height:620px;max-height:none}
  .worlds-scrim{background:linear-gradient(180deg,rgba(3,7,16,.88) 0%,rgba(3,7,16,.55) 26%,transparent 44%),linear-gradient(0deg,rgba(3,7,16,.95) 0%,rgba(3,7,16,.72) 26%,transparent 46%)}
  .worlds-slate{top:28px}
  .worlds h1{font-size:clamp(52px,15vw,76px);margin-bottom:16px}
  .worlds-deck{font-size:16px}
  .worlds-boards{bottom:14px}
  .worlds-list{grid-template-columns:repeat(4,minmax(0,1fr));gap:8px}
  .worlds-list button{padding-top:12px}
  .worlds-list .worlds-sector,.worlds-list li button span{display:none}
  .worlds-list strong{font-size:14px;line-height:1.2}
  .worlds-list li[data-active] button span:not(.worlds-duty){display:none}
  .worlds .worlds-now{display:block}
  .worlds-continuation{padding:8px 20px;gap:12px;flex-wrap:wrap}
  .worlds-continuation a{font-size:13px;gap:8px;flex:1 1 auto}
}
.worlds-now{display:none;margin:0 0 10px;font-size:13px;line-height:1.45;color:var(--ivory);max-width:none}
.worlds-now b{display:block;font-size:9px;font-weight:750;letter-spacing:.13em;text-transform:uppercase;color:var(--blue-light);margin-bottom:2px}
@media (prefers-reduced-motion:reduce){.worlds-shot{transition:none}}

/* Opener: Merline's portrait on the Times Square tower holds ~3.5s, then crossfades (never through black) into the worlds.
   Sits above the shots, below the scrim and text. A blurred inline placeholder paints on the first frame; the photo shows
   once decoded. Plays once per page load; never part of the loop. */
.worlds-opener{position:absolute;inset:0;margin:0;z-index:0;background:#1d2a33;opacity:1;transition:opacity 1.3s cubic-bezier(.45,0,.55,1)}
.worlds-opener[data-out]{opacity:0;pointer-events:none}
.worlds-opener[hidden]{display:none}
.worlds-opener-frame{position:absolute;inset:0;background:url(data:image/webp;base64,UklGRqwAAABXRUJQVlA4IKAAAACwBACdASogABUAPu1mq0+ppSOiMBgIATAdiWMAwC7wAYqEi86OtqpJuN5Yq5yUAOJ+usOiIi2JxR/a4uAzKdMRoS4dSGof4QTPzM7B3VX3Bcm4CiZl5NZgaeD/6EOAfZBXaDthvrVOPTMPUKjpkdLcKiEcDA2qaUP7//idC9l+ABgWiEcMgWujCCJl+LmPIcJQ+xRqaDorLOdtkHHAQ8AA) 50% 30%/cover no-repeat}
.worlds-opener-frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 30%;opacity:0;transition:opacity .45s ease}
.worlds-opener[data-ready] .worlds-opener-frame img{opacity:1}
.worlds-opener[data-instant] .worlds-opener-frame img{transition:none}
.worlds-shot[data-world="0"]{background:#050b1a url(assets/space-16x9.webp) 50% 50%/cover no-repeat}
.worlds-shot[data-world="0"] video{background:transparent}
.worlds[data-intro] .worlds-list li[data-active] button{color:#c9d0da}
.worlds[data-intro] .worlds-list li[data-active] button::before{animation:none;transform:scaleX(0)}
.worlds[data-intro] .worlds-list li[data-active] button span{opacity:.62}
.worlds .worlds-now{transition:opacity .6s ease}
.worlds[data-intro] .worlds-now{opacity:0}
@media (max-width:760px) and (max-aspect-ratio:4/5){
  .worlds-opener{background:linear-gradient(180deg,#0b1730 0%,#26323a 22%,#56605f 36%,#5f6968 60%)}
  .worlds-opener-frame{inset:auto;left:50%;top:31.5%;height:85%;aspect-ratio:1200/1333;min-width:100%;transform:translateX(-50%);background:url(data:image/webp;base64,UklGRrgAAABXRUJQVlA4IKwAAADwBACdASoYABsAPu1qqFAppiOiqA1RMB2JQBjmAMM5uPDDtIgtqvvUP2u+WE9DcSAA85Pjhtmkb9hIFtAdn+c1MBx8m/J4tmJjIvsfxsfXXYBAqmRxEOr4ZQRbIWBTJH7WHx82ivFchXJ34CiSc1WRUVsDcBQU5kxOJCyBU+4xem3vygD3ItBhR18Z3yh7HYTL6uoIkd8DPM0CfGPWoJLlgrCHhM+KK0u12AAA) 50% 0/cover no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0,#000 15%);mask-image:linear-gradient(180deg,transparent 0,#000 15%)}
  .worlds-opener-frame img{object-position:50% 0}
  .worlds-shot[data-world="0"]{background-image:url(assets/space-9x16.webp)}
}
@media (min-width:761px) and (max-aspect-ratio:1/1){.worlds-opener-frame{background-position:30% 30%}.worlds-opener-frame img{object-position:30% 30%}}
@media (prefers-reduced-motion:reduce){.worlds-opener,.worlds-opener-frame img,.worlds .worlds-now{transition:none}}