/* av-platforms.css — PAGE-SPECIFIC signature hero for /platforms/.
   The body of the page uses the shared av-components layer; this file owns only
   the bespoke "one signal → three routes" routing hero, the page's unique moment.
   Built on tokens + skin vars, so it themes day/night with no extra work.

   Entrance animations are VISIBLE-BY-DEFAULT and only applied under
   prefers-reduced-motion: no-preference — content is never hidden behind an
   animation that may not run (the opacity:0-start trap). */

/* ── HERO SHELL ───────────────────────────────────────────────────────────── */

.av-platforms-hero {
  position: relative;
  overflow: hidden;
  padding: calc(64px + var(--av-space-9)) 0 var(--av-space-9);
}

/* Atmospheric orange wash, off to the right behind the routing visual. */
.av-platforms-hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 720px;
  height: 620px;
  max-width: 90vw;
  background: radial-gradient(ellipse at center, rgba(252, 114, 19, 0.12) 0%, transparent 68%);
  pointer-events: none;
}

.av-platforms-hero__inner {
  position: relative;
  z-index: 1;
  max-width: var(--av-max-w);
  margin: 0 auto;
  padding: 0 var(--av-space-5);
  display: grid;
  /* minmax(0,…) stops the big-heading column from overflowing its fr share and
     starving the visual column to zero width (grid blowout). */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  align-items: center;
  gap: var(--av-space-7);
}

.av-platforms-hero__content {
  max-width: 600px;
  min-width: 0;
}

.av-platforms-hero__eyebrow {
  display: inline-block;
  background: rgba(252, 114, 19, 0.12);
  color: var(--av-orange);
  border: 1px solid rgba(252, 114, 19, 0.3);
  border-radius: 100px;
  padding: var(--av-space-1) var(--av-space-4);
  font-family: var(--av-font-display);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: var(--av-space-5);
}

.av-platforms-hero__title {
  font-family: var(--av-font-display);
  font-size: clamp(2.25rem, 4.6vw, 3.5rem);
  font-weight: 700;
  line-height: 1.07;
  letter-spacing: -0.025em;
  color: var(--av-text);
  margin: 0 0 var(--av-space-5);
  text-wrap: balance;
}
.av-platforms-hero__title-accent { color: var(--av-orange); }

.av-platforms-hero__sub {
  font-size: clamp(1rem, 2.1vw, 1.2rem);
  color: var(--av-text-muted);
  line-height: 1.65;
  margin: 0 0 var(--av-space-6);
  max-width: 460px;
}

.av-platforms-hero__actions {
  display: flex;
  align-items: center;
  gap: var(--av-space-3);
  flex-wrap: wrap;
}

.av-platforms-hero__visual {
  position: relative;
  width: 100%;
}
.av-route {
  width: 100%;
  /* aspect-ratio pins the height: an inline SVG with height:auto can collapse
     in a grid/flex item. This guarantees the box from the viewBox ratio. */
  aspect-ratio: 560 / 340;
  height: auto;
  max-height: 420px;
  display: block;
  overflow: visible;
}


/* ── ROUTING DIAGRAM ──────────────────────────────────────────────────────── */

/* Faint base wires from source to each destination. */
.av-route__base {
  fill: none;
  stroke: var(--av-elephant);
  opacity: 0.28;
  stroke-width: 2;
  stroke-linecap: round;
}

/* Bright orange signal that draws down each wire (source → destination), then
   retracts, staggered. Paths carry pathLength="100" so the draw is normalized and
   the reveal direction is guaranteed to run from the path start (the source). */
.av-route__pulse {
  fill: none;
  stroke: var(--av-orange);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 100;
  stroke-dashoffset: 100;
  animation: av-route-travel 2.6s var(--av-ease-out) infinite;
}
.av-route__pulse--1 { animation-delay: 0s; }
.av-route__pulse--2 { animation-delay: 0.55s; }
.av-route__pulse--3 { animation-delay: 1.1s; }

@keyframes av-route-travel {
  0%   { stroke-dashoffset: 100; }   /* empty wire */
  42%  { stroke-dashoffset: 0; }     /* drawn source → destination */
  58%  { stroke-dashoffset: 0; }     /* brief hold at the destination */
  100% { stroke-dashoffset: -100; }  /* retract, ready for the next signal */
}

/* Source node — the incoming signal, emitting rings. */
.av-route__src-core { fill: var(--av-orange); }
.av-route__src-ring {
  fill: none;
  stroke: var(--av-orange);
  stroke-width: 1.5;
  transform-origin: center;
  transform-box: fill-box;
  animation: av-route-emit 2.6s var(--av-ease-out) infinite;
}
.av-route__src-ring--2 { animation-delay: 1.3s; }

@keyframes av-route-emit {
  0%   { transform: scale(0.4); opacity: 0.9; }
  70%  { opacity: 0; }
  100% { transform: scale(2.6); opacity: 0; }
}

/* Destination nodes — flash as the pulse lands. */
.av-route__dest {
  fill: var(--av-surface-raise);
  stroke: var(--av-border);
  stroke-width: 2;
  animation: av-route-arrive 2.6s var(--av-ease-out) infinite;
}
.av-route__dest--1 { animation-delay: 1.05s; }
.av-route__dest--2 { animation-delay: 1.6s; }
.av-route__dest--3 { animation-delay: 2.15s; }

/* Flash at the start of the cycle, timed (via delay) to the pulse's arrival. */
@keyframes av-route-arrive {
  0%        { fill: var(--av-surface-raise); stroke: var(--av-border); }
  8%        { fill: var(--av-orange); stroke: var(--av-orange); }
  32%, 100% { fill: var(--av-surface-raise); stroke: var(--av-border); }
}

.av-route__icon { fill: none; stroke: var(--av-text-muted); stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.av-route__label {
  fill: var(--av-text);
  font-family: var(--av-font-display);
  font-size: 17px;
  font-weight: 600;
}
.av-route__sublabel {
  fill: var(--av-text-muted);
  font-family: var(--av-font-body);
  font-size: 12.5px;
}


/* ── ENTRANCE (motion-safe: only when the user allows motion) ──────────────── */

@media (prefers-reduced-motion: no-preference) {
  .av-platforms-hero__eyebrow {
    opacity: 0;
    animation: av-rise 0.6s var(--av-ease-out) 0.05s forwards;
  }
  .av-platforms-hero__title {
    opacity: 0;
    transform: translateY(24px);
    animation: av-rise 0.75s var(--av-ease-out) 0.12s forwards;
  }
  .av-platforms-hero__sub {
    opacity: 0;
    transform: translateY(18px);
    animation: av-rise 0.7s var(--av-ease-out) 0.26s forwards;
  }
  .av-platforms-hero__actions {
    opacity: 0;
    transform: translateY(14px);
    animation: av-rise 0.65s var(--av-ease-out) 0.4s forwards;
  }
  /* The visual is NOT opacity-gated on entrance — the routing animation supplies
     the motion, and the diagram is present immediately (no invisible-until-animated
     risk). It gets a gentle, opacity-independent slide instead. */
  .av-platforms-hero__visual {
    animation: av-route-enter 0.8s var(--av-ease-out) 0.45s both;
  }
}

@keyframes av-route-enter {
  from { transform: translateY(16px) scale(0.985); }
  to   { transform: translateY(0) scale(1); }
}


/* ── RESPONSIVE ───────────────────────────────────────────────────────────── */

@media (max-width: 880px) {
  .av-platforms-hero__inner {
    grid-template-columns: 1fr;
    gap: var(--av-space-6);
  }
  .av-platforms-hero__content { max-width: 640px; }
  .av-route { max-height: 320px; margin: 0 auto; }
}


/* ── REDUCED MOTION (routing loops → static lit wires) ─────────────────────── */

@media (prefers-reduced-motion: reduce) {
  .av-route__pulse {
    stroke-dasharray: none;
    stroke-dashoffset: 0;
    opacity: 0.5;
    animation: none;
  }
  .av-route__src-ring { animation: none; opacity: 0.3; }
  .av-route__dest { animation: none; }
}