/* Progressive enhancement: the page remains visible without JavaScript. */
.motion-toggle {
  margin-top: 16px;
  padding: 5px 0;
  border: 0;
  background: none;
  color: #64788e;
  font-size: 10px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
}
.motion-toggle::before { content: 'Ⅱ'; font-size: 11px; }
.motion-toggle[aria-pressed="true"]::before { content: '▷'; }
.motion-toggle:hover { color: var(--blue); }

@media (min-width: 576px) {
  .illustration-caption { bottom: -37px; }
}

@media (prefers-reduced-motion: no-preference) {
  [data-motion="on"] .product-scene { perspective: 1200px; }
  [data-motion="on"] .dashboard-preview {
    transform: rotateX(var(--scene-rx, 0deg)) rotateY(var(--scene-ry, 0deg)) rotate(-2deg);
    transition: transform 550ms cubic-bezier(.2,.8,.2,1), box-shadow 550ms;
    box-shadow: 0 30px 60px #3e679623, 0 3px 0 #dbe5f0, 0 6px 0 #e5edf5;
  }
  [data-motion="on"] .chat-preview {
    transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 45px) rotateX(var(--scene-rx, 0deg)) rotateY(var(--scene-ry, 0deg)) rotate(1.5deg);
    transition: transform 700ms cubic-bezier(.2,.8,.2,1);
    box-shadow: 0 25px 45px #1b493b29, 0 3px 0 #dce9e0;
  }
  [data-motion="on"] .floating-confirmation {
    transform: translate3d(var(--scene-x, 0px), var(--scene-y, 0px), 65px) rotate(-2deg);
    transition: transform 850ms cubic-bezier(.2,.8,.2,1);
  }
  [data-motion="on"] .btn,
  [data-motion="on"] .text-button { position: relative; }
  [data-motion="on"] .btn-primary,
  [data-motion="on"] .closing-card .btn-light { overflow: hidden; }
  [data-motion="on"] .btn-primary::after,
  [data-motion="on"] .closing-card .btn-light::after {
    content: '';
    position: absolute;
    inset: -50% auto -50% -70%;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, #ffffff30, transparent);
    transform: skewX(-18deg);
  }
  [data-motion="on"] .btn-primary:is(:hover, :focus-visible)::after,
  [data-motion="on"] .closing-card .btn-light:is(:hover, :focus-visible)::after {
    animation: button-sheen 750ms ease both;
  }
  [data-motion="on"] .btn .icon,
  [data-motion="on"] .text-button .icon { transition: translate 240ms ease; }
  [data-motion="on"] :is(.btn, .text-button):hover .icon { translate: 3px 0; }
  [data-motion="on"] .btn:active { transform: translateY(0) scale(.98); }
  [data-motion="on"] .feature-icon { transition: transform 400ms ease, box-shadow 400ms ease; }
  [data-motion="on"] :is(.workflow-card, .benefit-card):hover .feature-icon {
    transform: translateZ(22px) rotate(-7deg);
    box-shadow: 0 8px 18px #466c9c12;
  }
  [data-motion="on"] .nav-link { position: relative; }
  [data-motion="on"] .nav-link::after {
    content: '';
    position: absolute;
    bottom: 5px;
    left: 8px;
    right: 8px;
    height: 2px;
    background: var(--blue);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 240ms ease;
  }
  [data-motion="on"] .nav-link:hover::after { transform: scaleX(1); }
}

@media (min-width: 992px) and (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  [data-motion="on"] .product-scene.is-in-view .dashboard-preview { animation: float-panel 8s ease-in-out infinite; }
  [data-motion="on"] .product-scene.is-in-view .chat-preview { animation: float-chat 7s ease-in-out infinite; }
  [data-motion="on"] .product-scene.is-in-view .floating-confirmation { animation: float-chip 6s ease-in-out infinite; }
  [data-motion="on"] .product-scene.is-in-view .orbit-one { animation: orbit-breathe 9s ease-in-out infinite; }
  [data-motion="on"] .product-scene.is-in-view .orbit-two { animation: orbit-breathe 9s ease-in-out -4s infinite; }
  [data-motion="on"] .tilt-card {
    transform-style: preserve-3d;
    transform: perspective(1000px) rotateX(var(--tilt-rx, 0deg)) rotateY(var(--tilt-ry, 0deg)) translateY(var(--tilt-lift, 0px));
    transition: transform 450ms cubic-bezier(.2,.8,.2,1), box-shadow 450ms, border-color 450ms;
  }
  [data-motion="on"] .tilt-card.is-tilting {
    --tilt-lift: -5px;
    box-shadow: 0 20px 35px -15px #244c7930;
    border-color: #adc8ed;
  }
  [data-motion="on"] .featured.is-tilting { border-color: var(--blue); box-shadow: 0 25px 45px -18px #1762df55; }
  [data-motion="on"] .tilt-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at var(--light-x, 50%) var(--light-y, 50%), #a7c9ff18, transparent 65%);
    opacity: 0;
    transition: opacity 350ms;
  }
  [data-motion="on"] .tilt-card.is-tilting::after { opacity: 1; }
  [data-motion="on"] .tilt-card h3,
  [data-motion="on"] .tilt-card .plan-price { transform: translateZ(12px); }
  [data-motion="on"] .tilt-card .btn { transform: translateZ(16px); }
  [data-motion="on"] .tilt-card .btn:hover { transform: translateZ(20px) translateY(-2px); }
  [data-motion="on"] .tilt-card .btn:active { transform: translateZ(16px); }
}

@keyframes float-panel { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes float-chat { 0%, 100% { translate: 0 0; } 50% { translate: 0 10px; } }
@keyframes float-chip { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes orbit-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.035; } }
@keyframes button-sheen { to { left: 140%; } }

/* Pause applies to all decorative motion, including hover transitions. */
[data-motion="off"] *,
[data-motion="off"] *::before,
[data-motion="off"] *::after { animation: none !important; transition: none !important; }
[data-motion="off"] :is(.btn, .benefit-card):hover { transform: none; }