/* ====================================================================
   Odyssey Systems · Mission Motion Layer
   ----------------------------------------------------------------------
   Direction: mission control / orbital systems / AI enterprise.
   Principles: cinematic but restrained, GPU-friendly, reduced-motion safe.
   ==================================================================== */

:root {
  --motion-cyan: #00e6b0;
  --motion-cyan-soft: #55ffd7;
  --motion-ice: #f7faf8;
  --motion-ink: #090d10;
  --motion-graphite: #11171b;
  --motion-line: rgba(0, 230, 176, 0.18);
  --motion-line-strong: rgba(0, 230, 176, 0.36);
  --motion-white-line: rgba(247, 250, 248, 0.14);
  --motion-shadow: 0 18px 54px rgba(0, 0, 0, 0.22);
  --ease-orbit: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-command: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-drift: cubic-bezier(0.4, 0, 0.2, 1);
  --dur-fast: 160ms;
  --dur-hover: 240ms;
  --dur-enter: 680ms;
  --dur-cinematic: 1100ms;
  --reveal-y: 24px;
  --reveal-blur: 10px;
}

html {
  scroll-behavior: smooth;
}

body {
  min-height: 100vh;
}

body.odyssey-motion-ready {
  --mission-scroll: 0;
}

.mission-field,
.mission-vignette,
.mission-progress,
.mission-cursor {
  pointer-events: none;
}

.mission-field {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100vw;
  height: 100vh;
  opacity: 0;
  mix-blend-mode: screen;
  transition: opacity 900ms var(--ease-drift);
}

body.odyssey-motion-ready .mission-field {
  opacity: 0.46;
}

.mission-vignette {
  position: fixed;
  inset: 0;
  z-index: 0;
  opacity: 0;
  background:
    linear-gradient(115deg, rgba(0, 230, 176, 0.08), transparent 28%),
    linear-gradient(245deg, rgba(247, 250, 248, 0.045), transparent 34%);
  transition: opacity 900ms var(--ease-drift);
}

body.odyssey-motion-ready .mission-vignette {
  opacity: 1;
}

body > main,
body > footer,
body > header:not(.sticky-bar),
body > section,
body > .thanks-wrap,
body > .error-page {
  position: relative;
  z-index: 1;
}

.mission-progress {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 80;
  width: 100%;
  height: 2px;
  transform-origin: left center;
  transform: scaleX(var(--mission-scroll));
  background: linear-gradient(90deg, transparent, var(--motion-cyan), var(--motion-cyan-soft));
  box-shadow: 0 0 16px rgba(0, 230, 176, 0.56);
}

/* ── Reveals: telemetry enters from below, then resolves sharp. ───── */
[data-reveal] {
  opacity: 0;
  transform: translate3d(0, var(--reveal-y), 0) scale(0.985);
  filter: blur(var(--reveal-blur));
  transition:
    opacity var(--dur-enter) var(--ease-orbit),
    transform var(--dur-enter) var(--ease-orbit),
    filter var(--dur-enter) var(--ease-orbit);
  will-change: opacity, transform, filter;
}

[data-reveal].is-in {
  opacity: 1;
  transform: translate3d(0, 0, 0) scale(1);
  filter: blur(0);
  will-change: auto;
}

[data-reveal="soft"] {
  --reveal-y: 10px;
  --reveal-blur: 4px;
}

[data-reveal="rise"] {
  --reveal-y: 38px;
  --reveal-blur: 14px;
}

[data-reveal="vector"] {
  --reveal-y: 0;
  transform: translate3d(-22px, 12px, 0) skewX(-2deg);
}

[data-reveal="vector"].is-in {
  transform: translate3d(0, 0, 0) skewX(0);
}

[data-reveal-delay="1"] { transition-delay: 70ms; }
[data-reveal-delay="2"] { transition-delay: 140ms; }
[data-reveal-delay="3"] { transition-delay: 210ms; }
[data-reveal-delay="4"] { transition-delay: 280ms; }
[data-reveal-delay="5"] { transition-delay: 350ms; }
[data-reveal-delay="6"] { transition-delay: 420ms; }

/* ── Mission hero: rings, trajectory, command-grid depth. ─────────── */
.mission-hero {
  isolation: isolate;
  overflow: hidden;
}

.mission-hero::before,
.mission-hero::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.mission-hero::before {
  left: -14vw;
  right: -10vw;
  top: 16%;
  height: 1px;
  transform: rotate(-17deg);
  transform-origin: center;
  background: linear-gradient(90deg, transparent, rgba(247, 250, 248, 0.16), var(--motion-cyan), transparent);
  opacity: 0.62;
  animation: trajectory-sweep 8s var(--ease-drift) infinite;
}

.mission-hero::after {
  width: clamp(320px, 42vw, 760px);
  aspect-ratio: 1;
  right: max(-18vw, -260px);
  top: clamp(48px, 8vw, 120px);
  border: 1px solid rgba(0, 230, 176, 0.22);
  border-left-color: transparent;
  border-bottom-color: rgba(247, 250, 248, 0.11);
  border-radius: 50%;
  transform: rotate(var(--mission-hero-rotation, 0deg));
  opacity: 0.76;
  animation: orbital-ring 26s linear infinite;
}

.mission-hero .hero-bg,
.mission-hero .hero-grid {
  will-change: transform;
  transform: translate3d(0, calc(var(--mission-scroll, 0) * -18px), 0);
}

.mission-hero .hero-content,
.mission-hero .hero-mockup {
  z-index: 2;
}

.mission-hero .badge,
.article-hero .tag {
  position: relative;
  overflow: hidden;
}

.mission-hero .badge::after,
.article-hero .tag::after {
  content: "";
  position: absolute;
  inset: 0;
  transform: translateX(-120%);
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.32), transparent);
  animation: telemetry-glint 4.8s ease-in-out infinite;
}

.hero-mockup,
.article-hero,
.case-full,
.insight-card,
.team-card,
.manifesto-card,
.commit-card,
.method-card,
.problem-card,
.offer-card,
.price-card,
.icp-card {
  position: relative;
}

.hero-mockup,
[data-orbit-card] {
  transform-style: preserve-3d;
}

.hero-mockup::before,
[data-orbit-card]::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: linear-gradient(115deg, transparent 12%, rgba(0, 230, 176, 0.18), transparent 32%);
  transform: translateX(-140%);
  opacity: 0;
}

.hero-mockup.is-in::before,
[data-orbit-card].is-in::before {
  animation: scanner-pass 1500ms var(--ease-command) 260ms both;
}

/* ── Cards: command panels with orbit edge and controlled lift. ───── */
.problem-card,
.method-card,
.offer-card,
.price-card,
.icp-card,
.manifesto-card,
.commit-card,
.case-full,
.case-card,
.insight-card,
.team-card,
.article-card,
.asset,
.concept-card,
.mark-panel,
.swatch {
  transition:
    transform var(--dur-hover) var(--ease-command),
    box-shadow var(--dur-hover) var(--ease-command),
    border-color var(--dur-hover) var(--ease-command),
    background-color var(--dur-hover) var(--ease-command);
}

.problem-card::after,
.method-card::after,
.offer-card::after,
.price-card::after,
.icp-card::after,
.manifesto-card::after,
.commit-card::after,
.case-full::after,
.case-card::after,
.insight-card::after,
.team-card::after,
.article-card::after,
.asset::after,
.concept-card::after,
.mark-panel::after,
.swatch::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--motion-cyan), transparent);
  opacity: 0;
  transform: scaleX(0.4);
  transform-origin: left center;
  transition:
    opacity var(--dur-hover) var(--ease-command),
    transform var(--dur-hover) var(--ease-command);
}

.problem-card:hover,
.method-card:hover,
.offer-card:hover,
.price-card:hover,
.icp-card:hover,
.case-full:hover,
.case-card:hover,
.insight-card:hover,
.article-card:hover,
.asset:hover,
.concept-card:hover,
.mark-panel:hover,
.swatch:hover {
  transform: translate3d(0, -5px, 0);
  box-shadow: var(--motion-shadow);
}

.problem-card:hover::after,
.method-card:hover::after,
.offer-card:hover::after,
.price-card:hover::after,
.icp-card:hover::after,
.manifesto-card:hover::after,
.commit-card:hover::after,
.case-full:hover::after,
.case-card:hover::after,
.insight-card:hover::after,
.team-card:hover::after,
.article-card:hover::after,
.asset:hover::after,
.concept-card:hover::after,
.mark-panel:hover::after,
.swatch:hover::after {
  opacity: 1;
  transform: scaleX(1);
}

.method-card .letter {
  position: relative;
  display: inline-flex;
}

.method-card .letter::after {
  content: "";
  position: absolute;
  inset: -8px;
  border: 1px solid rgba(0, 230, 176, 0.2);
  border-radius: 50%;
  opacity: 0;
  transform: scale(0.72) rotate(-28deg);
  transition:
    opacity 420ms var(--ease-command),
    transform 420ms var(--ease-command);
}

.method-card:hover .letter::after,
.method-card.is-in .letter::after {
  opacity: 1;
  transform: scale(1) rotate(0);
}

/* ── Buttons and links: magnetic, fast feedback. ──────────────────── */
.cta-primary,
.cta-secondary,
.cta-btn,
.btn,
.filter-pill,
.mobile-toggle {
  transition:
    transform var(--dur-fast) var(--ease-command),
    background-color var(--dur-hover) var(--ease-command),
    color var(--dur-hover) var(--ease-command),
    border-color var(--dur-hover) var(--ease-command),
    box-shadow var(--dur-hover) var(--ease-command);
}

.cta-primary:hover,
.cta-btn:hover,
.btn:hover {
  box-shadow: 0 0 0 1px rgba(0, 230, 176, 0.25), 0 16px 40px rgba(0, 230, 176, 0.18);
}

.cta-primary:active,
.cta-secondary:active,
.cta-btn:active,
.btn:active,
.filter-pill:active,
.mobile-toggle:active {
  transform: scale(0.97);
}

.is-magnetic {
  will-change: transform;
}

/* ── Navigation: command bar lock-in. ─────────────────────────────── */
.sticky-bar {
  transition:
    padding var(--dur-hover) var(--ease-command),
    background-color var(--dur-hover) var(--ease-command),
    box-shadow var(--dur-hover) var(--ease-command),
    border-color var(--dur-hover) var(--ease-command);
}

.sticky-bar.is-scrolled {
  padding-top: 8px;
  padding-bottom: 8px;
  box-shadow: 0 10px 36px rgba(0, 0, 0, 0.22);
  border-bottom-color: rgba(0, 230, 176, 0.18);
}

.brand img {
  transition:
    transform 520ms var(--ease-command),
    filter 520ms var(--ease-command);
}

.brand:hover img,
.brand-link:hover img {
  transform: rotate(-10deg) scale(1.04);
  filter: drop-shadow(0 0 14px rgba(0, 230, 176, 0.42));
}

.brand-mark-enter {
  opacity: 0;
  transform: translate3d(-10px, 0, 0) scale(0.92) rotate(-12deg);
  animation: brand-mark-in 820ms var(--ease-orbit) 120ms forwards;
}

/* ── Forms: signal confirmation. ─────────────────────────────────── */
input,
select,
textarea {
  transition:
    border-color var(--dur-hover) var(--ease-command),
    background-color var(--dur-hover) var(--ease-command),
    box-shadow var(--dur-hover) var(--ease-command);
}

input:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(0, 230, 176, 0.16);
}

.dot {
  animation: signal-pulse 2.8s ease-in-out infinite;
}

[data-count] {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ── Custom cursor, desktop only. ─────────────────────────────────── */
.mission-cursor {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 100;
  width: 22px;
  height: 22px;
  border: 1px solid rgba(0, 230, 176, 0.62);
  border-radius: 50%;
  opacity: 0;
  transform: translate3d(-50%, -50%, 0);
  transition:
    opacity 200ms var(--ease-command),
    width 200ms var(--ease-command),
    height 200ms var(--ease-command),
    border-color 200ms var(--ease-command);
  mix-blend-mode: difference;
}

.mission-cursor.is-visible {
  opacity: 1;
}

.mission-cursor.is-active {
  width: 46px;
  height: 46px;
  border-color: rgba(247, 250, 248, 0.72);
}

/* ── Keyframes. ───────────────────────────────────────────────────── */
@keyframes brand-mark-in {
  70% { opacity: 1; transform: translate3d(0, 0, 0) scale(1.05) rotate(3deg); }
  100% { opacity: 1; transform: translate3d(0, 0, 0) scale(1) rotate(0); }
}

@keyframes orbital-ring {
  to { transform: rotate(360deg); }
}

@keyframes trajectory-sweep {
  0%, 100% { opacity: 0.22; filter: blur(0); }
  45%, 55% { opacity: 0.72; filter: blur(0.4px); }
}

@keyframes telemetry-glint {
  0%, 38% { transform: translateX(-120%); }
  58%, 100% { transform: translateX(120%); }
}

@keyframes scanner-pass {
  0% { opacity: 0; transform: translateX(-140%); }
  18% { opacity: 1; }
  100% { opacity: 0; transform: translateX(140%); }
}

@keyframes signal-pulse {
  0%, 100% { box-shadow: 0 0 0 rgba(0, 230, 176, 0); }
  50% { box-shadow: 0 0 18px rgba(0, 230, 176, 0.62); }
}

/* ── Mobile/performance guardrails. ───────────────────────────────── */
@media (max-width: 760px) {
  .mission-field,
  .mission-vignette,
  .mission-cursor {
    display: none;
  }

  .mission-hero::after {
    right: -220px;
    top: 88px;
    opacity: 0.28;
  }

  [data-reveal] {
    --reveal-y: 14px;
    --reveal-blur: 4px;
  }
}

@media (hover: none), (pointer: coarse) {
  .mission-cursor {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    scroll-behavior: auto !important;
    transition: none !important;
  }

  [data-reveal],
  [data-reveal].is-in,
  .brand-mark-enter {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .mission-field,
  .mission-vignette,
  .mission-progress,
  .mission-cursor {
    display: none !important;
  }

  .problem-card:hover,
  .method-card:hover,
  .offer-card:hover,
  .price-card:hover,
  .icp-card:hover,
  .case-full:hover,
  .case-card:hover,
  .insight-card:hover,
  .article-card:hover,
  .asset:hover,
  .concept-card:hover,
  .mark-panel:hover,
  .swatch:hover {
    transform: none !important;
  }
}

@media print {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
  }

  .mission-field,
  .mission-vignette,
  .mission-progress,
  .mission-cursor {
    display: none !important;
  }
}

/* ── Telemetria orbital sutil (página /sobre) ──────────────────────── */
.orbit-telemetry {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 6;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px 10px 6px;
  background: rgba(9, 13, 16, 0.78);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(0, 230, 176, 0.28);
  border-radius: 12px;
  pointer-events: none;
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 600ms var(--ease-orbit), transform 600ms var(--ease-orbit);
}
body.odyssey-motion-ready .orbit-telemetry {
  opacity: 1;
  transform: none;
  transition-delay: 1400ms; /* aparece depois do hero settle */
}
.orbit-telemetry img {
  width: 52px;
  height: 52px;
  display: block;
}
.orbit-telemetry-label {
  display: flex;
  flex-direction: column;
  gap: 1px;
  line-height: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  color: var(--motion-ice);
}
.orbit-telemetry-label span {
  font-size: 9px;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--motion-cyan);
  opacity: .85;
}
.orbit-telemetry-label strong {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .04em;
}
.orbit-telemetry-label em {
  font-size: 10px;
  color: rgba(247, 250, 248, 0.55);
  font-style: normal;
}
@media (max-width: 760px) {
  .orbit-telemetry { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .orbit-telemetry { transition: none; opacity: 1; transform: none; }
}

/* ════════════════════════════════════════════════════════════════════
   DEPTH ENGINE v2 · "Docking em 4 Atos"
   ----------------------------------------------------------------------
   Scroll = trajetória de aproximação à estação. Quatro atos via
   body[data-act]. Tilt 3D hand-rolled (substitui vanilla-tilt CDN),
   spotlight reveal, docking bays, transmissão em vidro, boot readout.
   Vanilla puro · GPU-only (transform/opacity) · reduced-motion safe.
   Ref: empresa/40-redesign-docking-4-atos.md
   ════════════════════════════════════════════════════════════════════ */

/* ── ATOS · o fundo respira conforme a trajetória ─────────────────── */
body[data-act="1"] .mission-field { opacity: 0.30; }
body[data-act="2"].odyssey-motion-ready .mission-field { opacity: 0.46; }
body[data-act="3"].odyssey-motion-ready .mission-field { opacity: 0.38; }
body[data-act="4"].odyssey-motion-ready .mission-field { opacity: 0.26; }
body[data-act="4"] .mission-vignette {
  background:
    linear-gradient(115deg, rgba(0, 230, 176, 0.12), transparent 30%),
    linear-gradient(245deg, rgba(247, 250, 248, 0.05), transparent 34%);
}

/* ── TILT 3D · cartões como painéis de comando com profundidade ────
   JS escreve --tilt-rx/--tilt-ry/--tilt-amp/--glare-x/--glare-y.
   Especificidade dupla vence os hovers translateY legados.        */
[data-tilt-3d][data-tilt-3d] {
  --tilt-rx: 0deg;
  --tilt-ry: 0deg;
  --tilt-amp: 0;
  --glare-x: 50%;
  --glare-y: 50%;
  transform: perspective(1100px) rotateX(var(--tilt-rx)) rotateY(var(--tilt-ry))
             translateY(calc(var(--tilt-amp) * -5px));
  transition:
    transform 520ms var(--ease-orbit),
    box-shadow 520ms var(--ease-orbit),
    border-color var(--dur-hover) var(--ease-command),
    background-color var(--dur-hover) var(--ease-command);
}
[data-tilt-3d][data-tilt-3d].is-tilting {
  transition:
    transform 90ms linear,
    box-shadow 220ms var(--ease-command),
    border-color var(--dur-hover) var(--ease-command),
    background-color var(--dur-hover) var(--ease-command);
  /* sombra em 3 camadas (near/mid/far) — profundidade premium sem filter */
  box-shadow:
    0 2px 8px rgba(0, 0, 0, 0.18),
    0 14px 32px rgba(0, 0, 0, 0.22),
    0 32px 80px rgba(0, 0, 0, 0.26);
}
/* glare holográfico — span injetado pelo JS (evita colisão com ::before/::after) */
.tilt-glare {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  border-radius: inherit;
  opacity: calc(var(--tilt-amp, 0) * 0.85);
  background: radial-gradient(
    420px circle at var(--glare-x, 50%) var(--glare-y, 50%),
    rgba(0, 230, 176, 0.14),
    rgba(247, 250, 248, 0.07) 32%,
    transparent 62%
  );
  transition: opacity 360ms var(--ease-command);
}
/* teclado nunca herda inclinação — contraste e leitura primeiro */
[data-tilt-3d][data-tilt-3d]:focus-visible,
[data-tilt-3d][data-tilt-3d]:focus-within {
  transform: none;
}

/* ── SPOTLIGHT REVEAL · entry/zone cards abrem como escotilha ─────── */
.entry-card[data-reveal].is-in,
.zone-card[data-reveal].is-in {
  animation: spotlight-in 760ms var(--ease-orbit) both;
}
@keyframes spotlight-in {
  0%   { clip-path: circle(9% at 50% 42%); }
  97%  { clip-path: circle(136% at 50% 42%); }
  100% { clip-path: none; }
}

/* ── DOCKING BAYS · interstitials viram módulos com câmera em Z ────
   JS move o background para .bay-img e escreve --bay (0→1).       */
.station-interstitial { overflow: hidden; }
.station-interstitial .bay-img {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-size: cover;
  background-position: center;
  transform: scale(calc(1.06 + var(--bay, 0) * 0.10))
             translate3d(0, calc(var(--bay, 0) * -12px), 0);
  will-change: transform;
}
.station-interstitial::before { z-index: 1; }
.station-interstitial .bay-readout {
  position: absolute;
  left: 18px;
  bottom: 14px;
  z-index: 2;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--motion-cyan);
  background: rgba(9, 13, 16, 0.62);
  border: 1px solid rgba(0, 230, 176, 0.30);
  border-radius: 4px;
  padding: 6px 10px;
  opacity: calc(0.2 + var(--bay, 0) * 0.8);
  transform: translate3d(0, calc((1 - var(--bay, 0)) * 8px), 0);
}

/* ── TRANSMISSÃO · vidro só onde a metáfora pede (janela de sinal) ── */
.space-hero .final-form,
.transmission .final-form {
  position: relative;
  isolation: isolate;
  background: rgba(12, 18, 22, 0.55);
  -webkit-backdrop-filter: blur(14px) saturate(1.15);
  backdrop-filter: blur(14px) saturate(1.15);
  border: 1px solid rgba(0, 230, 176, 0.25);
}
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .space-hero .final-form,
  .transmission .final-form { background: rgba(12, 18, 22, 0.92); }
}
/* anel cônico em órbita na borda — desktop, com fallback estático */
@media (min-width: 761px) {
  @supports (background: conic-gradient(from 1deg, #000, #fff)) {
    .transmission .final-form::before {
      content: "";
      position: absolute;
      inset: -1px;
      z-index: -1;
      border-radius: inherit;
      padding: 1px;
      background: conic-gradient(
        from var(--shine-angle, 0deg),
        transparent 0deg,
        rgba(0, 230, 176, 0.55) 24deg,
        transparent 58deg,
        transparent 178deg,
        rgba(77, 255, 210, 0.30) 204deg,
        transparent 240deg
      );
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
              mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
              mask-composite: exclude;
      animation: shine-rotate 5s linear infinite;
    }
  }
}
/* glow cyan no foco dos inputs — affordance pró-conversão */
.final-form input:focus-visible,
.final-form select:focus-visible,
.final-form textarea:focus-visible {
  box-shadow: 0 0 0 3px rgba(0, 230, 176, 0.16), 0 0 18px rgba(0, 230, 176, 0.28);
}

/* ── BOOT READOUT · terminal acordando (só monospace, só 1º load) ── */
.boot-char {
  opacity: 0;
  animation: boot-char-in 360ms var(--ease-command) var(--boot-delay, 0ms) forwards;
}
@keyframes boot-char-in {
  0%   { opacity: 0; }
  55%  { opacity: 1; }
  70%  { opacity: 0.35; }
  100% { opacity: 1; }
}

/* ── TEXT REVEAL · headings sobem palavra a palavra (≤700ms total) ── */
[data-text-reveal] { perspective: 800px; }
[data-text-reveal] .trw {
  display: inline-block;
  opacity: 0;
  transform: translate3d(0, 0.55em, 0) rotateX(38deg);
  transform-origin: 50% 100%;
}
[data-text-reveal].is-in .trw {
  opacity: 1;
  transform: translate3d(0, 0, 0) rotateX(0);
  transition:
    opacity 480ms var(--ease-orbit) var(--trw-delay, 0ms),
    transform 480ms var(--ease-orbit) var(--trw-delay, 0ms);
}

/* ── LIVE-DOT · glow em 3 camadas, mesmo ciclo 2.2s do ping ───────── */
.live-dot {
  animation: live-dot-glow 2.2s cubic-bezier(0, 0, 0.2, 1) infinite;
}
@keyframes live-dot-glow {
  0%, 100% {
    box-shadow:
      0 0 6px rgba(0, 230, 176, 0.55),
      0 0 16px rgba(0, 230, 176, 0.22),
      0 0 30px rgba(0, 230, 176, 0.08);
  }
  50% {
    box-shadow:
      0 0 8px rgba(0, 230, 176, 0.75),
      0 0 22px rgba(0, 230, 176, 0.34),
      0 0 42px rgba(0, 230, 176, 0.14);
  }
}

/* ── ESFERA ORBITAL · canvas do hero (home) ───────────────────────── */
.ody-orbital {
  position: absolute;
  inset: -14%;
  width: 128%;
  height: 128%;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1200ms var(--ease-drift) 300ms;
}
body.odyssey-motion-ready .ody-orbital { opacity: 1; }

/* ── GUARD-RAILS · mobile + touch + reduced-motion ────────────────── */
@media (max-width: 760px) {
  .station-interstitial .bay-img { transform: scale(1.04); }
  .station-interstitial .bay-readout { opacity: 1; transform: none; }
  .ody-orbital { display: none; }
  .transmission .final-form::before { display: none; }
}
@media (hover: none), (pointer: coarse) {
  [data-tilt-3d][data-tilt-3d] { transform: none; }
  .tilt-glare { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  [data-tilt-3d][data-tilt-3d] { transform: none !important; box-shadow: none; }
  .tilt-glare,
  .ody-orbital,
  .transmission .final-form::before { display: none !important; }
  .station-interstitial .bay-img { transform: none !important; }
  .station-interstitial .bay-readout { opacity: 1; transform: none; }
  .boot-char,
  [data-text-reveal] .trw {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
  }
}