/* ═══════════════════════════════════════════════════════════════════
   GLAMMBOX — THE LANDING HERO, IN MOTION (2026-09-29, v4)
   Pat, 10:00: "the hero video has no point... a motion design of
   GLAMMBOX that's very good." The stage is full bleed: five chapters of
   the house run under the page, each in its own motion (films for Radio,
   Shorts and Creations with no text in frame, live kinetic type for
   Intel, a live seven-layer memory graph for GLAMMBRAIN). The house
   liquid, poured violet, dissolves over the stage where the words sit:
   the gold wordmark and the page line live on the brand, the chapter
   lives on the footage, and there is no edge between the two.
   Static truth first: without JS or under reduced motion chapter one and
   its caption stand; hero-motion.js adds html.mh-live.
   ─────────────────────────────────────────────────────────────────── */
:root{
  --mh-gold:#F2C46D;--mh-gold-deep:#C98A2B;--mh-gold-pale:#FFF0C4;
  --mh-violet:#A855F7;--mh-violet-soft:#E9D5FF;--mh-ink:#0A0714;
}
.mh{
  position:relative;isolation:isolate;overflow:clip;padding:0;
  min-height:calc(100svh - var(--top-h));display:block;background:var(--mh-ink);
}
/* the hero runs under the transparent header (hero-motion.js measures it into --mh-top) */
.mh.mh-under{margin-top:calc(-1 * var(--mh-top,0px));min-height:100svh}
.mh.mh-under .mh-grid{min-height:100svh;padding-top:calc(var(--mh-top,0px) + clamp(1.5rem,5vh,3rem))}
.mh::after,.mh::before{display:none!important}

/* ── the stage (full bleed, under everything) ──────────────────────── */
.mh-scene{position:absolute;inset:0;z-index:-3;overflow:hidden;cursor:pointer;touch-action:pan-y}
.mh-ch{position:absolute;inset:0;visibility:hidden;background:var(--mh-ink)}
.mh-ch.is-on{visibility:visible}
.mh-media{position:absolute;inset:0;will-change:transform}
.mh-ch picture,.mh-ch img,.mh-ch video,.mh-ch canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.mh-ch img,.mh-ch video{object-fit:cover}
.mh-ch video{opacity:0;transition:opacity .4s var(--e-out)}
.mh-ch.is-playing video{opacity:1}
/* one grade over every chapter: violet in the shadows, a floor for the caption */
.mh-grade{
  position:absolute;inset:0;pointer-events:none;z-index:2;
  background:linear-gradient(180deg,rgba(10,7,20,.62) 0%,rgba(10,7,20,.18) 12%,rgba(10,7,20,0) 22%,rgba(10,7,20,0) 58%,rgba(10,7,20,.82) 100%);
}
.mh-grade{transition:opacity .7s var(--e-out)}
.mh-scene[data-kind="news"] .mh-grade,.mh-scene[data-kind="brain"] .mh-grade{opacity:0}
.mh-grade::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(76,29,149,.4),rgba(168,85,247,.12) 55%,rgba(242,196,109,.12));mix-blend-mode:soft-light}

/* ── the brand liquid, dissolving over the stage where the words sit ─ */
.mh-gl{
  position:absolute;inset:0;z-index:-2;width:100%;height:100%;display:block;opacity:1;pointer-events:none;
  --m:var(--mh-m,40);
  -webkit-mask-image:linear-gradient(90deg,#000 0%,#000 calc(var(--m) * 1%),rgba(0,0,0,.5) calc(var(--m) * 1% + 8%),transparent calc(var(--m) * 1% + 17%));
          mask-image:linear-gradient(90deg,#000 0%,#000 calc(var(--m) * 1%),rgba(0,0,0,.5) calc(var(--m) * 1% + 8%),transparent calc(var(--m) * 1% + 17%));
}
.mh-gl[data-liquid="off"]{
  background:
    radial-gradient(70% 60% at 22% 40%,rgba(168,85,247,.34),transparent 64%),
    radial-gradient(60% 50% at 18% 80%,rgba(242,196,109,.12),transparent 60%),
    var(--mh-ink);
}
.mh-fade{position:absolute;left:0;right:0;bottom:0;height:22%;z-index:-1;pointer-events:none;background:linear-gradient(180deg,rgba(7,8,10,0),var(--gb-black,#07080A))}

/* Intel: live kinetic type from this morning's edition (right half) */
.mh-news{
  position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;gap:1.1rem;
  padding:7% 6% 12% 60%;overflow:hidden;justify-content:flex-start;
  background:
    radial-gradient(55% 60% at 76% 40%,rgba(168,85,247,.42),transparent 72%),
    radial-gradient(35% 40% at 92% 88%,rgba(242,196,109,.16),transparent 70%),
    rgba(14,8,32,.62);
}
.mh-ch .mh-news-bg,.mh-ch .mh-news-bg img{filter:brightness(.95) saturate(1.25) contrast(1.05)}
.mh-news-date{display:none!important}
.mh-news-num small{font-family:var(--f-mono);font-size:.1em;letter-spacing:.34em;font-weight:600;color:#F2C46D;-webkit-text-stroke:0;text-transform:uppercase;padding-right:.3em}
.mh-news-num{
  position:absolute;right:8%;top:calc(var(--mh-top,0px) + 7%);margin:0;pointer-events:none;
  font-family:var(--f-display);font-weight:800;letter-spacing:-.07em;line-height:.8;font-size:min(40vh,24vw);
  color:transparent;-webkit-text-stroke:3px rgba(242,196,109,.62);text-shadow:0 0 60px rgba(242,196,109,.18);
  display:grid;justify-items:end;gap:.12em
}
.mh-news-date{position:relative;margin:0;display:flex;align-items:center;gap:.7rem;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.3em;text-transform:uppercase;color:var(--mh-gold)}
.mh-news-date i{width:.55rem;height:.55rem;border-radius:50%;background:var(--mh-gold);box-shadow:0 0 14px var(--mh-gold)}
.mh-live .mh-news-date i{animation:mhPulse 1.6s ease-in-out infinite}
@keyframes mhPulse{50%{opacity:.35;transform:scale(.7)}}
.mh-news-head,.mh-news-items{display:none!important}
.mh-news-head{
  position:relative;margin:0;font-family:var(--f-display);font-weight:740;letter-spacing:-.04em;line-height:1;
  font-size:clamp(1.8rem,2.9vw,3.2rem);color:#FBF7FF;max-width:14ch;text-wrap:balance;text-shadow:0 6px 40px rgba(10,7,20,.6);
}
.mh-news-head .w{display:inline-block;will-change:transform}
.mh-news-items{position:relative;list-style:none;margin:.5rem 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.8rem 1.4rem;max-width:34rem}
.mh-news-items li:nth-child(n+3){display:none}
.mh-news-items li{position:relative;padding-left:.9rem;display:grid;gap:.18rem}
.mh-news-items li::before{content:"";position:absolute;left:0;top:.15rem;bottom:.15rem;width:2px;border-radius:2px;background:linear-gradient(180deg,var(--mh-gold),var(--mh-violet))}
.mh-news-items small{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.2em;color:var(--mh-violet-soft);opacity:.85}
.mh-news-items span{font-family:var(--f-display);font-weight:640;font-size:1.02rem;letter-spacing:-.01em;color:var(--gb-bone)}

/* GLAMMBRAIN: the seven-layer graph is drawn by hero-motion.js */
.mh-ch[data-kind="brain"]{background:radial-gradient(45% 55% at 72% 48%,rgba(76,29,149,.6),transparent 75%),#0B0618}

/* ── the words ─────────────────────────────────────────────────────── */
.mh-grid{
  position:relative;width:var(--shell);margin-inline:auto;min-height:calc(100svh - var(--top-h));
  display:grid;grid-template-columns:minmax(0,1fr);align-items:end;
  padding:clamp(2rem,6vh,3.6rem) 0 clamp(3rem,11vh,6.4rem);pointer-events:none;
}
.mh-grid a,.mh-grid button{pointer-events:auto}
.mh-stage{min-width:0;max-width:min(52vw,52rem)}
.mh-kicker{
  margin:0 0 .9rem;font-family:var(--f-mono);font-size:.8rem;letter-spacing:.32em;text-transform:uppercase;
  color:var(--mh-gold);display:flex;align-items:center;gap:.8rem;
}
.mh-kicker::before{content:"";width:2.6rem;height:1px;background:linear-gradient(90deg,var(--mh-gold),transparent)}
.mh-word{
  margin:0;line-height:.84;font-family:var(--f-display);font-weight:820;letter-spacing:-.05em;
  font-size:clamp(3.4rem,11.6vw,15rem);white-space:nowrap;
  filter:drop-shadow(0 0 34px rgba(168,85,247,.45)) drop-shadow(0 10px 30px rgba(0,0,0,.6));
}
.mh-word-in{display:inline-flex;perspective:900px}
.mh-live .mh-word{transition:font-size 1.1s var(--e-out)}
.mh-live .mh-kicker{transition:max-height .9s var(--e-out),opacity .6s ease,margin .9s var(--e-out)}
.mh-kicker{max-height:6em;overflow:hidden}
.mh .play.ghost{transition:opacity .5s ease}
.mh-cap b{transition:font-size 1.1s var(--e-out)}
@media (min-width:861px){
  .mh-past .mh-word{font-size:clamp(2.6rem,3.8vw,5rem);opacity:0;max-height:0;margin:0}
  .mh-live .mh-word{transition:font-size 1.1s var(--e-out),opacity .6s ease,max-height 1.1s var(--e-out)}
  .mh-word{max-height:1.2em}
  .mh-past .mh-kicker{max-height:0;opacity:0;margin:0}
  .mh-past .play.ghost{opacity:0;pointer-events:none}
  .mh-past .mh-cap em{font-size:clamp(1.3rem,2vw,1.95rem);max-width:48rem}
  .mh-past .mh-cap b{font-size:clamp(4.6rem,11vw,13rem)}
  .mh-past .mh-cap[data-mh-cap="3"] b{font-size:clamp(3.6rem,8vw,9.4rem)}
}
.mh-l{
  display:inline-block;
  background:linear-gradient(100deg,var(--mh-gold-deep) 0%,var(--mh-gold) 30%,var(--mh-gold-pale) 46%,var(--mh-gold) 58%,var(--mh-gold-deep) 100%);
  background-size:240% 100%;background-position:var(--mh-sheen,60%) 50%;
  -webkit-background-clip:text;background-clip:text;color:transparent;
  transform-origin:50% 80%;will-change:transform;
}
.mh-l.is-hit{
  background:linear-gradient(180deg,#FFFFFF 0%,var(--mh-violet-soft) 42%,var(--mh-violet) 100%);
  -webkit-background-clip:text;background-clip:text;
  filter:drop-shadow(0 0 8px rgba(233,213,255,.7));
}
.mh-stage h1.mh-open{
  margin:0;font-family:var(--f-display);font-weight:600;letter-spacing:-.03em;line-height:1.05;
  font-size:clamp(1.9rem,3.2vw,3.5rem);color:#FBF7FF;max-width:15em;text-wrap:balance;text-transform:none;
  text-shadow:0 4px 26px rgba(10,7,20,.8);
}
.mh-stage .gb-lede{margin:0 0 1.6rem;max-width:32rem;color:rgba(239,235,227,.9);font-size:clamp(.95rem,1.05vw,1.04rem);line-height:1.55;text-shadow:0 2px 14px rgba(10,7,20,.9)}
.mh-stage .plays{display:flex;flex-wrap:wrap;align-items:center;gap:1.4rem;margin:0}
.play.mh-gold{
  background:linear-gradient(135deg,#FFF7E2,#F6D58E 55%,#E8B75E)!important;
  border-color:transparent!important;color:#140A24!important;font-weight:680!important;
  box-shadow:0 10px 30px rgba(242,196,109,.25)!important;
}
.play.mh-gold:hover,.play.mh-gold:focus-visible{filter:brightness(1.06);transform:translateY(-2px)}
/* the second action is a quiet link, so the gold one leads */
.mh .play.ghost{
  min-height:44px;padding:.4rem 0!important;border:0!important;border-radius:0;background:none!important;box-shadow:none!important;
  color:var(--gb-bone);text-decoration:underline;text-decoration-color:rgba(242,196,109,.6);text-underline-offset:.45em;text-decoration-thickness:1px;
}
.mh .play.ghost::after,.mh .play.ghost::before{display:none!important}
.mh .play.ghost:hover,.mh .play.ghost:focus-visible{background:none;color:var(--mh-gold-pale);transform:none}

/* ── the chapter on stage (in the lane, between the line and the action) ─ */
.mh-chapters{min-width:0;margin:clamp(1rem,2.2vw,1.6rem) 0 1.4rem}
.mh-caps{display:grid}
.mh-cap{overflow:hidden;padding:.08em 0 .12em}
.mh-cap{grid-area:1/1;align-self:end;display:grid;gap:.3rem;text-decoration:none;color:var(--gb-bone);justify-items:start}
.mh-cap:not(.is-on){visibility:hidden}
.mh-cap b{
  font-family:var(--f-display);font-weight:760;letter-spacing:-.04em;line-height:.95;font-size:clamp(2.8rem,5vw,5.6rem);
  background:linear-gradient(92deg,#FFFFFF 0%,#F3E8FF 60%,var(--mh-violet-soft));-webkit-background-clip:text;background-clip:text;color:transparent;
  filter:drop-shadow(0 4px 22px rgba(10,7,20,.7));
}
.mh-cap em{font-style:normal;font-weight:500;font-size:clamp(1.02rem,1.2vw,1.16rem);line-height:1.4;color:#F4EFE8;text-shadow:0 2px 14px rgba(10,7,20,.95)}
.mh-cap b,.mh-cap em{display:block;will-change:transform}
.mh-cap em{max-width:34rem}
.mh-cap:hover b,.mh-cap:focus-visible b{filter:drop-shadow(0 0 16px rgba(242,196,109,.5))}
.mh-cap:focus-visible{outline:2px solid var(--mh-gold);outline-offset:6px;border-radius:6px}
.mh-segs{display:grid;grid-template-columns:repeat(5,1fr);gap:.5rem;margin-top:1.5rem;width:min(100%,27rem)}
.mh-seg{height:28px;padding:0;border:0;background:none;cursor:pointer;display:flex;align-items:center}
.mh-seg i{display:block;width:100%;height:4px;border-radius:4px;background:rgba(239,235,227,.34);overflow:hidden;position:relative}
.mh-seg i::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--mh-gold),var(--mh-violet));transform-origin:left;transform:scaleX(var(--p,0))}
.mh-seg[aria-current="true"] i::after{--p:1}
.mh-live .mh-seg[aria-current="true"] i::after{--p:var(--mh-p,0)}
.mh-seg:focus-visible i{outline:2px solid var(--mh-gold);outline-offset:4px}

/* ── phone: the footage owns the screen, stories-style: steps and the
      GLAMMBOX handle on top; one stable lower third (chapter, line, action) ─ */
@media (max-width:860px){
  .mh{display:flex;flex-direction:column;min-height:calc(100svh - var(--top-h));padding:1rem 0 clamp(1.6rem,4.5vh,2.4rem)}
  .mh.mh-under{padding-top:calc(var(--mh-top,0px) + 1rem)}
  .mh.mh-under .mh-segs{top:calc(var(--mh-top,0px) + .6rem)}
  .mh-gl{
    --mp:var(--mh-mp,58);
    -webkit-mask-image:linear-gradient(180deg,transparent 0%,transparent calc(var(--mp) * 1%),rgba(0,0,0,.7) calc(var(--mp) * 1% + 12%),#000 calc(var(--mp) * 1% + 24%));
            mask-image:linear-gradient(180deg,transparent 0%,transparent calc(var(--mp) * 1%),rgba(0,0,0,.7) calc(var(--mp) * 1% + 12%),#000 calc(var(--mp) * 1% + 24%));
  }
  .mh-grade{background:linear-gradient(180deg,rgba(10,7,20,.6) 0%,rgba(10,7,20,0) 16%,rgba(10,7,20,0) 58%,rgba(10,7,20,.5) 74%,rgba(10,7,20,.75) 100%)}
  .mh-grid,.mh-stage{display:contents}
  .mh-kicker{display:none}
  .mh-stage h1,.mh-stage .plays,.mh-chapters{width:var(--shell);margin-inline:auto}
  .mh-segs{position:absolute;top:.7rem;left:var(--gutter);right:var(--gutter);width:auto;margin:0;gap:.3rem;z-index:2}
  .mh-seg{height:22px}
  .mh-seg i{height:3px;background:rgba(255,255,255,.4);box-shadow:0 1px 6px rgba(0,0,0,.5)}
  .mh-word{order:1;margin-top:auto;width:var(--shell);margin-inline:auto;font-size:13vw;line-height:.9;
    filter:drop-shadow(0 0 18px rgba(168,85,247,.5)) drop-shadow(0 4px 12px rgba(0,0,0,.7))}
  .mh-past .mh-word{opacity:0;max-height:0;margin-top:auto;margin-bottom:0}
  .mh-live .mh-word{transition:opacity .5s ease,max-height .9s var(--e-out)}
  .mh-word{max-height:1.2em}
  .mh-chapters{order:2;margin:.55rem auto 1rem}
  .mh-cap b{font-size:clamp(3rem,15vw,4rem)}
  .mh-cap[data-mh-cap="3"] b{font-size:clamp(2.4rem,11vw,3.1rem)}
  .mh-cap em{font-size:1.05rem;font-weight:500;text-shadow:0 2px 10px rgba(10,7,20,1),0 0 24px rgba(10,7,20,.9)}
  .mh-stage h1.mh-open{font-size:1.6rem;max-width:none}
  .mh-stage .plays{order:3;flex-wrap:nowrap;gap:1.1rem}
  .mh-stage .play.mh-gold{padding:.6rem 1rem;letter-spacing:.1em;font-size:.72rem;white-space:nowrap;min-height:44px;box-shadow:none!important}
  .mh-stage .play.ghost{display:none}
  .mh-news{padding:16% 7% 62% 7%;justify-content:flex-start;gap:.6rem}
  .mh-news-num{right:6%;left:auto;top:calc(var(--mh-top,0px) + 3.2rem);transform:none;font-size:44vw}
  .mh-news-head{font-size:2.15rem;max-width:none}
  .mh-news-items{grid-template-columns:minmax(0,1fr);gap:.4rem;margin-top:.1rem}
  .mh-ch[data-kind="brain"]{background:radial-gradient(60% 40% at 50% 34%,rgba(76,29,149,.6),transparent 75%),#0B0618}
}
@media (prefers-reduced-motion:reduce){
  .mh-l{background-position:50% 50%}
  .mh-scene{cursor:default}
}