/* ════════════════════════════════════════════════════════════════════
   EMTRACE VAULT — HORIZON EXPLORATION MODE
   Layer-2 immersive view triggered by tapping any card. Reuses the
   existing marble background, brass + cream palette, and tile chrome
   verbatim — adds a luminous "horizon ribbon" beneath a chronologically-
   arranged card row, with anchor-card centering and physical-motion
   navigation (wired in vault-horizon.js).
   ════════════════════════════════════════════════════════════════════ */

/* OVERLAY -------------------------------------------------------------- */
.horizon-room {
  position: fixed;
  inset: 0;
  z-index: 9500;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  opacity: 0;
  background:
    radial-gradient(ellipse 100% 70% at 50% 50%, rgba(255, 248, 230, 0.0) 0%, rgba(40, 28, 14, 0.55) 100%),
    url('../images/vault-marble-light.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  transition:
    opacity 360ms cubic-bezier(0.22, 1, 0.36, 1);
  overflow: hidden;
  /* Touch surface for Mouse Lean / drag */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

.horizon-room.is-open {
  pointer-events: auto;
  opacity: 1;
}

/* Marble veil overlay so the room reads as "deeper into the vault"
   than the main screen — same marble, slightly desaturated. */
.horizon-room::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 80% 50% at 50% 50%, transparent 30%, rgba(40, 28, 14, 0.42) 100%),
    linear-gradient(180deg, rgba(40, 28, 14, 0.18) 0%, transparent 30%, transparent 70%, rgba(40, 28, 14, 0.32) 100%);
  pointer-events: none;
  z-index: 1;
}

/* TOP CHROME — Row 1: Trace brand ribbon (outer-pulse parity). Row 2: title + Horizon tools */

.horizon-room__trace-nav {
  flex: 0 0 auto;
}

.horizon-room__trace-nav .trace-brand-home-btn:focus-visible {
  outline: 2px solid rgba(90, 55, 30, 0.45);
  outline-offset: 3px;
  border-radius: 10px;
}

.horizon-room__voice-status:empty {
  visibility: hidden;
  min-height: 2rem;
}

.horizon-room__aux-strip {
  position: relative;
  z-index: 10;
  flex: 0 0 auto;
  width: 100%;
  padding: clamp(8px, 1.2vw, 14px) clamp(14px, 2.2vw, 30px)
    clamp(6px, 0.9vw, 12px);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  box-sizing: border-box;
  border-bottom: 1px solid rgba(90, 62, 35, 0.12);
  background:
    linear-gradient(180deg, rgba(255, 251, 240, 0.22), rgba(255, 251, 240, 0));
}

.horizon-room__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.95rem, 1.35vw, 1.14rem);
  font-style: italic;
  color: rgba(62, 48, 34, 0.92);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65);
  letter-spacing: 0.02em;
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
}

.horizon-room__topbar-tools {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

.horizon-room__back:not(.trace-brand-back-pill-marble) {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255, 248, 230, 0.72);
  border: 1px solid rgba(180, 130, 30, 0.4);
  border-radius: 999px;
  padding: 8px 16px 8px 12px;
  color: #2a1f17;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow:
    0 2px 12px rgba(60, 40, 15, 0.18),
    inset 0 1px 0 rgba(255, 240, 210, 0.6);
  transition: transform 0.22s var(--ease-smooth, ease), border-color 0.22s ease, background 0.22s ease;
}

.horizon-room__back:not(.trace-brand-back-pill-marble):hover,
.horizon-room__back:not(.trace-brand-back-pill-marble):focus-visible {
  border-color: rgba(180, 130, 30, 0.7);
  background: rgba(255, 248, 230, 0.92);
  outline: none;
}

.horizon-room__back--narrow {
  font-family: var(--font-body);
}

.horizon-room__pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: rgba(255, 248, 230, 0.72);
  border: 1px solid rgba(180, 130, 30, 0.4);
  border-radius: 999px;
  padding: 7px 12px;
  color: #2a1f17;
  font-family: var(--font-body);
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background 0.22s ease, border-color 0.22s ease, color 0.22s ease, transform 0.22s ease;
}

.horizon-room__pill:hover {
  border-color: rgba(180, 130, 30, 0.7);
  background: rgba(255, 248, 230, 0.92);
}

.horizon-room__pill.is-on {
  background: linear-gradient(180deg, #d4af37, #b8893a);
  border-color: rgba(120, 80, 30, 0.7);
  color: #2a1f17;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 180, 0.65),
    0 2px 10px rgba(180, 130, 30, 0.45),
    0 0 24px rgba(255, 215, 130, 0.32);
}

.horizon-room__pill.is-on svg { color: #2a1f17; }

.horizon-room__pill.is-loading {
  opacity: 0.6;
  pointer-events: none;
}
.horizon-room__pill.is-loading::after {
  content: "";
  width: 10px; height: 10px;
  border-radius: 50%;
  border: 2px solid rgba(40, 25, 5, 0.4);
  border-top-color: rgba(40, 25, 5, 0.85);
  animation: pillSpin 0.7s linear infinite;
  margin-left: 4px;
}
@keyframes pillSpin { to { transform: rotate(360deg); } }

@media (max-width: 640px) {
  .horizon-room__pill span { display: none; }
  .horizon-room__pill { padding: 7px 9px; }
}

/* RIBBON STAGE --------------------------------------------------------- */
.horizon-room__stage {
  position: relative;
  z-index: 5;
  flex: 1 1 auto;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Hide horizontal overflow as the rail glides past the viewport */
  overflow: hidden;
}

/* v29.17 — explicit, prominent navigation chevrons. Always visible,
   brass-glowing, big tap target.  Hover-/focus-glow lifts them. The
   rail still drags / leans normally, but the user no longer has to
   "discover" gesture; one obvious click does the same thing. */
.horizon-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 12;
  width: clamp(56px, 6vw, 78px);
  height: clamp(56px, 6vw, 78px);
  border-radius: 50%;
  border: 1.5px solid rgba(255, 215, 130, 0.6);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 240, 210, 0.22), rgba(20, 14, 6, 0.78) 70%);
  color: #fbe5a8;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  box-shadow:
    0 0 0 1px rgba(212, 175, 55, 0.25),
    0 12px 32px rgba(0, 0, 0, 0.5),
    0 0 36px rgba(212, 175, 55, 0.32),
    inset 0 1px 0 rgba(255, 240, 210, 0.18);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition:
    transform 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.24s cubic-bezier(0.22, 1, 0.36, 1),
    border-color 0.24s ease,
    background 0.24s ease,
    opacity 0.24s ease;
  animation: horizonNavBreath 3.4s ease-in-out infinite;
}

.horizon-nav--prev { left: clamp(14px, 2.4vw, 32px); }
.horizon-nav--next { right: clamp(14px, 2.4vw, 32px); }

.horizon-nav:hover,
.horizon-nav:focus-visible {
  transform: translateY(-50%) scale(1.08);
  border-color: rgba(255, 230, 170, 0.95);
  background:
    radial-gradient(circle at 30% 30%, rgba(255, 240, 210, 0.32), rgba(40, 28, 14, 0.86) 70%);
  box-shadow:
    0 0 0 1px rgba(255, 215, 130, 0.55),
    0 16px 42px rgba(0, 0, 0, 0.6),
    0 0 56px rgba(255, 215, 130, 0.5),
    inset 0 1px 0 rgba(255, 240, 210, 0.32);
  outline: none;
}

.horizon-nav:active {
  transform: translateY(-50%) scale(0.96);
}

.horizon-nav:disabled {
  opacity: 0.28;
  cursor: not-allowed;
  animation: none;
  pointer-events: none;
}

@keyframes horizonNavBreath {
  0%, 100% {
    box-shadow:
      0 0 0 1px rgba(212, 175, 55, 0.25),
      0 12px 32px rgba(0, 0, 0, 0.5),
      0 0 36px rgba(212, 175, 55, 0.32),
      inset 0 1px 0 rgba(255, 240, 210, 0.18);
  }
  50% {
    box-shadow:
      0 0 0 1px rgba(255, 215, 130, 0.45),
      0 14px 38px rgba(0, 0, 0, 0.55),
      0 0 56px rgba(255, 215, 130, 0.5),
      inset 0 1px 0 rgba(255, 240, 210, 0.28);
  }
}

@media (prefers-reduced-motion: reduce) {
  .horizon-nav { animation: none !important; }
}

@media (max-width: 640px) {
  .horizon-nav {
    width: 52px;
    height: 52px;
  }
  .horizon-nav--prev { left: 8px; }
  .horizon-nav--next { right: 8px; }
}

/* SPEC Phase 2: thin luminous line, 1–2px thick, 8% opacity, blends
   with marble. The container is just a positioning wrapper now —
   the line itself is a 2px-tall pseudo-element. */
.horizon-ribbon {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(30%, 32vh, 42%);
  height: 2px;
  pointer-events: none;
  z-index: 4;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(212, 175, 55, 0.08) 8%,
    rgba(255, 230, 170, 0.10) 50%,
    rgba(212, 175, 55, 0.08) 92%,
    transparent 100%);
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.18s;
}

.horizon-room.is-open .horizon-ribbon { opacity: 1; }

/* SPEC Phase 2: a soft "now" marker — small vertical tick under the
   current anchor's date. Sits dead-center on the ribbon line. */
.horizon-ribbon__now {
  position: absolute;
  left: 50%;
  top: -7px;
  transform: translateX(-50%);
  width: 2px;
  height: 16px;
  background: linear-gradient(180deg,
    rgba(255, 230, 170, 0.0) 0%,
    rgba(255, 215, 130, 0.55) 45%,
    rgba(255, 215, 130, 0.55) 55%,
    rgba(255, 230, 170, 0.0) 100%);
  border-radius: 1px;
  pointer-events: none;
}

.horizon-ribbon__now-date {
  position: absolute;
  left: 50%;
  top: 18px;
  transform: translateX(-50%);
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(0.78rem, 1.1vw, 0.92rem);
  color: rgba(70, 55, 38, 0.78);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.6);
  letter-spacing: 0.04em;
  white-space: nowrap;
  pointer-events: none;
}

/* The rail: holds the chronologically-arranged tiles. Translates X
   based on lean offset (set via --rail-x in vault-horizon.js). */
.horizon-rail {
  position: relative;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(20px, 2.4vw, 36px);
  padding: 0 50%; /* leaves room for the anchor to center on each end */
  transform: translate3d(var(--rail-x, 0px), 0, 0);
  /* No CSS transition by default — the spring loop in
     vault-horizon-physics.js writes --rail-x every frame for a true
     physical feel. The .horizon-rail--snapping class re-enables a
     short tween only for non-physics keyboard / programmatic snaps. */
  will-change: transform;
}

.horizon-rail--snapping {
  transition: transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Each tile in horizon mode reuses the existing .vault-tile chrome,
   wrapped in a slot. Slot sets the size and the per-position transform
   (depth, lean falloff for non-anchor tiles).
   Real-Object: depth fall-off uses opacity + brightness, NOT blur.
   Real eyes refocus instantly; they don't soft-focus background scenery
   into a smudge. The non-anchor tile reads as "less prominent on the
   wall," not "out of focus." */
.horizon-tile {
  position: relative;
  flex: 0 0 auto;
  width: clamp(220px, 22vw, 320px);
  aspect-ratio: 1.05 / 1;
  transform: scale(0.84) translateY(8px);
  opacity: 0.7;
  filter: brightness(0.92);
  transition:
    transform var(--dur-cross) var(--ease-real-out),
    filter var(--dur-cross) var(--ease-real-out),
    opacity var(--dur-cross) var(--ease-real-out);
  cursor: pointer;
  will-change: transform, filter, opacity;
}

.horizon-tile.is-anchor {
  transform: scale(1) translateY(0);
  opacity: 1;
  filter: brightness(1);
  z-index: 6;
}

.horizon-tile.is-near {
  transform: scale(0.92) translateY(4px);
  opacity: 0.86;
  filter: brightness(0.96);
  z-index: 5;
}

/* Reuse .vault-tile chrome inside each horizon-tile — make it fill the slot */
.horizon-tile .vault-tile {
  width: 100%;
  height: 100%;
  position: relative;
  /* Pop the anchor with a brass halo */
}

.horizon-tile.is-anchor .vault-tile {
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 170, 0.95),
    inset 0 0 0 2px rgba(212, 175, 55, 0.6),
    0 18px 48px rgba(60, 40, 15, 0.42),
    0 0 64px rgba(212, 175, 55, 0.32);
}

/* MILESTONE MARKERS (collapsed filter row) ----------------------------- */
.horizon-milestones {
  position: absolute;
  left: 0;
  right: 0;
  bottom: clamp(14%, 18vh, 22%);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(18px, 3vw, 36px);
  z-index: 7;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1) 0.3s;
}

.horizon-room.is-open .horizon-milestones { opacity: 1; }

.horizon-milestone {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(60, 40, 15, 0.55);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.65);
}

.horizon-milestone__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: radial-gradient(circle at 30% 30%, #ffd56b, #b8893a);
  box-shadow: 0 0 6px rgba(212, 175, 55, 0.5);
}

.horizon-milestone.is-active {
  color: #6a4516;
  font-weight: 600;
}

.horizon-milestone.is-active .horizon-milestone__dot {
  box-shadow: 0 0 14px rgba(255, 215, 130, 0.9);
  transform: scale(1.4);
}

/* DRAG INDICATOR (Mouse Lean) ----------------------------------------- */
.horizon-room__hint {
  position: absolute;
  bottom: clamp(18px, 4vh, 32px);
  left: 50%;
  transform: translateX(-50%);
  z-index: 7;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(60, 40, 15, 0.55);
  text-shadow: 0 1px 2px rgba(255, 255, 255, 0.55);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.5s;
  display: inline-flex;
  align-items: center;
  gap: 10px;
}

.horizon-room.is-open .horizon-room__hint { opacity: 0.85; }

.horizon-room.is-leaning .horizon-room__hint { opacity: 0; }

.horizon-room__hint-arrow {
  display: inline-block;
  width: 14px;
  height: 1px;
  background: rgba(120, 80, 30, 0.55);
  position: relative;
}

.horizon-room__hint-arrow::before,
.horizon-room__hint-arrow::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 6px;
  height: 1px;
  background: rgba(120, 80, 30, 0.55);
  transform-origin: right center;
}

.horizon-room__hint-arrow::before { right: 0; transform: translateY(-50%) rotate(35deg); }
.horizon-room__hint-arrow::after  { right: 0; transform: translateY(-50%) rotate(-35deg); }

.horizon-room__hint-arrow.is-left { transform: rotate(180deg); }

/* ENTRANCE TRANSITION -------------------------------------------------
   Real-Object: opacity-only fade with a small translateX from the side
   the rail points. NO blur(8px) entry, NO scale(0.7) start — those
   produce a "warp-in" sci-fi look. The rail and its tiles fade in like
   a row of paintings being unveiled. */
.horizon-room.is-flying-in .horizon-rail {
  animation: horizonRailIn var(--dur-cross) var(--ease-real-out) both;
}

@keyframes horizonRailIn {
  from { opacity: 0; transform: translate3d(var(--rail-x, 0px), 0, 0); }
  to   { opacity: 1; transform: translate3d(var(--rail-x, 0px), 0, 0); }
}

.horizon-room.is-flying-in .horizon-tile {
  animation: horizonTileIn var(--dur-cross) var(--ease-real-out) both;
  animation-delay: calc(var(--enter-delay, 0) * 1ms);
}

.horizon-room.is-flying-in .horizon-tile.is-anchor { animation-delay: 80ms; }

@keyframes horizonTileIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .horizon-room.is-flying-in .horizon-rail,
  .horizon-room.is-flying-in .horizon-tile { animation: none !important; opacity: 1; }
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 4 — CAPSULE COME & GO INSIDE HORIZON
   ════════════════════════════════════════════════════════════════════ */

/* ARRIVAL — "new acquisition" pulse
   Real-Object: when a brand-new capsule materializes (real-time listener
   inserts it), the tile fades in (opacity-only, 480ms) and its OWN
   brass border briefly luminates for 280ms. NO under-glow that bleeds
   beyond the tile boundary, NO 18px blur halo, NO scale(1.04) overshoot.
   The brass border tells the eye "look here" without leaking into the
   surrounding marble. */
.horizon-tile.is-blooming {
  animation: horizonBloom var(--dur-cross) var(--ease-real-out) both;
}

@keyframes horizonBloom {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.horizon-tile.is-blooming .vault-tile {
  animation: horizonBloomBrass 280ms var(--ease-real-out) both;
}

@keyframes horizonBloomBrass {
  0%   { box-shadow:
           inset 0 0 0 1px rgba(212, 175, 55, 0.55),
           0 10px 28px rgba(60, 40, 15, 0.32); }
  50%  { box-shadow:
           inset 0 0 0 1px rgba(255, 215, 130, 1),
           inset 0 0 0 2px rgba(212, 175, 55, 0.55),
           0 12px 32px rgba(60, 40, 15, 0.4); }
  100% { box-shadow:
           inset 0 0 0 1px rgba(212, 175, 55, 0.55),
           0 10px 28px rgba(60, 40, 15, 0.32); }
}

@media (prefers-reduced-motion: reduce) {
  .horizon-tile.is-blooming,
  .horizon-tile.is-blooming .vault-tile { animation: none !important; opacity: 1; }
}

/* MOVING PAST a card — already covered by the base .horizon-tile blur
   when it loses .is-anchor. Lean back and it sharpens via the existing
   filter transition (.42s). No extra CSS needed. */

/* OPENING — the rotating brass orb. SPEC C9: appears above the
   centered card when the user taps the anchor. The user then ROTATES
   the orb with the same lean signal (mouse / tilt / head). Crossing
   the OPEN_THRESHOLD (180°) unfolds the card content in-frame. */
.horizon-orb {
  position: absolute;
  top: -64px;
  left: 50%;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  pointer-events: none;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 235, 190, 0.9) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, #d4af37 0%, #8b5e22 80%);
  box-shadow:
    0 0 0 1px rgba(255, 230, 170, 0.6),
    0 0 24px rgba(212, 175, 55, 0.5),
    inset 0 -3px 6px rgba(0, 0, 0, 0.3);
  transform: translateX(-50%) scale(0);
  opacity: 0;
  z-index: 8;
  transition:
    transform var(--dur-touch) var(--ease-real-out),
    opacity var(--dur-touch) var(--ease-real-out);
}

.horizon-orb::after {
  /* tiny brass tick on the orb so its rotation is visible */
  content: "";
  position: absolute;
  top: 6px;
  left: 50%;
  width: 2px;
  height: 10px;
  background: rgba(255, 250, 220, 0.9);
  border-radius: 1px;
  transform-origin: 50% 100%;
  transform: translateX(-50%);
  box-shadow: 0 0 6px rgba(255, 240, 200, 0.7);
}

/* Orb visible during is-orb-active (rotation pending) and is-revealed
   (rotated to 360° as part of the unfold finale). */
.horizon-tile.is-orb-active .horizon-orb,
.horizon-tile.is-revealed .horizon-orb {
  opacity: 1;
  transform: translateX(-50%) scale(1) rotate(var(--orb-rot, 0deg));
}

/* Real-Object: orb stays static. The brass cabochon's own warm glow is
   the affordance — no ring breath loop demanding attention. */

/* SPEC C10: in-frame content unfold. Slides up from the bottom of the
   tile, occupies the full tile space. Sender / time / duration lines
   ink-fade in with a stagger. Big play button. Audio rises ambient. */
.horizon-unfold {
  position: absolute;
  inset: 0;
  z-index: 4;
  background:
    linear-gradient(180deg, rgba(20, 14, 6, 0.0) 0%, rgba(20, 14, 6, 0.78) 38%, rgba(20, 14, 6, 0.92) 100%);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  border-radius: inherit;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  align-items: center;
  padding: clamp(18px, 3vh, 28px) clamp(16px, 3vw, 24px);
  opacity: 0;
  transform: translateY(8px);
  animation: horizonUnfoldIn var(--dur-cross) var(--ease-real-out) 80ms both;
  /* v29.15 — panel BACKGROUND must NOT block drag/lean. Only the
     interactive children (close, play) accept pointer events.
     Previously this absorbed every drag start and made the rail
     feel frozen. Now drags pass straight through to the stage. */
  pointer-events: none;
}

.horizon-unfold > * {
  /* Re-enable for everything except the bare panel background */
  pointer-events: auto;
}

@keyframes horizonUnfoldIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* When revealed, the underlying tile preview sharpens — the blurred
   "sealed" treatment lifts to a clean, focused image. */
.horizon-tile.is-revealed .vault-tile__bg {
  filter: blur(0) brightness(1.05) saturate(1.05);
  transform: scale(1.04);
  transition: filter 600ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
}

.horizon-unfold__close {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: 1px solid rgba(255, 230, 170, 0.4);
  background: rgba(20, 14, 6, 0.6);
  color: #f4ead6;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
  z-index: 2;
}
.horizon-unfold__close:hover {
  background: rgba(40, 28, 14, 0.8);
  border-color: rgba(255, 215, 130, 0.7);
  transform: scale(1.06);
}

.horizon-unfold__lines {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  margin-bottom: clamp(14px, 2vh, 22px);
  text-align: center;
}

.horizon-unfold__line {
  font-family: var(--font-body);
  color: rgba(244, 234, 214, 0.95);
  letter-spacing: 0.02em;
  /* SPEC C10: text fades in like ink — opacity + tiny blur falloff */
  opacity: 0;
  filter: blur(3px);
  animation: horizonInkFade 700ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

.horizon-unfold__line.is-line-1 {
  font-family: 'Cormorant Garamond', serif;
  font-style: italic;
  font-size: clamp(1.1rem, 1.8vw, 1.35rem);
  color: #f4ead6;
  text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
  animation-delay: 200ms;
}
.horizon-unfold__line.is-line-2 {
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  color: rgba(244, 234, 214, 0.7);
  letter-spacing: 0.06em;
  animation-delay: 380ms;
}
.horizon-unfold__line.is-line-3 {
  font-size: clamp(0.78rem, 1vw, 0.88rem);
  color: rgba(255, 215, 130, 0.78);
  letter-spacing: 0.04em;
  animation-delay: 520ms;
}

@keyframes horizonInkFade {
  0%   { opacity: 0; filter: blur(4px); transform: translateY(4px); }
  60%  { opacity: 0.85; filter: blur(0.6px); transform: translateY(0); }
  100% { opacity: 1; filter: blur(0); transform: translateY(0); }
}

.horizon-unfold__play {
  appearance: none;
  border: 1px solid rgba(255, 230, 170, 0.6);
  background: linear-gradient(180deg, #d4af37, #b8893a);
  color: #2a1f17;
  width: 60px;
  height: 60px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow:
    0 8px 22px rgba(40, 25, 5, 0.55),
    inset 0 1px 0 rgba(255, 240, 210, 0.6),
    0 0 28px rgba(255, 215, 130, 0.45);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
  opacity: 0;
  animation: horizonInkFade 700ms cubic-bezier(0.22, 1, 0.36, 1) 640ms both;
}
.horizon-unfold__play:hover { transform: scale(1.06); }
.horizon-unfold__play:active { transform: scale(0.97); }

.horizon-unfold__progress {
  width: min(70%, 220px);
  height: 3px;
  margin-top: 14px;
  background: rgba(255, 230, 170, 0.18);
  border-radius: 2px;
  overflow: hidden;
  opacity: 0;
  animation: horizonInkFade 700ms cubic-bezier(0.22, 1, 0.36, 1) 760ms both;
}

.horizon-unfold__progress-bar {
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, rgba(255, 215, 130, 0.85), #ffd76b);
  transition: width 0.18s linear;
  box-shadow: 0 0 10px rgba(255, 215, 130, 0.7);
}

@media (prefers-reduced-motion: reduce) {
  .horizon-tile.is-orb-active .horizon-orb { animation: none; }
  .horizon-unfold { animation: none; opacity: 1; transform: none; }
  .horizon-unfold__line,
  .horizon-unfold__play,
  .horizon-unfold__progress {
    animation: none; opacity: 1; filter: none; transform: none;
  }
}

/* CLOSING / ARCHIVING — content folds back into the orb, the card
   sinks slightly deeper into the marble (translucency + tiny scale-down)
   and we mark it visited with a softer brightness so the user reads
   "this one has been heard." */
.horizon-tile.has-been-heard {
  filter: blur(0) brightness(0.92) saturate(0.92);
  opacity: 0.86;
}

/* SPEC Phase 4: closing animation — card sinks 4–6px deeper into the
   marble with soft compression and becomes slightly translucent (the
   "I have read this" cue). Forward declared — JS adds .is-folding
   when the user closes the unfolded content. */
.horizon-tile.is-folding {
  animation: horizonFold 520ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes horizonFold {
  0%   { transform: scale(1) translateY(0);   opacity: 1;    filter: blur(0) brightness(1); }
  55%  { transform: scale(0.97) translateY(3px); opacity: 0.92; filter: blur(1.4px) brightness(0.94); }
  100% { transform: scale(0.965) translateY(5px); opacity: 0.78; filter: blur(0) brightness(0.92); }
}

/* Persistent post-fold state so the sunk look survives the animation
   (animation-fill-mode: both does this for the keyframe end-state, but
   we keep an explicit class hook in case the animation is interrupted). */
.horizon-tile.has-been-folded {
  transform: scale(0.965) translateY(5px);
  opacity: 0.78;
  filter: brightness(0.92);
}

/* ════════════════════════════════════════════════════════════════════
   PHASE 5 — ONBOARDING + SETTINGS TOGGLE
   ════════════════════════════════════════════════════════════════════ */

/* Onboarding overlay: 15s of calm choreography teaching the lean
   gesture. Shows once per user (localStorage flag), dismissible at any
   time via a small "Got it" pill in the corner. */
.horizon-onboarding {
  /* Card-shaped panel near the top so the rail underneath stays
     interactive. The wrapper itself does NOT capture pointer events —
     only the "Got it" button inside does. This means the user can
     start dragging immediately and the onboarding self-dismisses. */
  position: absolute;
  top: clamp(80px, 12vh, 140px);
  left: 50%;
  transform: translateX(-50%);
  max-width: min(560px, 92vw);
  background: rgba(20, 14, 6, 0.78);
  border: 1px solid rgba(212, 175, 55, 0.42);
  border-radius: 18px;
  box-shadow:
    0 18px 56px rgba(60, 40, 15, 0.45),
    inset 0 1px 0 rgba(255, 240, 210, 0.16);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  padding: clamp(18px, 3vh, 26px) clamp(20px, 3vw, 32px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  z-index: 12;
  pointer-events: none; /* pass through; button below opts in */
  opacity: 0;
  transition: opacity 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.horizon-onboarding__got { pointer-events: auto; }

.horizon-onboarding.is-visible { opacity: 1; }

.horizon-onboarding__title {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-style: italic;
  color: #f4ead6;
  margin: 0 0 0.6rem;
  letter-spacing: 0.01em;
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
}

.horizon-onboarding__sub {
  font-family: var(--font-body);
  font-size: clamp(0.92rem, 1.4vw, 1.05rem);
  color: rgba(244, 234, 214, 0.8);
  margin: 0 0 1.6rem;
  max-width: 32em;
  line-height: 1.6;
}

/* SPEC Phase 5: REAL animated lean-gesture demo. A miniature ribbon
   with three mock cards. A glowing finger drags left and right while
   the cards drift in perfect sync — teaches the gesture by showing
   the gesture, not by labeling it. */
.horizon-onboarding__visual {
  position: relative;
  width: clamp(260px, 36vw, 380px);
  height: 96px;
  margin: 1rem 0 1.4rem;
  perspective: 800px;
}

.horizon-onboarding__demo-rail {
  position: absolute;
  inset: 18px 0 18px 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  animation: horizonDemoRailLean 4.4s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  will-change: transform;
}

.horizon-onboarding__demo-card {
  flex: 0 0 auto;
  width: 52px;
  height: 60px;
  border-radius: 8px;
  background: linear-gradient(180deg,
    rgba(120, 90, 50, 0.9) 0%,
    rgba(80, 56, 28, 0.92) 70%,
    rgba(245, 232, 200, 0.95) 70%,
    rgba(245, 232, 200, 0.95) 100%);
  box-shadow:
    inset 0 0 0 1px rgba(212, 175, 55, 0.5),
    0 4px 10px rgba(40, 25, 5, 0.32);
  transform: scale(0.86);
  filter: blur(0.6px) brightness(0.92);
  opacity: 0.78;
}

.horizon-onboarding__demo-card.is-mid {
  transform: scale(1);
  filter: blur(0) brightness(1);
  opacity: 1;
  box-shadow:
    inset 0 0 0 1px rgba(255, 230, 170, 0.95),
    0 6px 14px rgba(40, 25, 5, 0.42),
    0 0 18px rgba(212, 175, 55, 0.4);
}

/* Thin demo ribbon line under the cards */
.horizon-onboarding__demo-ribbon {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: 12px;
  height: 2px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(255, 215, 130, 0.55) 50%,
    transparent 100%);
}

/* The finger / pointer that drives the gesture */
.horizon-onboarding__hand {
  position: absolute;
  bottom: -4px;
  left: 50%;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 240, 210, 0.95) 0%, transparent 55%),
    radial-gradient(circle at 50% 50%, #d4af37 0%, #8b5e22 80%);
  box-shadow:
    0 0 0 2px rgba(255, 230, 170, 0.55),
    0 0 24px rgba(255, 215, 130, 0.7),
    0 4px 14px rgba(40, 25, 5, 0.45);
  transform: translateX(-50%);
  animation: horizonOnboardLean 4.4s cubic-bezier(0.42, 0, 0.58, 1) infinite;
  z-index: 2;
}

/* Soft drag-arrow trail to reinforce the direction of motion */
.horizon-onboarding__hand::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 215, 130, 0.45) 0%, transparent 70%);
  animation: horizonOnboardPulse 1.4s ease-out infinite;
  z-index: -1;
}

@keyframes horizonOnboardLean {
  0%   { transform: translateX(-50%); }
  25%  { transform: translateX(-180%); }
  50%  { transform: translateX(-50%); }
  75%  { transform: translateX(80%); }
  100% { transform: translateX(-50%); }
}

@keyframes horizonDemoRailLean {
  0%   { transform: translateX(0); }
  25%  { transform: translateX(48px); }
  50%  { transform: translateX(0); }
  75%  { transform: translateX(-48px); }
  100% { transform: translateX(0); }
}

@keyframes horizonOnboardPulse {
  0%   { opacity: 0.8; transform: scale(0.7); }
  100% { opacity: 0; transform: scale(1.5); }
}

.horizon-onboarding__steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--font-body);
  font-size: 0.84rem;
  color: rgba(244, 234, 214, 0.7);
  letter-spacing: 0.04em;
  margin-bottom: 1.4rem;
}

.horizon-onboarding__steps span {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  justify-content: center;
}

.horizon-onboarding__steps span::before {
  content: "·";
  color: rgba(255, 215, 130, 0.7);
  font-size: 1.4em;
  line-height: 0;
}

.horizon-onboarding__got {
  background: linear-gradient(180deg, #d4af37, #b8893a);
  color: #2a1f17;
  border: 1px solid rgba(120, 80, 30, 0.6);
  border-radius: 999px;
  padding: 9px 22px;
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  box-shadow:
    inset 0 1px 0 rgba(255, 235, 180, 0.7),
    0 6px 20px rgba(180, 130, 30, 0.4);
  transition: transform 0.18s ease;
}

.horizon-onboarding__got:hover { transform: translateY(-1px); }

@media (prefers-reduced-motion: reduce) {
  .horizon-onboarding__hand { animation: none; transform: translateX(-50%); }
}

/* ════════════════════════════════════════════════════════════════════
   HORIZON OPT-IN CTA — "Drift through your voices"
   The single, deliberate entry point into Horizon Exploration Mode.
   Placed below the bottom anchor strip on the main screen so it's
   discoverable without competing with the wall's tap-to-listen flow.
   ════════════════════════════════════════════════════════════════════ */
.vault-horizon-cta-row {
  display: flex;
  justify-content: center;
  padding: clamp(12px, 1.6vw, 20px) clamp(16px, 2vw, 28px) clamp(28px, 4vw, 40px);
  position: relative;
  z-index: 2;
}

.vault-horizon-cta {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 28px 10px;
  background: rgba(255, 248, 230, 0.78);
  border: 1px solid rgba(180, 130, 30, 0.45);
  border-radius: 999px;
  color: #2a1f17;
  font-family: var(--font-body);
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.7),
    0 6px 22px rgba(60, 40, 15, 0.18),
    0 0 0 1px rgba(255, 230, 170, 0.2);
  transition: transform 0.22s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.22s ease,
              box-shadow 0.22s ease,
              background 0.22s ease;
  position: relative;
  overflow: hidden;
}

.vault-horizon-cta::before {
  /* slow gold shimmer that drifts across the pill, suggesting motion */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(100deg,
    transparent 0%,
    rgba(255, 215, 130, 0.0) 30%,
    rgba(255, 215, 130, 0.32) 50%,
    rgba(255, 215, 130, 0.0) 70%,
    transparent 100%);
  transform: translateX(-100%);
  animation: ctaShimmer 6s ease-in-out infinite;
  pointer-events: none;
}

@keyframes ctaShimmer {
  0%, 30% { transform: translateX(-100%); }
  70%     { transform: translateX(100%); }
  100%    { transform: translateX(100%); }
}

.vault-horizon-cta:hover,
.vault-horizon-cta:focus-visible {
  transform: translateY(-2px);
  border-color: rgba(180, 130, 30, 0.7);
  background: rgba(255, 248, 230, 0.95);
  box-shadow:
    inset 0 1px 0 rgba(255, 240, 210, 0.85),
    0 10px 32px rgba(60, 40, 15, 0.28),
    0 0 36px rgba(255, 215, 130, 0.32);
  outline: none;
}

.vault-horizon-cta:active {
  transform: translateY(0);
  transition-duration: 0.12s;
}

.vault-horizon-cta__icon {
  color: rgba(180, 130, 30, 0.9);
  display: inline-flex;
}

.vault-horizon-cta__icon svg { width: 56px; height: 14px; }

.vault-horizon-cta__label {
  font-family: 'Cormorant Garamond', serif;
  font-size: clamp(0.95rem, 1.4vw, 1.1rem);
  font-weight: 600;
  font-style: italic;
  letter-spacing: 0.01em;
  color: #2a1f17;
}

.vault-horizon-cta__sub {
  font-family: var(--font-body);
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(110, 70, 25, 0.6);
}

@media (prefers-reduced-motion: reduce) {
  .vault-horizon-cta::before { animation: none; opacity: 0; }
}

/* Re-enable pill: only shown when horizon was disabled. Sits low-left
   so it's discoverable without competing with the chrome. */
.horizon-toggle-pill {
  position: fixed;
  left: clamp(14px, 2vw, 24px);
  bottom: clamp(18px, 3vw, 28px);
  z-index: 80;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  background: rgba(255, 248, 230, 0.78);
  border: 1px solid rgba(180, 130, 30, 0.4);
  border-radius: 999px;
  color: #2a1f17;
  font-family: var(--font-body);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  box-shadow: 0 2px 12px rgba(60, 40, 15, 0.15), inset 0 1px 0 rgba(255, 240, 210, 0.5);
  transition: transform 0.18s ease, border-color 0.18s ease;
}

.horizon-toggle-pill:hover { transform: translateY(-1px); border-color: rgba(180, 130, 30, 0.7); }

.horizon-toggle-pill__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(120, 80, 30, 0.45);
}

.horizon-toggle-pill[data-state="on"] .horizon-toggle-pill__dot {
  background: radial-gradient(circle at 30% 30%, #ffd56b, #b8893a);
  box-shadow: 0 0 8px rgba(212, 175, 55, 0.7);
}

/* RESPONSIVE / MOBILE -------------------------------------------------- */
@media (max-width: 720px) {
  .horizon-tile { width: clamp(200px, 64vw, 280px); }
  .horizon-rail { gap: clamp(12px, 4vw, 20px); }
  .horizon-room__title { display: none; }
  .horizon-ribbon { bottom: 26%; }
  .horizon-milestones { bottom: 10%; }
}

/* REDUCED MOTION ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .horizon-room,
  .horizon-rail,
  .horizon-tile { transition: none !important; animation: none !important; }
}