*{box-sizing:border-box}
html,body{margin:0;padding:0;background:#f4f0e8}
html{scroll-behavior:auto}
#scroll-experience{position:relative;height:360vh}
#scroll-video-sticky{position:sticky;top:0;height:100vh;overflow:hidden;background:#fff;perspective:1200px;perspective-origin:50% 48%}
.comic-perspective-stage{position:absolute;inset:0;transform-style:preserve-3d;transform-origin:50% 50%;will-change:transform;backface-visibility:hidden}
#webgl{position:absolute;inset:0;width:100%;height:100%;display:block;transform:translateZ(0);backface-visibility:hidden}
#status{position:absolute;bottom:24px;inset-inline:24px;margin:0;text-align:center;font:14px/1.8 system-ui,sans-serif;color:#302d27;background:#f4f0e8e6;padding:8px;border-radius:4px}
#status[hidden]{display:none}

.comic-story-overlay{
  --gold:#9d651c;--ink:#17140f;--paper:rgba(255,253,248,.94);
  --font-fa:"Vazirmatn",Tahoma,"Segoe UI",system-ui,sans-serif;
  --frame-left:30px;--frame-right:30px;--frame-top:30px;--frame-bottom:30px;
  position:absolute;inset:0;z-index:12;overflow:hidden;pointer-events:none;
  color:var(--ink);direction:rtl;font-family:var(--font-fa);contain:layout paint style;
  transform-style:preserve-3d;backface-visibility:hidden;
}
.story-frame-svg{
  position:absolute;inset:-8%;z-index:1;width:116%;height:116%;overflow:visible;pointer-events:none;
  transform:translateZ(6px);backface-visibility:hidden;
}
.story-frame-matte{fill:#fff;stroke:none}
.story-frame-ink{fill:none;stroke:var(--ink);stroke-width:4.6;stroke-linecap:square;stroke-linejoin:bevel;vector-effect:non-scaling-stroke}
.story-scenes,.story-scene{position:absolute;inset:0;z-index:2;pointer-events:none}
.story-sr-only{position:absolute!important;width:1px!important;height:1px!important;padding:0!important;margin:-1px!important;overflow:hidden!important;clip:rect(0,0,0,0)!important;white-space:nowrap!important;border:0!important}

.story-beat{
  --beat-drift:20px;
  position:absolute;z-index:3;width:min(31vw,390px);opacity:0;pointer-events:none;
  transform:translate3d(0,var(--beat-drift),26px);will-change:transform,opacity;
  backface-visibility:hidden;text-align:right;
}
.story-beat__copy{position:relative;max-width:100%;pointer-events:auto;touch-action:pan-y;user-select:text}
.story-beat__copy::before{
  content:"";position:absolute;inset-block:3px auto;inset-inline-start:-15px;width:2px;height:28px;
  background:var(--gold);opacity:.72;
}
.story-beat__chapter{
  display:flex;align-items:center;gap:8px;margin:0 0 9px;color:rgba(64,45,22,.64);
  font:600 10px/1 var(--font-fa);letter-spacing:.03em;
}
.story-beat__chapter b{display:grid;place-items:center;min-width:25px;height:25px;padding:0 5px;border:1px solid rgba(157,101,28,.52);color:var(--gold);font-weight:700}
.story-beat__text{margin:0;max-width:18ch;color:var(--ink);font:600 clamp(19px,1.72vw,28px)/1.6 var(--font-fa);letter-spacing:-.018em;text-wrap:balance}
.story-beat__text strong{font-weight:760}
.story-beat__support{display:block;margin-top:10px;max-width:34ch;color:rgba(30,25,19,.67);font:430 clamp(11px,.88vw,14px)/1.8 var(--font-fa)}
.story-beat__headline{display:block;margin-top:12px;color:var(--ink);font:700 clamp(25px,2.6vw,42px)/1.35 var(--font-fa);letter-spacing:-.025em}

.story-beat--support .story-beat__text{font-weight:450;font-size:clamp(16px,1.34vw,22px);line-height:1.78;color:rgba(24,20,15,.84)}
.story-beat--revelation .story-beat__text{font-weight:760;font-size:clamp(22px,2.18vw,35px);line-height:1.52;max-width:16ch}
.story-beat--brand{text-align:center;width:min(46vw,560px)}
.story-beat--brand .story-beat__copy::before{display:none}
.story-beat--brand .story-beat__text{max-width:none;color:#8f5a16;font:800 clamp(35px,5vw,76px)/1 var(--font-fa);letter-spacing:.12em;direction:ltr}
.story-beat--brand .story-beat__support{margin-inline:auto;max-width:40ch}
.story-beat--surface .story-beat__copy{padding:17px 21px 18px;background:var(--paper);border:1px solid rgba(23,20,15,.78)}
.story-beat--surface .story-beat__copy::after{content:"";position:absolute;inset:5px -5px -5px 5px;border-inline-end:1px solid rgba(157,101,28,.32);border-block-end:1px solid rgba(157,101,28,.32);pointer-events:none}

.story-beat--top-left{left:calc(var(--frame-left) + clamp(22px,5vw,86px));top:calc(var(--frame-top) + clamp(24px,7vh,80px))}
.story-beat--top-right{right:calc(var(--frame-right) + clamp(20px,4.5vw,78px));top:calc(var(--frame-top) + clamp(28px,8vh,92px))}
.story-beat--mid-left{left:calc(var(--frame-left) + clamp(24px,5.5vw,96px));top:40%}
.story-beat--mid-right{right:calc(var(--frame-right) + clamp(22px,5vw,88px));top:39%}
.story-beat--bottom-left{left:calc(var(--frame-left) + clamp(26px,5vw,92px));bottom:calc(var(--frame-bottom) + clamp(28px,8vh,90px))}
.story-beat--bottom-right{right:calc(var(--frame-right) + clamp(24px,4.7vw,86px));bottom:calc(var(--frame-bottom) + clamp(26px,8vh,88px))}
.story-beat--center-top{left:50%;top:calc(var(--frame-top) + clamp(22px,6vh,68px));translate:-50% 0}
.story-beat--center-bottom{left:50%;bottom:calc(var(--frame-bottom) + clamp(26px,7vh,82px));translate:-50% 0;text-align:center}
.story-beat--center-bottom .story-beat__text,.story-beat--center-bottom .story-beat__support{margin-inline:auto}
.story-beat--center-bottom .story-beat__copy::before{display:none}
.story-beat--center{left:50%;top:50%;translate:-50% -50%;text-align:center;width:min(62vw,680px)}
.story-beat--center .story-beat__copy::before{display:none}

.story-beat--cta .story-beat__copy{padding:clamp(20px,3vw,36px);background:rgba(255,253,248,.965);border:1px solid rgba(23,20,15,.82)}
.story-beat--cta .story-beat__text{max-width:27ch;margin-inline:auto;font-size:clamp(17px,1.7vw,26px);font-weight:500}
.story-beat--cta .story-beat__support{margin:10px auto 0;color:rgba(30,25,19,.68);font-size:clamp(12px,1vw,15px)}
.story-cta{
  position:relative;margin-top:20px;padding:11px 25px;border:1px solid var(--ink);border-radius:0;
  background:transparent;color:var(--ink);font:650 14px/1.2 var(--font-fa);cursor:pointer;pointer-events:auto;
  transition:background-color .2s ease,color .2s ease,border-color .2s ease;
}
.story-cta:hover,.story-cta:focus-visible{background:var(--ink);color:#fffdf8;border-color:var(--ink);outline:none}

@media (max-width:900px){
  .story-beat{width:min(43vw,360px)}
  .story-beat--brand{width:min(58vw,500px)}
  .story-beat--center{width:min(72vw,600px)}
}

@media (max-width:760px){
  .story-beat{
    left:50%!important;right:auto!important;width:min(50vw,260px);translate:-50% 0;text-align:right;
  }
  .story-beat--top-left,.story-beat--top-right,.story-beat--center-top{top:calc(var(--frame-top) + 12vh);bottom:auto}
  .story-beat--mid-left,.story-beat--mid-right{top:39%;bottom:auto}
  .story-beat--bottom-left,.story-beat--bottom-right,.story-beat--center-bottom{top:auto;bottom:calc(var(--frame-bottom) + 10vh)}
  .story-beat--center{top:50%;bottom:auto;translate:-50% -50%;width:min(48vw,270px);text-align:center}
  .story-beat--brand{left:45%!important;width:min(54vw,290px);text-align:center}
  .story-beat__copy{max-width:100%}
  .story-beat__text{font-size:clamp(18px,5.1vw,25px);line-height:1.58;max-width:19ch}
  .story-beat--support .story-beat__text{font-size:clamp(15px,4.3vw,20px);line-height:1.72}
  .story-beat--revelation .story-beat__text{font-size:clamp(21px,6.2vw,30px)}
  .story-beat--brand .story-beat__text{font-size:clamp(28px,8.5vw,44px)}
  .story-beat--surface .story-beat__copy{padding:15px 17px 16px}
}

@media (prefers-reduced-motion:reduce){
  .story-beat{will-change:opacity;transform:translate3d(0,0,26px)!important}
  .story-cta{transition:none}
}