/* Flowport opening story: full-screen narrated scenes. Palette follows Signal & Tide. */
.intro-root{position:fixed;inset:0;z-index:50;background:#071d2b;color:#f3f8fa;overflow:hidden;font-family:Arial,system-ui,sans-serif}
.intro-stage,.intro-scene,.intro-bg{position:absolute;inset:0}
.intro-scene{opacity:0;transition:opacity 1s ease}
.intro-scene.on{opacity:1}
.intro-bg{background-size:cover;background-position:center;opacity:0;transition:opacity 1.2s ease,transform linear 8s;transform-origin:center;will-change:transform}
.intro-bg.on{opacity:1}
.intro-scene.dusk::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 40%,#0000 30%,#071d2bcc 100%),#1a0f2a33}
.intro-scene::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(#0000 55%,#071d2bdd 100%);pointer-events:none}
.intro-chip,.intro-phone,.intro-boats,.intro-title,.intro-join{position:absolute;z-index:2;opacity:0;transition:opacity .6s ease,transform .6s ease;transform:translate(-50%,-30%)}
.intro-chip.on,.intro-phone.on,.intro-boats.on,.intro-title.on,.intro-join.on{opacity:1;transform:translate(-50%,-50%)}
.intro-chip{padding:12px 24px;border:2px solid #35d4ed;border-radius:10px;background:#071d2bec;text-align:center;font-size:clamp(22px,2.6vw,44px);font-weight:700;white-space:nowrap}
.intro-chip small{display:block;margin-top:4px;font-size:.6em;font-weight:400;color:#bfdae4}
.intro-chip.big{font-size:clamp(28px,3.6vw,58px)}
.intro-chip.flag,.intro-chip.clock{border-color:#ff8a48}
.intro-chip.board,.intro-chip.meter{border-style:dashed}
.intro-phone{width:clamp(220px,20vw,340px);padding:18px;border:3px solid #35d4ed;border-radius:28px;background:#071d2bf2;font-size:clamp(20px,2vw,32px)}
.intro-phone ul{margin:12px 0 0;padding:0;list-style:none}
.intro-phone li{margin:8px 0;padding:10px 14px;border:2px solid #467989;border-radius:8px;transition:background .5s,border-color .5s}
.intro-phone li.lit{background:#35d4ed33;border-color:#35d4ed}
.intro-boats{width:min(60vw,900px);aspect-ratio:3/1;background:url("/assets/boats.png") center/contain no-repeat}
.intro-title{left:50%;top:38%;text-align:center}
.intro-title.on,.intro-title{opacity:1;transform:translate(-50%,-50%)}
.intro-title.dawn{left:34%;top:26%}
.intro-title h1{margin:0;font-size:clamp(64px,9vw,150px);letter-spacing:.08em;text-transform:uppercase;text-shadow:0 4px 24px #000}
.intro-join{right:3%;top:auto;bottom:24%;left:auto;transform:none;padding:18px;border-radius:12px;background:#f3f8fa;color:#071d2b;text-align:center}
.intro-join.on{transform:none}
.intro-join .room-code{display:block;font-size:clamp(32px,4vw,64px);letter-spacing:.2em}
.intro-join svg{width:clamp(140px,14vw,240px);height:auto}
.intro-hm{position:absolute;z-index:3;left:2%;bottom:0;width:clamp(220px,30vh,420px);aspect-ratio:1;border-radius:50%;border:3px solid #35d4ed;background:#14394b url("/assets/harbormaster-six-poses.png") 0 0/300% 200% no-repeat;box-shadow:0 8px 40px #000a;animation:intro-bob 4s ease-in-out infinite}
.intro-hm.swap{animation:intro-bob 4s ease-in-out infinite,intro-swap .5s ease}
@keyframes intro-bob{50%{transform:translateY(-8px)}}
@keyframes intro-swap{from{opacity:.2}to{opacity:1}}
.intro-caption{position:absolute;z-index:4;left:calc(2% + clamp(240px,32vh,440px));right:4%;bottom:4%;min-height:3.2em;padding:14px 24px;border-radius:10px;background:#071d2bf0;border-left:4px solid #35d4ed;font-size:clamp(24px,2.8vw,46px);line-height:1.35}
.intro-caption:empty{visibility:hidden}
.intro-skip{position:absolute;z-index:5;top:2%;right:2%;padding:10px 20px;border:2px solid #f3f8fa88;border-radius:8px;background:#071d2bcc;color:#f3f8fa;font-size:clamp(16px,1.4vw,22px);cursor:pointer}
.intro-skip:focus-visible{outline:3px solid #35d4ed}
/* District how-to plates: contained full stage, no pan, no scrim; Silas and the caption sit in the empty band below y=650 of 900. */
.intro-bg.diagram{background-size:contain;background-repeat:no-repeat;background-color:#071d2b}
.intro-scene.diagram-scene::before{display:none}
.intro-root.dia .intro-hm{width:clamp(160px,26vh,360px)}
.intro-root.dia .intro-caption{bottom:2%;left:calc(2% + clamp(200px,26vh,360px))}
/* Reduced motion: fades and stills only. */
.intro-fade .intro-bg{transition:opacity 1s ease;transform:none!important}
.intro-fade .intro-hm,.intro-fade .intro-hm.swap{animation:none}
.intro-fade .intro-chip,.intro-fade .intro-phone,.intro-fade .intro-boats,.intro-fade .intro-join{transform:translate(-50%,-50%);transition:opacity .8s ease}
.intro-fade .intro-join{transform:none}
.intro-fade .intro-scene.diagram-scene,.intro-fade .intro-scene.diagram-scene .intro-bg{transition:none}
@media (prefers-reduced-motion:reduce){.intro-hm,.intro-hm.swap{animation:none}}
/* TV page opened on a phone in portrait: picture at the top, Silas small, caption full width beneath. */
@media (max-aspect-ratio:3/4){
  .intro-root{--pic:min(62vh,56.25vw)}
  .intro-stage{bottom:auto;height:var(--pic)}
  .intro-bg,.intro-bg.diagram{background-size:contain;background-repeat:no-repeat;background-position:center top}
  .intro-map{width:100%}
  .intro-inset{width:40vw;top:auto;bottom:4%;right:3%}
  .intro-hm,.intro-root.dia .intro-hm{width:84px;left:3%;bottom:auto;top:calc(var(--pic) + 56px)}
  .intro-caption,.intro-root.dia .intro-caption{left:3%;right:3%;bottom:auto;top:calc(var(--pic) + 150px);max-height:calc(100vh - var(--pic) - 230px);font-size:clamp(18px,5vw,26px);overflow:auto}
  .intro-chip{font-size:13px;padding:4px 8px}
  .intro-chip.big{font-size:15px}
  .intro-phone{width:40vw;padding:8px;font-size:13px;border-radius:14px}
  .intro-skip{top:auto;bottom:auto;top:calc(var(--pic) + 8px);right:3%}
  .intro-join{bottom:auto;top:calc(var(--pic) + 56px);right:3%;padding:8px}
  .intro-join svg{width:96px}
}

/* Silas's name and title over his portrait (playtest 4), clear of the caption to its right. */
.intro-hm-name{position:absolute;z-index:4;left:2%;bottom:calc(clamp(220px,30vh,420px) + 10px);padding:6px 14px;border-radius:8px;background:#071d2bea;border-left:3px solid #35d4ed;color:#cfe3ea;font-size:clamp(15px,1.3vw,22px);white-space:nowrap}
.intro-hm-name strong{color:#f3f8fa}
.intro-root.dia .intro-hm-name{bottom:calc(clamp(160px,26vh,360px) + 10px)}
@media (max-aspect-ratio:3/4){
  .intro-hm-name,.intro-root.dia .intro-hm-name{left:calc(3% + 96px);bottom:auto;top:calc(var(--pic) + 84px);font-size:14px}
}