/* Motion is opt-in at runtime; the unenhanced page remains fully readable. */
.hero-aurora {
  position: absolute;
  inset: -14% -7%;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}
.hero-aurora>span { position: absolute; border-radius: 50%; opacity: .6; }
.hero-aurora>span:first-child {
  width: 78%; height: 62%; left: -5%; top: -12%;
  background: radial-gradient(ellipse, #b4e73930, #8ac53c12 45%, transparent 72%);
}
.hero-aurora>span:last-child {
  width: 66%; height: 64%; right: -20%; top: 2%;
  background: radial-gradient(ellipse, #96bc4d22, #7760ac18 35%, transparent 70%);
}
.hero-motion-tools {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  width: min(760px,100%); margin: 22px auto -10px; color: #9da98c;
  font-size: 10px; line-height: 1.7;
}
.hero-motion-tools>a, .hero-motion-tools>button { display: inline-flex; align-items: center; gap: 8px; padding: 6px 0; }
.hero-motion-tools>button { color: #aebc9b; }
.hero-motion-tools>a:hover, .hero-motion-tools>button:hover { color: var(--lime); }
.scroll-cue { display: block; width: 12px; height: 18px; border: 1px solid #698149; border-radius: 7px; position: relative; }
.scroll-cue::after { content: ''; width: 2px; height: 4px; border-radius: 2px; position: absolute; top: 4px; left: 4px; background: var(--lime); }

@media (prefers-reduced-motion: no-preference) {
  html[data-motion=active] .fx-entrance {
    animation: fx-enter .8s cubic-bezier(.2,.7,.2,1) var(--fx-delay,0ms) backwards;
  }
  html[data-motion=active] .fx-entrance:focus-within { animation: none; }
  html[data-motion=active] .fx-reveal {
    transition: opacity .65s ease var(--fx-delay,0ms), translate .65s cubic-bezier(.2,.7,.2,1) var(--fx-delay,0ms);
  }
  html[data-motion=active] .fx-reveal:not(.fx-visible):not(:focus-within) { opacity: 0; translate: 0 22px; }
  html[data-motion=active] .fx-reveal:focus-within { opacity: 1; translate: none; transition: none; }
  html[data-motion=active] .hero-aurora { transform: translate3d(var(--fx-x,0px),var(--fx-y,0px),0); transition: transform .7s ease-out; }
  html[data-motion=active] .hero-aurora>span:first-child { animation: fx-aurora-one 14s ease-in-out infinite alternate; }
  html[data-motion=active] .hero-aurora>span:last-child { animation: fx-aurora-two 18s ease-in-out infinite alternate; }
  html[data-motion=active] .hero-dot-field { animation: fx-dots 12s ease-in-out infinite alternate; }
  html[data-motion=active] .connection-preview { animation: fx-terminal-glow 5s ease-in-out infinite; }
  html[data-motion=active] .connection-preview.fx-entrance {
    animation: fx-enter .8s cubic-bezier(.2,.7,.2,1) var(--fx-delay,0ms) backwards, fx-terminal-glow 5s ease-in-out infinite;
  }
  html[data-motion=active] .terminal-dots i { animation: fx-status 3.6s ease-in-out infinite; }
  html[data-motion=active] .terminal-dots i:nth-child(2) { animation-delay: .35s; }
  html[data-motion=active] .terminal-dots i:nth-child(3) { animation-delay: .7s; }
  html[data-motion=active] .scroll-cue::after { animation: fx-scroll-cue 2s ease-in-out infinite; }
  html[data-motion=active] .auth-page::before { animation: fx-auth-glow 9s ease-in-out infinite alternate; }
  html[data-motion=active] .auth-emblem { box-shadow: 0 0 34px -13px #b6e44970; }
  html[data-motion=active] .public-header { transition: box-shadow .3s ease, background .3s ease; box-shadow: 0 6px 26px #00000013; }

  @supports (background-clip: text) {
    html[data-motion=active] .landing-hero h1 em {
      background: linear-gradient(105deg,#b7e63c 15%,#c6f34a 35%,#ebffc4 49%,#c6f34a 63%,#b7e63c 85%);
      background-size: 250% 100%; background-clip: text; color: transparent;
      animation: fx-text-light 9s ease-in-out infinite;
    }
  }

  /* A visual typing layer leaves the complete, selectable command in the DOM. */
  .terminal-command code { position: relative; display: block; }
  .fx-typing .fx-terminal-source { opacity: 0; }
  .fx-terminal-visual { position: absolute; inset: 0; white-space: pre-wrap; overflow-wrap: anywhere; pointer-events: none; user-select: none; }
  html[data-motion=active] .terminal-command code:not(.fx-typing)::after,
  .fx-terminal-visual::after {
    content: ''; display: inline-block; width: 6px; height: 1em; vertical-align: -.1em;
    margin-left: 3px; background: var(--lime); animation: fx-caret 1.1s step-end infinite;
  }

  html[data-motion=active] .route-path>i { position: relative; }
  html[data-motion=active] .route-path>i::after {
    content: ''; width: 4px; height: 4px; background: #dbff8b; border-radius: 50%;
    position: absolute; top: calc(50% - 2px); left: calc(50% - 2px);
    box-shadow: 0 0 7px #c6f34a; animation: fx-packet 2.7s ease-in-out infinite;
  }
  html[data-motion=active] .route-path>i:nth-of-type(2)::after { animation-delay: 1.35s; }
  html[data-motion=active] .route-brand>.ui-icon { animation: fx-route-node 2.7s ease-in-out infinite; }
  html[data-motion=active] .closing-icon { animation: fx-cta-icon 4.5s ease-in-out infinite; }
  html[data-motion=active] .disclosure-icon svg { transition: transform .25s ease; }
  html[data-motion=active] :is(.faq-list,.use-case-grid) details[open]>p { animation: fx-disclose .25s ease-out; }

  /* Pointer effects do not run on touch devices. */
  @media (hover: hover) and (pointer: fine) {
    html[data-motion=active] :is(.service-card,.benefit-card,.benefit-price,.pricing-card,.pricing-calculator,.route-preview,.pack-table,.metric-card,.start-panel,.stock-card,:where(.workspace-main) .ui-card,.auth-form) { position: relative; }
    html[data-motion=active] :is(.service-card,.benefit-card,.benefit-price,.pricing-card,.pricing-calculator,.route-preview,.pack-table,.metric-card,.start-panel,.stock-card,:where(.workspace-main) .ui-card,.auth-form)::before {
      content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
      background: radial-gradient(300px circle at var(--fx-pointer-x,50%) var(--fx-pointer-y,50%),#c6f34a14,transparent 70%);
      opacity: 0; transition: opacity .3s ease;
    }
    html[data-motion=active] .fx-pointer::before { opacity: 1; }
    html[data-motion=active] :is(.service-card,.benefit-card,.pricing-card,.pricing-calculator,.pack-table) { transition: opacity .65s ease var(--fx-delay,0ms), translate .65s cubic-bezier(.2,.7,.2,1) var(--fx-delay,0ms), border-color .25s, box-shadow .25s, transform .3s ease; }
    html[data-motion=active] :is(.service-card,.benefit-card,.pricing-card):hover { transform: translateY(-5px); border-color: #647f37; box-shadow: 0 13px 35px -18px #9ed23730; }
    html[data-motion=active] :is(.service-card,.benefit-card) .feature-icon { transition: transform .3s, background .3s, box-shadow .3s; }
    html[data-motion=active] :is(.service-card,.benefit-card):hover .feature-icon { transform: translateY(-2px) rotate(-5deg); background: #30441b; box-shadow: 0 0 22px -7px #b0df3959; }
    html[data-motion=active] .connection-preview { transform: perspective(1100px) rotateX(var(--fx-tilt-x,0deg)) rotateY(var(--fx-tilt-y,0deg)); transition: transform .5s ease-out; }
    html[data-motion=active] .public-nav-links a { position: relative; }
    html[data-motion=active] .public-nav-links a::after { content: ''; position: absolute; bottom: -9px; height: 1px; inset-inline: 0; background: var(--lime); transform: scaleX(0); transform-origin: left; transition: transform .22s ease; }
    html[data-motion=active] .public-nav-links a:is(:hover,:focus-visible)::after { transform: scaleX(1); }
    html[data-motion=active] .ui-button { transition: background .2s,transform .2s,box-shadow .25s,border-color .25s; }
    html[data-motion=active] .ui-button:not(:disabled):hover { transform: translateY(-2px); }
    html[data-motion=active] :is(.ui-button-primary,.ui-button-dark,.ui-button-lime):not(:disabled):hover { box-shadow: 0 0 0 1px #d4ff69,0 7px 28px -9px #bce84975; }
    html[data-motion=active] :is(.ui-button-primary,.ui-button-dark,.ui-button-lime) { position: relative; overflow: hidden; isolation: isolate; }
    html[data-motion=active] :is(.ui-button-primary,.ui-button-dark,.ui-button-lime)::after {
      content: ''; position: absolute; inset: -70% -80%; pointer-events: none;
      background: linear-gradient(110deg,transparent 42%,#fff6 50%,transparent 58%);
      transform: translateX(-65%); transition: transform .65s cubic-bezier(.2,.7,.2,1);
    }
    html[data-motion=active] :is(.ui-button-primary,.ui-button-dark,.ui-button-lime):not(:disabled):hover::after { transform: translateX(65%); }
    html[data-motion=active] .ui-button>.ui-icon { transition: translate .2s; }
    html[data-motion=active] .ui-button:not(:disabled):hover>.ui-icon:last-child { translate: 2px 0; }
    html[data-motion=active] .sidebar-link { transition: background .2s,color .2s,translate .2s; }
    html[data-motion=active] .sidebar-link:hover { translate: 2px 0; }
  }

  /* Stop decoration when offscreen or when the browser tab is hidden. */
  html[data-motion=active] :is(.landing-hero,.lp-hero)[data-fx-visible=false] :is(.hero-aurora>span,.hero-dot-field,h1 em,.connection-preview,.terminal-dots i),
  html[data-motion=active] :is(.landing-hero,.lp-hero)[data-fx-visible=false] :is(.scroll-cue,.terminal-command code,.fx-terminal-visual)::after,
  html[data-motion=active] .network-section[data-fx-visible=false] .route-path>i::after,
  html[data-motion=active] .network-section[data-fx-visible=false] .route-brand>.ui-icon,
  html[data-motion=active] .closing-cta[data-fx-visible=false] .closing-icon,
  html[data-motion=active] .auth-page[data-fx-visible=false]::before { animation-play-state: paused; }
  html[data-motion=active][data-motion-hidden=true] :is(.hero-aurora>span,.hero-dot-field,.landing-hero h1 em,.connection-preview,.terminal-dots i,.route-brand>.ui-icon,.closing-icon),
  html[data-motion=active][data-motion-hidden=true] :is(.scroll-cue,.terminal-command code,.fx-terminal-visual,.route-path>i)::after,
  html[data-motion=active][data-motion-hidden=true] .auth-page::before { animation-play-state: paused; }

  @media(max-width:767px) {
    /* Fewer moving layers on phones; the reading order still animates. */
    html[data-motion=active] .hero-dot-field { animation: none; }
    html[data-motion=active] .hero-aurora>span:last-child { animation: none; }
    html[data-motion=active] .landing-hero h1 em { animation-duration: 14s; }
    html[data-motion=active] .fx-reveal:not(.fx-visible):not(:focus-within) { translate: 0 14px; }
  }
}

@keyframes fx-enter {
  from { opacity: 0; translate: 0 18px; filter: blur(3px); }
  to { opacity: 1; translate: 0 0; filter: blur(0); }
}
@keyframes fx-aurora-one {
  from { transform: translate3d(0,0,0) scale(1); opacity: .55; }
  to { transform: translate3d(30%,12%,0) scale(1.15); opacity: .9; }
}
@keyframes fx-aurora-two {
  from { transform: translate3d(0,0,0); opacity: .5; }
  to { transform: translate3d(-35%,25%,0); opacity: .85; }
}
@keyframes fx-dots { from { transform: translateY(-6px); opacity: .65; } to { transform: translateY(8px); opacity: 1; } }
@keyframes fx-text-light { 0%,100% { background-position: 100% 50%; } 50% { background-position: 0% 50%; } }
@keyframes fx-terminal-glow { 0%,100% { box-shadow: 0 18px 60px -30px #b1dc393a; border-color: #39462f; } 50% { box-shadow: 0 18px 65px -26px #b1dc3955; border-color: #526a35; } }
@keyframes fx-status { 0%,70%,100% { opacity: .45; } 20%,45% { opacity: 1; } }
@keyframes fx-scroll-cue { 0%,100% { transform: translateY(0); opacity: .45; } 55% { transform: translateY(5px); opacity: 1; } }
@keyframes fx-auth-glow { from { opacity: .6; } to { opacity: 1; } }
@keyframes fx-caret { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
@keyframes fx-packet { 0%,15% { transform: translateX(-14px); opacity: 0; } 30%,65% { opacity: 1; } 85%,100% { transform: translateX(14px); opacity: 0; } }
@keyframes fx-route-node { 0%,100% { opacity: .65; } 50% { opacity: 1; } }
@keyframes fx-cta-icon { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-5px); } }
@keyframes fx-disclose { from { opacity: 0; translate: 0 -4px; } to { opacity: 1; translate: 0 0; } }

@media(max-width:767px) {
  .hero-motion-tools { margin-top: 16px; font-size: 9px; }
  .hero-aurora>span:first-child { width: 115%; height: 55%; }
}
@media(prefers-reduced-motion:reduce) {
  .fx-reveal, .fx-entrance { opacity: 1!important; translate: none!important; filter: none!important; }
  .hero-aurora, .hero-dot-field, .connection-preview { transform: none!important; }
  .hero-motion-tools>button { display: none; }
}
html[data-motion=paused] :is(.fx-reveal,.fx-entrance) { opacity: 1; translate: none; filter: none; }

/* Export and print include every section even before it has been scrolled to. */
@media print {
  .fx-reveal, .fx-entrance { opacity: 1!important; translate: none!important; filter: none!important; animation: none!important; }
  .hero-motion-tools { display: none; }
  .fx-terminal-source { opacity: 1!important; }
  .fx-terminal-visual { display: none; }
}