/* =========================================================
   AZRA STORYBOARD — 2D MAXIMALIST SCROLL ILLUSTRATION
   Additive layer: does not replace the existing main design.
   ========================================================= */
.az-story{
  --paper:#f4e7c5;
  --ink:#15120f;
  --ink2:#3b3024;
  --gold:#ffd500;
  --purple:#800080;
  --red:#d34b35;
  --cream:#fff6dc;
  position:relative;
  height:1280vh;
  isolation:isolate;
  background:#090807;
  overflow:visible;
}
.az-story__sticky{
  position:sticky;
  top:0;
  height:100svh;
  min-height:620px;
  overflow:hidden;
  background:var(--paper);
  color:var(--ink);
  border-block:3px solid var(--ink);
}
.az-story__paper{
  position:absolute;inset:0;pointer-events:none;
  background:
    radial-gradient(circle at 15% 22%,rgba(128,0,128,.13) 0 2px,transparent 2.5px),
    radial-gradient(circle at 76% 72%,rgba(211,75,53,.10) 0 1.5px,transparent 2px),
    linear-gradient(105deg,transparent 0 49.5%,rgba(21,18,15,.045) 50%,transparent 50.5%),
    var(--paper);
  background-size:31px 31px,43px 43px,100% 100%,auto;
}
.az-story__grain{
  position:absolute;inset:0;pointer-events:none;opacity:.13;
  background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 140 140' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.5'/%3E%3C/svg%3E");
  mix-blend-mode:multiply;
}
.az-story__masthead{
  position:absolute;z-index:20;left:clamp(18px,4vw,70px);right:clamp(18px,4vw,70px);top:20px;
  display:flex;justify-content:space-between;align-items:center;
  font:800 11px/1.1 "JetBrains Mono",monospace;letter-spacing:.17em;
  text-transform:uppercase;
}
.az-story__eyebrow{padding:9px 12px;background:var(--ink);color:var(--gold);box-shadow:6px 6px 0 var(--purple);}
.az-story__counter{font-size:12px}.az-story__counter b{font-size:22px;color:var(--purple)}
.az-story__stage{position:relative;height:100%;max-width:1500px;margin:auto;}
.az-story__headline{
  position:absolute;z-index:12;left:clamp(20px,8vw,125px);top:clamp(95px,14vh,145px);
  transform:rotate(-2deg);pointer-events:none;
}
.az-story__kicker{font:900 11px/1 "JetBrains Mono",monospace;letter-spacing:.14em;background:var(--gold);padding:7px 10px;border:2px solid var(--ink);box-shadow:5px 5px 0 var(--ink);}
.az-story__headline h2{
  margin:18px 0 0;font:900 clamp(38px,5.4vw,82px)/.9 "Syne",sans-serif;
  letter-spacing:-.055em;max-width:780px;text-transform:uppercase;
  text-shadow:5px 5px 0 rgba(128,0,128,.14);
}
.az-story__headline em{font-style:normal;color:var(--purple);text-decoration:underline;text-decoration-thickness:5px;text-underline-offset:7px;}
.az-story__scene{position:absolute;inset:0;overflow:hidden;}
.az-story__ink{position:absolute;inset:8% 3% 0;width:94%;height:85%;z-index:2;pointer-events:none;}
.az-line{fill:none;stroke:var(--ink);stroke-width:4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1800;stroke-dashoffset:1800;opacity:.92;}
.az-line.line-2{stroke:var(--purple);stroke-width:3;stroke-dasharray:12 18;}
.az-line.line-3{stroke:var(--red);stroke-width:5;stroke-dasharray:30 14;}
.az-character{
  position:absolute;z-index:9;left:44%;top:53%;width:110px;height:230px;
  transform:translate(-50%,-50%) rotate(-3deg);transform-origin:50% 85%;
  filter:drop-shadow(8px 10px 0 rgba(21,18,15,.18));
}
.az-character__body{position:absolute;left:28px;top:78px;width:58px;height:90px;background:var(--purple);border:4px solid var(--ink);border-radius:45% 45% 20% 20%;transform:rotate(3deg);}
.az-character__head{position:absolute;left:21px;top:22px;width:69px;height:69px;background:#efb17b;border:4px solid var(--ink);border-radius:50%;z-index:2;}
.az-character__head:after{content:"";position:absolute;left:6px;top:-8px;width:57px;height:28px;background:var(--ink);border:3px solid var(--ink);border-radius:70% 45% 20% 35%;transform:rotate(-8deg);}
.eye{position:absolute;top:34px;width:5px;height:7px;border-radius:50%;background:var(--ink);z-index:3}.eye--l{left:19px}.eye--r{right:19px}
.mouth{position:absolute;left:27px;top:47px;width:14px;height:6px;border-bottom:3px solid var(--ink);border-radius:50%;z-index:3}
.az-character__arm{position:absolute;z-index:1;width:15px;height:78px;background:#efb17b;border:4px solid var(--ink);border-radius:15px;top:86px;transform-origin:50% 8%;}
.az-character__arm--l{left:15px;transform:rotate(38deg)}.az-character__arm--r{right:9px;transform:rotate(-56deg)}
.az-character__leg{position:absolute;top:155px;width:17px;height:82px;background:#202020;border:4px solid var(--ink);border-radius:14px;transform-origin:50% 5%;}
.az-character__leg--l{left:32px;transform:rotate(12deg)}.az-character__leg--r{right:24px;transform:rotate(-17deg)}
.az-character__shadow{position:absolute;left:6px;bottom:-4px;width:100px;height:18px;border-radius:50%;background:rgba(21,18,15,.22);filter:blur(2px);}
.az-bubble{
  position:absolute;z-index:14;left:56%;top:38%;width:min(410px,34vw);min-width:270px;
  padding:25px 28px;background:var(--cream);border:4px solid var(--ink);
  box-shadow:10px 10px 0 var(--purple);transform:rotate(3deg) scale(.9);opacity:0;
}
.az-bubble:before{content:"";position:absolute;inset:7px;border:2px dashed var(--ink);pointer-events:none;}
.az-bubble__tail{position:absolute;left:-24px;bottom:23px;width:30px;height:35px;background:var(--cream);border-left:4px solid var(--ink);border-bottom:4px solid var(--ink);transform:skew(-24deg) rotate(13deg);}
.az-bubble small,.az-paper-card small{display:block;font:900 9px/1 "JetBrains Mono",monospace;letter-spacing:.15em;color:var(--purple);margin-bottom:12px;}
.az-bubble strong{position:relative;display:block;font:900 clamp(22px,2.3vw,36px)/.98 "Syne",sans-serif;text-transform:uppercase;letter-spacing:-.04em;}
.az-paper-card{
  position:absolute;z-index:11;background:#fff2c9;border:3px solid var(--ink);
  box-shadow:8px 8px 0 var(--ink);padding:19px 20px;opacity:0;
}
.az-paper-card--code{left:12%;bottom:18%;width:240px;transform:rotate(-7deg) translateY(40px);}
.az-paper-card--code code{font:700 13px/1.8 "JetBrains Mono",monospace}.az-paper-card--code b{color:var(--purple)}.az-paper-card--code i{color:var(--red)}
.az-paper-card--brain{right:9%;bottom:15%;width:230px;transform:rotate(6deg) translateY(50px);}
.card-pin{position:absolute;top:-12px;left:50%;width:18px;height:18px;border-radius:50%;background:var(--red);border:3px solid var(--ink);transform:translateX(-50%);box-shadow:2px 2px 0 var(--ink);}
.brain-doodle svg{width:100%;height:115px;overflow:visible}.brain-doodle path{fill:none;stroke:var(--purple);stroke-width:5;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:800;stroke-dashoffset:800}
.az-character-note{
  position:absolute;z-index:13;left:calc(44% - 80px);top:72%;width:220px;
  font:700 12px/1.45 "JetBrains Mono",monospace;background:var(--gold);
  border:3px solid var(--ink);padding:12px 14px;transform:rotate(-5deg);opacity:0;
}
.az-character-note b{font-size:20px;color:var(--purple)}.note-arrow{position:absolute;left:45px;top:-65px;width:2px;height:62px;background:var(--ink);transform:rotate(-15deg);}
.note-arrow:after{content:"";position:absolute;left:-6px;top:-1px;border:6px solid transparent;border-bottom:10px solid var(--ink);}
.az-story-caption{
  position:absolute;z-index:10;left:7%;bottom:6%;max-width:520px;padding:16px 20px;
  border-left:7px solid var(--red);font:600 14px/1.55 "Manrope",sans-serif;background:rgba(255,246,220,.83);
  opacity:0;transform:translateY(30px);
}
.az-story-caption b{font:900 11px "JetBrains Mono",monospace;color:var(--red);display:block;letter-spacing:.15em;margin-bottom:4px;}
.az-story__scribble{position:absolute;z-index:4;border:4px solid var(--purple);border-radius:48% 52% 42% 58%;width:130px;height:72px;opacity:.8;transform:rotate(18deg);}
.az-story__scribble--a{right:5%;top:19%;}.az-story__scribble--b{left:2%;bottom:20%;border-color:var(--red);transform:rotate(-19deg) scale(.7);}
.az-story__stamp{position:absolute;z-index:15;right:5%;top:29%;font:900 10px/1.1 "JetBrains Mono",monospace;letter-spacing:.1em;color:var(--red);border:3px solid var(--red);padding:10px 8px;text-align:center;transform:rotate(11deg);mix-blend-mode:multiply;}
.az-story__timeline{position:absolute;z-index:20;right:clamp(20px,4vw,70px);bottom:28%;display:flex;flex-direction:column;gap:9px;}
.az-story__timeline span{display:block;width:8px;height:34px;border:2px solid var(--ink);background:transparent}.az-story__timeline span.active{background:var(--purple);}
.az-story__scrollhint{position:absolute;z-index:20;right:clamp(20px,4vw,70px);bottom:7%;font:900 9px "JetBrains Mono",monospace;letter-spacing:.12em;writing-mode:vertical-rl;}
.az-story__scrollhint span{font-size:22px;color:var(--red);display:block;margin-top:7px;}
.az-story__scroll-track{position:absolute;inset:0;pointer-events:none;}

@media(max-width:800px){
  .az-story{height:1500vh}.az-story__sticky{min-height:580px}
  .az-story__headline{top:90px;left:20px;right:20px}.az-story__headline h2{font-size:42px}
  .az-story__kicker{font-size:8px}
  .az-character{left:36%;top:56%;transform:translate(-50%,-50%) scale(.72)}
  .az-bubble{left:43%;top:40%;min-width:210px;width:47vw;padding:18px;box-shadow:7px 7px 0 var(--purple)}
  .az-bubble strong{font-size:20px}.az-paper-card--code{left:4%;bottom:12%;width:190px}.az-paper-card--brain{right:3%;bottom:25%;width:170px}
  .az-character-note{left:23%;top:72%;width:190px;font-size:10px}.az-story-caption{left:20px;right:60px;bottom:4%;font-size:11px}
  .az-story__stamp{right:17%;top:26%}.az-story__timeline{right:16px;bottom:31%}
  .az-story__scrollhint{right:16px}
}
@media(prefers-reduced-motion:reduce){
  .az-story{height:auto}.az-story__sticky{position:relative;height:auto;min-height:680px}
  .az-line,.brain-doodle path{stroke-dashoffset:0}.az-bubble,.az-paper-card,.az-character-note,.az-story-caption{opacity:1;transform:none}
  .az-story__scroll-track{display:none}
}

/* LONG-FORM STORY MODE: the canvas stays pinned while the page scrolls through the narrative */
.az-story{
  min-height:1280vh;
  overflow:visible !important;
  scroll-margin-top:0;
}
.az-story__sticky{
  position:sticky !important;
  top:0;
  height:100vh;
  min-height:640px;
  max-height:100vh;
  overflow:hidden;
  z-index:30;
  will-change:transform;
}
.az-story__stage{height:100%;}
.az-story__scene{inset:0;}
.az-character--walking .az-character__leg--l{animation:azWalkL .24s infinite alternate ease-in-out;}
.az-character--walking .az-character__leg--r{animation:azWalkR .24s infinite alternate ease-in-out;}
.az-character--walking .az-character__arm--l{animation:azArmL .24s infinite alternate ease-in-out;}
.az-character--walking .az-character__arm--r{animation:azArmR .24s infinite alternate ease-in-out;}
@keyframes azWalkL{to{transform:rotate(-18deg)}}
@keyframes azWalkR{to{transform:rotate(18deg)}}
@keyframes azArmL{to{transform:rotate(55deg)}}
@keyframes azArmR{to{transform:rotate(-35deg)}}
.az-story__timeline{gap:5px;max-height:420px;overflow:hidden;}
.az-story__timeline span{transition:background .2s,transform .2s;}
.az-story__timeline span.active{transform:scaleX(1.8);transform-origin:right;}
@media(max-width:800px){.az-story{height:1500vh !important}.az-story__sticky{height:100svh;min-height:560px}.az-story__timeline{max-height:360px}}
@media(prefers-reduced-motion:reduce){.az-story{height:auto !important}.az-story__sticky{position:relative !important;height:auto;max-height:none;min-height:680px}.az-character--walking *{animation:none !important}}


/* HARD PIN MODE ----------------------------------------------------------
   The story canvas is explicitly fixed to the viewport while its section is
   passing through the viewport. This is intentionally stronger than CSS
   position:sticky because other site wrappers may create overflow/transform
   containing blocks. The section itself remains tall, providing the scroll
   distance for the narrative.
*/
.az-story{position:relative;overflow:visible !important;}
.az-story__sticky{
  position:absolute !important;
  inset:auto 0 auto 0;
  top:0;
  width:100%;
  height:100vh;
  min-height:640px;
  max-height:100vh;
  overflow:hidden;
  z-index:999;
  visibility:hidden;
}
.az-story__sticky.az-story-fixed{
  position:fixed !important;
  inset:0 !important;
  width:100vw;
  height:100vh;
  visibility:visible;
}
.az-story__sticky.az-story-before{
  position:absolute !important;
  top:0 !important;
  visibility:hidden;
}
.az-story__sticky.az-story-finished{
  position:absolute !important;
  top:auto !important;
  bottom:0 !important;
  visibility:visible;
}
@media(max-width:800px){
  .az-story__sticky.az-story-fixed{height:100svh;min-height:560px;}
}