/* ============================================================
   GENE HEW v4 — premium pass
   editorial inline-image hero · display marquee · cap glyphs · system maps
   ============================================================ */

/* ---------- HERO AURORA (slow, mouse-aware) ---------- */
.hero-aurora { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 0.5; pointer-events: none; }
.hero-aurora i { position: absolute; display: block; border-radius: 50%; filter: blur(72px); transition: translate 1.6s cubic-bezier(0.2, 0.6, 0.2, 1); }
.hero-aurora .ab1 {
  width: 48vw; height: 48vw; left: -6%; top: -14%;
  background: radial-gradient(circle, color-mix(in oklab, var(--green), white 50%) 0%, transparent 64%);
  animation: abFloat1 28s ease-in-out infinite alternate;
  translate: calc(var(--mx, 0) * 46px) calc(var(--my, 0) * 34px);
}
.hero-aurora .ab2 {
  width: 40vw; height: 40vw; right: -8%; top: 6%;
  background: radial-gradient(circle, color-mix(in oklab, var(--green), white 68%) 0%, transparent 62%);
  animation: abFloat2 34s ease-in-out infinite alternate;
  translate: calc(var(--mx, 0) * -64px) calc(var(--my, 0) * -42px);
}
.hero-aurora .ab3 {
  width: 34vw; height: 34vw; left: 32%; bottom: -18%;
  background: radial-gradient(circle, color-mix(in oklab, var(--green), #d8f2e2 35%) 0%, transparent 60%);
  opacity: 0.75;
  animation: abFloat3 24s ease-in-out infinite alternate;
  translate: calc(var(--mx, 0) * 28px) calc(var(--my, 0) * 22px);
}
@keyframes abFloat1 { from { transform: translate(0, 0) scale(1); } to { transform: translate(7vw, 9vh) scale(1.18); } }
@keyframes abFloat2 { from { transform: translate(0, 0) scale(1.1); } to { transform: translate(-6vw, 12vh) scale(0.92); } }
@keyframes abFloat3 { from { transform: translate(0, 0) scale(1); } to { transform: translate(5vw, -8vh) scale(1.22); } }
@media (prefers-reduced-motion: reduce) { .hero-aurora i { animation: none; translate: 0 0; } }

/* ---------- HERO FLOATS (the photos are back) ---------- */
.hero-floats { position: absolute; inset: 0; z-index: 3; pointer-events: none; }
.float-ph {
  position: absolute; margin: 0; width: clamp(96px, 10.5vw, 180px);
  border-radius: 12px; overflow: hidden; pointer-events: auto; cursor: zoom-in;
  box-shadow: 0 26px 56px -24px rgba(10, 25, 18, 0.45);
  transition: rotate 0.5s var(--ease-out);
  will-change: transform, opacity, filter;
}
.float-ph img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.7s var(--ease-out); }
.float-ph:hover { rotate: 0deg !important; }
.float-ph:hover img { transform: scale(1.08); }
.fp1 { top: 20%; left: 2.5%; rotate: -6deg; aspect-ratio: 0.82; width: clamp(130px, 14vw, 250px); }
.fp2 { top: 58%; left: 7%; rotate: 4deg; aspect-ratio: 1.25; width: clamp(110px, 11.5vw, 200px); }
.fp3 { bottom: 9%; left: 22%; rotate: -3deg; aspect-ratio: 1; width: clamp(90px, 9vw, 160px); }
.fp4 { top: 23%; right: 3%; rotate: 5deg; aspect-ratio: 1.2; width: clamp(130px, 13.5vw, 240px); }
.fp5 { top: 58%; right: 6.5%; rotate: -4deg; aspect-ratio: 0.85; width: clamp(110px, 11vw, 195px); }
.fp6 { bottom: 9%; right: 21%; rotate: 3deg; aspect-ratio: 1.1; width: clamp(90px, 9.5vw, 165px); }
body.js .float-ph { opacity: 0; }
body.js .ph-in .float-ph { animation: phIn 1.1s var(--ease-out) forwards; }
body.js .ph-in .fp1 { animation-delay: 0.15s; }
body.js .ph-in .fp4 { animation-delay: 0.3s; }
body.js .ph-in .fp2 { animation-delay: 0.45s; }
body.js .ph-in .fp5 { animation-delay: 0.6s; }
body.js .ph-in .fp3 { animation-delay: 0.75s; }
body.js .ph-in .fp6 { animation-delay: 0.9s; }
@keyframes phIn { from { opacity: 0; scale: 0.84; } to { opacity: 1; scale: 1; } }
@media (prefers-reduced-motion: reduce) { body.js .float-ph { opacity: 1; animation: none !important; } }
@media (max-width: 1180px) { .fp3, .fp6 { display: none; } .float-ph { width: clamp(90px, 10vw, 150px) !important; } }
@media (max-width: 760px) { .hero-floats { display: none; } }

/* ---------- HERO C (centered · the weight comes off) ---------- */
.hero-c { min-height: 100svh; display: flex; flex-direction: column; justify-content: space-between; padding-top: 96px; overflow: visible; z-index: 5; }
.hero-c .wrap { width: 100%; }
.hero-c #flow-canvas { opacity: 0.42; }
.hx-top { display: flex; justify-content: space-between; align-items: center; gap: 20px; position: relative; z-index: 2; padding-top: 10px; }
.hero-c .hero-kicker { margin-bottom: 0; }
.hero-c .hero-kicker::before { display: none; }
.kick-ava { display: inline-block; width: 36px; height: 36px; border-radius: 50%; overflow: hidden; border: 2px solid var(--green); flex: 0 0 auto; }
.kick-ava img { width: 100%; height: 100%; object-fit: cover; }
body[data-inline-imgs="off"] .kick-ava { display: none; }
.hx-avail { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); margin: 0; }
.hx-avail::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: nowPulse 2.4s ease infinite; }
@media (max-width: 700px) { .hx-avail { display: none; } }

.hero-core { position: relative; z-index: 2; margin: auto 0; text-align: center; padding: 4vh 0; }
.hero-core h1 { margin: 0 auto; font-size: clamp(2.9rem, 7vw, 7.2rem); letter-spacing: -0.032em; line-height: 1.04; font-weight: 750; max-width: 17ch; }
.hero-core h1 em { font-style: normal; color: var(--green-deep); }
.hero-core .hero-sub { margin: clamp(22px, 3.5vh, 36px) auto clamp(28px, 4vh, 42px); max-width: 52ch; font-size: clamp(16.5px, 1.35vw, 19px); }
.hero-core .hero-ctas { justify-content: center; }

/* the weight — solid lifts off, outline remains */
.weight { position: relative; display: inline-block; }
.weight .w-ghost { color: transparent; -webkit-text-stroke: 2px color-mix(in oklab, var(--ink), transparent 30%); }
.weight .w-solid { position: absolute; inset: 0; color: var(--ink); }
body.js .hero-core h1.go .w-solid { animation: liftOff 1.5s cubic-bezier(0.55, 0, 0.65, 0.45) 2s forwards; }
.hero-core h1.go-done .weight:hover .w-solid { animation: liftOff 1.5s cubic-bezier(0.55, 0, 0.65, 0.45) 0.12s forwards; }
@keyframes liftOff {
  0% { transform: none; opacity: 1; }
  100% { transform: translateY(-1.3em) rotate(-7deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) { .weight .w-solid { opacity: 0; animation: none !important; } }

.hero-foot { position: relative; z-index: 2; display: flex; justify-content: space-between; align-items: center; gap: 18px; border-top: 1px solid var(--line); padding-top: 18px; padding-bottom: 22px; color: var(--ink-soft); }
.hx-now { display: flex; align-items: center; gap: 10px; color: var(--ink-soft); margin: 0; }
.hx-now::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--green); animation: nowPulse 2.4s ease infinite; }
.hf-scroll { letter-spacing: 0.18em; }
@keyframes nowPulse { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in oklab, var(--green), transparent 40%); } 60% { box-shadow: 0 0 0 9px transparent; } }
@media (prefers-reduced-motion: reduce) { .hx-avail::before, .hx-now::before { animation: none; } }
@media (max-width: 700px) {
  .hero-c { padding-top: 84px; }
  .hero-foot { flex-wrap: wrap; }
  .hf-scroll { display: none; }
}

/* ---------- STATS v4.1 ---------- */
.stats { grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: clamp(40px, 6vw, 72px); padding-top: 0; border-top: 1px solid var(--line); }
.stat { display: flex; align-items: center; gap: clamp(16px, 2vw, 28px); padding: clamp(26px, 3.4vw, 46px) clamp(18px, 2.5vw, 40px); }
.stat + .stat { border-left: 1px solid var(--line); }
.stat-g { flex: 0 0 auto; width: clamp(54px, 5vw, 68px); height: clamp(54px, 5vw, 68px); }
.pips { display: grid; grid-template-columns: repeat(5, 1fr); gap: 5px; align-content: center; }
.pips span { display: block; aspect-ratio: 1; border-radius: 2.5px; background: var(--line); transition: background 0.5s ease; transition-delay: var(--d, 0s); }
.stats.in .pips span { background: var(--green); }
.ring .track { stroke: var(--line); stroke-width: 6; fill: none; }
.ring .arc { stroke: var(--green); stroke-width: 6; fill: none; stroke-linecap: round; stroke-dasharray: 163.4; stroke-dashoffset: 163.4; transform: rotate(-90deg); transform-origin: 50% 50%; transition: stroke-dashoffset 1.7s var(--ease-out) 0.25s; }
.stats.in .ring .arc { stroke-dashoffset: 0; }
.batt .shell { stroke: var(--ink-soft); stroke-width: 2.5; fill: none; }
.batt .tip { fill: var(--ink-soft); }
.batt .fill { fill: var(--green); transform: scaleX(0); transform-origin: 9px 50%; transition: transform 1.5s var(--ease-out) 0.3s; }
.stats.in .batt .fill { transform: scaleX(1); }
@media (max-width: 700px) {
  .stats { grid-template-columns: 1fr; }
  .stat { padding-left: 0; padding-right: 0; }
  .stat + .stat { border-left: 0; border-top: 1px solid var(--line); }
}
@media (prefers-reduced-motion: reduce) {
  .pips span { background: var(--green); transition: none; }
  .ring .arc { stroke-dashoffset: 0; transition: none; }
  .batt .fill { transform: scaleX(1); transition: none; }
}

/* ---------- VAN ACCORDION (old-site homage) ---------- */
.van-acc { display: flex; gap: 12px; height: clamp(240px, 38vh, 400px); margin-bottom: 14px; }
.acc-panel { position: relative; flex: 1; overflow: hidden; border-radius: 12px; cursor: zoom-in; transition: flex 0.75s var(--ease-out); }
.acc-panel img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.02); transition: transform 1s var(--ease-out); }
.van-acc:hover .acc-panel { flex: 0.72; }
.van-acc .acc-panel:hover { flex: 3.4; }
.acc-panel:hover img { transform: scale(1.03); }
.acc-panel .van-label {
  position: absolute; left: 14px; bottom: 14px; padding: 7px 14px; border-radius: 999px;
  background: var(--green); color: var(--black); font-family: var(--font-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease 0.15s, transform 0.45s var(--ease-out) 0.15s; white-space: nowrap;
}
.acc-panel:hover .van-label { opacity: 1; transform: none; }
@media (max-width: 760px) {
  .van-acc { flex-direction: column; height: auto; }
  .acc-panel { aspect-ratio: 16 / 9; flex: none; }
  .acc-panel .van-label { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .van-acc:hover .acc-panel, .van-acc .acc-panel:hover { flex: 1; }
  .acc-panel .van-label { opacity: 1; transform: none; }
}

/* ---------- DISPLAY MARQUEE ---------- */
.marquee.marquee-xl { padding: clamp(18px, 2.6vw, 30px) 0; }
.marquee-xl span {
  font-family: var(--font-display); font-size: clamp(2rem, 4.6vw, 4.2rem);
  font-weight: 750; letter-spacing: -0.025em; text-transform: none; color: var(--ink);
  padding-right: 0.6em;
}
.marquee-xl span::after { content: ""; display: inline-block; width: 0.42em; height: 0.42em; border-radius: 50%; background: var(--green); margin-left: 0.6em; vertical-align: 0.06em; padding: 0; }
.marquee-xl span.ol { color: transparent; -webkit-text-stroke: 1.5px color-mix(in oklab, var(--green-deep), transparent 20%); }
.marquee-xl span b { color: var(--green-deep); font-weight: 750; }
.marquee-xl .mq-track { animation-duration: 30s; }

/* ---------- CAP GLYPHS ---------- */
.cap-ic { display: grid; gap: 12px; justify-items: start; padding-top: 4px; }
.cap-ic svg { width: 42px; height: 42px; stroke: var(--green-deep); stroke-width: 2; fill: none; stroke-linecap: round; transition: stroke 0.3s ease, transform 0.5s var(--ease-out); }
.cap:hover .cap-ic svg { stroke: var(--green); transform: scale(1.08) rotate(-2deg); }
.cap-ic .idx { padding-top: 0; }

/* ---------- SYSTEM MAPS (cases) ---------- */
.sys { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; margin-top: 20px; }
.sys .node {
  font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.07em; text-transform: uppercase;
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line-dark);
  color: var(--on-dark-soft); transition: border-color 0.3s ease, color 0.3s ease;
}
.sys .arr { color: var(--green); font-size: 14px; line-height: 1; }
.sys .node.hot { border-color: color-mix(in oklab, var(--green), transparent 45%); color: var(--green); }
.case:hover .sys .node { border-color: color-mix(in oklab, var(--on-dark), transparent 75%); }
.case:hover .sys .node.hot { border-color: var(--green); }

/* topographic contour field (field.js) renders into #flow-canvas; the terrain
   morphs internally, so no CSS animation is needed — just hint the opacity fades. */
#flow-canvas { will-change: opacity; }