/* ECHO site experience layer (homepage/experience.js): sound, echoes, reveals, live signals.
   Everything here only styles elements that the script creates or opts into, so the
   page reads exactly as before without JavaScript. */

/* ---------- sound switch (header) ---------- */
.sound-switch { display: inline-flex; align-items: center; gap: 9px; min-height: 38px; padding: 0 12px; border: 1px solid var(--echo-line-strong); border-radius: var(--echo-radius-sm); background: transparent; color: var(--echo-ink-muted); font: 500 10px var(--mono, monospace); letter-spacing: .14em; cursor: pointer; transition: color .25s, border-color .25s, background .25s, box-shadow .35s; }
.sound-switch:hover { color: var(--text, var(--echo-ink)); border-color: rgba(238, 241, 244, .4); }
.sound-switch.is-on { color: var(--echo-core); border-color: var(--echo-line-strong); background: var(--echo-core-soft); }
.sound-switch.is-armed { color: var(--echo-warning); border-color: rgba(242, 184, 75, .333); }
.sound-switch.nudge { animation: sound-nudge 1.2s cubic-bezier(.16, 1, .3, 1) 2; }
.sound-bars { display: inline-flex; align-items: flex-end; gap: 2px; height: 11px; }
.sound-bars i { width: 2px; height: 100%; border-radius: 1px; background: currentColor; transform: scaleY(.22); transform-origin: bottom; transition: transform .12s linear; }
.sound-switch.is-armed .sound-bars i { animation: sound-idle 1.3s ease-in-out infinite; }
.sound-switch.is-armed .sound-bars i:nth-child(2n) { animation-delay: -.55s; }
.sound-switch:not(.is-on):not(.is-armed) .sound-bars i:nth-child(2) { transform: scaleY(.5); }
.sound-switch:not(.is-on):not(.is-armed) .sound-bars i:nth-child(3) { transform: scaleY(.35); }

/* ---------- invitation ---------- */
.sound-invite { position: fixed; z-index: 90; right: max(var(--gutter, 24px), calc((100vw - var(--content, 1360px)) / 2)); bottom: 28px; width: min(400px, calc(100vw - 32px)); display: grid; grid-template-columns: auto 1fr; gap: 14px 16px; padding: 18px 18px 16px; border: 1px solid var(--echo-line); border-radius: var(--echo-radius-lg); background: var(--echo-glass); box-shadow: var(--echo-shadow-window); backdrop-filter: blur(var(--echo-blur-glass)) saturate(140%); color: var(--text, var(--echo-ink)); opacity: 0; transform: translateY(18px); transition: opacity .6s cubic-bezier(.16, 1, .3, 1), transform .6s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.sound-invite.show { opacity: 1; transform: none; pointer-events: auto; }
.sound-invite-wave { display: flex; align-items: center; gap: 3px; height: 44px; padding: 0 4px; }
.sound-invite-wave i { width: 2px; height: 100%; border-radius: 1px; background: var(--echo-ink-muted); transform-origin: center; animation: invite-wave 1.6s ease-in-out infinite; }
.sound-invite-wave i:nth-child(2) { animation-delay: -.3s; }
.sound-invite-wave i:nth-child(3) { animation-delay: -.7s; }
.sound-invite-wave i:nth-child(4) { animation-delay: -1s; }
.sound-invite-wave i:nth-child(5) { animation-delay: -1.3s; }
.sound-invite-copy { display: grid; gap: 4px; }
.sound-invite-kicker { color: var(--echo-ink-muted); font: 8px var(--mono, monospace); letter-spacing: .18em; }
.sound-invite-copy strong { font-size: 17px; font-weight: 450; letter-spacing: .04em; }
.sound-invite-copy p { margin: 0; color: var(--echo-ink-muted); font-size: 12px; line-height: 1.65; }
.sound-invite-actions { grid-column: 1 / -1; display: flex; gap: 10px; }
.sound-invite-actions button { flex: 1; min-height: 42px; border: 1px solid var(--echo-line-strong); border-radius: var(--echo-radius-sm); background: transparent; color: var(--echo-ink-muted); font-size: 11px; letter-spacing: .07em; cursor: pointer; transition: background .25s, border-color .25s, color .25s, box-shadow .25s; }
.sound-invite-actions button:hover { background: var(--echo-line); color: var(--echo-ink); }
.sound-invite-actions .sound-accept { border-color: var(--echo-action); background: var(--echo-action); color: var(--echo-on-action); font-weight: 500; }
.sound-invite-actions .sound-accept:hover { background: var(--echo-action); color: var(--echo-on-action); opacity: .88; }

/* ---------- toast ---------- */
.echo-toast { position: fixed; z-index: 95; left: 50%; bottom: 30px; padding: 10px 18px; border: 1px solid var(--echo-line); border-radius: var(--echo-radius-sm); background: var(--echo-glass); backdrop-filter: blur(var(--echo-blur-glass)) saturate(140%); color: var(--echo-ink); font: 10px var(--mono, monospace); letter-spacing: .12em; white-space: nowrap; opacity: 0; transform: translate(-50%, 14px); transition: opacity .35s, transform .45s cubic-bezier(.16, 1, .3, 1); pointer-events: none; }
.echo-toast.show { opacity: 1; transform: translate(-50%, 0); }

/* ---------- echo ripples and cursor glow ---------- */
.echo-ring { position: fixed; z-index: 85; width: 12px; height: 12px; margin: -6px 0 0 -6px; border: 1px solid rgba(238, 241, 244, .69); border-radius: 50%; pointer-events: none; animation: echo-ring .9s cubic-bezier(.16, 1, .3, 1) forwards; }
.echo-ring.late { border-color: rgba(238, 241, 244, .376); animation-delay: .14s; animation-duration: 1.2s; opacity: 0; }
.cursor-halo { position: fixed; z-index: 1; left: 0; top: 0; width: 440px; height: 440px; margin: -220px 0 0 -220px; border-radius: 50%; background: radial-gradient(circle, rgba(238, 241, 244, .086), rgba(238, 241, 244, .027) 38%, transparent 68%); mix-blend-mode: screen; opacity: 0; transition: opacity .6s; pointer-events: none; will-change: transform; }
.cursor-halo.show { opacity: 1; }
.motion-paused .cursor-halo { opacity: 0; }

/* ---------- card spotlight ---------- */
.has-spotlight > .spot { position: absolute; z-index: 1; inset: 0; background: radial-gradient(260px circle at var(--spot-x, 50%) var(--spot-y, 50%), rgba(238, 241, 244, .102), transparent 70%); mix-blend-mode: screen; opacity: 0; transition: opacity .35s; pointer-events: none; }
.has-spotlight:hover > .spot { opacity: 1; }
.roadmap-stages article.has-spotlight { position: relative; overflow: hidden; }

/* ---------- scroll reveals ---------- */
.reveal { opacity: 0; translate: 0 26px; transition: opacity .9s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms), translate 1s cubic-bezier(.16, 1, .3, 1) var(--reveal-delay, 0ms); }
.reveal.in-view { opacity: 1; translate: none; }
.future-primary, .future-secondary, .outline-link, .enter-panel > a, .gateway { transition-property: box-shadow, background, transform, color, border-color, translate; transition-duration: .25s, .25s, .25s, .25s, .3s, .5s; transition-timing-function: ease, ease, ease, ease, ease, cubic-bezier(.16, 1, .3, 1); }

/* ---------- epoch divider marquee ---------- */
.epoch-divider.is-marquee { justify-content: flex-start; padding-inline: 0; }
.marquee-track { display: flex; width: max-content; animation: marquee 38s linear infinite; }
.marquee-half { display: flex; align-items: center; gap: inherit; padding-right: 25px; }
.epoch-divider.is-marquee .marquee-half { gap: clamp(17px, 2.4vw, 40px); padding-right: clamp(17px, 2.4vw, 40px); }
.epoch-divider.is-marquee:hover .marquee-track { animation-play-state: paused; }

/* ---------- live signal map ---------- */
.signal-canvas { position: absolute; z-index: 2; inset: 0; width: 100%; height: 100%; pointer-events: none; }

/* ---------- memory dive (homepage/dive.js) ---------- */
.memory-dive { position: fixed; z-index: 0; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.dive-gauge { position: fixed; z-index: 45; right: 22px; top: 50%; display: grid; justify-items: end; gap: 18px; opacity: 0; translate: 14px -50%; pointer-events: none; transition: opacity .6s, translate .7s cubic-bezier(.16, 1, .3, 1); }
.dive-gauge.show { opacity: 1; translate: 0 -50%; pointer-events: auto; }
.dive-readout { display: grid; justify-items: end; gap: 4px; color: var(--echo-ink-muted); font: 8px var(--mono, monospace); letter-spacing: .16em; text-align: right; }
.dive-name { color: var(--echo-ink); font: 500 10px var(--mono, monospace); letter-spacing: .22em; }
.dive-count { color: var(--echo-ink-faint); font-size: 8px; }
.dive-gauge.ping .dive-name { animation: dive-ping .9s cubic-bezier(.16, 1, .3, 1); }
.dive-rail { position: relative; display: grid; justify-items: end; gap: 6px; margin: 0; padding: 0; list-style: none; }
.dive-rail::before, .dive-fill { content: ""; position: absolute; right: 5px; top: 8px; bottom: 8px; width: 1px; background: rgba(238, 241, 244, .122); }
.dive-fill { background: var(--echo-core); transform: scaleY(0); transform-origin: top; }
.dive-rail button { position: relative; display: grid; place-items: center; width: 11px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.dive-rail button i { width: 5px; height: 5px; border: 1px solid var(--echo-ink-faint); border-radius: 50%; background: var(--echo-ground); transition: width .3s, height .3s, background .3s, box-shadow .3s; }
.dive-rail button:hover i { border-color: var(--echo-ink); }
.dive-rail button.active i { width: 9px; height: 9px; border-color: var(--echo-core); background: var(--echo-core); box-shadow: none; }
.dive-rail button::after { content: attr(data-label); position: absolute; right: 22px; top: 50%; padding: 4px 8px; border: 1px solid var(--echo-line); border-radius: var(--echo-radius-xs); background: var(--echo-surface-raised); color: var(--echo-ink-muted); font: 9px var(--mono, monospace); letter-spacing: .16em; white-space: nowrap; opacity: 0; translate: 6px -50%; transition: opacity .25s, translate .25s; pointer-events: none; }
.dive-rail button:hover::after, .dive-rail button:focus-visible::after { opacity: 1; translate: 0 -50%; }

/* A soft clearing in the Memory Sea behind each text column keeps copy legible over the particles. */
.memory-dive ~ section .section-copy, .memory-dive ~ section .heading-detail, .memory-dive ~ section .gateway-intro, .memory-dive ~ section .heading-copy, .memory-dive ~ section .atlas-copy, .memory-dive ~ section .media-copy, .memory-dive ~ section .community-copy, .memory-dive ~ section .canon-snapshot header { position: relative; }
.memory-dive ~ section .section-copy::before, .memory-dive ~ section .heading-detail::before, .memory-dive ~ section .gateway-intro::before, .memory-dive ~ section .heading-copy::before, .memory-dive ~ section .atlas-copy::before, .memory-dive ~ section .media-copy::before, .memory-dive ~ section .community-copy::before, .memory-dive ~ section .canon-snapshot header::before { content: ""; position: absolute; z-index: -1; inset: -48px -72px; background: radial-gradient(closest-side, rgba(9, 10, 12, .878) 0%, rgba(9, 10, 12, .702) 55%, rgba(9, 10, 12, 0) 100%); pointer-events: none; }

/* ---------- headline line reveals ---------- */
.reveal .line { display: block; overflow: hidden; padding-bottom: .12em; margin-bottom: -.12em; font-style: inherit; }
.reveal .line-inner { display: inline-block; font-style: inherit; translate: 0 108%; transition: translate 1.15s cubic-bezier(.16, 1, .3, 1) calc(var(--reveal-delay, 0ms) + var(--line, 0) * 95ms + 120ms); }
.reveal.in-view .line-inner { translate: none; }

/* ---------- wordmark echoes ---------- */
.future-site .echo-wordmark.beat .echo-mark-core { animation: wordmark-beat 1.2s var(--echo-ease); }

/* ---------- live spectrum ---------- */
.hero-frequency.is-live i { animation: none; opacity: .9; height: 20px; transition: transform .1s linear; }

@keyframes sound-nudge { 0%, 100% { box-shadow: 0 0 0 0 rgba(238, 241, 244, 0); } 30% { box-shadow: 0 0 0 6px var(--echo-line); border-color: var(--echo-ink); color: var(--echo-ink); } }
@keyframes sound-idle { 0%, 100% { transform: scaleY(.25); } 50% { transform: scaleY(.9); } }
@keyframes invite-wave { 0%, 100% { transform: scaleY(.25); opacity: .5; } 50% { transform: scaleY(1); opacity: 1; } }
@keyframes echo-ring { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(9); } }
@keyframes marquee { to { transform: translateX(-33.3333%); } }
@keyframes dive-ping { 0% { opacity: .2; letter-spacing: .5em; } 100% { opacity: 1; letter-spacing: .22em; } }
@keyframes wordmark-beat { 0% { opacity: .55; } 100% { opacity: 1; } }

@media (max-width: 1480px) {
  .dive-readout { display: none; }
}
@media (max-width: 1180px) {
  .dive-gauge { display: none; }
}
@media (max-width: 900px) {
  .sound-switch { min-height: 36px; padding: 0 10px; }
  .sound-invite { right: 16px; left: 16px; width: auto; bottom: 16px; }
}
@media (max-width: 600px) {
  .sound-switch { min-width: 36px; padding: 0 9px; justify-content: center; }
  .sound-word { display: none; }
  .echo-toast { bottom: 18px; max-width: calc(100vw - 32px); white-space: normal; text-align: center; }
}
@media (pointer: coarse) {
  .sound-switch { min-height: 44px; min-width: 44px; }
}
@media print {
  .reveal, .reveal .line-inner { opacity: 1; translate: none; }
  .sound-switch, .sound-invite, .echo-toast, .echo-ring, .cursor-halo, .memory-dive, .dive-gauge { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal .line-inner { opacity: 1; translate: none; }
  .echo-ring, .cursor-halo { display: none; }
  .future-site .echo-wordmark.beat .echo-mark-core { animation: none; }
}