/* ============================================================
   Al-Birr — "Why we exist": the five-scene story pop-up (homepage only)
   v2 (23 Oct 2026): rebuilt from Al-Birr-Animated-Message.mp4, then raised:
   a dimmed photograph behind each scene with a slow push-in, layered depth
   (photo · veil · tile · stars · light), film grain and vignette, headlines
   arriving word by word, strokes that draw, a progress line that fills with
   the voice, and pointer parallax on desktop.
   ============================================================ */
html:not(.js) .story-open{display:none}
.story-open .play-ic{width:10px;height:12px;display:inline-block;clip-path:polygon(0 0,100% 50%,0 100%);background:currentColor;margin-right:2px}

dialog.story-dlg{border:0;padding:0;margin:auto;width:min(1120px,94vw);max-width:none;max-height:none;background:#0B1E35;color:var(--cream);border-radius:20px;box-shadow:0 40px 120px rgba(0,0,0,.6);overflow:hidden;font-family:var(--sans)}
dialog.story-dlg::backdrop{background:rgba(6,14,24,.8);backdrop-filter:blur(7px);-webkit-backdrop-filter:blur(7px)}
dialog.story-dlg[open]{animation:story-in .5s cubic-bezier(.2,.7,.2,1)}
@keyframes story-in{from{opacity:0;transform:translateY(14px) scale(.985)}to{opacity:1;transform:none}}
body.story-locked{overflow:hidden}
.story-x{position:absolute;top:14px;right:14px;z-index:6;background:rgba(11,30,53,.55);border:1px solid rgba(255,255,255,.22);color:var(--cream);width:38px;height:38px;border-radius:50%;font-size:20px;line-height:1;cursor:pointer;transition:.2s;backdrop-filter:blur(6px)}
.story-x:hover{border-color:var(--gold-soft);color:var(--gold-soft)}

/* ---- the stage: a 16:9 frame, scaled by container units; --mx/--my are the pointer, -1..1 ---- */
.st{position:relative;container-type:inline-size;--u:1cqw;--mx:0;--my:0;display:grid;isolation:isolate;overflow:hidden;
  background:#0B1E35 radial-gradient(120% 90% at 50% 110%, #12294a 0%, #0B1E35 55%, #081628 100%);color:#fff}

/* layer 0: the photograph, dimmed to atmosphere, pushing in slowly for the length of its scene */
.st .bgs{position:absolute;inset:0;z-index:0;pointer-events:none}
.st .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.02);filter:saturate(.65) brightness(.68) contrast(1.08);
  translate:calc(var(--mx)*1.4*var(--u)) calc(var(--my)*1*var(--u));
  transition:opacity 1.6s ease,transform 1s ease,translate .9s cubic-bezier(.2,.7,.2,1)}
.st[data-scene="1"] .bg[data-for="1"],.st[data-scene="2"] .bg[data-for="2"],.st[data-scene="3"] .bg[data-for="3"],
.st[data-scene="4"] .bg[data-for="4"]{
  opacity:.3;transform:scale(1.1);transition:opacity 1.6s ease,transform 16s linear,translate .9s cubic-bezier(.2,.7,.2,1)}
.st[data-scene="2"] .bg[data-for="2"]{opacity:.16}
.st[data-scene="4"] .bg[data-for="4"]{opacity:.36;filter:saturate(.8) brightness(.7) sepia(.18)}
/* scene 5 closes on the pure navy, as the original does: no photograph */

/* layer 1: veil for legibility, the geometric tile, stars, the drifting light, the dawn */
.st .veil{position:absolute;inset:0;z-index:1;pointer-events:none;background:
  linear-gradient(90deg,rgba(11,30,53,.96) 0%,rgba(11,30,53,.84) 40%,rgba(11,30,53,.5) 70%,rgba(11,30,53,.62) 100%),
  linear-gradient(180deg,rgba(11,30,53,.6) 0%,rgba(11,30,53,.1) 30%,rgba(11,30,53,.1) 60%,rgba(11,30,53,.86) 100%)}
.st .st-tile{position:absolute;inset:-4%;z-index:1;opacity:.32;pointer-events:none;
  translate:calc(var(--mx)*.5*var(--u)) calc(var(--my)*.35*var(--u));transition:translate 1.1s cubic-bezier(.2,.7,.2,1);
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 120'><g fill='none' stroke='%23ffffff' stroke-opacity='.075' stroke-width='.8'><path d='M60 6l15 39 39 15-39 15-15 39-15-39-39-15 39-15z'/><path d='M60 6l15 39 39 15-39 15-15 39-15-39-39-15 39-15z' transform='rotate(45 60 60)'/><circle cx='60' cy='60' r='22'/></g></svg>");
  background-size:calc(9*var(--u)) calc(9*var(--u));animation:tile-drift 90s linear infinite}
@keyframes tile-drift{to{background-position:calc(9*var(--u)) calc(9*var(--u))}}
.st .st-stars{position:absolute;inset:-3%;z-index:1;pointer-events:none;
  translate:calc(var(--mx)*.9*var(--u)) calc(var(--my)*.6*var(--u));transition:translate 1s cubic-bezier(.2,.7,.2,1);
  background-image:radial-gradient(circle,rgba(255,255,255,.6) 0 1px,transparent 1.6px),radial-gradient(circle,rgba(255,255,255,.4) 0 .8px,transparent 1.4px);
  background-size:calc(23*var(--u)) calc(19*var(--u)),calc(31*var(--u)) calc(27*var(--u));background-position:7% 23%,61% 67%;
  animation:twinkle 7s ease-in-out infinite alternate}
@keyframes twinkle{from{opacity:.45}to{opacity:.85}}
.st .light{position:absolute;z-index:1;width:calc(26*var(--u));height:calc(26*var(--u));left:calc(14*var(--u));top:calc(-6*var(--u));pointer-events:none;
  transition:transform 9s cubic-bezier(.3,.6,.3,1),opacity 2s}
.st .light::before{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(circle,rgba(201,166,90,.95) 0,rgba(201,166,90,.35) 6%,rgba(201,166,90,.12) 18%,transparent 48%);
  animation:breathe 5.5s ease-in-out infinite}
@keyframes breathe{0%,100%{transform:scale(1);opacity:.9}50%{transform:scale(1.14);opacity:1}}
.st[data-scene="2"] .light{transform:translate(calc(14*var(--u)),calc(-2*var(--u)))}
.st[data-scene="3"] .light{transform:translate(calc(32*var(--u)),calc(-2*var(--u)))}
.st[data-scene="4"] .light{transform:translate(calc(66*var(--u)),calc(70*var(--u)))}
.st[data-scene="5"] .light,.st[data-scene="end"] .light{transform:translate(calc(68*var(--u)),calc(6*var(--u)));opacity:.6}
.st .dawn{position:absolute;z-index:1;inset:auto -10% -30% 20%;height:80%;pointer-events:none;opacity:0;transform:translateY(12%);
  background:radial-gradient(60% 60% at 70% 80%,rgba(196,150,74,.55) 0,rgba(196,150,74,.22) 35%,transparent 70%);transition:opacity 2.4s,transform 2.4s}
.st[data-scene="4"] .dawn{opacity:1;transform:none}

/* layer 4: vignette and film grain over everything */
.st .vig{position:absolute;inset:0;z-index:4;pointer-events:none;background:radial-gradient(115% 100% at 50% 48%,transparent 56%,rgba(4,12,24,.5) 100%)}
.st .grain{position:absolute;inset:-60%;z-index:4;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
  background-size:220px 220px;animation:grain .7s steps(5) infinite}
@keyframes grain{0%{transform:translate(0,0)}20%{transform:translate(-3%,2%)}40%{transform:translate(2%,-3%)}60%{transform:translate(-2%,-2%)}80%{transform:translate(3%,3%)}100%{transform:translate(0,0)}}

/* chrome */
.st .brand{position:absolute;z-index:3;left:calc(5*var(--u));top:calc(3.1*var(--u));line-height:1}
.st .brand b{display:block;font-family:var(--serif);font-weight:500;font-size:calc(2.5*var(--u));letter-spacing:.01em;color:#fff}
.st .brand small{display:block;margin-top:calc(.7*var(--u));font-size:calc(.85*var(--u));letter-spacing:.28em;color:var(--gold-soft);font-weight:600}
.st .eye{position:absolute;z-index:3;left:calc(5*var(--u));top:calc(9.6*var(--u));font-size:calc(.9*var(--u));letter-spacing:.24em;color:var(--gold-soft);font-weight:600;white-space:nowrap}
.st .prog{position:absolute;z-index:3;left:calc(5*var(--u));bottom:calc(6*var(--u));display:flex;gap:calc(.8*var(--u))}
.st .prog i{position:relative;display:block;width:calc(3.2*var(--u));height:2px;background:rgba(255,255,255,.18);border-radius:2px;overflow:hidden;transition:background .5s}
.st .prog i.on{background:rgba(255,255,255,.4)}
.st .prog i.cur{background:rgba(201,166,90,.3)}
.st .prog i.cur::after{content:"";position:absolute;left:0;top:0;bottom:0;width:calc(var(--p,0)*100%);background:var(--gold-soft);transition:width .45s linear}
.st .foot{position:absolute;z-index:3;left:calc(5*var(--u));bottom:calc(3.4*var(--u));font-size:calc(.8*var(--u));letter-spacing:.24em;color:rgba(233,239,245,.6);font-weight:600;white-space:nowrap}

/* ---- scenes stack in one cell; only the current one is visible ---- */
.sc{grid-area:1/1;position:relative;aspect-ratio:16/9;z-index:2;opacity:0;visibility:hidden;transform:translateY(calc(-.8*var(--u)));filter:blur(3px);
  transition:opacity .55s ease,transform .55s ease,filter .55s ease,visibility 0s .55s}
.sc.on{opacity:1;visibility:visible;transform:none;filter:none;transition:opacity .8s .2s,transform .9s .2s cubic-bezier(.2,.7,.2,1),filter .8s .2s,visibility 0s}
.sc .copy{position:absolute;left:calc(5*var(--u));top:calc(21*var(--u));width:calc(51*var(--u))}
.sc h3{font-family:var(--serif);font-weight:400;font-size:calc(5*var(--u));line-height:1.1;letter-spacing:-.005em;color:#fff;margin:0;text-wrap:balance;text-shadow:0 2px 24px rgba(4,12,24,.5)}
.sc h3 .g{color:var(--gold-soft)}
.sc h3 .w{display:inline-block;opacity:0;transform:translateY(.55em);transition:opacity .6s ease,transform .75s cubic-bezier(.2,.7,.2,1);transition-delay:calc(.25s + .075s*var(--i,0))}
.sc.on h3 .w{opacity:1;transform:none}
.sc .sub{margin:calc(2.6*var(--u)) 0 0;font-size:calc(1.65*var(--u));line-height:1.5;color:rgba(233,239,245,.86);max-width:calc(40*var(--u));text-wrap:pretty;
  opacity:0;transform:translateY(calc(1.2*var(--u)));transition:opacity .8s,transform .8s cubic-bezier(.2,.7,.2,1)}
.sc.on .sub{opacity:1;transform:none;transition-delay:1s}
.sc .panel{position:absolute;left:calc(58.4*var(--u));top:calc(17.2*var(--u));width:calc(36.6*var(--u));
  translate:calc(var(--mx)*-.7*var(--u)) calc(var(--my)*-.5*var(--u));transition:translate .9s cubic-bezier(.2,.7,.2,1)}
.sc2 .panel{top:calc(19.3*var(--u))}
.sc3 .panel{top:calc(16.4*var(--u))}
.sc5 .panel{top:calc(16*var(--u))}
.sc .cap{margin:calc(1.4*var(--u)) 0 0;font-size:calc(1.15*var(--u));color:rgba(233,239,245,.66);opacity:0;transform:translateY(6px);transition:opacity .7s,transform .7s}
.sc .card{border-radius:calc(1.3*var(--u));padding:calc(2*var(--u)) calc(2.2*var(--u));box-shadow:0 calc(1.8*var(--u)) calc(4.5*var(--u)) rgba(4,12,24,.5),inset 0 1px 0 rgba(255,255,255,.08)}
.sc .card.navy{background:linear-gradient(160deg,rgba(23,54,90,.92),rgba(17,42,72,.92));border:1px solid rgba(255,255,255,.13);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.sc .card.green{background:linear-gradient(160deg,#256f4d,#1a5a3e);border:1px solid rgba(255,255,255,.14)}
.sc .lbl{display:block;font-size:calc(.78*var(--u));letter-spacing:.22em;font-weight:700;color:var(--gold-soft);margin-bottom:calc(.9*var(--u))}
.sc .card.green .lbl{color:#9fd6b8}
.sc .ttl{display:block;font-family:var(--serif);font-weight:400;font-size:calc(2.35*var(--u));line-height:1.15;color:#fff}
.sc .dsc{display:block;margin-top:calc(.7*var(--u));font-size:calc(1.2*var(--u));color:rgba(233,239,245,.8)}

/* scene 1: two cards link */
.sc1 .card{opacity:0;transform:translateX(calc(3*var(--u))) scale(.98);filter:blur(2px);transition:opacity .8s,transform 1s cubic-bezier(.2,.7,.2,1),filter .8s}
.sc1 .link{height:calc(3.4*var(--u));position:relative}
.sc1 .link::before{content:"";position:absolute;left:50%;top:0;width:1px;height:0;background:linear-gradient(180deg,var(--gold-soft),rgba(201,166,90,.4));transition:height .6s .1s}
.sc1 .link::after{content:"";position:absolute;left:50%;top:calc(50% - 2px);width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--gold-soft);box-shadow:0 0 10px 2px rgba(201,166,90,.5);opacity:0;transition:opacity .3s .5s}
.sc1.on .card.navy{opacity:1;transform:none;filter:none;transition-delay:.6s}
.st.a .sc1 .link::before{height:100%}
.st.a .sc1 .link::after{opacity:1}
.st.a .sc1 .card.green{opacity:1;transform:none;filter:none;transition-delay:.35s}
.st.b .sc1 .cap{opacity:1;transform:none}

/* scene 2: the conventional day fills up */
.sc2 .card.navy{padding-bottom:calc(2.6*var(--u));opacity:0;transform:translateX(calc(3*var(--u))) scale(.98);filter:blur(2px);transition:opacity .8s .5s,transform 1s .5s cubic-bezier(.2,.7,.2,1),filter .8s .5s}
.sc2.on .card.navy{opacity:1;transform:none;filter:none}
.sc2 .blocks{display:grid;grid-template-columns:repeat(5,1fr);gap:calc(.9*var(--u));margin-top:calc(1.2*var(--u))}
.sc2 .blk{position:relative;height:calc(8.6*var(--u));border-radius:calc(.7*var(--u));background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);overflow:hidden}
.sc2 .blk::after{content:"";position:absolute;left:0;right:0;bottom:0;height:0;background:linear-gradient(180deg,#3f6e9e,#2a4f78);transition:height .75s cubic-bezier(.3,1.3,.4,1)}
.sc2 .blk::before{content:"";position:absolute;left:18%;right:18%;top:12%;height:2px;border-radius:2px;background:rgba(255,255,255,.35);z-index:1;opacity:0;transition:opacity .4s .5s}
.st.a .sc2 .blk:nth-child(1)::after{height:100%;transition-delay:0s}
.st.a .sc2 .blk:nth-child(2)::after{height:100%;transition-delay:.4s}
.st.a .sc2 .blk:nth-child(3)::after{height:100%;transition-delay:.8s}
.st.b .sc2 .blk:nth-child(4)::after{height:100%}
.st.a .sc2 .blk:nth-child(-n+3)::before,.st.b .sc2 .blk:nth-child(4)::before{opacity:1}
.sc2 .blk.gap{border-style:dashed;border-color:rgba(201,166,90,0);background:rgba(255,255,255,.04);transition:border-color .6s,box-shadow .6s}
.st.b .sc2 .blk.gap{border-color:rgba(201,166,90,.8);box-shadow:inset 0 0 calc(1.4*var(--u)) rgba(201,166,90,.12)}
.sc2 .st-tick{display:block;width:calc(1.6*var(--u));height:2px;background:var(--gold-soft);margin-top:calc(1.2*var(--u));opacity:0;transition:opacity .5s .6s}
.st.b .sc2 .st-tick{opacity:1}
.st.c .sc2 .cap{opacity:1;transform:none}
.sc2 .cap b{display:block;font-family:var(--serif);font-weight:400;font-size:calc(1.7*var(--u));color:#fff;margin-bottom:calc(.3*var(--u))}

/* scene 3: the afternoon clock and the checklist */
.sc3 .card.navy{display:grid;grid-template-columns:calc(11*var(--u)) 1fr;gap:calc(2*var(--u));align-items:center;opacity:0;transform:translateX(calc(3*var(--u))) scale(.98);filter:blur(2px);transition:opacity .8s .5s,transform 1s .5s cubic-bezier(.2,.7,.2,1),filter .8s .5s}
.sc3.on .card.navy{opacity:1;transform:none;filter:none}
.sc3 .clock{width:calc(11*var(--u));height:calc(11*var(--u))}
.sc3 .clock .arc{stroke:var(--gold-soft);stroke-width:6;fill:none;stroke-linecap:round;stroke-dasharray:62 300;stroke-dashoffset:62;filter:drop-shadow(0 0 4px rgba(201,166,90,.55));transition:stroke-dashoffset 2.4s cubic-bezier(.3,.6,.2,1)}
.sc3 .clock .hand{stroke:var(--gold-soft);stroke-width:2.2;stroke-linecap:round;transform-origin:50px 50px;transform:rotate(30deg);transition:transform 2.4s cubic-bezier(.3,.6,.2,1)}
.st.a .sc3 .clock .arc{stroke-dashoffset:0}
.st.a .sc3 .clock .hand{transform:rotate(135deg)}
.sc3 .time{font-family:var(--serif);font-weight:400;font-size:calc(2.5*var(--u));line-height:1.1;color:#fff;display:block;margin-top:calc(.6*var(--u))}
.sc3 .card.navy.list{display:block;margin-top:calc(1.2*var(--u));padding:calc(1.4*var(--u)) calc(2.2*var(--u));opacity:0;transform:translateY(calc(1*var(--u)));filter:none;transition:opacity .7s,transform .7s}
.st.b .sc3 .list{opacity:1;transform:none}
.sc3 .list div{display:flex;align-items:center;gap:calc(1*var(--u));font-size:calc(1.4*var(--u));color:rgba(233,239,245,.5);padding:calc(.45*var(--u)) 0;transition:color .5s}
.sc3 .list div::before{content:"";width:calc(1.1*var(--u));height:calc(.6*var(--u));border-left:2px solid var(--gold-soft);border-bottom:2px solid var(--gold-soft);transform:rotate(-45deg) translateY(-30%);clip-path:inset(0 100% 0 0);transition:clip-path .45s ease}
.st.b .sc3 .list div:nth-child(1){color:#fff;transition-delay:.3s}.st.b .sc3 .list div:nth-child(1)::before{clip-path:inset(0);transition-delay:.3s}
.st.b .sc3 .list div:nth-child(2){color:#fff;transition-delay:1s}.st.b .sc3 .list div:nth-child(2)::before{clip-path:inset(0);transition-delay:1s}
.st.b .sc3 .list div:nth-child(3){color:#fff;transition-delay:1.7s}.st.b .sc3 .list div:nth-child(3)::before{clip-path:inset(0);transition-delay:1.7s}
.st.c .sc3 .cap{opacity:1;transform:none}

/* scene 4: the green morning card unfolds, the book draws itself */
.sc4 .card.green{text-align:left;padding-top:calc(2.6*var(--u));transform-origin:50% 0;transform:scaleY(.12);opacity:0;transition:transform 1.1s .3s cubic-bezier(.2,.7,.2,1),opacity .6s .3s}
.sc4.on .card.green{transform:none;opacity:1}
.sc4 .card.green>*{opacity:0;transition:opacity .7s}
.st.a .sc4 .card.green>*{opacity:1}
.sc4 .book{display:block;width:calc(9*var(--u));height:calc(6*var(--u));margin:0 auto calc(2*var(--u));filter:drop-shadow(0 0 8px rgba(201,166,90,.35))}
.st.b .sc4 .cap{opacity:1;transform:none}

/* scene 5: the ring draws, a highlight orbits, the book appears */
.sc5 .copy{top:calc(15*var(--u))}
.sc5 h3{font-size:calc(4.7*var(--u))}
.sc5 .ring{position:relative;width:calc(23*var(--u));height:calc(23*var(--u));margin:calc(-2*var(--u)) auto 0}
.sc5 .ring svg:first-child{width:100%;height:100%;transform:rotate(-70deg);overflow:visible}
.sc5 .ring circle{fill:none;stroke-width:1.6;stroke-dasharray:289;stroke-dashoffset:289;transition:stroke-dashoffset 2.6s .3s cubic-bezier(.3,.6,.2,1)}
.sc5.on .ring circle{stroke-dashoffset:0}
.sc5 .ring circle.hl{stroke:#fff;stroke-width:2;stroke-linecap:round;stroke-dasharray:10 279;stroke-dashoffset:0;opacity:0;transition:opacity .8s;transform-origin:50px 50px}
.st.b .sc5 .ring circle.hl{opacity:.75;animation:orbit 5s linear infinite}
@keyframes orbit{to{transform:rotate(360deg)}}
.sc5 .mark{position:absolute;left:50%;top:50%;width:calc(11.5*var(--u));height:auto;transform:translate(-50%,-52%) scale(.92);opacity:0;transition:opacity 1.1s ease,transform 1.2s cubic-bezier(.2,.7,.2,1);filter:drop-shadow(0 0 14px rgba(201,166,90,.3))}
.st.a .sc5 .mark{opacity:1;transform:translate(-50%,-52%)}
.sc5 .name{display:block;text-align:center;font-family:var(--serif);font-weight:400;font-size:calc(2*var(--u));color:#fff;margin-top:calc(1.2*var(--u));opacity:0;transform:translateY(6px);transition:opacity .8s,transform .8s}
.st.b .sc5 .name{opacity:1;transform:none}
/* the book icon draws its own lines */
.book path,.book line{fill:none;stroke:var(--gold-soft);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:300;stroke-dashoffset:300;transition:stroke-dashoffset 1.4s ease}
.book line{stroke-dasharray:40;stroke-dashoffset:40;transition:stroke-dashoffset .6s ease}
.st.a .book path{stroke-dashoffset:0}
.st.a .book line{stroke-dashoffset:0}
.st.a .book line:nth-of-type(1){transition-delay:.9s}.st.a .book line:nth-of-type(2){transition-delay:1.05s}.st.a .book line:nth-of-type(3){transition-delay:1.2s}
.st.a .book line:nth-of-type(4){transition-delay:1.35s}.st.a .book line:nth-of-type(5){transition-delay:1.5s}.st.a .book line:nth-of-type(6){transition-delay:1.65s}.st.a .book line:nth-of-type(7){transition-delay:1.8s}

/* ---- end row and controls ---- */
.st-end{position:absolute;z-index:5;left:calc(5*var(--u));bottom:calc(4.5*var(--u));display:flex;justify-content:flex-start;gap:12px;opacity:0;pointer-events:none;transition:opacity .8s}
.st[data-scene="end"] .prog,.st[data-scene="end"] .foot{opacity:0;transition:opacity .4s}
.st[data-scene="end"] .st-end{opacity:1;pointer-events:auto}
.story-bar{display:flex;align-items:center;gap:12px;padding:16px clamp(18px,4vw,48px) 18px;flex-wrap:wrap;background:#081628;border-top:1px solid rgba(255,255,255,.08)}
.story-btn{background:transparent;border:1px solid rgba(255,255,255,.26);color:var(--cream);padding:9px 16px;border-radius:10px;font:600 14px var(--sans);cursor:pointer;transition:.2s}
.story-btn:hover{border-color:var(--gold-soft);color:var(--gold-soft)}
.story-btn[aria-pressed="true"]{border-color:var(--gold);color:var(--gold-soft)}
.story-dots{display:flex;gap:8px;margin-left:auto;align-items:center}
.story-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.22);display:block;transition:.3s;cursor:pointer}
.story-dots i.on{background:var(--gold-soft)}
.story-dots i.cur{transform:scale(1.35)}
.story-tr{padding:0 clamp(18px,4vw,48px) 24px;display:none;background:#081628}
.story-tr[data-open="true"]{display:block}
.story-tr ol{margin:0;padding-left:22px;color:var(--muted-ink);font-size:15px;line-height:1.6}
.story-tr li{margin-bottom:6px;cursor:pointer}
.story-tr li.cur{color:#fff}

/* ---- phone: the scene stacks, copy above the panel; the stage scrolls ---- */
@media(max-width:620px){
  dialog.story-dlg{width:100vw;max-height:100dvh;height:100dvh;border-radius:0}
  dialog.story-dlg[open]{display:flex;flex-direction:column;overflow:auto;-webkit-overflow-scrolling:touch}
  .st{flex:none;--u:2.4vw;overflow:hidden;min-height:calc(100dvh - 120px)}
  .st .bg{object-position:50% 30%!important}
  .story-bar{flex:none}
  .sc{aspect-ratio:auto;min-height:0;filter:none;transform:none}
  .sc:not(.on){position:absolute;inset:0 0 auto 0;height:0;overflow:hidden}
  .sc .copy{position:static;width:auto;padding:104px 20px 0}
  .sc h3{font-size:30px}
  .sc .sub{font-size:15px;max-width:none;margin-top:14px}
  .sc .panel{position:static;width:auto;margin:22px 20px 0;padding-bottom:20px;translate:none}
  .st .brand{left:20px;top:18px}.st .brand b{font-size:22px}.st .brand small{font-size:9px;margin-top:5px}
  .st .eye{left:20px;top:64px;font-size:9px}
  .st .prog,.st .foot,.st .vig,.st .grain{display:none}
  .st-end{display:none;position:static;padding:0 20px 20px;justify-content:flex-start}
  .st[data-scene="end"] .st-end{display:flex;opacity:1;pointer-events:auto}
  .story-dots{margin-left:0;width:100%;justify-content:center;margin-top:4px}
  .story-tr{max-height:38dvh;overflow:auto}
}
@media(prefers-reduced-motion:reduce){
  dialog.story-dlg[open]{animation:none}
  .st .light,.st .dawn,.st .bg{transition:none}
  .st .st-tile,.st .st-stars,.st .light::before,.st .grain,.sc5 .ring circle.hl{animation:none}
  .sc h3 .w{transition-delay:0s}
}