/* Motion enhances the readable static page; no content depends on animation. */
:root { --motion-ease: cubic-bezier(.16, 1, .3, 1); }
.motion-heading-line {
  display: block;
  overflow: clip;
  padding-bottom: .25em;
  margin-bottom: -.25em;
}
.motion-heading-text { display: block; }

@media (prefers-reduced-motion: no-preference) {
  .site-header {
    transition: background .35s ease, box-shadow .35s ease;
  }
  .site-header.has-depth {
    background: #181a1df5;
    box-shadow: 0 12px 35px #0003;
  }
  .site-header::after {
    content: '';
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 2px;
    background: linear-gradient(90deg, #048090, #60dcea);
    transform: scaleX(var(--page-progress, 0));
    transform-origin: left;
    pointer-events: none;
  }
  .site-header nav > a:not(.button) { position: relative; }
  .site-header nav > a:not(.button)::after {
    content: '';
    position: absolute;
    bottom: -5px;
    left: 0;
    right: 0;
    height: 2px;
    background: #2ab7cc;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s var(--motion-ease);
  }
  .site-header nav > a:not(.button):is(:hover, :focus-visible)::after {
    transform: scaleX(1);
  }
  .button {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    transition: transform .3s var(--motion-ease), box-shadow .3s ease, background .3s ease;
  }
  .button::after {
    content: '';
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(110deg, transparent 25%, #ffffff20 50%, transparent 75%);
    transform: translateX(-110%);
    pointer-events: none;
  }
  .button:is(:hover, :focus-visible)::after {
    transform: translateX(110%);
    transition: transform .65s ease;
  }
  .button > span, .game-options button > span {
    display: inline-block;
    transition: transform .3s var(--motion-ease);
  }
  .button:is(:hover, :focus-visible) > span { transform: translate(3px, -3px); }
  .game-options button:is(:hover, :focus-visible) > span { transform: translate(2px, -2px); }
  .game-options button {
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
  }
  .brand-mark { transition: transform .4s var(--motion-ease); }
  .brand:is(:hover, :focus-visible) .brand-mark { transform: rotate(-8deg); }
  .feature {
    position: relative;
    isolation: isolate;
    transition: transform .45s var(--motion-ease), border-color .3s ease, box-shadow .3s ease;
  }
  .pack-stack > span, .format-pills > span, .step-symbol {
    transition: transform .5s var(--motion-ease), box-shadow .3s ease;
  }
  .report-preview i { transform-origin: left; }
}

/* Keep touch targets still. Depth effects belong to the surrounding artwork. */
@media (hover: hover) and (pointer: fine) and (min-width: 901px) and (prefers-reduced-motion: no-preference) {
  .hero-stage::before {
    transform: translate3d(0, var(--hero-glow-shift, 0px), 0);
    transition: transform .25s ease-out;
  }
  .retention-card {
    transform: translate3d(0, var(--hero-sticker-shift, 0px), 0) rotate(3deg);
    transition: transform .25s ease-out;
  }
  .stage-spark {
    transform: translate3d(0, var(--hero-spark-shift, 0px), 0) rotate(var(--hero-spark-turn, 10deg));
    transition: transform .25s ease-out;
  }
  .phone-stage::before {
    transform: translate3d(0, var(--phone-glow-shift, 0px), 0) scale(1.08);
    transition: transform .3s ease-out;
  }
  .signup-star {
    transform: rotate(var(--signup-turn, 0deg));
    transition: transform .25s ease-out;
  }
  .feature:hover {
    transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(-5px);
    border-color: #4b5960 #202a30 #101518 #364248;
    box-shadow: 0 28px 50px #0009, 0 5px 0 #08090a, inset 1px 1px 0 #ffffff19;
  }
  .feature-packs:hover .pack-stack > span:nth-child(1) { transform: translate(-4px, -3px) rotate(-2deg); }
  .feature-packs:hover .pack-stack > span:nth-child(2) { transform: translate(3px, 0); }
  .feature-packs:hover .pack-stack > span:nth-child(3) { transform: translate(9px, 3px) rotate(2deg); }
  .feature-questions:hover .format-pills > span { transform: rotate(0) translateY(-2px); }
  .step:hover .step-symbol { transform: translateY(-4px) rotate(-7deg); }
}

@media (prefers-reduced-motion: reduce) {
  .motion-heading-line { overflow: visible; }
}