/* ==========================================================================
   MADie — dynamic layer
   Motion and "technology" texture. Loaded after site.css so it wins.
   Everything here degrades to static under prefers-reduced-motion.
   No rounded corners, no UI shadows — the flame glow is decorative art only.
   ========================================================================== */

/* ---- form consent notice ---------------------------------------------- */
.form__consent {
  font-size: .82rem; line-height: 1.55; color: var(--madie-body);
  max-width: 52ch; margin-top: .4rem;
}
.form__consent a { color: var(--madie-violet); text-decoration: underline; text-underline-offset: 2px; }
.form__consent a:hover { color: var(--madie-magenta); }

/* ---- legal / privacy page --------------------------------------------- */
.legal { max-width: 72ch; }
.legal .updated {
  font-family: var(--madie-mono); font-size: .72rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--madie-violet); margin-bottom: 2.4rem;
}
.legal h3 {
  font-family: var(--madie-display); font-weight: 600; color: var(--madie-ink);
  font-size: 1.28rem; margin-top: 2.6rem; margin-bottom: .7rem;
}
.legal p { margin-bottom: 1rem; }
.legal a { color: var(--madie-violet); text-decoration: underline; text-underline-offset: 2px; }
.legal a:hover { color: var(--madie-magenta); }
.legal .legal-list { margin: 0 0 1.2rem 0; padding-left: 0; }
.legal .legal-list li {
  position: relative; padding-left: 1.4rem; margin-bottom: .5rem; max-width: 68ch;
}
.legal .legal-list li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 12px; height: 1.4px; background: var(--madie-magenta);
}
.footer__base a { color: rgba(255,255,255,.72); text-decoration: underline; text-underline-offset: 2px; }
.footer__base a:hover { color: #fff; }

/* ---- honeypot: hidden from people, catches bots ----------------------- */
.hp {
  position: absolute !important; left: -9999px !important; top: auto;
  width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none;
}

/* ---- FIX: hero ghost link was ink-on-void (unreadable) ---------------- */
.hero .cta-ghost { color: #fff; }
.hero .cta-ghost .cta-arrow { color: #fff; }
.hero .cta-ghost::after { background: var(--madie-magenta); }

/* ---- hero data-network canvas ----------------------------------------- */
.hero__net {
  position: absolute; inset: 0; z-index: 1;
  pointer-events: none; mix-blend-mode: screen; opacity: .9;
}
.hero__bg { z-index: 0; }
.hero__inner, .hero__meta { position: relative; z-index: 2; }

/* ==========================================================================
   BURNING FLAME — a living accent, not a static picture
   ========================================================================== */
.flame {
  position: relative; width: max-content; margin-inline: auto;
  pointer-events: none; will-change: transform, filter;
  transform-origin: 50% 92%;
}
.flame img {
  position: relative; z-index: 1; width: auto;
  height: clamp(220px, 34vw, 440px);
  filter: saturate(1.05) brightness(1.02);
  animation: flame-flicker 3.6s ease-in-out infinite;
}
/* the glow is a radial gradient behind the art — decorative, not a box-shadow */
.flame__glow {
  position: absolute; left: 50%; top: 46%; z-index: 0;
  width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%);
  background: radial-gradient(closest-side,
      rgba(214,55,158,.42), rgba(135,68,181,.22) 46%, transparent 72%);
  filter: blur(6px);
  animation: flame-breathe 3.6s ease-in-out infinite;
}
@keyframes flame-flicker {
  0%,100% { transform: translateY(0) scaleY(1) skewX(0deg); filter: saturate(1.05) brightness(1.02); }
  25%     { transform: translateY(-2px) scaleY(1.02) skewX(-0.6deg); filter: saturate(1.12) brightness(1.08); }
  50%     { transform: translateY(1px) scaleY(0.99) skewX(0.5deg); filter: saturate(1.02) brightness(0.99); }
  75%     { transform: translateY(-1px) scaleY(1.015) skewX(-0.3deg); filter: saturate(1.1) brightness(1.05); }
}
@keyframes flame-breathe {
  0%,100% { opacity: .78; transform: translate(-50%,-50%) scale(1); }
  50%     { opacity: 1; transform: translate(-50%,-50%) scale(1.08); }
}

/* Flame placed as a section-edge accent on wide screens */
.flame--edge {
  position: absolute; right: clamp(1rem, 4vw, 4rem); bottom: 0; margin: 0;
  z-index: 0; opacity: .95;
}
.flame--edge img { height: clamp(300px, 40vw, 560px); }
.flame-host { position: relative; overflow: hidden; }
.flame-host > .wrap { position: relative; z-index: 1; }
@media (max-width: 820px) { .flame--edge { display: none; } }

/* ---- rotor: a knot that turns with scroll ----------------------------- */
.rotor {
  position: absolute; right: clamp(-60px, -4vw, -30px); top: 50%;
  width: min(40vw, 380px); transform: translateY(-50%);
  z-index: 0; opacity: .12; pointer-events: none; will-change: transform;
}
.rotor img { width: 100%; height: auto; }
@media (max-width: 820px) { .rotor { width: 60vw; opacity: .08; right: -20vw; } }

/* ==========================================================================
   METHOD — a rail that fills magenta as you scroll the stages
   ========================================================================== */
.stages { position: relative; padding-left: 34px; }
.stages__rail {
  position: absolute; left: 8px; top: 0; bottom: 0; width: 2px;
  background: var(--madie-rule);
}
.dark .stages__rail { background: var(--madie-rule-dk); }
.stages__fill {
  position: absolute; left: 8px; top: 0; width: 2px; height: 100%;
  background: linear-gradient(var(--madie-violet), var(--madie-magenta));
  transform: scaleY(0); transform-origin: top;
}
.stages .stage { position: relative; }
.stages .stage::before {
  content: ""; position: absolute; left: -34px; top: 2.55rem;
  width: 9px; height: 9px; background: var(--madie-paper);
  border: 2px solid var(--madie-violet); transform: translateX(-1px);
}
.dark .stages .stage::before { background: var(--madie-void); border-color: var(--madie-lilac); }
.stages .stage.in::before { border-color: var(--madie-magenta); }
@media (max-width: 620px) { .stages { padding-left: 26px; } .stages .stage::before { top: 0.4rem; left: -26px; } }

/* ==========================================================================
   TECHNOLOGY MARQUEE — the stack, in motion
   ========================================================================== */
.marquee { position: relative; overflow: hidden; width: 100%; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.marquee__track { display: flex; width: max-content; gap: .7rem; will-change: transform; }
.marquee__track.a { animation: marquee 38s linear infinite; }
.marquee__track.b { animation: marquee 44s linear infinite reverse; margin-top: .7rem; }
.marquee:hover .marquee__track { animation-play-state: paused; }
.marquee .tag { white-space: nowrap; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* ==========================================================================
   Reduced motion — freeze it all, keep it legible
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero__net { display: none; }
  .flame img, .flame__glow { animation: none; }
  .marquee__track.a, .marquee__track.b { animation: none; }
  .marquee { -webkit-mask-image: none; mask-image: none; }
  .marquee__track { flex-wrap: wrap; }
  .stages__fill { transform: scaleY(1) !important; }
}