/* Shared motion language for both private concepts. Motion is progressive,
   pauses outside the viewport and respects reduced-motion preferences. */

html {
  scroll-behavior: smooth;
}

.motion-enabled body {
  overflow-x: clip;
}

.motion-enabled .motion-reveal {
  opacity: 0;
  filter: blur(5px);
  transform: translateY(34px) scale(0.985);
  transition:
    opacity 760ms cubic-bezier(.2,.72,.2,1),
    filter 760ms cubic-bezier(.2,.72,.2,1),
    transform 760ms cubic-bezier(.2,.72,.2,1);
  transition-delay: calc(var(--motion-order, 0) * 70ms);
  will-change: opacity, filter, transform;
}

.motion-enabled .motion-reveal.motion-from-left {
  transform: translateX(-38px) translateY(12px) scale(0.985);
}

.motion-enabled .motion-reveal.motion-from-right {
  transform: translateX(38px) translateY(12px) scale(0.985);
}

.motion-enabled .motion-reveal.is-visible {
  opacity: 1;
  filter: blur(0);
  transform: translate(0, 0) scale(1);
}

.motion-enabled .story-hero-copy > *,
.motion-enabled .story-hero .pick-card {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 760ms ease, transform 760ms cubic-bezier(.2,.72,.2,1);
}

.motion-enabled.motion-ready .story-hero-copy > *,
.motion-enabled.motion-ready .story-hero .pick-card {
  opacity: 1;
  transform: translateY(0);
}

.motion-enabled.motion-ready .story-hero-copy > :nth-child(1) { transition-delay: 80ms; }
.motion-enabled.motion-ready .story-hero-copy > :nth-child(2) { transition-delay: 160ms; }
.motion-enabled.motion-ready .story-hero-copy > :nth-child(3) { transition-delay: 260ms; }
.motion-enabled.motion-ready .story-hero-copy > :nth-child(4) { transition-delay: 360ms; }
.motion-enabled.motion-ready .story-hero-copy > :nth-child(5) { transition-delay: 440ms; }
.motion-enabled.motion-ready .story-hero-copy > :nth-child(6) { transition-delay: 500ms; }
.motion-enabled.motion-ready .story-hero .pick-card { transition-delay: 300ms; }

.story-hero::before {
  position: absolute;
  inset: -35%;
  pointer-events: none;
  background:
    radial-gradient(circle at 25% 40%, rgba(49, 150, 255, 0.16), transparent 24%),
    radial-gradient(circle at 70% 42%, rgba(132, 83, 255, 0.19), transparent 25%);
  content: "";
  animation: hero-aurora 15s ease-in-out infinite alternate;
}

.hero-noise {
  animation: noise-drift 18s linear infinite;
}

.arrival-routes > span {
  position: relative;
  overflow: hidden;
}

.arrival-routes > span::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.12) 50%, transparent 65%);
  content: "";
  transform: translateX(-140%);
}

.arrival-routes > span.is-demo-active {
  border-color: rgba(255, 216, 61, .58);
  background: rgba(103, 87, 245, .26);
  box-shadow: 0 12px 28px rgba(0,0,0,.14);
  transform: translateX(6px);
}

.motion-ready .arrival-routes > span:nth-child(1)::after { animation: route-sheen 7s 1.5s ease-in-out infinite; }
.motion-ready .arrival-routes > span:nth-child(2)::after { animation: route-sheen 7s 2s ease-in-out infinite; }
.motion-ready .arrival-routes > span:nth-child(3)::after { animation: route-sheen 7s 2.5s ease-in-out infinite; }

.number-orbit .ring-one { animation: orbit-spin 18s linear infinite; }
.number-orbit .ring-two { animation: orbit-spin-reverse 12s linear infinite; }
.number-orbit .orbit-core { animation: core-breathe 3.2s ease-in-out infinite; }
.number-orbit .ball-one { animation: ball-float 4.1s ease-in-out infinite; }
.number-orbit .ball-two { animation: ball-float 4.7s .5s ease-in-out infinite; }
.number-orbit .ball-three { animation: ball-float 4.4s .9s ease-in-out infinite; }
.number-orbit .ball-four { animation: ball-float 4.9s 1.2s ease-in-out infinite; }
.result-panel.is-active .profile-seal { animation: core-breathe 3.2s ease-in-out infinite; }

.pattern-card.is-visible .date-visual b,
.result-panel.is-active .result-numbers span {
  animation: number-pop 540ms cubic-bezier(.2,.9,.25,1.25) both;
  animation-delay: calc(var(--i, 0) * 75ms);
}

.pattern-card.is-visible .date-visual b:nth-child(2) { --i: 1; }
.pattern-card.is-visible .date-visual b:nth-child(3) { --i: 2; }
.pattern-card.is-visible .date-visual b:nth-child(4) { --i: 3; }

.pattern-card.is-visible .line-visual i {
  animation: signal-rise 1.8s ease-in-out infinite alternate;
  animation-delay: calc(var(--i, 0) * 130ms);
}

.line-visual i:nth-child(2) { --i: 1; }
.line-visual i:nth-child(3) { --i: 2; }
.line-visual i:nth-child(4) { --i: 3; }
.line-visual i:nth-child(5) { --i: 4; }

.pattern-card.is-visible .scale-visual i { animation: scale-balance 3s ease-in-out infinite; }
.pattern-card.is-visible .spark-visual { animation: spark-turn 4s ease-in-out infinite; }

.community-visual.is-visible .community-core { animation: community-core-breathe 3.2s ease-in-out infinite; }
.community-visual.is-visible .community-node { animation: ball-float 4.5s ease-in-out infinite; }
.community-visual.is-visible .node-b { animation-delay: .5s; }
.community-visual.is-visible .node-c { animation-delay: 1s; }
.community-visual.is-visible .node-d { animation-delay: 1.5s; }
.community-visual.is-visible .community-line { animation: line-pulse 2.4s ease-in-out infinite; }

.step-panel.is-active .panel-heading,
.step-panel.is-active .selection-status,
.step-panel.is-active .number-grid,
.step-panel.is-active .choice-grid,
.step-panel.is-active .step-actions,
.step-panel.is-active > .microcopy {
  animation: stage-rise 580ms cubic-bezier(.2,.72,.2,1) both;
}

.step-panel.is-active .selection-status { animation-delay: 80ms; }
.step-panel.is-active .number-grid,
.step-panel.is-active .choice-grid { animation-delay: 140ms; }
.step-panel.is-active .step-actions { animation-delay: 210ms; }
.step-panel.is-active > .microcopy { animation-delay: 260ms; }

.step-panel.is-active .choice-button {
  animation: choice-enter 520ms cubic-bezier(.2,.72,.2,1) both;
  animation-delay: calc(var(--i, 0) * 90ms + 120ms);
}

.choice-button:nth-child(2) { --i: 1; }
.choice-button:nth-child(3) { --i: 2; }
.choice-button:nth-child(4) { --i: 3; }

.number-button.is-selected,
.selected-balls span {
  animation: number-pop 340ms cubic-bezier(.2,.9,.25,1.3) both;
}

.result-panel.is-active .result-head,
.result-panel.is-active .result-note,
.result-panel.is-active .metric-grid > div {
  animation: stage-rise 660ms cubic-bezier(.2,.72,.2,1) both;
}

.result-panel.is-active .metric-grid > div:nth-child(1) { animation-delay: 150ms; }
.result-panel.is-active .metric-grid > div:nth-child(2) { animation-delay: 230ms; }
.result-panel.is-active .metric-grid > div:nth-child(3) { animation-delay: 310ms; }
.result-panel.is-active .result-note { animation-delay: 360ms; }

@keyframes hero-aurora {
  0% { transform: translate3d(-3%, -2%, 0) rotate(-4deg) scale(.95); }
  100% { transform: translate3d(4%, 3%, 0) rotate(5deg) scale(1.08); }
}

@keyframes noise-drift {
  to { background-position: 38px 57px; }
}

@keyframes route-sheen {
  0%, 72% { transform: translateX(-140%); }
  88%, 100% { transform: translateX(140%); }
}

@keyframes orbit-spin { to { transform: rotate(360deg); } }
@keyframes orbit-spin-reverse { to { transform: rotate(-360deg); } }

@keyframes core-breathe {
  0%, 100% { box-shadow: 0 16px 36px rgba(103,87,245,.24); transform: scale(1); }
  50% { box-shadow: 0 20px 56px rgba(103,87,245,.46); transform: scale(1.045); }
}

@keyframes community-core-breathe {
  0%, 100% { box-shadow: 0 16px 36px rgba(103,87,245,.24); transform: translate(-50%, -50%) scale(1); }
  50% { box-shadow: 0 20px 56px rgba(103,87,245,.46); transform: translate(-50%, -50%) scale(1.045); }
}

@keyframes ball-float {
  0%, 100% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-9px) rotate(2deg); }
}

@keyframes number-pop {
  from { opacity: 0; transform: translateY(10px) scale(.7); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@keyframes signal-rise {
  from { transform: scaleY(.55); opacity: .55; }
  to { transform: scaleY(1.08); opacity: 1; }
}

@keyframes scale-balance {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}

@keyframes spark-turn {
  0%, 100% { transform: rotate(0) scale(1); }
  50% { transform: rotate(180deg) scale(1.08); }
}

@keyframes line-pulse {
  0%, 100% { opacity: .35; }
  50% { opacity: 1; }
}

@keyframes stage-rise {
  from { opacity: 0; transform: translateY(18px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes choice-enter {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: .001ms !important;
  }
  .motion-enabled .motion-reveal,
  .motion-enabled .story-hero-copy > *,
  .motion-enabled .story-hero .pick-card {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

@media (max-width: 700px) {
  .motion-enabled .motion-reveal.motion-from-left,
  .motion-enabled .motion-reveal.motion-from-right {
    transform: translateY(28px) scale(.985);
  }

  .motion-enabled .motion-reveal.is-visible {
    transform: translateY(0) scale(1);
  }
}