/* ==========================================================================
   Subvision interactive enhancement layer
   Loaded after site.css. Everything here is additive and progressive —
   removing this file (and enhancements.js) returns the site to its
   previous behavior.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Cross-page view transitions (Chrome 126+, progressive enhancement)
   -------------------------------------------------------------------------- */
@view-transition {
  navigation: auto;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: sv-vt-out 200ms ease both;
  }

  ::view-transition-new(root) {
    animation: sv-vt-in 280ms ease both;
  }
}

@keyframes sv-vt-out {
  to {
    opacity: 0;
    transform: translateY(-10px);
  }
}

@keyframes sv-vt-in {
  from {
    opacity: 0;
    transform: translateY(12px);
  }
}

/* --------------------------------------------------------------------------
   Themed scrollbar
   -------------------------------------------------------------------------- */
html {
  scrollbar-color: rgba(105, 226, 255, 0.32) rgba(8, 18, 34, 0.9);
  scrollbar-width: thin;
}

::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: rgba(8, 18, 34, 0.9);
}

::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(105, 226, 255, 0.34), rgba(59, 118, 255, 0.34));
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(105, 226, 255, 0.55), rgba(59, 118, 255, 0.55));
}

/* --------------------------------------------------------------------------
   Ocean ambience canvas + depth gauge
   -------------------------------------------------------------------------- */
.sv-ocean {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.sv-depth {
  position: fixed;
  right: 18px;
  top: 50%;
  z-index: 55;
  display: none;
  transform: translateY(-50%);
  width: 34px;
  height: 44vh;
  cursor: pointer;
  user-select: none;
}

.sv-depth__rail {
  position: absolute;
  right: 8px;
  top: 0;
  bottom: 0;
  width: 2px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(105, 226, 255, 0.05), rgba(105, 226, 255, 0.32), rgba(59, 118, 255, 0.08));
}

.sv-depth__tick {
  position: absolute;
  right: 6px;
  width: 6px;
  height: 1px;
  background: rgba(156, 196, 255, 0.35);
}

.sv-depth__marker {
  position: absolute;
  right: 3px;
  top: 0;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
  box-shadow: 0 0 14px rgba(105, 226, 255, 0.65);
  transform: translateY(-50%);
  transition: top 140ms ease-out;
}

.sv-depth__readout {
  position: absolute;
  right: 22px;
  top: 0;
  padding: 4px 9px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 18, 34, 0.86);
  color: var(--accent-bright);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  transform: translateY(-50%);
  opacity: 0;
  transition: opacity 240ms ease, top 140ms ease-out;
}

.sv-depth:hover .sv-depth__readout,
.sv-depth.is-scrolling .sv-depth__readout {
  opacity: 1;
}

@media (min-width: 1240px) {
  .sv-depth {
    display: block;
  }
}

/* --------------------------------------------------------------------------
   Hero / page-title ink shimmer (guarded so text never disappears)
   -------------------------------------------------------------------------- */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .page-title,
  .funding-summary__title {
    background-image: linear-gradient(
      112deg,
      #f2f8ff 0%,
      #f2f8ff 34%,
      #a9ddff 46%,
      #7fd4ff 52%,
      #a9ddff 58%,
      #f2f8ff 70%,
      #f2f8ff 100%
    );
    background-size: 240% 100%;
    background-position: 120% 0;
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: #f2f8ff;
  }
}

@media (prefers-reduced-motion: no-preference) {
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .page-title,
    .funding-summary__title {
      animation: sv-ink 11s ease-in-out infinite;
    }
  }
}

@keyframes sv-ink {
  0%,
  58% {
    background-position: 120% 0;
  }

  78%,
  100% {
    background-position: -120% 0;
  }
}

/* --------------------------------------------------------------------------
   Cursor spotlight on cards
   -------------------------------------------------------------------------- */
.sv-spot {
  position: relative;
}

.sv-spot::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    240px circle at var(--spot-x, 50%) var(--spot-y, 50%),
    rgba(105, 226, 255, 0.11),
    transparent 65%
  );
  opacity: 0;
  pointer-events: none;
  transition: opacity 320ms ease;
}

.sv-spot:hover::after {
  opacity: 1;
}

/* --------------------------------------------------------------------------
   Lightbox
   -------------------------------------------------------------------------- */
.sv-zoomable {
  cursor: zoom-in;
}

.sv-lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: grid;
  place-items: center;
  padding: 28px;
  background: rgba(3, 9, 18, 0.92);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  /* Visibility flips after the fade-out; instantly on open (see .is-open). */
  transition: opacity 260ms ease, visibility 0s linear 260ms;
}

.sv-lightbox.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 260ms ease;
}

.sv-lightbox__figure {
  margin: 0;
  max-width: min(1180px, 94vw);
  display: grid;
  gap: 14px;
  justify-items: center;
}

.sv-lightbox__figure img {
  max-width: 94vw;
  max-height: 78vh;
  border-radius: 18px;
  border: 1px solid var(--line-strong);
  box-shadow: 0 50px 140px rgba(0, 0, 0, 0.6);
  transform: scale(0.96);
  transition: transform 300ms cubic-bezier(0.2, 0.75, 0.24, 1);
}

.sv-lightbox.is-open .sv-lightbox__figure img {
  transform: scale(1);
}

.sv-lightbox__caption {
  margin: 0;
  max-width: 64ch;
  color: var(--text-soft);
  font-size: 0.96rem;
  text-align: center;
}

.sv-lightbox__close {
  position: absolute;
  top: 20px;
  right: 22px;
  min-width: 46px;
  min-height: 46px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(8, 18, 34, 0.86);
  color: var(--text);
  font-size: 1.05rem;
  cursor: pointer;
  transition: border-color 200ms ease, transform 200ms ease;
}

.sv-lightbox__close:hover {
  border-color: var(--line-strong);
  transform: scale(1.06);
}

/* --------------------------------------------------------------------------
   Interactive hull-cleaning demo
   -------------------------------------------------------------------------- */
.hull-demo {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(18, 30, 49, 0.88), rgba(9, 18, 34, 0.98));
  box-shadow: var(--shadow);
  padding: 24px;
  display: grid;
  gap: 18px;
}

.hull-demo__hud {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px 28px;
}

.hull-demo__stat {
  display: grid;
  grid-template-columns: auto auto;
  grid-template-rows: auto auto;
  align-items: center;
  column-gap: 12px;
  row-gap: 6px;
  min-width: 220px;
}

.hull-demo__label {
  grid-column: 1 / -1;
  color: var(--text-muted);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.hull-demo__meter {
  position: relative;
  width: 150px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}

.hull-demo__meter span {
  position: absolute;
  inset: 0 auto 0 0;
  width: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--accent), var(--accent-bright));
  transition: width 200ms ease-out, background-color 200ms ease;
}

.hull-demo__meter--drag span {
  width: 0%;
  background: linear-gradient(90deg, #8ff8dd, #ffd479, #ff9d76);
}

.hull-demo__stat strong {
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1.05rem;
  min-width: 56px;
}

.hull-demo__controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-left: auto;
}

.demo-btn {
  display: inline-flex;
  align-items: center;
  min-height: 42px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-soft);
  font-weight: 700;
  cursor: pointer;
  transition: color 200ms ease, border-color 200ms ease, background-color 200ms ease, transform 200ms ease;
}

.demo-btn:hover {
  color: var(--text);
  border-color: var(--line-strong);
  transform: translateY(-1px);
}

.demo-btn.is-active {
  color: #02121c;
  background: linear-gradient(135deg, var(--accent-bright), #9cf7ff);
  border-color: transparent;
}

.hull-demo__stage {
  position: relative;
  border-radius: calc(var(--radius-md) - 4px);
  overflow: hidden;
  border: 1px solid rgba(156, 196, 255, 0.12);
}

.hull-demo__stage canvas {
  display: block;
  width: 100%;
  height: 440px;
  /* pan-y keeps page scrolling alive on touch screens; taps and horizontal drags still drive the rover. */
  touch-action: pan-y;
  cursor: crosshair;
}

.hull-demo__hint {
  position: absolute;
  left: 50%;
  bottom: 16px;
  transform: translateX(-50%);
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(5, 12, 24, 0.78);
  color: var(--text-soft);
  font-size: 0.88rem;
  white-space: nowrap;
  pointer-events: none;
  transition: opacity 400ms ease;
}

.hull-demo__hint.is-hidden {
  opacity: 0;
}

.hull-demo__note {
  margin: 0;
}

@media (max-width: 760px) {
  .hull-demo {
    padding: 16px;
  }

  .hull-demo__stage canvas {
    height: 320px;
  }

  .hull-demo__controls {
    margin-left: 0;
  }
}

/* Touch ergonomics: bigger targets. */
@media (pointer: coarse) {
  .hull-demo__stage canvas {
    cursor: default;
  }

  .hotspot-dot {
    width: 44px;
    height: 44px;
  }

  .demo-btn {
    min-height: 46px;
  }

  .video-toggle {
    padding: 11px 14px;
  }

  .interval-lab__slider {
    min-height: 32px;
  }
}

/* --------------------------------------------------------------------------
   ZIMA hotspot explorer
   -------------------------------------------------------------------------- */
.hotspot-stage {
  position: relative;
  max-width: 880px;
  margin: 0 auto;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(18, 30, 49, 0.88), rgba(9, 18, 34, 0.98));
  box-shadow: var(--shadow);
  padding: 22px;
}

.hotspot-stage__inner {
  position: relative;
}

.hotspot-stage__inner > img {
  width: 100%;
  border-radius: calc(var(--radius-md) - 4px);
}

.hotspot-dot {
  position: absolute;
  left: var(--hx, 50%);
  top: var(--hy, 50%);
  transform: translate(-50%, -50%);
  z-index: 4;
  width: 34px;
  height: 34px;
  border: 1px solid rgba(105, 226, 255, 0.7);
  border-radius: 50%;
  background: rgba(8, 18, 34, 0.62);
  cursor: pointer;
  transition: transform 220ms ease, background-color 220ms ease;
}

.hotspot-dot::before {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(135deg, var(--accent-bright), var(--accent));
}

.hotspot-dot::after {
  content: "";
  position: absolute;
  inset: -1px;
  border-radius: 50%;
  border: 1px solid rgba(105, 226, 255, 0.55);
  animation: sv-ping 2.6s ease-out infinite;
}

.hotspot-dot:hover,
.hotspot-dot[aria-expanded="true"] {
  transform: translate(-50%, -50%) scale(1.15);
  background: rgba(15, 34, 58, 0.85);
}

.hotspot-dot[aria-expanded="true"]::after {
  animation: none;
  opacity: 0;
}

@keyframes sv-ping {
  0% {
    transform: scale(1);
    opacity: 0.8;
  }

  70%,
  100% {
    transform: scale(2.1);
    opacity: 0;
  }
}

.hotspot-card {
  position: absolute;
  z-index: 5;
  width: min(300px, 82%);
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: rgba(7, 16, 30, 0.96);
  box-shadow: var(--shadow-strong);
  backdrop-filter: blur(8px);
}

.hotspot-card h3 {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 1.06rem;
  color: var(--accent-bright);
}

.hotspot-card p {
  margin: 10px 0 0;
  color: var(--text-soft);
  font-size: 0.94rem;
  line-height: 1.6;
}

.hotspot-stage__hint {
  margin: 16px 0 0;
  text-align: center;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* --------------------------------------------------------------------------
   Cleaning-interval lab (impact page)
   -------------------------------------------------------------------------- */
.interval-lab {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: linear-gradient(180deg, rgba(18, 30, 49, 0.88), rgba(9, 18, 34, 0.98));
  box-shadow: var(--shadow);
  padding: 26px;
  display: grid;
  gap: 18px;
}

.interval-lab__head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px 26px;
}

.interval-lab__label {
  color: var(--text-soft);
  font-size: 1rem;
}

.interval-lab__label strong {
  color: var(--accent-bright);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
}

.interval-lab__slider {
  flex: 1 1 240px;
  max-width: 420px;
  accent-color: #69e2ff;
  cursor: pointer;
}

.interval-lab canvas {
  display: block;
  width: 100%;
  height: 340px;
  border-radius: calc(var(--radius-md) - 6px);
}

.interval-lab__legend {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px 14px;
  color: var(--text-soft);
  font-size: 0.92rem;
}

.legend-dot {
  display: inline-block;
  width: 22px;
  height: 3px;
  border-radius: 999px;
  vertical-align: middle;
}

.legend-dot--never {
  background: #ff9d76;
}

.legend-dot--zima {
  background: var(--accent-bright);
}

.interval-lab__stat {
  margin: 0;
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: clamp(1.1rem, 1.6vw, 1.4rem);
  color: var(--text);
}

.interval-lab__stat strong {
  color: var(--accent-bright);
}

@media (max-width: 760px) {
  .interval-lab {
    padding: 18px;
  }

  .interval-lab canvas {
    height: 260px;
  }
}

/* --------------------------------------------------------------------------
   Easter egg swimmer
   -------------------------------------------------------------------------- */
.sv-swimmer {
  position: fixed;
  z-index: 300;
  left: -120px;
  width: 84px;
  pointer-events: none;
  filter: drop-shadow(0 0 18px rgba(105, 226, 255, 0.5));
  animation: sv-swim 6s linear forwards;
}

@keyframes sv-swim {
  0% {
    transform: translateX(0) rotate(6deg);
  }

  25% {
    transform: translateX(28vw) translateY(-26px) rotate(-5deg);
  }

  50% {
    transform: translateX(56vw) translateY(10px) rotate(6deg);
  }

  75% {
    transform: translateX(84vw) translateY(-22px) rotate(-5deg);
  }

  100% {
    transform: translateX(118vw) translateY(0) rotate(4deg);
  }
}

.sv-bubble {
  position: fixed;
  z-index: 299;
  width: 8px;
  height: 8px;
  border: 1px solid rgba(150, 220, 255, 0.7);
  border-radius: 50%;
  pointer-events: none;
  animation: sv-bubble-rise 1.8s ease-out forwards;
}

@keyframes sv-bubble-rise {
  to {
    transform: translateY(-130px);
    opacity: 0;
  }
}

/* --------------------------------------------------------------------------
   Hero media overhaul: chamfered HUD frame echoing ZIMA's hexagonal chassis
   -------------------------------------------------------------------------- */
.hero-home .media-card--hero,
.page-hero .media-card,
.page-hero .feature-image {
  --chamfer: 22px;
  --hud-line: rgba(105, 226, 255, 0.6);
  border-radius: 8px;
  border-color: rgba(105, 226, 255, 0.28);
  clip-path: polygon(
    var(--chamfer) 0,
    calc(100% - var(--chamfer)) 0,
    100% var(--chamfer),
    100% calc(100% - var(--chamfer)),
    calc(100% - var(--chamfer)) 100%,
    var(--chamfer) 100%,
    0 calc(100% - var(--chamfer)),
    0 var(--chamfer)
  );
  /* Corner registration brackets drawn over the panel gradient. */
  background-image:
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(180deg, rgba(18, 30, 49, 0.92), rgba(9, 18, 34, 0.99));
  background-repeat: no-repeat;
  background-size:
    20px 2px,
    2px 20px,
    20px 2px,
    2px 20px,
    20px 2px,
    2px 20px,
    20px 2px,
    2px 20px,
    100% 100%;
  background-position:
    left 14px top 14px,
    left 14px top 14px,
    right 14px top 14px,
    right 14px top 14px,
    left 14px bottom 14px,
    left 14px bottom 14px,
    right 14px bottom 14px,
    right 14px bottom 14px,
    center;
  /* clip-path swallows box-shadow; drop-shadow follows the chamfered shape. */
  box-shadow: none;
  filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.42));
  transition:
    opacity 860ms ease,
    transform 420ms cubic-bezier(0.2, 0.75, 0.24, 1),
    filter 420ms ease,
    border-color 420ms ease;
}

.hero-home .media-card--hero:hover,
.page-hero .media-card:hover,
.page-hero .feature-image:hover {
  border-color: rgba(105, 226, 255, 0.5);
  box-shadow: none;
  filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(59, 118, 255, 0.16));
}

.hero-home .media-card--hero img,
.hero-home .media-card--hero video,
.page-hero .media-card img,
.page-hero .media-card video,
.page-hero .feature-image img {
  border-radius: 6px;
}

/* Text-only technology hero: keep the measure readable on wide screens. */
.page-hero__lead {
  max-width: 60rem;
}

/* feature-image heroes have no padding, so the photo would cover the
   brackets — draw them above the image instead. */
.page-hero .feature-image {
  position: relative;
}

.page-hero .feature-image::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background-image:
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line)),
    linear-gradient(var(--hud-line), var(--hud-line));
  background-repeat: no-repeat;
  background-size:
    20px 2px,
    2px 20px,
    20px 2px,
    2px 20px,
    20px 2px,
    2px 20px,
    20px 2px,
    2px 20px;
  background-position:
    left 14px top 14px,
    left 14px top 14px,
    right 14px top 14px,
    right 14px top 14px,
    left 14px bottom 14px,
    left 14px bottom 14px,
    right 14px bottom 14px,
    right 14px bottom 14px;
}

/* Telemetry-style pill with a pulsing status dot inside hero cards. */
.hero-home .media-card--hero .pill,
.page-hero .media-card .pill {
  gap: 8px;
  border: 1px solid rgba(105, 226, 255, 0.25);
  background: rgba(8, 18, 34, 0.72);
  color: var(--accent-bright);
  font-family: "Space Grotesk", "Segoe UI", sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.hero-home .media-card--hero .pill::before,
.page-hero .media-card .pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--accent-bright);
  box-shadow: 0 0 10px rgba(105, 226, 255, 0.8);
  animation: sv-pulse 2.4s ease-in-out infinite;
}

@keyframes sv-pulse {
  0%,
  100% {
    opacity: 0.45;
  }

  50% {
    opacity: 1;
  }
}

@media (max-width: 640px) {
  .hero-home .media-card--hero,
  .page-hero .media-card,
  .page-hero .feature-image {
    --chamfer: 16px;
  }
}

/* --------------------------------------------------------------------------
   Motion pass 2: header reveal, parallax, magnetic buttons, flowing lines
   -------------------------------------------------------------------------- */
.event-banner--no-logo {
  grid-template-columns: minmax(0, 1fr) auto;
}

.site-header {
  transition:
    background-color var(--transition),
    border-color var(--transition),
    box-shadow var(--transition),
    transform 340ms ease;
}

.sv-header-hidden {
  transform: translateY(-110%);
}

/* Keep the header reachable when keyboard focus moves into it. */
.site-header:focus-within {
  transform: translateY(0);
}

/* Make sure the skip link never peeks above the fold while unfocused. */
.skip-link {
  top: -72px;
}

/* Keyboard affordance for zoomable images and the demo canvas. */
.sv-zoomable:focus-visible,
.hull-demo__stage canvas:focus-visible {
  outline: 2px solid var(--accent-bright);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: no-preference) {
  .reveal {
    filter: blur(7px);
    transition: opacity 860ms ease, transform 860ms ease, filter 900ms ease;
  }

  .reveal.revealed {
    filter: blur(0);
  }

  .feature-image img,
  .journey-stop__media img {
    will-change: transform;
  }

  .button--primary {
    position: relative;
    overflow: hidden;
  }

  .button--primary::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: -70%;
    width: 42%;
    background: linear-gradient(100deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    transform: skewX(-18deg);
    transition: left 640ms ease;
    pointer-events: none;
  }

  .button--primary:hover::after,
  .button--primary:focus-visible::after {
    left: 130%;
  }

  .journey-track::before {
    background: linear-gradient(
      90deg,
      rgba(105, 226, 255, 0.2),
      rgba(59, 118, 255, 0.9),
      rgba(143, 248, 221, 0.35),
      rgba(59, 118, 255, 0.9),
      rgba(105, 226, 255, 0.2)
    );
    background-size: 200% 100%;
    animation: sv-line-flow 7s linear infinite;
  }

  .footer-grid {
    position: relative;
    border-top-color: transparent;
  }

  .footer-grid::before {
    content: "";
    position: absolute;
    top: -1px;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(
      90deg,
      transparent,
      rgba(105, 226, 255, 0.55),
      rgba(59, 118, 255, 0.4),
      rgba(105, 226, 255, 0.55),
      transparent
    );
    background-size: 220% 100%;
    animation: sv-line-flow 9s linear infinite;
  }
}

@keyframes sv-line-flow {
  to {
    background-position: -200% 0;
  }
}

/* The reveal-blur rule above would otherwise zero out the hero cards'
   chamfer drop-shadow once revealed — reassert it at higher specificity. */
@media (prefers-reduced-motion: no-preference) {
  .hero-home .media-card--hero.revealed,
  .page-hero .media-card.revealed,
  .page-hero .feature-image.revealed,
  .page-hero .reveal.revealed .feature-image,
  .reveal.revealed .media-card--hero {
    filter: drop-shadow(0 22px 40px rgba(0, 0, 0, 0.42));
  }

  .hero-home .media-card--hero.revealed:hover,
  .page-hero .media-card.revealed:hover,
  .page-hero .feature-image.revealed:hover {
    filter: drop-shadow(0 26px 48px rgba(0, 0, 0, 0.5)) drop-shadow(0 0 24px rgba(59, 118, 255, 0.16));
  }
}

/* --------------------------------------------------------------------------
   Reduced motion safety net
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .sv-ocean,
  .sv-depth {
    display: none !important;
  }

  .hotspot-dot::after {
    animation: none !important;
  }
}