/* the story intro (ui/screens.js storyScreen): a full-screen short film. Captured game pictures drift under
   letterbox bars; progress segments, the logo and "Atla" sit in the top bar, the chapter text over a dark gradient. */
#screen-story{display:block;padding:0;overflow:hidden;background:#000}
.sx{--lb-t:calc(var(--sat) + 66px);--lb-b:calc(var(--sab) + 34px);--pad-l:max(20px,var(--sal));--pad-r:max(20px,var(--sar));
  position:absolute;inset:0;overflow:hidden;isolation:isolate;background:#000;color:#fff;
  touch-action:none;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.sx:focus{outline:none}
.sx-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
.sx::after{content:"";position:absolute;inset:0;z-index:20;background:#000;opacity:0;pointer-events:none;transition:opacity .4s ease}
.sx.leaving::after{opacity:1}
@keyframes sxFade{from{opacity:0}}
@keyframes sxGone{to{opacity:0}}
@keyframes sxUp{from{opacity:0;transform:translateY(14px)}}
@keyframes sxGrow{from{opacity:0;transform:scaleX(0)}}

/* ---------- pictures: the newest layer fades in over the last; a moving gradient stands in for a missing one */
.sx-stage{position:absolute;inset:0;z-index:0;overflow:hidden}
.sx-shot{position:absolute;inset:0;overflow:hidden;background:var(--c3);opacity:0;transition:opacity 1.2s ease}
.sx-shot.in{opacity:1}
.sx-shot::before{content:"";position:absolute;inset:-30%;opacity:.85;animation:sxAura 14s ease-in-out infinite alternate;
  background:radial-gradient(40% 36% at 30% 36%,var(--c1),transparent 72%),radial-gradient(44% 40% at 70% 66%,var(--c2),transparent 74%)}
.sx-shot.pic::before{animation:none}
.sx-shot.nopic::after{content:"";position:absolute;inset:0;
  background:linear-gradient(rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px,linear-gradient(90deg,rgba(255,255,255,.07) 1px,transparent 1px) 0 0/24px 24px;
  -webkit-mask-image:radial-gradient(ellipse at 50% 42%,#000 15%,transparent 72%);mask-image:radial-gradient(ellipse at 50% 42%,#000 15%,transparent 72%)}
.sx-shot img{position:absolute;left:0;top:0;max-width:none;transform-origin:0 0;pointer-events:none;-webkit-user-drag:none}
.sx-shot img.late{animation:sxFade .9s ease backwards}
@keyframes sxAura{from{transform:translate3d(-6%,-4%,0) rotate(-4deg)}to{transform:translate3d(6%,5%,0) rotate(6deg) scale(1.12)}}

/* legible text: dark at the bottom, a soft vignette; the title card sits on a deeper shade */
.sx-shade{position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(0deg,rgba(4,8,15,.95) 0%,rgba(4,8,15,.74) 26%,rgba(4,8,15,.2) 52%,rgba(4,8,15,0) 64%),
    linear-gradient(180deg,rgba(4,8,15,.55) 0%,rgba(4,8,15,0) 24%),
    radial-gradient(ellipse 120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%)}
.sx-shade::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(4,8,15,.4),rgba(4,8,15,.85));opacity:0;transition:opacity 1.4s ease}
.sx.intro .sx-shade::after{opacity:1}

/* ---------- letterbox bars: they open like eyes on the city, then hold the progress and the hint */
.sx-bar{position:absolute;left:0;right:0;z-index:5;height:50%;background:#000;pointer-events:none}
.sx-bar.t{top:0;transform:translateY(calc(var(--lb-t) - 100%));animation:sxOpenT 1.7s .35s cubic-bezier(.7,0,.2,1) backwards}
.sx-bar.b{bottom:0;transform:translateY(calc(100% - var(--lb-b)));animation:sxOpenB 1.7s .35s cubic-bezier(.7,0,.2,1) backwards}
@keyframes sxOpenT{from{transform:translateY(1px)}}
@keyframes sxOpenB{from{transform:translateY(-1px)}}

/* ---------- top: progress segments, the logo, "Atla" */
.sx-top{position:absolute;left:0;right:0;top:0;z-index:8;padding:calc(var(--sat) + 10px) var(--pad-r) 0 var(--pad-l);animation:sxFade .7s .3s ease backwards;transition:opacity .25s}
.sx-segs{display:flex;gap:4px}
.sx-segs i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.24);overflow:hidden}
.sx-segs b{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:0 50%}
.sx-segs i.on b{background:var(--gold)}
.sx-meta{display:flex;align-items:center;gap:12px;height:40px;margin-top:9px}
.sx-meta .logo{font-size:15px;color:#fff;opacity:.9;transition:opacity .6s}
.sx.intro .sx-meta .logo{opacity:0}
.sx-pz{display:none;align-items:center;gap:7px;padding:4px 10px;border-radius:999px;background:rgba(255,255,255,.1);color:#d5e1ec;font-size:11px;font-weight:900;letter-spacing:1.2px;text-transform:uppercase}
.sx-pz::before{content:"";width:8px;height:10px;border-left:3px solid currentColor;border-right:3px solid currentColor}
.sx.paused .sx-pz{display:inline-flex}
.sx-skip{position:relative;margin-left:auto;display:inline-flex;align-items:center;gap:3px;height:36px;padding:0 10px 0 16px;border-radius:999px;background:rgba(255,255,255,.13);border:1px solid rgba(255,255,255,.24);color:#fff;font-size:14px;font-weight:900;letter-spacing:.3px;transition:background .15s}
.sx-skip::before{content:"";position:absolute;inset:-6px}
.sx-skip:hover{background:rgba(255,255,255,.22)}
.sx-skip svg,.sx-ic svg,.sx-arrow svg{fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.sx-skip svg{width:17px;height:17px;stroke-width:2.4}
.sx.hold .sx-top,.sx.hold .sx-arrow,.sx.hold .sx-hint{opacity:.2}

/* ---------- title card */
.sx-intro{position:absolute;inset:0;z-index:7;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:18px;padding:0 var(--pad-r) 0 var(--pad-l);text-align:center;pointer-events:none}
.sx-logo{font-family:var(--display);font-size:min(11vw,112px);line-height:1;letter-spacing:.03em;white-space:nowrap;text-shadow:0 .06em 0 rgba(0,0,0,.45)}
.sx-logo span{display:inline-block;animation:sxLetter 1s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--d)}
.sx-logo b{font-weight:700;color:var(--gold);animation:sxGlow 2.4s 1.3s ease-in-out}
@keyframes sxLetter{from{opacity:0;transform:translateY(.3em) scale(.86);filter:blur(12px)}}
@keyframes sxGlow{45%{text-shadow:0 .06em 0 rgba(0,0,0,.45),0 0 .45em rgba(246,196,69,.85)}}
.sx-line{display:block;width:min(360px,62vw);height:2px;background:linear-gradient(90deg,transparent,var(--gold) 28%,#fff4c8 50%,var(--gold) 72%,transparent);animation:sxGrow 1.2s 1s cubic-bezier(.2,.8,.2,1) backwards}
.sx-tag{margin:0;font-size:clamp(16px,2.1vw,22px);line-height:1.45;font-weight:800;color:#d6e2ee;text-shadow:0 2px 12px rgba(0,0,0,.6);animation:sxUp 1s 1.4s cubic-bezier(.2,.8,.2,1) backwards}
.sx-tag b{display:block;color:#fff;font-weight:900}
.sx-intro.gone{animation:sxIntroOut .8s ease forwards}
@keyframes sxIntroOut{to{opacity:0;transform:scale(1.05);filter:blur(10px)}}

/* ---------- chapter text: words rise in one after another, the old text drifts away */
.sx-copies{position:absolute;z-index:4;left:0;right:0;top:calc(var(--lb-t) + 12px);bottom:calc(var(--lb-b) + 18px);display:grid;grid-template-rows:minmax(0,1fr);padding:0 var(--pad-r) 0 var(--pad-l)}
.sx-copy{grid-area:1/1;align-self:end;max-width:600px;max-height:100%;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:none;touch-action:pan-y}
.sx-copy::-webkit-scrollbar{display:none}
.sx-copy.out{animation:sxOut .4s ease forwards;pointer-events:none}
@keyframes sxOut{to{opacity:0;transform:translateY(-12px)}}
.sx-ch{display:flex;align-items:center;gap:10px;margin:0 0 10px;color:var(--gold);font-size:12px;font-weight:900;letter-spacing:2.4px;text-shadow:0 1px 8px rgba(0,0,0,.6);animation:sxTrack .9s cubic-bezier(.2,.8,.2,1) backwards}
.sx-ch i{flex:0 0 auto;width:28px;height:2px;border-radius:2px;background:currentColor;transform-origin:0 50%;animation:sxGrow .7s .1s cubic-bezier(.2,.8,.2,1) backwards}
@keyframes sxTrack{from{opacity:0;letter-spacing:7px}}
.sx-h{margin:0;font-size:clamp(30px,8.4vw,60px);line-height:1.05;font-weight:900;letter-spacing:-.4px;text-wrap:balance;text-shadow:0 4px 28px rgba(0,0,0,.55)}
.sx-p{margin:12px 0 0;max-width:46ch;font-size:15.5px;line-height:1.58;font-weight:700;color:#e2ebf3;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.sx .w{display:inline-block;animation:sxWord .7s cubic-bezier(.2,.75,.25,1) backwards;animation-delay:var(--d)}
.sx-h .w{animation-name:sxWordH;animation-duration:.85s}
@keyframes sxWord{from{opacity:0;transform:translateY(.55em)}}
@keyframes sxWordH{from{opacity:0;transform:translateY(.35em);filter:blur(8px)}}

/* the rules chapter: three short promises and the way into the character creator */
.sx-copy.rules{max-width:640px}
.sx-rules{list-style:none;margin:16px 0 0;padding:0;display:grid;gap:8px}
.sx-rules li{display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;border-radius:14px;background:rgba(8,14,26,.72);border:1px solid rgba(255,255,255,.13);color:#c6d3df;font-size:13.5px;line-height:1.4;animation:sxUp .7s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--d)}
.sx-rules b{display:block;margin-bottom:1px;color:#fff;font-size:15px;font-weight:900}
.sx-ic{flex:0 0 auto;display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(246,196,69,.14);color:var(--gold)}
.sx-ic svg{width:22px;height:22px;stroke-width:2}
.sx-cta{position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;gap:10px;width:100%;margin-top:16px;padding:15px 24px;border-radius:16px;
  background:linear-gradient(#ffe07a,#f6c445 55%,#e9ad22);border:2px solid #6e4d00;color:var(--gold-ink);font-size:18px;font-weight:900;letter-spacing:.2px;text-shadow:0 1px 0 rgba(255,255,255,.35);
  box-shadow:inset 0 -4px 0 rgba(0,0,0,.14),inset 0 2px 0 rgba(255,255,255,.5),0 5px 0 #6e4d00,0 14px 34px rgba(246,196,69,.3);
  animation:sxUp .8s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:var(--d);transition:transform .15s,filter .15s}
.sx-cta::after{content:"";position:absolute;top:-30%;bottom:-30%;left:-60%;width:36%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-18deg);animation:sxShine 3.8s 2s ease-in-out infinite}
@keyframes sxShine{0%,60%{left:-60%}100%{left:130%}}
.sx-cta i{font-style:normal;transition:transform .2s}
.sx-cta:hover{filter:brightness(1.05);transform:translateY(-1px)}
.sx-cta:hover i{transform:translateX(4px)}
.sx.end .sx-cta i{animation:sxPoint 1.3s ease-in-out infinite}
@keyframes sxPoint{50%{transform:translateX(5px)}}
.sx-cta:active{transform:translateY(3px);box-shadow:inset 0 -2px 0 rgba(0,0,0,.14),0 2px 0 #6e4d00,0 8px 20px rgba(246,196,69,.3)}
.sx-cta.nudge{animation:sxNudge .5s ease}
@keyframes sxNudge{20%{transform:translateX(-6px)}40%{transform:translateX(6px)}60%{transform:translateX(-4px)}80%{transform:translateX(3px)}}

/* ---------- bottom bar hint; arrows for a mouse */
.sx-hint{position:absolute;z-index:6;left:var(--pad-l);right:var(--pad-r);bottom:var(--sab);height:calc(var(--lb-b) - var(--sab));margin:0;display:flex;align-items:center;justify-content:center;
  color:rgba(255,255,255,.48);font-size:12px;font-weight:800;letter-spacing:.4px;white-space:nowrap;pointer-events:none;animation:sxFade 1s 2.2s ease backwards;transition:opacity .25s}
.sx-hint .mouse,.sx-hint .end{display:none}
.sx.last .sx-hint .touch,.sx.last .sx-hint .mouse{display:none!important}
.sx.last .sx-hint .end{display:inline}
.sx-arrow{display:none}
@media (hover:hover) and (pointer:fine){
  .sx-hint .touch{display:none}
  .sx-hint .mouse{display:inline}
  .sx-arrow{position:absolute;z-index:6;top:50%;display:grid;place-items:center;width:52px;height:52px;margin-top:-26px;border-radius:50%;background:rgba(6,12,22,.45);border:1px solid rgba(255,255,255,.22);color:#fff;opacity:0;transition:opacity .25s,background .15s,transform .15s}
  .sx-arrow svg{width:22px;height:22px;stroke-width:2.4}
  .sx-arrow.prev{left:max(16px,var(--sal))}
  .sx-arrow.next{right:max(16px,var(--sar))}
  .sx:hover .sx-arrow{opacity:.8}
  .sx .sx-arrow:hover{opacity:1;background:rgba(6,12,22,.72);transform:scale(1.06)}
  .sx.intro .sx-arrow,.sx.last .sx-arrow.next{visibility:hidden}
}

/* holding a finger down (or Space) freezes everything */
.sx.hold *,.sx.hold *::before,.sx.hold *::after,.sx.paused *,.sx.paused *::before,.sx.paused *::after{animation-play-state:paused!important}

/* ---------- sizes: tablets, wide screens, phones on their side */
@media (min-width:600px){ .sx-p{font-size:17px} }
@media (min-width:900px) and (min-height:600px){
  .sx{--lb-t:calc(var(--sat) + clamp(72px,9vh,96px));--lb-b:calc(var(--sab) + clamp(44px,7vh,76px));--pad-l:max(78px,6vw,var(--sal));--pad-r:max(78px,6vw,var(--sar))}
  .sx-top{padding-top:calc(var(--sat) + clamp(14px,2.4vh,24px))}
  .sx-meta .logo{font-size:17px}
  .sx-shade{background:linear-gradient(90deg,rgba(4,8,15,.8) 0%,rgba(4,8,15,.42) 34%,rgba(4,8,15,0) 60%),
    linear-gradient(0deg,rgba(4,8,15,.92) 0%,rgba(4,8,15,.45) 28%,rgba(4,8,15,0) 52%),
    radial-gradient(ellipse 120% 90% at 50% 45%,rgba(0,0,0,0) 55%,rgba(0,0,0,.42) 100%)}
  .sx-copies{bottom:calc(var(--lb-b) + clamp(28px,5vh,56px))}
  .sx-copy{max-width:660px}
  .sx-ch{font-size:13px;margin-bottom:14px}
  .sx-p{font-size:18.5px;margin-top:16px}
  .sx-copy.rules{max-width:1000px}
  .sx-copy.rules .sx-p{max-width:52ch}
  .sx-rules{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:24px}
  .sx-rules li{flex-direction:column;align-items:flex-start;gap:10px;padding:16px 18px}
  .sx-cta{display:inline-flex;width:auto;margin-top:26px;padding:16px 34px;font-size:19px}
}
@media (max-height:520px) and (orientation:landscape){
  .sx{--lb-t:calc(var(--sat) + 52px);--lb-b:calc(var(--sab) + 6px)}
  .sx-top{padding-top:calc(var(--sat) + 7px)}
  .sx-meta{height:34px;margin-top:6px}
  .sx-skip{height:32px}
  .sx-hint{display:none}
  .sx-copies{top:calc(var(--lb-t) + 8px);bottom:calc(var(--lb-b) + 10px)}
  .sx-copy,.sx-copy.rules{max-width:min(760px,100%)}
  .sx-ch{margin-bottom:6px}
  .sx-h{font-size:clamp(22px,4.4vw,34px)}
  .sx-p{font-size:14px;margin-top:8px;max-width:64ch}
  .sx-rules{grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:10px}
  .sx-rules li{flex-direction:column;align-items:flex-start;gap:6px;padding:8px 10px;font-size:12px}
  .sx-rules b{font-size:13.5px}
  .sx-ic{width:30px;height:30px;border-radius:9px}
  .sx-ic svg{width:18px;height:18px}
  .sx-cta{display:inline-flex;width:auto;margin-top:10px;padding:10px 22px;font-size:16px}
}

@media (prefers-reduced-motion:reduce){
  .sx-bar,.sx-shot::before,.sx-cta::after,.sx.end .sx-cta i{animation:none!important}
  .sx-top,.sx-hint,.sx-intro *,.sx-ch,.sx-ch i,.sx .w,.sx-rules li,.sx-cta,.sx-shot img.late{animation:sxFade .35s ease backwards!important}
  .sx-copy.out,.sx-intro.gone{animation:sxGone .25s ease forwards!important}
  .sx-shot{transition-duration:.5s}
}