/* ============================================================
   Mars High Speed — motion2.css
   Second animation layer. Everything here is ADDITIVE to
   assets/motion.css; nothing existing is overridden except the
   polish pass at the end, which is deliberate.

   Design rules for this file:
   - Progressive enhancement. Scroll-driven effects are wrapped in
     @supports (animation-timeline: scroll()); without it the page is
     simply static, which is correct, not broken.
   - Compositor-only properties for anything that runs during scroll.
     Never animate top/left/width/height.
   - Use the INDEPENDENT `translate` / `scale` properties (not
     `transform`) where a scroll animation and a hover transition both
     touch the same element. `transform` would win over the transition
     and the hover would silently stop working; `translate` and `scale`
     compose.
   - One comprehensive prefers-reduced-motion branch at the bottom.
   - Colours come from the tokens in styles.css (:root). No new palette.
   ============================================================ */

/* ------------------------------------------------------------
   1. SCROLL-DRIVEN PARALLAX  (progressively enhanced)

   The site previously had ZERO scroll-driven animation — everything
   scroll-linked was hand-written JS. These are compositor-driven and
   cost no main-thread time.
   ------------------------------------------------------------ */

@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    /* The hero planet drifts down and away as the page scrolls. */
    .hero-v2 .globe-stage {
      animation: parallaxGlobe linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 70vh;
    }

    /* Nebula layers drift at different speeds — cheap depth. */
    .hero-v2 .nebula-a {
      animation: parallaxNebulaA linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }

    .hero-v2 .nebula-b {
      animation: parallaxNebulaB linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }

    .hero-v2 .nebula-c {
      animation: parallaxNebulaC linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 90vh;
    }

    /* The hero copy lifts and fades slightly — it leaves before the
       planet does, which reads as "the camera is flying past". */
    .hero-v2 .hero-content {
      animation: parallaxHeroCopy linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 60vh;
    }

    /* Section headers drift as their section passes the viewport. */
    .section-header[data-reveal] {
      animation: parallaxSectionHead linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }

    /* Service-card photos: a slow vertical drift as the card crosses
       the viewport. The wrapper clips, so the image can travel.
       Uses `translate` so the hover `scale` below still composes. */
    .card-image {
      animation: parallaxCardImage linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
      will-change: translate;
    }

    /* The journey diagram already scrubs via JS; this adds a slow
       counter-drift to the craft so the two never look locked. */
    .journey-craft {
      animation: parallaxCraft linear both;
      animation-timeline: scroll(root block);
      animation-range: 0 100%;
    }
  }
}

@keyframes parallaxGlobe {
  from { translate: 0 0; scale: 1; }
  to   { translate: -4% 14%; scale: 0.94; }
}

@keyframes parallaxNebulaA {
  from { translate: 0 0; scale: 1; opacity: 0.55; }
  to   { translate: 6% -10%; scale: 1.12; opacity: 0.28; }
}

@keyframes parallaxNebulaB {
  from { translate: 0 0; scale: 1; opacity: 0.40; }
  to   { translate: -9% 8%; scale: 1.18; opacity: 0.18; }
}

@keyframes parallaxNebulaC {
  from { translate: 0 0; scale: 1; opacity: 0.30; }
  to   { translate: 4% 12%; scale: 1.20; opacity: 0.12; }
}

@keyframes parallaxHeroCopy {
  from { translate: 0 0; opacity: 1; }
  to   { translate: 0 -42px; opacity: 0.25; }
}

@keyframes parallaxSectionHead {
  from { translate: 0 22px; }
  to   { translate: 0 -22px; }
}

@keyframes parallaxCardImage {
  from { translate: 0 -7%; scale: 1.12; }
  to   { translate: 0 7%; scale: 1.12; }
}

@keyframes parallaxCraft {
  from { translate: 0 0; }
  to   { translate: 0 -12px; }
}

/* ------------------------------------------------------------
   2. SERVICE CARDS — sheen, zoom, traced border, chip lift
   ------------------------------------------------------------ */

/* .card has overflow:hidden but no position:relative, so the
   pseudo-layers below had no containing block. */
.card {
  position: relative;
}

/* A sheen that crosses the card on hover. */
.card::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  background: linear-gradient(
    105deg,
    transparent 38%,
    rgba(255, 107, 53, 0.10) 48%,
    rgba(255, 255, 255, 0.07) 52%,
    transparent 62%
  );
  translate: -60% 0;
  transition: opacity 0.45s ease, translate 0.85s cubic-bezier(0.16, 1, 0.3, 1);
}

.card:hover::after {
  opacity: 1;
  translate: 60% 0;
}

/* The image zooms on hover. `scale` (not `transform`) so it composes
   with the scroll-driven `translate` above instead of replacing it. */
.card-image {
  transition: scale 0.6s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.6s ease;
}

@media (prefers-reduced-motion: no-preference) {
  .card:hover .card-image {
    scale: 1.07;
    filter: saturate(1.12) contrast(1.05);
  }
}

/* The category chip lifts into place. */
.card-category {
  transition: translate 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              background-color 0.4s ease;
}

.card:hover .card-category {
  translate: 0 -3px;
}

/* An accent border that traces the card on hover. */
.card::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  border-radius: inherit;
  border: 1px solid transparent;
  transition: border-color 0.45s ease, box-shadow 0.45s ease;
}

.card:hover::before {
  border-color: var(--border-accent);
  box-shadow: 0 0 0 1px rgba(255, 107, 53, 0.12),
              0 18px 44px rgba(0, 0, 0, 0.55);
}

/* The card title gains an accent underline that wipes in. */
.card-title a {
  background-image: linear-gradient(var(--accent), var(--accent));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0% 1px;
  transition: background-size 0.5s cubic-bezier(0.16, 1, 0.3, 1),
              color 0.3s ease;
}

.card:hover .card-title a,
.card-title a:hover {
  background-size: 100% 1px;
}

/* ------------------------------------------------------------
   3. VISION PILLARS — the icons now carry the sequence.
   (The pillars already reveal with data-reveal-group="pillars",
   so their reveal is NOT re-implemented here.)
   ------------------------------------------------------------ */

.vision-pillar {
  position: relative;
}

/* A rule that draws itself above each pillar once it reveals. */
.vision-pillar::before {
  content: "";
  position: absolute;
  top: -1.1rem;
  left: 0;
  width: 2.4rem;
  height: 2px;
  background: linear-gradient(90deg, var(--accent), transparent);
  scale: 0 1;
  transform-origin: left center;
  transition: scale 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.25s;
}

.vision-pillar.revealed::before {
  scale: 1 1;
}

/* The pillar icon pops and its glow breathes. */
.vision-pillar .pillar-icon {
  display: inline-block;
  transition: scale 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.vision-pillar.revealed .pillar-icon {
  animation: pillarIconPop 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both;
}

@keyframes pillarIconPop {
  0%   { scale: 0.6; opacity: 0; }
  55%  { scale: 1.15; opacity: 1; }
  100% { scale: 1; opacity: 1; }
}

.vision-pillar:hover .pillar-icon {
  scale: 1.1;
}

/* ------------------------------------------------------------
   4. HERO TELEMETRY — a light sweep across the card on load
   ------------------------------------------------------------ */

.hero-telemetry {
  position: relative;
  overflow: hidden;
}

.hero-telemetry::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 38%;
  pointer-events: none;
  background: linear-gradient(
    100deg,
    transparent,
    rgba(255, 107, 53, 0.13) 45%,
    rgba(255, 255, 255, 0.08) 52%,
    transparent
  );
  translate: -130% 0;
  animation: telemetrySweep 2.6s cubic-bezier(0.4, 0, 0.2, 1) 0.9s both;
}

@keyframes telemetrySweep {
  0%   { translate: -130% 0; }
  100% { translate: 320% 0; }
}

/* Each cell lifts slightly on hover. */
.tele-cell {
  transition: background-color 0.4s ease, translate 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

@media (prefers-reduced-motion: no-preference) {
  .tele-cell:hover {
    background: rgba(255, 107, 53, 0.07);
    translate: 0 -3px;
  }
}

/* ------------------------------------------------------------
   5. POLISH PASS
   ------------------------------------------------------------ */

/* --- Contrast: the secondary labels were too faint to read --- */
.tele-label,
.hud-label {
  color: #9aa4b2;
}

.eyebrow {
  color: #ff8c5a;
}

.nav-links a {
  color: #b8bdc6;
}

/* --- The scroll cue was nearly invisible and sat on the edge --- */
.scroll-cue {
  bottom: 2.4rem;
  color: #b8bdc6;
  opacity: 1;
}

.scroll-cue span {
  color: #b8bdc6;
  text-shadow: 0 0 12px rgba(0, 0, 0, 0.9);
}

/* A chevron that drifts down, so the cue reads as an affordance. */
.scroll-cue .cue-line::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -6px;
  width: 6px;
  height: 6px;
  border-right: 1.5px solid var(--accent);
  border-bottom: 1.5px solid var(--accent);
  translate: -50% 0;
  rotate: 45deg;
  animation: cueChevron 1.9s ease-in-out infinite;
}

@keyframes cueChevron {
  0%, 100% { translate: -50% 0; rotate: 45deg; opacity: 0.35; }
  50%      { translate: calc(-50% + 3px) 3px; rotate: 45deg; opacity: 1; }
}

/* --- Nav active underline was too subtle --- */
.nav-links a::after {
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent), transparent);
  box-shadow: 0 0 10px var(--accent-glow);
}

/* --- Keep decorative particles from colliding with the copy --- */
.hero-v2 .hero-content {
  position: relative;
  z-index: 4;
}

.space-layers {
  z-index: 0;
}

.globe-stage {
  z-index: 1;
}

/* --- Buttons get a press state (there was none) --- */
.btn:active {
  scale: 0.985;
}

/* --- The mobile menu button was a 38x34px touch target, below the
   44x44 minimum. The drawn box stays compact; only the hit area grows,
   so the header does not get taller. --- */
@media (max-width: 768px) {
  .mobile-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
}

/* --- Section heading rules get a soft glow --- */
.section-header h2::after {
  background: linear-gradient(90deg, var(--accent), rgba(255, 107, 53, 0));
}

/* ------------------------------------------------------------
   6. REDUCED MOTION — one authoritative branch.
   It also neutralises the scroll-driven animations, which would
   otherwise keep running regardless of the global override.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    clip-path: none !important;
  }

  .card-image,
  .hero-v2 .globe-stage,
  .hero-v2 .nebula-a,
  .hero-v2 .nebula-b,
  .hero-v2 .nebula-c,
  .hero-v2 .hero-content,
  .journey-craft,
  .section-header[data-reveal],
  .vision-pillar .pillar-icon {
    animation: none !important;
    translate: none !important;
    scale: 1 !important;
    opacity: 1 !important;
  }

  .vision-pillar::before {
    scale: 1 1 !important;
  }

  .hero-telemetry::after,
  .card::after,
  .scroll-cue .cue-line::after {
    display: none !important;
  }

  .card:hover .card-image {
    scale: 1 !important;
    filter: none !important;
  }
}