/* ============================================================
   CUT GATE — extracted from cut-gate-reference.html
   Shell UI (run button, status, slow-mo) removed; hero-specific
   wrapper + skip/replay controls added for the real page.
   ============================================================ */
:root{
  --amber:#f59e0b;
  --molten:#ff7a18;
  --ground:#101114;
  --panel:#17181c;
  --line:#26282e;
  --ink:#e8e6e1;
  --dim:#9a978f;
  --disp:'Arial Narrow','Helvetica Neue Condensed','Liberation Sans Narrow',Impact,Haettenschweiler,sans-serif;
  --mono:ui-monospace,'Cascadia Mono',Consolas,'SF Mono',Menlo,monospace;
}

/* ============================================================
   HERO WRAPPER
   ============================================================ */
.hero{
  min-height:100svh;
  background:#0a0b0d;
  color:var(--ink);
  font-family:var(--disp);
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:14px;padding:22px;
}
.hero *, .hero *::before, .hero *::after{margin:0;padding:0;box-sizing:border-box}

/* ============================================================
   STAGE
   ============================================================ */
.stage{
  position:relative;overflow:hidden;
  width:min(1280px,96vw);aspect-ratio:16/9;
  background:var(--ground);
  border:1px solid #1e2025;border-radius:8px;
  box-shadow:0 30px 80px rgba(0,0,0,.6);
  container-type:size;
}
.shaker{position:absolute;inset:0;will-change:transform}
.vignette{
  position:absolute;inset:0;z-index:40;pointer-events:none;
  background:radial-gradient(115% 95% at 50% 42%,transparent 55%,rgba(0,0,0,.42) 100%);
}

/* skip / replay controls */
.cutgateSkip{
  position:absolute;z-index:60;top:14px;right:14px;
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);background:rgba(14,15,18,.8);border:1px solid var(--line);border-radius:3px;
  padding:6px 12px;cursor:pointer;
}
.cutgateSkip:hover{color:var(--ink);border-color:#3a3d44}
.cutgateSkip[hidden]{display:none}
.cutgateReplayWrap{margin-top:2px}
.cutgateReplay{
  font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--dim);text-decoration:none;border-bottom:1px solid transparent;
}
.cutgateReplay:hover{color:var(--amber);border-bottom-color:var(--amber)}

/* reduced-motion / repeat-visit settled state (avoids a flash of page A) */
@media (prefers-reduced-motion:reduce){
  #pageA{opacity:0;visibility:hidden}
  #gateSkin{visibility:hidden}
}
.cutgate-settled #pageA{opacity:0;visibility:hidden}
.cutgate-settled #gateSkin{visibility:hidden}

/* ============================================================
   FAKE HERO PAGES
   ============================================================ */
.page{position:absolute;inset:0;background:var(--ground)}
.pageA{z-index:5}
.pageB{z-index:1}
.page::before{ /* key light */
  content:'';position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(90% 70% at 18% 8%,rgba(245,158,11,.07),transparent 55%),
             radial-gradient(60% 50% at 85% 90%,rgba(255,255,255,.025),transparent 60%);
}
.pageB::before{
  background:radial-gradient(90% 70% at 80% 10%,rgba(255,122,24,.07),transparent 55%),
             radial-gradient(60% 50% at 12% 88%,rgba(255,255,255,.025),transparent 60%);
}
.heroGrid{
  position:absolute;inset:0;display:grid;grid-template-columns:1.15fr .95fr;
  align-items:center;gap:4cqw;padding:5cqw 5.5cqw 4cqw;
}
.eyebrow{
  display:flex;align-items:center;gap:.8em;
  font-family:var(--mono);font-size:10px;font-size:1.05cqw;
  letter-spacing:.34em;color:var(--amber);text-transform:uppercase;
  margin-bottom:2cqw;
}
.eyebrow .tick{width:2.4cqw;height:2px;background:var(--amber);flex:none}
.pageB .eyebrow{color:var(--molten)}
.pageB .eyebrow .tick{background:var(--molten)}
h1.hero{
  font-family:var(--disp);font-weight:700;text-transform:uppercase;
  font-size:44px;font-size:5.9cqw;line-height:.92;letter-spacing:.005em;
  color:var(--ink);
}
h1.hero em{font-style:normal;color:var(--amber)}
.pageB h1.hero em{color:var(--molten)}
.sub{
  font-family:var(--mono);font-size:11px;font-size:1.18cqw;line-height:1.75;
  color:var(--dim);max-width:36cqw;margin-top:1.8cqw;letter-spacing:.02em;
}
.ctas{display:flex;gap:1.2cqw;margin-top:2.4cqw}
.btn{
  display:inline-block;text-decoration:none;
  font-family:var(--disp);font-weight:700;letter-spacing:.2em;text-transform:uppercase;
  font-size:12px;font-size:1.15cqw;padding:1cqw 2.2cqw;border-radius:3px;cursor:pointer;
}
.btn.solid{color:#0c0c0c;background:var(--amber);border:1px solid #b97708}
.btn.ghost{color:var(--ink);background:transparent;border:1px solid #3a3d44}
.pageB .btn.solid{background:var(--molten);border-color:#b04e05}
.stats{display:flex;gap:2.6cqw;margin-top:3cqw}
.stats>div{border-left:2px solid var(--line);padding-left:1.1cqw}
.stats b{display:block;font-size:2.3cqw;letter-spacing:.02em;color:var(--ink)}
.stats span{font-family:var(--mono);font-size:.85cqw;letter-spacing:.22em;color:var(--dim)}
.stats>div.hotStat{border-left-color:var(--molten)}
/* dashboard mock */
.dash{
  background:linear-gradient(180deg,#191b20,#141519);
  border:1px solid var(--line);border-radius:6px;overflow:hidden;
  box-shadow:0 20px 50px rgba(0,0,0,.45);
}
.dashHead{
  display:flex;align-items:center;gap:.6cqw;padding:.9cqw 1.2cqw;
  border-bottom:1px solid var(--line);background:#101115;
}
.dashHead .dot{width:.7cqw;height:.7cqw;border-radius:50%;background:#33363d}
.dashHead .dot:first-child{background:#5a3a10}
.dashTitle{margin-left:auto;font-family:var(--mono);font-size:.85cqw;letter-spacing:.24em;color:var(--dim)}
.dashTitle i{font-style:normal;color:#3fbf6f}
.dashBody{display:grid;grid-template-columns:1.4fr 1fr;gap:1cqw;padding:1.2cqw}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:4px;padding:1cqw 1.1cqw}
.panel.wide{grid-column:1/-1}
.pTitle{font-family:var(--mono);font-size:.8cqw;letter-spacing:.2em;color:var(--dim);margin-bottom:.9cqw}
.bars{display:flex;align-items:flex-end;gap:.55cqw;height:7.5cqw}
.bars i{
  flex:1;height:var(--h);border-radius:2px 2px 0 0;
  background:linear-gradient(180deg,#4c4f57,#33363d);
}
.bars i.hot{background:linear-gradient(180deg,var(--amber),#8a5806)}
.bars i.molt{background:linear-gradient(180deg,var(--molten),#8a3506)}
.wo{display:flex;align-items:center;gap:.8cqw;margin-bottom:.75cqw}
.wo:last-child{margin-bottom:0}
.woId{font-family:var(--mono);font-size:.85cqw;color:var(--dim);letter-spacing:.08em;flex:none}
.woBar{flex:1;height:.55cqw;border-radius:2px;background:#26282e;position:relative;overflow:hidden}
.woBar::after{content:'';position:absolute;inset:0;width:var(--w);background:var(--amber);border-radius:2px}
.woBar.red::after{background:#d34f2f}
.kvRow{display:flex;justify-content:space-between;align-items:baseline;font-family:var(--mono);
  font-size:.95cqw;color:var(--dim);letter-spacing:.1em;padding:.45cqw 0;border-bottom:1px dashed #202228}
.kvRow:last-child{border-bottom:0}
.kvRow b{font-family:var(--disp);font-size:1.5cqw;color:var(--ink);letter-spacing:.04em}
.kvRow.warn b{color:var(--amber)}
.kvRow.crit b{color:#e2593a}
.alert{display:flex;gap:.8cqw;align-items:baseline;font-family:var(--mono);font-size:.85cqw;
  letter-spacing:.06em;color:var(--dim);padding:.5cqw 0;border-bottom:1px dashed #202228}
.alert:last-child{border-bottom:0}
.alert .sev{width:.6cqw;height:.6cqw;border-radius:50%;background:var(--amber);flex:none;align-self:center}
.alert .sev.hot{background:var(--molten)}
.alert b{color:var(--ink);font-weight:400}
/* page B reveal lighting */
.bShade{position:absolute;inset:0;z-index:2;background:#000;opacity:0;pointer-events:none}
.bGlow{
  position:absolute;inset:0;z-index:3;pointer-events:none;opacity:0;
  background:radial-gradient(120% 34% at 50% 50%,rgba(255,122,24,.30),rgba(255,122,24,.08) 55%,transparent 75%);
  mix-blend-mode:screen;
}

/* ============================================================
   RESIDUAL SCAR (cools on page B)
   ============================================================ */
.scar{position:absolute;inset:0;z-index:4;pointer-events:none;opacity:0;
  filter:drop-shadow(0 0 8px rgba(255,122,24,.9)) drop-shadow(0 0 24px rgba(255,90,10,.45));}
.scar .sl{position:absolute;inset:0}
.scar .slEmber{background:linear-gradient(90deg,#7e2c08,#a33a0a 30%,#8a3008 60%,#6e2606)}
.scar .slMolten{background:linear-gradient(90deg,#ff6a10,var(--molten) 40%,#ff9231 70%,#f06a10)}
.scar .slWhite{background:linear-gradient(90deg,#ffe9c4,#fff 45%,#ffdba6)}

/* ============================================================
   THE GATE
   ============================================================ */
.gate3d{position:absolute;inset:0;z-index:10;perspective:1100px;perspective-origin:50% 42%;pointer-events:none}
.gateSkin{position:absolute;inset:0}
.plate{
  position:absolute;left:0;width:100%;height:50.5%;
  will-change:transform;
  background:
    /* macro shading */
    linear-gradient(180deg,rgba(255,255,255,.07),rgba(0,0,0,0) 14%,rgba(0,0,0,.28) 92%),
    radial-gradient(130% 100% at 22% 6%,rgba(255,255,255,.055),transparent 58%),
    radial-gradient(90% 80% at 78% 96%,rgba(0,0,0,.22),transparent 60%),
    /* brushed horizontal streaks */
    repeating-linear-gradient(180deg,rgba(255,255,255,.030) 0 1px,transparent 1px 3px,rgba(0,0,0,.06) 3px 4px),
    repeating-linear-gradient(180deg,transparent 0 9px,rgba(255,255,255,.014) 9px 10px,transparent 10px 23px),
    linear-gradient(180deg,#2c2f35,#22252a 46%,#1b1d22);
}
.plate.pTop{top:0}
.plate.pBot{bottom:0}
/* scratches */
.plate::before{content:'';position:absolute;inset:0;opacity:.6;pointer-events:none;background:
  linear-gradient(114deg,transparent 40.7%,rgba(255,255,255,.05) 40.9%,transparent 41.2%),
  linear-gradient(81deg,transparent 63.6%,rgba(255,255,255,.04) 63.8%,transparent 64.1%),
  linear-gradient(99deg,transparent 22.7%,rgba(0,0,0,.32) 22.9%,transparent 23.3%),
  linear-gradient(70deg,transparent 78.5%,rgba(0,0,0,.25) 78.7%,transparent 79.0%);}
/* grain (inline SVG turbulence, stretched into brushed streaks) */
.plate .grain{position:absolute;inset:0;width:100%;height:100%;opacity:.16;mix-blend-mode:overlay;pointer-events:none}
/* machined outer rail */
.plate .rail{
  position:absolute;left:0;right:0;height:11%;
  background:linear-gradient(180deg,#33363d,#26292f 55%,#1e2126);
  border-bottom:1px solid rgba(0,0,0,.55);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset;
}
.plate.pTop .rail{top:0;border-top:2px solid rgba(255,255,255,.1)}
.plate.pBot .rail{bottom:0;border-bottom:2px solid rgba(0,0,0,.6);border-top:1px solid rgba(255,255,255,.06)}
/* vertical stiffener ribs */
.plate .rib{
  position:absolute;top:13%;bottom:14%;width:2.1%;
  background:linear-gradient(90deg,rgba(0,0,0,.38),rgba(255,255,255,.06) 34%,rgba(255,255,255,.02) 55%,rgba(0,0,0,.42));
  border-radius:2px;
}
.plate.pBot .rib{top:14%;bottom:13%}
/* hazard chevrons on the meeting edge + machined bevel */
.plate .chev{
  position:absolute;left:0;right:0;height:12%;
  background:
    linear-gradient(180deg,rgba(0,0,0,.25),transparent 30%,transparent 70%,rgba(0,0,0,.3)),
    repeating-linear-gradient(-45deg,var(--amber) 0 2.6cqw,#131418 2.6cqw 5.2cqw);
}
.plate .chev::after{ /* wear + grime on the paint */
  content:'';position:absolute;inset:0;
  background:
    linear-gradient(94deg,transparent 12%,rgba(0,0,0,.35) 12.6%,transparent 13.4%),
    linear-gradient(88deg,transparent 47%,rgba(0,0,0,.3) 47.8%,transparent 48.9%),
    linear-gradient(91deg,transparent 76%,rgba(0,0,0,.4) 76.7%,transparent 77.9%),
    radial-gradient(30% 90% at 30% 100%,rgba(0,0,0,.35),transparent 70%),
    radial-gradient(25% 80% at 82% 0%,rgba(0,0,0,.3),transparent 70%);
}
.plate.pTop .chev{bottom:0;border-bottom:3px solid #0c0d10;box-shadow:0 -2px 0 rgba(255,255,255,.10) inset}
.plate.pBot .chev{top:0;border-top:3px solid #0c0d10;box-shadow:0 2px 0 rgba(255,255,255,.07) inset}
/* machined bevel edge strip right at the mouth */
.plate .lip{position:absolute;left:0;right:0;height:1.1%;background:linear-gradient(180deg,#494d55,#15161a)}
.plate.pTop .lip{bottom:0}
.plate.pBot .lip{top:0;background:linear-gradient(0deg,#494d55,#15161a)}
/* bolts */
.bolt{
  position:absolute;width:1.5cqw;height:1.5cqw;border-radius:50%;transform:translate(-50%,-50%);
  background:radial-gradient(circle at 34% 30%,#5b5f68,#33363d 55%,#191b1f 88%);
  box-shadow:0 1px 2px rgba(0,0,0,.7),0 0 0 1px rgba(0,0,0,.5),0 -1px 1px rgba(255,255,255,.10) inset;
}
.bolt::after{
  content:'';position:absolute;left:18%;right:18%;top:46%;height:9%;
  background:#101216;border-radius:2px;transform:rotate(var(--ba,22deg));
  box-shadow:0 1px 0 rgba(255,255,255,.12);
}
/* stenciled signage */
.stencil{
  position:absolute;font-family:var(--mono);letter-spacing:.42em;text-transform:uppercase;
  color:rgba(232,230,225,.26);font-size:1cqw;border:1px solid rgba(232,230,225,.16);
  padding:.6cqw 1.2cqw .5cqw 1.5cqw;border-radius:2px;
}
.placard{
  position:absolute;font-family:var(--mono);letter-spacing:.3em;text-transform:uppercase;
  font-size:.8cqw;color:rgba(245,158,11,.55);border:1px solid rgba(245,158,11,.3);
  padding:.45cqw .9cqw .4cqw 1.1cqw;border-radius:2px;background:rgba(20,16,8,.3);
}
/* specular impact flash */
.spec{
  position:absolute;inset:-2%;z-index:5;pointer-events:none;mix-blend-mode:screen;
  background:linear-gradient(104deg,transparent 41%,rgba(255,246,230,.10) 47.5%,rgba(255,250,240,.5) 50%,rgba(255,246,230,.10) 52.5%,transparent 59%);
  transform:translateX(-135%);will-change:transform;
}
/* cut halves */
.half{position:absolute;inset:0;will-change:transform,opacity;backface-visibility:hidden}
.half .edge{position:absolute;inset:0;pointer-events:none;
  filter:drop-shadow(0 0 9px rgba(255,122,24,.95)) drop-shadow(0 0 26px rgba(255,90,10,.5))}
.half .edgeCore{position:absolute;inset:0;pointer-events:none}

/* ============================================================
   WARNING SYSTEMS
   ============================================================ */
.hazard{
  position:absolute;left:0;right:0;height:1.6%;z-index:14;opacity:0;pointer-events:none;
  background:repeating-linear-gradient(45deg,var(--amber) 0 1.6cqw,#0c0d0f 1.6cqw 3.2cqw);
}
.hazard.hzTop{top:0}
.hazard.hzBot{bottom:0;background:repeating-linear-gradient(-45deg,var(--amber) 0 1.6cqw,#0c0d0f 1.6cqw 3.2cqw)}
.hazard.on{animation:hzFlick .55s steps(1,end) forwards}
@keyframes hzFlick{
  0%{opacity:0}9%{opacity:.85}16%{opacity:.12}27%{opacity:.95}
  38%{opacity:.2}52%{opacity:.9}67%{opacity:.55}100%{opacity:.85}
}
.beaconRig{position:absolute;inset:0;z-index:15;pointer-events:none;opacity:0;transition:opacity .25s}
.beaconRig.on{opacity:1}
.beaconHouse{
  position:absolute;left:50%;top:0;width:4.6cqw;height:1.5cqw;transform:translateX(-50%);
  background:linear-gradient(180deg,#3a3d44,#1c1e23);border-radius:0 0 .6cqw .6cqw;
  box-shadow:0 2px 6px rgba(0,0,0,.6);
}
.beaconDome{
  position:absolute;left:50%;top:.18cqw;width:2.1cqw;height:1.1cqw;transform:translateX(-50%);
  background:radial-gradient(circle at 50% 0%,#ffd27a,var(--amber) 55%,#8a5806);
  border-radius:0 0 1cqw 1cqw;
}
.beaconRig.on .beaconDome{animation:domePulse 1.3s linear infinite}
@keyframes domePulse{
  0%,100%{filter:brightness(1.9) drop-shadow(0 0 1.2cqw rgba(245,158,11,.95))}
  50%{filter:brightness(.75) drop-shadow(0 0 .3cqw rgba(245,158,11,.4))}
}
.beam{
  position:absolute;left:50%;top:1.2%;width:230%;height:230%;
  transform-origin:0 0;mix-blend-mode:screen;will-change:transform;
  background:linear-gradient(90deg,rgba(245,158,11,.30),rgba(245,158,11,.05) 55%,transparent 80%);
  clip-path:polygon(0 0,100% 3.5%,100% 11%);
}
.beam.b2{background:linear-gradient(90deg,rgba(245,158,11,.16),rgba(245,158,11,.03) 55%,transparent 80%)}
.beaconRig.on .beam{animation:beamSpin 1.3s linear infinite}
.beaconRig.on .beam.b2{animation-delay:-.65s}
@keyframes beamSpin{from{transform:rotate(20deg)}to{transform:rotate(380deg)}}
.rake{ /* beacon light raking the closed metal during dwell */
  position:absolute;inset:0;z-index:16;pointer-events:none;opacity:0;mix-blend-mode:screen;will-change:transform,opacity;
  background:radial-gradient(48% 95% at 50% 0%,rgba(245,158,11,.34),rgba(245,158,11,.07) 55%,transparent 72%);
}
.pierceFlash{position:absolute;inset:0;z-index:22;pointer-events:none;opacity:0;mix-blend-mode:screen;will-change:opacity}
#fx{position:absolute;inset:0;z-index:20;width:100%;height:100%;pointer-events:none}
/* heat-haze displacement patch that rides the torch */
#hazePatch{position:absolute;left:0;top:0;width:300px;height:190px;opacity:0;z-index:19;pointer-events:none;
  will-change:transform,opacity;filter:url(#heatHaze);
  -webkit-mask-image:radial-gradient(60% 55% at 50% 50%,#000 30%,transparent 78%);
  mask-image:radial-gradient(60% 55% at 50% 50%,#000 30%,transparent 78%);
  background:
   repeating-linear-gradient(180deg,rgba(255,255,255,.045) 0 1px,transparent 1px 3px,rgba(0,0,0,.07) 3px 4px,transparent 4px 6px),
   linear-gradient(180deg,rgba(44,47,53,.9),rgba(27,29,34,.9))}

/* ============================================================
   NARROW VIEWPORTS
   The stage's cqw type scales off its own (narrow) width, so below
   ~640px we drop the container-query sizing, stack the grid to a
   single column and hide the dashboard mock in favor of legible copy.
   Placed last so it wins the cascade over the unconditional rules above.
   ============================================================ */
@media (max-width:640px){
  .stage{aspect-ratio:auto;min-height:520px}
  .heroGrid{grid-template-columns:1fr;padding:9vw 7vw;gap:16px;align-content:center}
  .dash{display:none}
  .eyebrow{font-size:11px;margin-bottom:12px}
  .eyebrow .tick{width:18px}
  h1.hero{font-size:9vw}
  .sub{font-size:14px;max-width:none;margin-top:14px}
  .ctas{gap:10px;flex-wrap:wrap;margin-top:18px}
  .btn{font-size:12px;padding:11px 20px}
}