/* ============================================================
   hero.css — Fold 1 "contradiction theatre"
   A single, large, state-driven stage under one rotating line.
   ============================================================ */

.hero2 {
  position: relative;
  padding: 3.4rem 0 2.2rem;
  isolation: isolate;
}

.hero2 .h2-eyebrow {
  font-family: "JetBrains Mono", monospace;
  font-size: .72rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted, #63676E);
  margin: 0 0 1rem;
}

.hero2 h1 {
  font-size: clamp(2.4rem, 6.2vw, 4.6rem);
  line-height: 1.02;
  letter-spacing: -.025em;
  margin: 0;
  max-width: 20ch;
}

/* the rotating clause */
.h2-rot {
  display: block;
  position: relative;
  min-height: 1.08em;
  overflow: hidden;
}
.h2-rot > span {
  display: block;
  position: absolute;
  inset: 0;
  opacity: 0;
  transform: translateY(.6em) skewY(2deg);
  transition: opacity .42s ease, transform .52s cubic-bezier(.2,.9,.2,1);
  background: linear-gradient(96deg, var(--hue-a, #0B6B3C), var(--hue-b, #12736B) 48%, var(--hue-c, #8A5410));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;

  white-space: nowrap;
}
.h2-rot > span.on { opacity: 1; transform: none; }
.h2-rot > span.out { opacity: 0; transform: translateY(-.55em) skewY(-2deg); }

.hero2 .h2-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: 1.5rem; }

/* ---------- the stage ---------- */
.h2-stage {
  position: relative;
  margin-top: 2.2rem;
  border: 1px solid var(--rule, #E2E0D8);
  border-radius: 16px;
  background:
    radial-gradient(120% 140% at 8% 0%, rgba(22,163,74,.10), transparent 55%),
    radial-gradient(100% 130% at 92% 12%, rgba(224,138,43,.10), transparent 58%),
    #FFFFFF;
  overflow: hidden;
  box-shadow: 0 24px 60px -42px rgba(12,40,26,.55);
}

.h2-bar {
  display: flex; align-items: center; gap: .55rem;
  padding: .6rem .9rem;
  border-bottom: 1px solid var(--rule, #E2E0D8);
  font-family: "JetBrains Mono", monospace;
  font-size: .68rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--muted, #63676E);
  background: rgba(255,255,255,.7);
}
.h2-bar .pip { width: 8px; height: 8px; border-radius: 50%; background: #16A34A; box-shadow: 0 0 0 0 rgba(22,163,74,.55); animation: h2pulse 2.2s infinite; }
@keyframes h2pulse { 70% { box-shadow: 0 0 0 9px rgba(22,163,74,0); } 100% { box-shadow: 0 0 0 0 rgba(22,163,74,0); } }
.h2-bar .h2-mode { margin-left: auto; color: var(--ink, #17181B); letter-spacing: .08em; }

.h2-svg { display: block; width: 100%; height: auto; }

/* state chips under the stage */
.h2-chips { display: flex; flex-wrap: wrap; gap: .4rem; padding: .7rem .9rem; border-top: 1px solid var(--rule,#E2E0D8); }
.h2-chip {
  font-family: "JetBrains Mono", monospace; font-size: .68rem;
  padding: .34rem .6rem; border-radius: 999px;
  border: 1px solid var(--rule, #E2E0D8);
  background: #fff; color: var(--muted, #63676E);
  cursor: pointer; transition: all .22s ease;
}
.h2-chip:hover { color: var(--ink,#17181B); border-color: #BFD8CB; }
.h2-chip.on { background: #0F2A1C; border-color: #0F2A1C; color: #fff; }

/* ---------- svg element behaviour ---------- */
.h2-svg .h2-scene { opacity: 0; transition: opacity .38s ease; pointer-events: none; }
.h2-svg .h2-scene.on { opacity: 1; }

.h2-svg .beam { opacity: .9; }
.h2-svg .sweep { animation: h2sweep 3.4s cubic-bezier(.5,0,.5,1) infinite; }
@keyframes h2sweep { 0% { transform: translateX(0); } 50% { transform: translateX(560px); } 100% { transform: translateX(0); } }

.h2-svg .flow { stroke-dasharray: 5 9; animation: h2flow 1.1s linear infinite; }
@keyframes h2flow { to { stroke-dashoffset: -28; } }

.h2-svg .blink { animation: h2blink 1.6s ease-in-out infinite; }
@keyframes h2blink { 0%,100% { opacity: 1; } 50% { opacity: .25; } }

.h2-svg .rise { animation: h2rise 2.6s ease-in-out infinite; }
@keyframes h2rise { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

.h2-svg .drop { animation: h2drop 2.2s ease-in-out infinite; }
@keyframes h2drop { 0%,100% { transform: translateY(0); opacity:1; } 55% { transform: translateY(9px); opacity:.15; } }

.h2-svg .spin { transform-box: fill-box; transform-origin: center; animation: h2spin 6s linear infinite; }
@keyframes h2spin { to { transform: rotate(360deg); } }

.h2-svg .grow { transform-box: fill-box; transform-origin: left center; animation: h2grow 2.8s cubic-bezier(.3,.9,.3,1) infinite; }
@keyframes h2grow { 0%,100% { transform: scaleX(.34); } 55% { transform: scaleX(1); } }

.h2-svg .swap { animation: h2swap 3s ease-in-out infinite; }
@keyframes h2swap { 0%,45% { transform: translateY(0); } 55%,100% { transform: translateY(-26px); } }
.h2-svg .swap-b { animation: h2swapb 3s ease-in-out infinite; }
@keyframes h2swapb { 0%,45% { transform: translateY(26px); opacity:0; } 55%,100% { transform: translateY(0); opacity:1; } }

.h2-svg .stampin { transform-box: fill-box; transform-origin: center; animation: h2stamp 3.4s cubic-bezier(.2,1.5,.3,1) infinite; }
@keyframes h2stamp { 0%,58% { transform: scale(.4); opacity: 0; } 68% { transform: scale(1.08); opacity: 1; } 92%,100% { transform: scale(1); opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .h2-svg * { animation: none !important; }
  .h2-rot > span { transition: none; }
}

@media (max-width: 47.99rem) {
  .h2-chips { overflow-x: auto; flex-wrap: nowrap; }
}

/* ============================================================
   Sharpened, colourful hero machine (Clay-style scene)
   Overrides machine.css — loaded after it.
   ============================================================ */
.mach-hero-wrap { margin-top: 2.1rem; }

.mach-hero .mach-stage {
  border-radius: 18px;
  border-color: #CFE6D8;
  background:
    radial-gradient(90% 120% at 78% -10%, rgba(255,214,140,.55), transparent 55%),
    radial-gradient(70% 100% at 12% 0%, rgba(146,214,255,.55), transparent 60%),
    linear-gradient(180deg, #E7F5FF 0%, #EAF7EE 52%, #DDF0E4 100%);
  box-shadow: 0 30px 70px -50px rgba(10,60,36,.75);
}

/* ground: layered, warmer */
.mach-hero .m-far path:first-child { fill: url(#m-hill); }

/* stations get their own hues */
.mach-hero .m-funnel { fill: #12854B; filter: drop-shadow(0 4px 0 rgba(10,87,48,.28)); }
.mach-hero .m-post { fill: #0A5730; }
.mach-hero .m-doc { fill: #FFFFFF; stroke: #0A5730; }
.mach-hero .m-doc.d1 { fill: #FFE9C7; }
.mach-hero .m-doc.d2 { fill: #DFF3E6; }
.mach-hero .m-doc.d3 { fill: #E4EEFF; }
.mach-hero .m-ring { stroke: #1AA0A0; }
.mach-hero .m-glass { fill: #F6FEFF; }
.mach-hero .m-fig { fill: #0B3B27; }
.mach-hero .m-grader rect { fill: #E08A2B; }
.mach-hero .m-box { fill: #D2563F; }
.mach-hero .m-flap { fill: #A93B29; }
.mach-hero .m-flag rect { fill: #7BC043; }
.mach-hero .m-bar { stroke: #0A5730; }
.mach-hero .m-bar.b1 { fill: #7BC043; }
.mach-hero .m-bar.b2 { fill: #16A34A; }
.mach-hero .m-bar.b3 { fill: #E08A2B; }
.mach-hero .m-track { stroke: #0B6A3E; stroke-width: 8; }
.mach-hero .m-ball-c { fill: #0B1F17; }
.mach-hero .m-ball-hi { fill: #7BC043; opacity: .9; }
.mach-hero .m-lab { fill: #0A5730; opacity: .85; font-weight: 500; }

/* decor injected by hero.js */
.mach-hero .h2-sun { animation: h2sun 9s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes h2sun { 0%,100% { transform: scale(1); opacity: .9; } 50% { transform: scale(1.06); opacity: 1; } }
.mach-hero .h2-cloud { animation: h2cloud 26s linear infinite; }
.mach-hero .h2-cloud.c2 { animation-duration: 38s; animation-delay: -8s; }
@keyframes h2cloud { from { transform: translateX(-160px); } to { transform: translateX(1360px); } }
.mach-hero .h2-conf { animation: h2conf 5.2s ease-in-out infinite; transform-box: fill-box; transform-origin: center; }
@keyframes h2conf { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-13px) rotate(24deg); } }

.mach-hero .mach-legend b { color: #0F7A45; }

@media (prefers-reduced-motion: reduce) {
  .mach-hero .h2-sun, .mach-hero .h2-cloud, .mach-hero .h2-conf { animation: none; }
}