/* ===== About page (about-aqua.html) ===== */
/* Shares style-aqua.css's design language — these rules only add the
   page-specific components that don't already exist site-wide. */

/* ----- Hero: videos/about us voxion.mp4, plain autoplay/loop instead of
   the scroll-scrub treatment, since that mechanic is tied to the
   homepage's own interaction model. Same #hero-video / .hero-scrim
   structure as contact-aqua.html / integrations-aqua.html. ----- */

/* Height override — about-aqua.html only (about-page-aqua.css isn't
   linked from any other page, so this can't leak elsewhere). This
   page's hero is just a centered text block — no bottom-anchoring
   visual like the homepage's dashboard widget — so style-aqua.css's
   shared 100vh reads as excess empty space below the CTA. Scoped to
   desktop: mobile keeps style-aqua.css's own 90vh/90svh rule (its iOS
   Safari address-bar jump fix), which isn't part of this ask.
   #hero-video is width/height:100% of .hero with object-fit:cover, so
   shortening .hero just shortens the video with it — still full-bleed,
   no distortion or crop change. */
/* Bottom fade, same technique/target color as the engine pages'
   .sts-hero-bottom-fade / .ttt-hero-bottom-fade -- confirmed this
   page's next section (.usecases-section) resolves to the same
   var(--light-bg) / #F5F6FA (a plain background-color, not
   .statement-mesh-sticky like the other 3 pages, but the same
   resolved color regardless). Height stays 90px regardless of the
   desktop-only shortened .hero height set below -- it's just an edge
   treatment, not proportional to the hero's total height. */
.about-hero-bottom-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 90px;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    rgba(245, 246, 250, 0.18) 35%,
    rgba(245, 246, 250, 0.5) 60%,
    rgba(245, 246, 250, 0.82) 82%,
    #F5F6FA 100%
  );
}

@media (min-width: 768px) {
  .hero {
    height: 72vh;
    min-height: 560px;
  }

  .hero-headline-wrap {
    justify-content: center;
    padding-top: 0;
  }
}

.about-hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, 0.08);
  border: 0.5px solid rgba(255, 255, 255, 0.2);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text-on-dark);
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: var(--space-3);
  opacity: 0;
  animation: heroTextEntrance 0.6s ease-out forwards;
}

.about-hero-badge-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--accent-amber);
}

/* ----- Section 2: pinned scroll-cycling story beats — reuses the
   .usecases-* scaffold exactly (same architecture as Use Cases /
   Configurable / automations-aqua.html's automations list). Only the
   wrapper height differs per brief (4 items x 80vh). ----- */

.usecases-scroll-wrapper.about-scroll-wrapper {
  height: 320vh;
}

.about-illustration {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-4);
}

.about-illustration svg {
  width: 100%;
  height: 100%;
  max-width: 320px;
  max-height: 320px;
}

/* ----- Description text: only the item matching the active list
   selection is ever shown — all 4 lines are stacked in the same box
   (position:absolute) and crossfade, same as the transcript panels
   beside them, instead of sitting in normal flow where all 4 stack up
   and show at once. is-active still gets a brighter/heavier treatment
   than its resting state so switching in reads as "lighting up" rather
   than a flat crossfade — that's the one piece actually carried over
   from Infrastructure Boundary's dimmed/active technique. */

.usecases-detail {
  position: relative;
  min-height: 150px;
}

.about-desc-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  font-family: 'Inter', sans-serif;
  font-size: 16px;
  line-height: 1.6;
  max-width: 420px;
  color: currentColor;
  opacity: 0;
  font-weight: 400;
  transition: opacity 0.4s var(--ease), font-weight 0.3s var(--ease);
}

.about-desc-line.is-active {
  position: relative;
  opacity: 1;
  font-weight: 500;
}

/* ===== Illustration 1 — "A Spark Igniting" (Our Story) =====
   A dark stage (the "darkness" the brief calls for — the outer card
   itself stays white/.usecases-visual-col's fixed background, so the
   dark ground lives on this inner stage instead) with a single point of
   light bursting outward once, settling into a slow steady glow, "2024"
   fading in beside it shortly after. Runs only while data-index="0" is
   .active — see the .usecases-transcript.active scoping below every
   keyframe rule in this section, so it's paused/reset (back to the
   unlit base state) whenever this item isn't the current one. */

.spark-stage {
  position: relative;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: #0a0a0a;
  display: flex;
  align-items: center;
  justify-content: center;
}

.spark-dot {
  position: relative;
  z-index: 1;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--accent-amber);
  opacity: 0;
  transform: scale(0);
  box-shadow: 0 0 16px 3px rgba(170, 208, 226, 0.5);
}

.spark-rings {
  position: absolute;
}

.spark-ring {
  fill: none;
  stroke: var(--accent-amber);
  stroke-width: 1.5;
  opacity: 0;
  transform-origin: 20px 20px;
}

.spark-year {
  position: absolute;
  left: calc(50% + 22px);
  top: 50%;
  transform: translateY(-50%) translateX(-6px);
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 20px;
  color: #ffffff;
  opacity: 0;
  white-space: nowrap;
}

@keyframes sparkDotBurst {
  0% { opacity: 0; transform: scale(0); }
  40% { opacity: 1; transform: scale(1.5); }
  70% { transform: scale(0.85); }
  100% { opacity: 1; transform: scale(1); }
}

@keyframes sparkGlow {
  0%, 100% { box-shadow: 0 0 14px 3px rgba(170, 208, 226, 0.45); }
  50% { box-shadow: 0 0 22px 6px rgba(170, 208, 226, 0.8); }
}

@keyframes sparkRingBurst {
  0% { opacity: 0.85; transform: scale(1); }
  100% { opacity: 0; transform: scale(7); }
}

@keyframes sparkYearIn {
  0% { opacity: 0; transform: translateY(-50%) translateX(-6px); }
  100% { opacity: 1; transform: translateY(-50%) translateX(0); }
}

.usecases-transcript.active .spark-dot {
  animation: sparkDotBurst 0.6s ease-out forwards, sparkGlow 2.6s ease-in-out 0.6s infinite;
}

.usecases-transcript.active .spark-ring {
  animation: sparkRingBurst 0.6s ease-out forwards;
}

.usecases-transcript.active .spark-year {
  animation: sparkYearIn 0.4s ease-out forwards;
  animation-delay: 0.3s;
}

/* ===== Illustration 2 — "Dawn Rising" (Our Vision) =====
   Replaces the earlier aperture/iris concept, which even after fixing
   its animation mechanism still read as too dim/low-contrast (a blurred,
   0.55-opacity glow behind blades that only faded to 0.08, never fully
   gone, on a dark-on-dark stage). This version is deliberately simpler
   and impossible to render dim: a plain HTML span (no SVG, no
   transform-origin ambiguity at all) scales/brightens from a small dim
   dot into a solid white-cored, --accent-amber-rimmed disc sitting right
   on the horizon line, using the same visible-by-construction approach
   as Illustration 1's spark-dot (solid color + box-shadow, not a
   translucent blur) so it reads clearly at rest and at peak alike. */

.dawn-stage {
  position: relative;
  width: 220px;
  height: 220px;
  border-radius: var(--radius-card);
  background: var(--dark-bg);
  overflow: hidden;
}

.dawn-horizon {
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1px;
  background: rgba(255, 255, 255, 0.3);
  z-index: 2;
}

.dawn-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 90px;
  height: 90px;
  margin: -90px 0 0 -45px;
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%, #ffffff 0%, var(--accent-amber) 45%, var(--accent-amber) 100%);
  box-shadow: 0 0 30px 10px rgba(170, 208, 226, 0.55);
  transform-origin: 50% 100%;
  opacity: 0.35;
  transform: scale(0.35);
  z-index: 1;
}

@keyframes dawnRise {
  0% { opacity: 0.35; transform: scale(0.35); }
  55% { opacity: 1; transform: scale(1); }
  70% { opacity: 1; transform: scale(1); }
  100% { opacity: 0.35; transform: scale(0.35); }
}

.usecases-transcript.active .dawn-glow {
  animation: dawnRise 4s ease-in-out infinite;
}

/* ===== Illustration 3 — "Node Network Lighting Up" (Why AI, Why Now) =====
   Same node + connector-line technique as index.html's "Multi-tenant"
   feature card (.node-diagram in style-aqua.css), reskinned as plain
   dots instead of labeled pills since this is a concept beat, not a
   product screenshot, and scaled up to fill this card. Each spoke is a
   dim base line/node plus an accent "lit" overlay on top whose opacity
   alone is animated (never its color), so it's a single safe, standard
   CSS technique instead of trying to keyframe a color change directly.
   Staggered animation-delay per spoke (0s, 0.22s, 0.44s...) turns one
   shared keyframe into a sweep that lights the 6 satellites in sequence
   around the always-softly-pulsing center — "circuit switching on". */

.network-stage {
  position: relative;
  width: 230px;
  height: 230px;
}

.network-svg {
  width: 100%;
  height: 100%;
}

.network-line-base {
  stroke: var(--border);
  stroke-width: 1.5;
}

.network-line-lit {
  stroke: var(--accent-amber);
  stroke-width: 2;
  opacity: 0;
}

.network-node-base {
  fill: var(--light-bg);
  stroke: var(--border);
  stroke-width: 1.5;
}

.network-node-lit {
  fill: var(--accent-amber);
  opacity: 0;
}

.network-core-base {
  fill: var(--dark-bg);
}

.network-core-lit {
  fill: var(--accent-amber);
  opacity: 0.5;
}

@keyframes networkPulseOpacity {
  0%, 80%, 100% { opacity: 0; }
  40% { opacity: 1; }
}

@keyframes networkCorePulse {
  0%, 100% { opacity: 0.5; }
  50% { opacity: 1; }
}

.usecases-transcript.active .network-line-lit,
.usecases-transcript.active .network-node-lit {
  animation: networkPulseOpacity 4s ease-in-out infinite;
}

.usecases-transcript.active .network-line-lit.network-line-1,
.usecases-transcript.active .network-node-lit.network-node-1 { animation-delay: 0s; }
.usecases-transcript.active .network-line-lit.network-line-2,
.usecases-transcript.active .network-node-lit.network-node-2 { animation-delay: 0.22s; }
.usecases-transcript.active .network-line-lit.network-line-3,
.usecases-transcript.active .network-node-lit.network-node-3 { animation-delay: 0.44s; }
.usecases-transcript.active .network-line-lit.network-line-4,
.usecases-transcript.active .network-node-lit.network-node-4 { animation-delay: 0.66s; }
.usecases-transcript.active .network-line-lit.network-line-5,
.usecases-transcript.active .network-node-lit.network-node-5 { animation-delay: 0.88s; }
.usecases-transcript.active .network-line-lit.network-line-6,
.usecases-transcript.active .network-node-lit.network-node-6 { animation-delay: 1.1s; }

.usecases-transcript.active .network-core-lit {
  animation: networkCorePulse 2s ease-in-out infinite;
}

/* ===== Illustration 4 — "Location Ping" (Based in Europe) =====
   Simplified Netherlands outline behind the pin, with the pin anchored
   at Den Haag's approximate position on the coast (25%/32% of the map's
   viewBox) rather than centered -- reads as an actual location on the
   country, not just a generic drop-pin animation. pinDrop / pingRipple
   are unchanged. */

.pin-stage {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
}

.map-stage {
  position: relative;
  width: 140px;
  height: 170px;
}

.map-nl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  color: var(--dark-bg);
  opacity: 0.18;
}

.usecases-transcript.active .map-nl {
  opacity: 0.35;
}

.pin-wrap {
  position: absolute;
  left: 25%;
  top: 32%;
  width: 48px;
  height: 48px;
  transform: translate(-50%, -100%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.pin-icon {
  position: relative;
  z-index: 1;
  width: 34px;
  height: 34px;
  color: var(--dark-bg);
  opacity: 0;
  transform: translateY(-28px) scale(0.6);
}

.usecases-transcript.active .pin-icon {
  color: var(--accent-amber);
  animation: pinDrop 0.4s ease-out forwards;
}

.pin-ping {
  position: absolute;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid var(--accent-amber);
  opacity: 0;
}

@keyframes pinDrop {
  0% { opacity: 0; transform: translateY(-28px) scale(0.6); }
  60% { opacity: 1; transform: translateY(4px) scale(1.15); }
  80% { transform: translateY(-2px) scale(0.95); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes pingRipple {
  0% { opacity: 0.8; transform: scale(1); }
  100% { opacity: 0; transform: scale(2.5); }
}

.usecases-transcript.active .pin-ping {
  animation: pingRipple 1.5s ease-out infinite;
  animation-delay: 0.4s;
}

.usecases-transcript.active .pin-ping-2 {
  animation-delay: 1.15s;
}

.pin-label {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-primary);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.4s var(--ease), transform 0.4s var(--ease);
}

.usecases-transcript.active .pin-label {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.5s;
}

/* ----- Section: From the Blog — reuses .usecases-section/.usecases-intro
   for the light background + heading scaffold (same as Trust above it).
   Card grid + thumbnail gradients mirror blog-aqua.html's Featured grid
   (.blog-featured-* in css/blog-page-aqua.css) — copied here under new
   class names instead of linking that stylesheet page-wide, and given
   this page's own border/card treatment since these thumbs sit on
   var(--light-bg), not blog's black hero band. ----- */

.about-blog-section {
  padding-bottom: var(--space-7);
}

.about-blog-grid {
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 var(--space-3);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.about-blog-card {
  display: block;
  text-decoration: none;
}

.about-blog-thumb {
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-card);
  border: 0.5px solid var(--border);
  overflow: hidden;
  transition: opacity 0.3s var(--ease);
}

.about-blog-card:hover .about-blog-thumb {
  opacity: 0.85;
}

.about-blog-caption {
  margin-top: 14px;
}

.about-blog-date {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}

.about-blog-title {
  font-family: 'Inter', sans-serif;
  font-size: 17px;
  font-weight: 700;
  color: var(--text-primary);
  line-height: 1.3;
}

.about-blog-thumb-green {
  background:
    radial-gradient(at 15% 20%, #d4f0dc 0%, transparent 55%),
    radial-gradient(at 85% 15%, #b8e8c8 0%, transparent 55%),
    radial-gradient(at 50% 90%, #e8f7ec 0%, transparent 55%),
    #fdfcfb;
}

.about-blog-thumb-peach {
  background:
    radial-gradient(at 15% 20%, #ffd9c4 0%, transparent 55%),
    radial-gradient(at 85% 15%, #ffb8a3 0%, transparent 55%),
    radial-gradient(at 50% 90%, #ffeedc 0%, transparent 55%),
    #fdfcfb;
}

.about-blog-thumb-lavender {
  background:
    radial-gradient(at 15% 20%, #d4d9ff 0%, transparent 55%),
    radial-gradient(at 85% 15%, #b8c4ff 0%, transparent 55%),
    radial-gradient(at 50% 90%, #e8eaff 0%, transparent 55%),
    #fdfcfb;
}

.about-blog-viewall-row {
  text-align: center;
  margin-top: var(--space-5);
}

@media (max-width: 860px) {
  .about-blog-grid {
    grid-template-columns: 1fr;
    gap: var(--space-3);
  }
}

/* Pinned-scroll-drives-horizontal-translateX mechanic, ported from
   Ascendwell's #how-it-works (js/how-carousel.js + .how-scroll/.how-pin/
   .how-track-viewport/.how-track/.how-card/.how-steps/.how-step-pill in
   Ascendwell's css/style.css) — same architecture, but every color here
   comes from Voxion's own tokens-aqua.css, none of Ascendwell's
   (#1A1A1E / #7A7E86 / #DCDADA etc. never appear below). One deliberate
   behavior change from the reference: Ascendwell drives translateX raw
   off scroll progress every frame with NO transition (their own comment
   says a transition would fight the scroll gesture and read as
   laggy/rubber-banded for a continuous 1:1 drag feel). This brief asks
   for the opposite — discrete 5-segment snapping with a smoothed
   ~350ms transition per segment crossing — so .trust-track keeps a
   transition here on purpose; see about-trust-carousel.js. */

#trust {
  background: var(--light-bg);
}

.trust-scroll {
  position: relative;
  height: calc(var(--trust-count, 5) * 60vh);
}

.trust-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow: hidden;
}

.trust-track-viewport {
  overflow: hidden;
  max-width: 1150px;
  width: 100%;
  margin: var(--space-5) auto 0;
}

.trust-track {
  display: flex;
  gap: var(--space-3);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform;
}

.trust-card {
  flex: 0 0 340px;
  width: 340px;
  min-height: 200px;
  background: #ffffff;
  border: 0.5px solid var(--border);
  border-radius: var(--radius-card);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.06);
  padding: var(--space-4) var(--space-3);
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  opacity: 0.6;
  transition: opacity 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.trust-card.is-active {
  opacity: 1;
}

.trust-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: var(--radius-ui);
  background: rgba(170, 208, 226, 0.25);
  color: var(--dark-bg);
}

.trust-card-label {
  font-family: 'Inter', sans-serif;
  font-weight: 700;
  font-size: 17px;
  color: var(--text-primary);
}

.trust-card-desc {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  line-height: 1.55;
  color: var(--text-secondary);
}

.trust-steps {
  display: flex;
  list-style: none;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-5);
  padding: 0;
}

.trust-step-pill {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: #ffffff;
  color: var(--text-primary);
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.35s var(--ease), color 0.35s var(--ease), border-color 0.35s var(--ease);
}

.trust-step-pill.is-active {
  background: var(--accent-amber);
  border-color: var(--accent-amber);
  color: var(--text-primary);
  font-weight: 700;
}

@media (prefers-reduced-motion: reduce) {
  .trust-card,
  .trust-step-pill,
  .trust-track {
    transition: none;
  }
}

@media (max-width: 860px) {
  /* No pin below this width (or reduced-motion, guarded in JS) — native
     horizontal scroll-snap instead, same fallback pattern already used
     site-wide for this session's other carousels. */
  .trust-scroll {
    height: auto;
  }

  .trust-pin {
    position: static;
    height: auto;
    display: block;
    padding: var(--space-6) 0;
  }

  .trust-track-viewport {
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    margin: var(--space-5) 0 0;
    padding: 0 var(--space-3) var(--space-2);
    scrollbar-width: none;
  }

  .trust-track-viewport::-webkit-scrollbar {
    display: none;
  }

  .trust-track {
    transform: none !important;
  }

  .trust-card {
    scroll-snap-align: center;
    flex-basis: 78vw;
    width: 78vw;
  }
}

/* ----- Section 2 mobile carousel: the shared .mobile-carousel-card
   content width at a 375px viewport (84vw card minus its own padding)
   comes out to roughly 235px. spark-stage (200px) and pin-wrap (96px)
   clear that fine, but dawn-stage (220px) and network-stage (230px) —
   both sized for the desktop visual column — leave almost no margin, so
   they're stepped down specifically inside the mobile carousel. Desktop
   is untouched; nothing outside .mobile-carousel-visual is affected. ----- */
@media (max-width: 768px) {
  .mobile-carousel-visual .about-illustration {
    padding: var(--space-2);
  }

  .mobile-carousel-visual .dawn-stage {
    width: 190px;
    height: 190px;
  }

  .mobile-carousel-visual .network-stage {
    width: 195px;
    height: 195px;
  }
}