/* Decorative motion is opt-in, runs only in view, and leaves content readable. */
.motion-toggle { display: flex; margin-top: 14px; color: var(--muted); font-size: 11px; text-decoration: underline; text-underline-offset: 4px; }
.motion-toggle:disabled { cursor: default; opacity: 1; text-decoration: none; }
html.motion-disabled { scroll-behavior: auto; }
html.motion-disabled *,
html.motion-disabled *::before,
html.motion-disabled *::after { animation: none !important; transition: none !important; }

@media (prefers-reduced-motion: no-preference) {
  .title-spark,
  .visual-star,
  .fixed-floating .confetti {
    animation: rf-spark-turn 9s ease-in-out infinite;
    animation-play-state: paused;
    transform-origin: center;
  }

  .star-one { animation-delay: -3s; }
  .star-two { animation-name: rf-spark-breathe; animation-delay: -6s; }
  .fixed-floating .confetti { animation-duration: 11s; animation-delay: -4s; }

  .orbit-one::after,
  .orbit-two::after {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #98b7ff;
    top: 14%;
    left: 14%;
    box-shadow: 0 0 0 5px #a5c0ff12;
  }

  .orbit-two::after { top: auto; left: auto; right: 14%; bottom: 14%; background: #a6dcca; }
  .orbit { animation: rf-orbit-turn 54s linear infinite; animation-play-state: paused; }
  .orbit-two { animation-duration: 68s; animation-direction: reverse; }

  /* These cards already float in style.css; share the same visibility gate. */
  .floating-card { animation-play-state: paused; }

  .hero-pill .status-dot {
    animation: rf-status-breathe 5s ease-in-out infinite;
    animation-play-state: paused;
  }

  .mini-message,
  .mini-done,
  .security-chip {
    animation: rf-gentle-float 7s ease-in-out infinite;
    animation-play-state: paused;
  }

  .mini-done { animation-delay: -3s; animation-duration: 8s; }
  .chip-lock { animation-duration: 8s; }
  .chip-user { animation-delay: -4s; animation-duration: 9s; }

  .mini-connect > i {
    border: 0;
    height: 2px;
    background: radial-gradient(circle, #7a9fea 1px, transparent 1.5px) 0 center / 7px 2px repeat-x;
    animation: rf-connection-flow 1.8s linear infinite;
    animation-play-state: paused;
  }

  .mini-connect > i:nth-of-type(2) { animation-delay: -.9s; }

  .security-orbit.second {
    animation: rf-orbit-turn 72s linear infinite;
    animation-play-state: paused;
  }

  .security-core > .icon {
    animation: rf-shield-breathe 7s ease-in-out infinite;
    animation-play-state: paused;
  }

  .cta-decoration {
    animation: rf-cta-turn 24s ease-in-out infinite;
    animation-play-state: paused;
  }

  /* Zones are assigned by motion.js. Nothing is hidden when scripting is off. */
  [data-motion-zone].is-in-view :is(.title-spark, .visual-star, .confetti, .orbit, .floating-card, .hero-pill .status-dot, .mini-message, .mini-done, .mini-connect > i, .security-chip, .security-orbit.second, .security-core > .icon, .cta-decoration),
  [data-motion-zone].is-in-view:is(.title-spark, .visual-star, .orbit, .floating-card, .mini-message, .mini-done, .security-chip, .security-orbit.second, .cta-decoration) {
    animation-play-state: running;
  }

  .price-card::before { transform-origin: left; }
  [data-motion-zone].is-in-view .price-card::before,
  .price-card[data-motion-zone].is-in-view::before {
    animation: rf-accent-draw 850ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .desktop-nav > a,
  .footer-column > a { position: relative; width: fit-content; }

  .desktop-nav > a::after,
  .footer-column > a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -4px;
    height: 2px;
    border-radius: 2px;
    background: currentColor;
    scale: 0 1;
    transform-origin: left;
    transition: scale 240ms cubic-bezier(.22, 1, .36, 1);
  }

  .desktop-nav > a:is(:hover, :focus-visible)::after,
  .footer-column > a:is(:hover, :focus-visible)::after { scale: 1 1; }

  :is(.button, .text-link, .text-button, .light-link, .login-link) > .icon {
    transition: translate 220ms ease, scale 220ms ease;
  }

  .button:not(:disabled):is(:hover, :focus-visible) > .icon:last-child,
  :is(.text-link, .light-link, .login-link):is(:hover, :focus-visible) > .icon:last-child {
    translate: 3px 0;
  }

  .text-button[data-how]:is(:hover, :focus-visible) > .icon { scale: 1.12; }
  .button:not(:disabled):active { translate: 0 1px; }

  .service-card .service-icon {
    transition: rotate 300ms ease, scale 300ms ease, background 300ms ease;
  }

  .service-card .service-arrow {
    transition: translate 300ms ease, background 220ms ease, color 220ms ease;
  }

  .service-card:is(:hover, :focus-visible) .service-icon {
    rotate: -6deg;
    scale: 1.07;
    background: #e8efff;
  }

  .service-card:is(:hover, :focus-visible) .service-arrow {
    translate: 2px -2px;
    background: var(--blue);
    color: #fff;
  }

  .service-card:focus-visible {
    border-color: #b5caff;
    box-shadow: 0 12px 35px #2558f409;
  }

  .issue-option,
  .device-option {
    transition: border-color 200ms ease, background 200ms ease, color 200ms ease, box-shadow 200ms ease;
  }

  .issue-option > .icon { transition: scale 240ms ease, rotate 240ms ease; }
  .issue-option:has(input:checked) > .icon { scale: 1.12; rotate: -5deg; }
  .device-option:has(input:checked) { box-shadow: 0 0 0 2px #2558f40c; }
  .booking-progress > span,
  .booking-progress b,
  .auth-tabs button { transition: color 220ms ease, background 220ms ease, box-shadow 220ms ease; }
  .booking-progress [aria-current="step"] b { animation: rf-small-pop 350ms ease-out; }

  .mobile-nav:not([hidden]) { animation: rf-menu-enter 220ms ease-out; }
  .how-dialog[open] { animation: rf-dialog-enter 280ms cubic-bezier(.22, 1, .36, 1); }
  .how-dialog[open]::backdrop { animation: rf-fade-in 220ms ease-out; }
  .toast:not([hidden]) { animation: rf-rise-in 260ms ease-out; }
  .faq-item[open] > p { animation: rf-rise-in 240ms ease-out; }
  [data-book-step]:not([hidden]) { animation: rf-rise-in 260ms ease-out; }
  .success-state:not([hidden]) { animation: rf-rise-in 320ms ease-out; }
  .success-state:not([hidden]) > .service-icon { animation: rf-small-pop 450ms cubic-bezier(.22, 1, .36, 1); }

  /* Visibility and print events also pause the existing floating-card loops. */
  html.motion-paused *,
  html.motion-paused *::before,
  html.motion-paused *::after { animation-play-state: paused !important; }

  @keyframes rf-spark-turn {
    0%, 72%, 100% { rotate: 0deg; scale: 1; }
    82% { rotate: 45deg; scale: .86; }
    92% { rotate: 90deg; scale: 1.08; }
  }

  @keyframes rf-spark-breathe {
    0%, 65%, 100% { scale: 1; opacity: .8; }
    82% { scale: 1.18; opacity: 1; }
  }

  @keyframes rf-orbit-turn { to { rotate: 360deg; } }
  @keyframes rf-status-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.18; } }
  @keyframes rf-gentle-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
  @keyframes rf-connection-flow { to { background-position: 14px center; } }
  @keyframes rf-shield-breathe { 0%, 100% { opacity: .8; scale: 1; } 50% { opacity: 1; scale: 1.035; } }
  @keyframes rf-cta-turn { 0%, 100% { rotate: -3deg; } 50% { rotate: 7deg; } }
  @keyframes rf-accent-draw { from { scale: 0 1; } to { scale: 1 1; } }
  @keyframes rf-rise-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
  @keyframes rf-fade-in { from { opacity: 0; } to { opacity: 1; } }
  @keyframes rf-menu-enter { from { opacity: 0; translate: 0 -6px; } to { opacity: 1; translate: 0 0; } }
  @keyframes rf-dialog-enter { from { opacity: 0; translate: 0 10px; scale: .98; } to { opacity: 1; translate: 0 0; scale: 1; } }
  @keyframes rf-small-pop { 0% { scale: .85; } 65% { scale: 1.06; } 100% { scale: 1; } }
}

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