/* ============================================================
   ANUKIN SKYWALKER — $ANUKIN
   Chaotic illustrated space-opera comic.
   ============================================================ */

:root{
  --black:#100806;
  --crimson:#6E100A;
  --lava:#E8310B;
  --molten:#FF730D;
  --gold:#FFE3A1;
  --blue:#48C8FF;
  --cream:#FFF4DC;
  --ink:#0A0504;

  --ol:4px;                 /* standard comic outline */
  --ol-thick:6px;
  --shadow-hard:10px 10px 0 var(--crimson);
  --shadow-ink:8px 8px 0 var(--ink);

  --head:"Archivo Black","Arial Black",system-ui,sans-serif;
  --body:"Inter","Helvetica Neue",Arial,sans-serif;
}

*,*::before,*::after{box-sizing:border-box}

html{scroll-behavior:smooth}

body{
  margin:0;
  background:var(--black);
  color:var(--cream);
  font-family:var(--body);
  overflow-x:hidden;
  /* rough print texture across the whole page */
  background-image:
    repeating-linear-gradient(0deg,rgba(255,255,255,.012) 0 1px,transparent 1px 3px);
}

img{display:block;max-width:100%}

::selection{background:var(--blue);color:var(--ink)}

:focus-visible{
  outline:4px solid var(--blue);
  outline-offset:3px;
}

/* ---------- shared comic furniture ---------- */

.narration{
  display:inline-block;
  background:var(--cream);
  color:var(--ink);
  border:var(--ol) solid var(--ink);
  box-shadow:6px 6px 0 rgba(10,5,4,.85);
  padding:.7em 1.1em;
  font-weight:800;
  font-size:clamp(.72rem,1.05vw,.95rem);
  letter-spacing:.06em;
  text-transform:uppercase;
  line-height:1.35;
  max-width:46ch;
}
.narration--prose{
  text-transform:none;
  letter-spacing:.005em;
  font-weight:600;
  font-size:clamp(.85rem,1.1vw,1rem);
  line-height:1.55;
}

.bubble{
  position:relative;
  display:inline-block;
  background:var(--cream);
  color:var(--ink);
  border:var(--ol) solid var(--ink);
  border-radius:34px;
  padding:.85em 1.3em;
  font-weight:700;
  font-size:clamp(.8rem,1.1vw,1.02rem);
  line-height:1.4;
  box-shadow:6px 6px 0 rgba(10,5,4,.75);
  max-width:30ch;
}
/* tail — black outline layer then cream fill on top */
.bubble::before,.bubble::after{
  content:"";position:absolute;width:0;height:0;
}
.bubble::before{
  bottom:calc(var(--ol) * -1 - 26px);left:38px;
  border:15px solid transparent;
  border-top-color:var(--ink);border-right-width:26px;
}
.bubble::after{
  bottom:calc(var(--ol) * -1 - 14px);left:45px;
  border:10px solid transparent;
  border-top-color:var(--cream);border-right-width:18px;
}
.bubble--up::before{
  bottom:auto;top:calc(var(--ol) * -1 - 26px);
  border-top-color:transparent;border-bottom-color:var(--ink);
}
.bubble--up::after{
  bottom:auto;top:calc(var(--ol) * -1 - 14px);
  border-top-color:transparent;border-bottom-color:var(--cream);
}

/* big headline lettering: heavy, condensed, italic, thick black outline */
.shout{
  margin:0;
  font-family:var(--head);
  font-style:italic;
  font-weight:900;
  line-height:.92;
  letter-spacing:-.015em;
  text-transform:uppercase;
  color:var(--gold);
  transform:scaleX(.94);
  transform-origin:left center;
  /* real stroke for the thick comic outline; the crimson offset sits behind it */
  -webkit-text-stroke:5px var(--ink);
  paint-order:stroke fill;
  text-shadow:12px 12px 0 rgba(110,16,10,.92);
}

.label{
  font-family:var(--head);
  font-size:.68rem;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
}

/* slanted panel edges */
.slant-b{clip-path:polygon(0 0,100% 0,100% calc(100% - 42px),0 100%)}
.slant-t{clip-path:polygon(0 42px,100% 0,100% 100%,0 100%)}

/* ---------- buttons ---------- */

.btn{
  position:relative;
  display:inline-flex;align-items:center;gap:.55em;
  font-family:var(--head);
  font-size:clamp(.82rem,1.05vw,1rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  text-decoration:none;
  padding:.95em 1.5em;
  border:var(--ol) solid var(--ink);
  cursor:pointer;
  transition:transform .13s ease,box-shadow .13s ease,filter .13s ease;
}
.btn--copy{
  background:var(--ink);
  color:var(--cream);
  border-color:var(--blue);
  box-shadow:7px 7px 0 rgba(72,200,255,.32),0 0 26px rgba(72,200,255,.25);
}
.btn--x{
  background:var(--cream);
  color:var(--ink);
  box-shadow:var(--shadow-ink);
}
/* primary action: molten so it reads ahead of Copy CA and X */
.btn--buy{
  background:var(--molten);
  color:var(--ink);
  border-color:var(--ink);
  box-shadow:7px 7px 0 var(--crimson);
}
.btn--buy:hover{box-shadow:10px 10px 0 var(--crimson);filter:brightness(1.08)}
.btn--big{
  font-size:clamp(1rem,1.7vw,1.5rem);
  padding:1.05em 1.8em;
  background:var(--cream);color:var(--ink);
  box-shadow:10px 10px 0 var(--crimson);
}

.btn:hover{transform:rotate(-1.5deg) translate(-2px,-2px)}
.btn--copy:hover{
  border-color:#9ae0ff;
  box-shadow:10px 10px 0 rgba(72,200,255,.45),0 0 36px rgba(72,200,255,.4);
}
.btn--x:hover,.btn--big:hover{box-shadow:12px 12px 0 var(--crimson)}
.btn:active{transform:translate(3px,3px) rotate(0deg);box-shadow:2px 2px 0 rgba(10,5,4,.8)}

/* starburst accents around a hovered button — outside the text */
.btn .burst{
  position:absolute;pointer-events:none;
  width:16px;height:16px;opacity:0;
  background:var(--gold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.btn .burst:nth-of-type(1){top:-16px;left:-14px}
.btn .burst:nth-of-type(2){bottom:-14px;right:-12px;width:12px;height:12px}
.btn:hover .burst{animation:pop-burst .45s ease forwards}
.btn:hover .burst:nth-of-type(2){animation-delay:.1s}
@keyframes pop-burst{
  0%{opacity:0;transform:scale(.2) rotate(0)}
  55%{opacity:1;transform:scale(1.15) rotate(25deg)}
  100%{opacity:.9;transform:scale(1) rotate(16deg)}
}

/* ============================================================
   HERO — full-width illustrated cover
   ============================================================ */

.hero{
  position:relative;
  min-height:100svh;
  display:flex;flex-direction:column;
  overflow:hidden;
  background:#100806;
}
/* the art band holds the banner plus every overlay keyed to it */
.hero__band{position:relative;width:100%}

/* The banner is 3:1 and everything that matters spans y 5-95% of it:
   wordmark 8-38% x / 28-58% y, head 54-72% x, hands+hilt down to 95% y,
   blade exiting top-right. A vertical cover-crop would cut the wordmark or
   the hands, so the art keeps its own aspect and the copy sits below it. */
.hero__art{
  position:relative;
  width:100%;
  height:auto;
  aspect-ratio:2172/724;
  object-fit:cover;
  object-position:50% 50%;
  z-index:0;
  animation:art-in 1.1s ease both;
}
@keyframes art-in{from{opacity:0;transform:scale(1.04)}to{opacity:1;transform:scale(1)}}

/* only blends the banner's bottom edge into the copy area below —
   the art itself stays unobscured so the wordmark and face read clean */
.hero__scrim{
  position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    /* readable bed for the title plate on the left half */
    linear-gradient(90deg,rgba(16,8,6,.78) 0%,rgba(16,8,6,.5) 26%,transparent 54%),
    linear-gradient(180deg,transparent 74%,rgba(16,8,6,.72) 92%,var(--black) 100%);
}

/* soft lava illumination from below */
.hero__glow{
  position:absolute;left:0;right:0;bottom:0;height:52%;z-index:1;pointer-events:none;
  background:radial-gradient(120% 100% at 42% 120%,rgba(232,49,11,.42),transparent 66%);
  mix-blend-mode:screen;
  animation:lava-breathe 7s ease-in-out infinite;
}
@keyframes lava-breathe{50%{opacity:.62}}

/* one restrained blue flash along the blade on load */
.hero__saberflash{
  position:absolute;z-index:2;pointer-events:none;
  top:-6%;right:0;width:32%;height:112%;
  background:linear-gradient(215deg,transparent 40%,rgba(72,200,255,.5) 50%,transparent 60%);
  filter:blur(6px);
  opacity:0;
  animation:saber-flash 1s ease .55s 1;
}
@keyframes saber-flash{0%{opacity:0;transform:translateY(40px)}40%{opacity:1}100%{opacity:0;transform:translateY(-40px)}}

/* restrained persistent saber glow */
.hero__saberglow{
  position:absolute;z-index:1;pointer-events:none;
  top:0;right:0;width:30%;height:72%;
  background:linear-gradient(215deg,transparent 44%,rgba(72,200,255,.17) 51%,transparent 59%);
  filter:blur(14px);
  animation:glow-pulse 4.5s ease-in-out infinite;
}
@keyframes glow-pulse{50%{opacity:.55}}

/* drifting embers (CSS only) */
.embers{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden}
.embers i{
  position:absolute;bottom:-14px;
  width:4px;height:4px;border-radius:50%;
  background:var(--molten);
  box-shadow:0 0 10px 2px rgba(255,115,13,.75);
  opacity:0;
  animation:ember-rise var(--dur,13s) linear var(--del,0s) infinite;
}
@keyframes ember-rise{
  0%{opacity:0;transform:translate(0,0) scale(.6)}
  12%{opacity:.95}
  70%{opacity:.6}
  100%{opacity:0;transform:translate(var(--dx,30px),-104vh) scale(.25)}
}

/* ---- top strip ---- */
.cover-top{
  position:relative;z-index:5;
  display:flex;justify-content:space-between;align-items:center;
  gap:16px;
  padding:18px clamp(20px,4vw,52px);
}
.issue{
  font-family:var(--head);
  font-size:.64rem;letter-spacing:.22em;text-transform:uppercase;
  color:var(--gold);
  background:rgba(16,8,6,.6);
  border:2px solid rgba(255,227,161,.45);
  padding:.5em .85em;
}
.toplink{
  font-family:var(--head);
  font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--cream);text-decoration:none;
  border:2px solid var(--cream);
  padding:.5em .9em;
  background:rgba(16,8,6,.55);
  transition:background .15s,color .15s,transform .15s;
}
.toplink:hover{background:var(--cream);color:var(--ink);transform:rotate(-1.5deg)}

/* ---- hero body ---- */
.hero__inner{
  position:relative;z-index:5;
  flex:1;
  display:flex;align-items:center;
  padding:clamp(18px,3vh,34px) clamp(20px,4vw,52px) clamp(18px,2.5vh,30px);
}
/* titles left, contract controls right — fills the width the banner leaves
   and keeps the whole block inside the first screen */
.hero__copy{
  display:grid;
  grid-template-columns:minmax(0,.85fr) minmax(380px,1fr);
  align-items:center;
  gap:clamp(20px,3.5vw,54px);
  width:100%;
}
.hero__titles{min-width:0}

.hero__narr{
  transform:rotate(-2.2deg);
  margin-bottom:12px;
  animation:narr-land .55s cubic-bezier(.2,1.4,.5,1) .95s both;
}
@keyframes narr-land{
  from{opacity:0;transform:rotate(-14deg) translateY(-26px) scale(.86)}
  to{opacity:1;transform:rotate(-2.2deg) translateY(0) scale(1)}
}

/* SKYWALKER under the banner's baked-in ANUKIN */
.hero__sky{
  display:flex;align-items:center;gap:clamp(10px,1.6vw,20px);
  flex-wrap:wrap;
  margin:0 0 12px;
}
/* Title plate over the banner's empty lava plain.
   Measured on the delivered art: character occupies x 55-85%, so the plate
   is capped at 50% and the bubble moved to the bottom-left below it. */
.hero__plate{
  position:absolute;z-index:6;
  left:clamp(20px,4vw,56px);
  top:50%;
  transform:translateY(-54%);
  max-width:min(46%,620px);
}

.hero__name{
  margin:0 0 12px;
  font-family:var(--head);
  font-size:clamp(1.8rem,4.6vw,4.3rem);
  line-height:.98;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--gold);
  -webkit-text-stroke:4px var(--ink);
  paint-order:stroke fill;
  text-shadow:7px 7px 0 rgba(110,16,10,.9);
  animation:sky-slide .6s cubic-bezier(.2,.9,.3,1) .75s both;
}
.hero__name-last{
  display:block;
  font-size:.76em;
  letter-spacing:clamp(.06em,.3vw,.18em);
  color:var(--cream);
}

.sky-word{
  font-family:var(--head);
  font-size:clamp(1.3rem,3.4vw,2.9rem);
  letter-spacing:clamp(.14em,.5vw,.3em);
  text-transform:uppercase;
  color:var(--gold);
  text-shadow:0 3px 0 var(--ink),0 0 24px rgba(255,115,13,.5);
  animation:sky-slide .6s cubic-bezier(.2,.9,.3,1) .75s both;
}
@keyframes sky-slide{from{opacity:0;transform:translateX(-46px)}to{opacity:1;transform:translateX(0)}}

.ticker-badge{
  font-family:var(--head);
  font-size:clamp(.78rem,1.4vw,1.15rem);
  letter-spacing:.08em;
  background:var(--ink);
  color:var(--gold);
  border:var(--ol) solid var(--molten);
  padding:.42em .8em;
  animation:sky-slide .6s cubic-bezier(.2,.9,.3,1) .88s both;
}

.hero__tag{
  margin:0;
  font-family:var(--head);
  font-size:clamp(.92rem,1.65vw,1.4rem);
  line-height:1.2;
  letter-spacing:.02em;
  text-transform:uppercase;
  color:var(--cream);
  text-shadow:0 2px 0 var(--ink),0 0 18px rgba(16,8,6,.9);
  animation:sky-slide .6s ease 1.0s both;
}

/* ---- CA plate ---- */
.ca{
  background:var(--cream);
  color:var(--ink);
  border:var(--ol-thick) solid var(--ink);
  box-shadow:12px 12px 0 var(--crimson);
  padding:clamp(12px,1.3vw,17px);
  width:100%;
  animation:ca-rise .6s cubic-bezier(.2,1.1,.4,1) 1.15s both;
}
@keyframes ca-rise{from{opacity:0;transform:translateY(34px)}to{opacity:1;transform:translateY(0)}}

.ca__label{
  font-family:var(--head);
  font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--crimson);
  margin-bottom:7px;
}
.ca__addr{
  font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  font-size:clamp(.72rem,1.15vw,1rem);
  font-weight:700;
  letter-spacing:.01em;
  word-break:break-all;
  overflow-wrap:anywhere;
  line-height:1.4;
  background:rgba(16,8,6,.07);
  border:2px dashed rgba(10,5,4,.35);
  padding:.6em .7em;
  margin-bottom:12px;
}
.ca__row{display:flex;gap:12px;flex-wrap:wrap}

/* ---- hero speech bubble ----
   Sits in the banner's empty lava plain (x 0-50%, y 60-100%), clear of the
   wordmark above it and of his hair, face and blade on the right. */
.hero__bubble{
  position:absolute;z-index:6;
  left:clamp(20px,4vw,56px);
  bottom:5%;
  text-transform:none;
  letter-spacing:0;
  animation:bubble-pop .5s cubic-bezier(.2,1.5,.45,1) 1.45s both;
}
@keyframes bubble-pop{
  from{opacity:0;transform:scale(.55)}
  70%{opacity:1;transform:scale(1.06)}
  to{opacity:1;transform:scale(1)}
}

/* ============================================================
   ROCK TRANSITION
   ============================================================ */

.rocks{
  position:relative;
  overflow:hidden;
  background:var(--black);
  padding:0;
  margin-top:-2px;
}
.rocks__silhouette{display:block;width:100%;height:clamp(90px,13vw,190px)}
.rocks__strip{
  position:absolute;z-index:3;
  left:50%;top:48%;
  transform:translate(-50%,-50%) rotate(-2deg);
  white-space:nowrap;
}
.rocks__streak{
  position:absolute;z-index:2;left:-10%;right:-10%;top:30%;
  height:4px;
  background:linear-gradient(90deg,transparent,var(--blue) 35%,#fff 50%,var(--blue) 65%,transparent);
  box-shadow:0 0 22px 4px rgba(72,200,255,.65);
  transform:rotate(-2.6deg) scaleX(0);
  transform-origin:left center;
  opacity:0;
}
.in-view .rocks__streak{animation:streak-pass 1.05s ease .15s both}
@keyframes streak-pass{
  0%{opacity:0;transform:rotate(-2.6deg) scaleX(0)}
  25%{opacity:1}
  60%{opacity:1;transform:rotate(-2.6deg) scaleX(1)}
  100%{opacity:0;transform:rotate(-2.6deg) scaleX(1)}
}
.spark{
  position:absolute;z-index:4;
  width:22px;height:22px;
  background:var(--gold);
  clip-path:polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
  opacity:0;
}
.in-view .spark{animation:spark-flash .7s ease both}
.spark:nth-of-type(2){animation-delay:.18s}
.spark:nth-of-type(3){animation-delay:.34s}
@keyframes spark-flash{
  0%{opacity:0;transform:scale(.3) rotate(0)}
  50%{opacity:1;transform:scale(1.2) rotate(30deg)}
  100%{opacity:0;transform:scale(.9) rotate(45deg)}
}

/* ============================================================
   SCENES — shared
   ============================================================ */

.scene{position:relative;overflow:hidden;background:var(--black)}
.scene__frame{contain:paint}   /* keeps .sweep from bleeding past the frame */

.scene__frame{
  position:relative;
  width:100%;
  aspect-ratio:16/9;
  overflow:hidden;
  border-top:var(--ol-thick) solid var(--ink);
  border-bottom:var(--ol-thick) solid var(--ink);
}
.scene__img{
  position:absolute;inset:0;
  width:100%;height:100%;
  object-fit:cover;
  opacity:0;
  transform:scale(1.03);
  transition:opacity .9s ease,transform 1.2s ease;
}
.in-view .scene__img{opacity:1;transform:scale(1)}

/* text legibility over art */
.scene__wash{position:absolute;inset:0;pointer-events:none}
.wash--top{background:linear-gradient(180deg,rgba(16,8,6,.8) 0%,rgba(16,8,6,.3) 30%,transparent 52%)}
.wash--tl{background:
  linear-gradient(115deg,rgba(16,8,6,.88) 0%,rgba(16,8,6,.45) 34%,transparent 56%),
  linear-gradient(180deg,rgba(16,8,6,.55) 0%,transparent 26%)}
.wash--bl{background:linear-gradient(0deg,rgba(16,8,6,.86) 0%,rgba(16,8,6,.3) 34%,transparent 58%)}

.scene__overlay{position:absolute;inset:0;z-index:4;pointer-events:none}
.scene__overlay > *{pointer-events:auto}

/* reveal helper */
.rev{opacity:0;transform:translateY(26px);transition:opacity .6s ease,transform .6s cubic-bezier(.2,.9,.3,1)}
.in-view .rev{opacity:1;transform:none}
.in-view .rev.d1{transition-delay:.12s}
.in-view .rev.d2{transition-delay:.26s}
.in-view .rev.d3{transition-delay:.4s}
.in-view .rev.d4{transition-delay:.54s}

.rev-l{opacity:0;transform:translateX(-40px)}
.in-view .rev-l{opacity:1;transform:none;transition:opacity .6s ease .2s,transform .6s cubic-bezier(.2,.9,.3,1) .2s}
.rev-r{opacity:0;transform:translateX(40px)}
.in-view .rev-r{opacity:1;transform:none;transition:opacity .6s ease .3s,transform .6s cubic-bezier(.2,.9,.3,1) .3s}

.bubble-rev{opacity:0;transform:scale(.6)}
.in-view .bubble-rev{animation:bubble-pop .55s cubic-bezier(.2,1.5,.45,1) .55s both}

/* ============================================================
   SCENE 2 — PLATFORM
   ============================================================ */

.platform .shout{
  position:absolute;z-index:5;
  top:4%;left:3.5%;
  max-width:62%;              /* stops short of the figure on the right */
  font-size:clamp(1.6rem,4.6vw,4.6rem);
}
.platform__narr{position:absolute;z-index:5;right:3.5%;bottom:7%;max-width:min(42ch,36%);transform:rotate(-1deg)}

/* overlapping reaction panel — sits over the lower-right edge */
.reaction{
  position:absolute;z-index:7;
  right:auto;left:3.5%;bottom:5%;
  width:clamp(170px,17vw,260px);
  background:#0d2b45;
  border:var(--ol-thick) solid var(--ink);
  box-shadow:var(--shadow-hard);
  transform:rotate(2deg);
}
.reaction__img{
  display:block;width:100%;aspect-ratio:1;object-fit:cover;
  object-position:46% 30%;   /* face sits high-left in the delivered close-up */
  filter:saturate(.9);
}
.reaction__cap{
  background:var(--blue);
  color:var(--ink);
  font-family:var(--head);
  font-size:clamp(.6rem,.95vw,.8rem);
  letter-spacing:.1em;
  text-transform:uppercase;
  text-align:center;
  padding:.6em .4em;
  border-top:var(--ol) solid var(--ink);
}

/* bent, singed sign on the platform */
.sign{
  position:absolute;z-index:6;
  left:46%;bottom:16%;
  transform:rotate(-7deg) skewX(-5deg);
  background:linear-gradient(180deg,#d8cbb0,#a89878);
  color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:4px 5px 0 rgba(10,5,4,.7);
  padding:.5em .75em;
  font-family:var(--head);
  font-size:clamp(.5rem,.82vw,.72rem);
  letter-spacing:.07em;
  text-transform:uppercase;
  max-width:13ch;
  line-height:1.25;
  text-align:center;
}
.sign::after{ /* singe */
  content:"";position:absolute;inset:auto 0 0 0;height:42%;
  background:linear-gradient(0deg,rgba(40,16,6,.75),transparent);
  pointer-events:none;
}

/* ============================================================
   SCENE 3 — COUNCIL
   ============================================================ */

.council .shout{
  position:absolute;z-index:5;
  top:5%;left:3.5%;
  max-width:52%;              /* centre column belongs to the character */
  font-size:clamp(1.3rem,3.7vw,3.7rem);
}
.council__bubble{position:absolute;z-index:6;right:4%;top:24%;max-width:24ch;text-transform:none}
.council__narr{position:absolute;z-index:5;left:4%;bottom:7%;max-width:40ch;transform:rotate(1deg)}

/* city light sweep through the window */
.sweep{
  position:absolute;z-index:3;inset:0;pointer-events:none;
  background:linear-gradient(105deg,transparent 38%,rgba(255,227,161,.2) 48%,rgba(255,227,161,.05) 56%,transparent 64%);
  transform:translateX(-30%);
  animation:sweep-pass 9s ease-in-out infinite;
}
@keyframes sweep-pass{0%,100%{transform:translateX(-32%)}50%{transform:translateX(32%)}}

/* red rejection stamps */
.stamp{
  position:absolute;z-index:6;
  font-family:var(--head);
  font-size:clamp(.6rem,1.2vw,1.05rem);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:#FF4A2E;
  border:4px solid #FF4A2E;
  padding:.4em .75em;
  /* solid plate: screen-blending vanished against the bright council floor */
  background:rgba(16,8,6,.82);
  opacity:0;
  text-shadow:0 2px 4px rgba(0,0,0,.9);
}
.stamp--1{left:5%;top:40%;--rot:-13deg}
.stamp--2{left:6%;bottom:26%;--rot:9deg}
.stamp--3{right:5%;bottom:16%;--rot:-5deg}
.in-view .stamp{animation:stamp-hit .45s cubic-bezier(.2,1.6,.4,1) both}
.in-view .stamp--1{animation-delay:.5s}
.in-view .stamp--2{animation-delay:.72s}
.in-view .stamp--3{animation-delay:.94s}
@keyframes stamp-hit{
  0%{opacity:0;transform:rotate(var(--rot)) scale(2.4)}
  70%{opacity:1;transform:rotate(var(--rot)) scale(.94)}
  100%{opacity:.95;transform:rotate(var(--rot)) scale(1)}
}

/* ============================================================
   SCENE 4 — HIGH GROUND
   ============================================================ */

.highground .shout{
  position:absolute;z-index:5;
  top:5%;left:4%;
  max-width:54%;              /* sky left of the raised blade */
  font-size:clamp(1.6rem,4.8vw,5rem);
}
.highground__sub{
  position:absolute;z-index:5;
  left:5%;top:auto;bottom:16%;
}
.highground__bubble{position:absolute;z-index:6;right:6%;top:26%;text-transform:none}
.stool-tag{
  position:absolute;z-index:6;
  left:30%;bottom:9%;
  background:var(--cream);color:var(--ink);
  border:3px solid var(--ink);
  box-shadow:4px 4px 0 rgba(10,5,4,.75);
  padding:.45em .7em;
  font-family:var(--head);
  font-size:clamp(.52rem,.85vw,.74rem);
  letter-spacing:.08em;
  text-transform:uppercase;
  transform:rotate(-3deg);
}

/* thin blue line shooting up behind the saber */
.saber-line{
  display:none;               /* the delivered art already paints the blade */
  position:absolute;z-index:4;
  left:46%;bottom:18%;
  width:6px;height:0;
  background:linear-gradient(0deg,rgba(72,200,255,0),var(--blue) 30%,#fff);
  box-shadow:0 0 20px 5px rgba(72,200,255,.6);
  transform-origin:bottom center;
}
.in-view .saber-line{animation:saber-up 1.1s cubic-bezier(.2,.9,.3,1) .35s both}
@keyframes saber-up{0%{height:0;opacity:0}20%{opacity:1}100%{height:62%;opacity:.85}}

/* one-shot emphasis lines around the stool */
.emphasis{
  display:none;               /* burst landed on top of the painted stool */
  position:absolute;z-index:5;
  left:38%;bottom:4%;
  width:clamp(130px,17vw,260px);height:clamp(130px,17vw,260px);
  opacity:0;
}
.in-view .emphasis{animation:emph .8s ease 1s both}
@keyframes emph{
  0%{opacity:0;transform:scale(.6)}
  45%{opacity:.9;transform:scale(1.04)}
  100%{opacity:0;transform:scale(1.25)}
}

/* ============================================================
   CLOSING TRANSMISSION
   ============================================================ */

.transmission{
  position:relative;
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:center;
  gap:clamp(20px,4vw,56px);
  padding:clamp(40px,7vw,100px) clamp(20px,5vw,80px);
  overflow:hidden;
  background:
    radial-gradient(90% 120% at 10% 50%,rgba(110,16,10,.55),transparent 62%),
    var(--black);
  border-top:var(--ol-thick) solid var(--ink);
}
.transmission__face{
  position:relative;
  border:var(--ol-thick) solid var(--ink);
  box-shadow:14px 14px 0 var(--crimson);
  overflow:hidden;
  aspect-ratio:1;
}
.transmission__face img{
  position:relative;z-index:1;
  width:100%;height:100%;object-fit:cover;object-position:50% 32%;
}
/* orange one side, blue the other */
.transmission__face::after{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* the delivered close-up already carries orange/blue split lighting,
     so this only deepens it slightly rather than re-lighting the face */
  background:
    linear-gradient(90deg,rgba(255,115,13,.18) 0%,transparent 42%),
    linear-gradient(270deg,rgba(72,200,255,.2) 0%,transparent 44%);
  mix-blend-mode:soft-light;
}

.transmission__copy{min-width:0}
.transmission .shout{font-size:clamp(1.8rem,4.9vw,4.6rem);margin-bottom:.3em}
.transmission__neither{
  font-family:var(--head);
  font-size:clamp(1rem,2vw,1.8rem);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--cream);
  margin:0 0 1.1em;
  text-shadow:0 3px 0 var(--ink);
}
.transmission__name{
  font-family:var(--head);
  font-size:clamp(.78rem,1.3vw,1.1rem);
  letter-spacing:.2em;
  text-transform:uppercase;
  color:var(--gold);
  margin:0 0 1.4em;
}

/* ============================================================
   FOOTER
   ============================================================ */

.footer{
  display:flex;align-items:center;justify-content:center;gap:clamp(14px,2.4vw,30px);
  flex-wrap:wrap;
  padding:26px clamp(20px,4vw,52px);
  background:#070403;
  border-top:3px solid rgba(255,227,161,.18);
  font-family:var(--head);
  font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:rgba(255,244,220,.75);
}
.visits{
  color:rgba(255,244,220,.55);
  letter-spacing:.14em;
}
.visits #website_visits_aaron{color:var(--blue)}

.blade-div{
  width:clamp(80px,13vw,180px);height:5px;
  background:linear-gradient(90deg,transparent,var(--blue),#fff,var(--blue),transparent);
  box-shadow:0 0 14px 2px rgba(72,200,255,.5);
  border-radius:3px;
}

/* ============================================================
   MOBILE
   ============================================================ */



/* ============================================================
   REDUCED MOTION
   ============================================================ */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
  .rev,.rev-l,.rev-r,.bubble-rev,.stamp,.scene__img{opacity:1 !important;transform:none !important}
  .embers,.sweep,.saber-line,.emphasis,.hero__saberflash{display:none}
  .stamp{opacity:.95 !important;transform:rotate(var(--rot)) !important}
}