/* =========================================================
   Spatial Hero V2.2 — Branded switch motion
   DNA: rupture flash / spatial snap / geometric index
   Trigger: [data-spatial-transit="1"] on root (~720ms)
========================================================= */

/* —— Stage: brief dimensional shimmer —— */
.sv-spatial-hero[data-spatial-transit="1"] .sv-spatial-hero__stage {
  animation: sv-stage-pulse 720ms var(--sv-ease) both;
}

@keyframes sv-stage-pulse {
  0% { filter: brightness(1); }
  18% { filter: brightness(1.03); }
  100% { filter: brightness(1); }
}

/* —— Atmosphere axes react (rupture language) —— */
.sv-spatial-hero[data-spatial-transit="1"] .sv-spatial-hero__axis--horizontal {
  animation: sv-axis-h 720ms var(--sv-ease) both;
}

.sv-spatial-hero[data-spatial-transit="1"] .sv-spatial-hero__axis--vertical {
  animation: sv-axis-v 720ms var(--sv-ease) both;
}

.sv-spatial-hero[data-spatial-transit="1"] .sv-spatial-hero__rupture--a::before {
  animation: sv-tick-grow 560ms var(--sv-ease) both;
}

@keyframes sv-axis-h {
  0% { opacity: 1; transform: scaleX(1); }
  25% { opacity: 0.35; transform: scaleX(0.72); background: rgba(30, 40, 46, 0.28); }
  100% { opacity: 1; transform: scaleX(1); }
}

@keyframes sv-axis-v {
  0% { opacity: 1; transform: scaleY(1); }
  30% { opacity: 0.4; transform: scaleY(0.78); }
  100% { opacity: 1; transform: scaleY(1); }
}

@keyframes sv-tick-grow {
  0% { height: 14px; opacity: 0.4; }
  40% { height: 28px; opacity: 0.85; }
  100% { height: 14px; opacity: 0.4; }
}

/* —— Active frame: edge rupture sweep —— */
.sv-spatial-hero[data-spatial-transit="1"]
  .sv-spatial-entry[data-spatial-state="active"]
  .sv-spatial-entry__frame {
  animation: sv-frame-settle 880ms var(--sv-ease-snap) both;
}

.sv-spatial-hero[data-spatial-transit="1"]
  .sv-spatial-entry[data-spatial-state="active"]
  .sv-spatial-entry__frame::after {
  content: "";
  position: absolute;
  z-index: 5;
  top: 0;
  left: -8%;
  width: 28%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.22),
    transparent
  );
  pointer-events: none;
  animation: sv-rupture-sweep 640ms var(--sv-ease) both;
}

@keyframes sv-frame-settle {
  0% { transform: scale(0.985); }
  35% { transform: scale(1.012); }
  100% { transform: scale(1); }
}

@keyframes sv-rupture-sweep {
  0% { transform: translateX(0); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translateX(320%); opacity: 0; }
}

/* —— Content cascade (branded reveal) —— */
.sv-spatial-hero[data-spatial-state="focused"]
  .sv-spatial-entry[data-spatial-state="active"]
  .sv-spatial-entry__eyebrow {
  animation: sv-rise 520ms 40ms var(--sv-ease) both;
}

.sv-spatial-hero[data-spatial-state="focused"]
  .sv-spatial-entry[data-spatial-state="active"]
  .sv-spatial-entry__title {
  animation: sv-rise 560ms 90ms var(--sv-ease) both;
}

.sv-spatial-hero[data-spatial-state="focused"]
  .sv-spatial-entry[data-spatial-state="active"]
  .sv-spatial-entry__description {
  animation: sv-rise 560ms 150ms var(--sv-ease) both;
}

.sv-spatial-hero[data-spatial-state="focused"]
  .sv-spatial-entry[data-spatial-state="active"]
  .sv-spatial-entry__content-inner::after {
  animation: sv-rule-extend 640ms 200ms var(--sv-ease) both;
}

.sv-spatial-hero[data-spatial-state="focused"]
  .sv-spatial-entry[data-spatial-state="active"]
  .sv-spatial-entry__cta {
  animation: sv-rise 580ms 240ms var(--sv-ease) both;
}

@keyframes sv-rise {
  0% { opacity: 0; transform: translateY(12px); }
  100% { opacity: 1; transform: translateY(0); }
}

@keyframes sv-rule-extend {
  0% { width: 0; opacity: 0; }
  100% { width: 32px; opacity: 1; }
}

/* Re-trigger cascade on each transit */
.sv-spatial-hero[data-spatial-transit="1"]
  .sv-spatial-entry[data-spatial-state="active"]
  .sv-spatial-entry__eyebrow {
  animation: sv-rise 480ms 30ms var(--sv-ease) both;
}

.sv-spatial-hero[data-spatial-transit="1"]
  .sv-spatial-entry[data-spatial-state="active"]
  .sv-spatial-entry__title {
  animation: sv-rise 520ms 70ms var(--sv-ease) both;
}

.sv-spatial-hero[data-spatial-transit="1"]
  .sv-spatial-entry[data-spatial-state="active"]
  .sv-spatial-entry__description {
  animation: sv-rise 520ms 120ms var(--sv-ease) both;
}

.sv-spatial-hero[data-spatial-transit="1"]
  .sv-spatial-entry[data-spatial-state="active"]
  .sv-spatial-entry__cta {
  animation: sv-rise 540ms 180ms var(--sv-ease) both;
}

/* —— Side cards: sharper drift accent —— */
.sv-spatial-hero[data-spatial-transit="1"]
  .sv-spatial-entry[data-spatial-state="side"] {
  transition-duration: 720ms, 720ms, 720ms, 720ms, 480ms, 480ms;
}

/* —— Nav marker: geometric grow —— */
.sv-spatial-hero__nav-button[aria-pressed="true"] .sv-spatial-hero__nav-marker {
  animation: sv-marker-draw 420ms var(--sv-ease) both;
}

@keyframes sv-marker-draw {
  0% { transform: scaleX(0); opacity: 0.4; }
  100% { transform: scaleX(1); opacity: 1; }
}

.sv-spatial-hero[data-spatial-transit="1"]
  .sv-spatial-hero__nav-button[aria-pressed="true"]
  .sv-spatial-hero__nav-index {
  animation: sv-index-tick 480ms var(--sv-ease) both;
}

@keyframes sv-index-tick {
  0% { letter-spacing: 0.14em; opacity: 0.5; }
  40% { letter-spacing: 0.22em; opacity: 1; }
  100% { letter-spacing: 0.14em; opacity: 1; }
}

/* —— Side arrows micro feedback —— */
.sv-spatial-hero[data-spatial-transit="1"] .sv-spatial-hero__arrow {
  animation: sv-arrow-breathe 520ms var(--sv-ease) both;
}

@keyframes sv-arrow-breathe {
  0% { border-color: rgba(30, 40, 46, 0.28); }
  35% { border-color: rgba(30, 40, 46, 0.55); }
  100% { border-color: rgba(30, 40, 46, 0.28); }
}

@media (prefers-reduced-motion: reduce) {
  .sv-spatial-hero[data-spatial-transit="1"] .sv-spatial-hero__stage,
  .sv-spatial-hero[data-spatial-transit="1"] .sv-spatial-hero__axis--horizontal,
  .sv-spatial-hero[data-spatial-transit="1"] .sv-spatial-hero__axis--vertical,
  .sv-spatial-hero[data-spatial-transit="1"] .sv-spatial-entry__frame,
  .sv-spatial-hero[data-spatial-transit="1"] .sv-spatial-entry__frame::after,
  .sv-spatial-entry__eyebrow,
  .sv-spatial-entry__title,
  .sv-spatial-entry__description,
  .sv-spatial-entry__cta,
  .sv-spatial-hero__nav-marker,
  .sv-spatial-hero__arrow {
    animation: none !important;
  }
}