/* Motion enhances the static page; no content depends on an animation completing. */
.headline-line { overflow: hidden; padding-bottom: .09em; margin-bottom: -.09em; }
.headline-text { transform-origin: left bottom; }
.app-screen { position: relative; overflow: hidden; border: 5px solid #fafdff; border-radius: 36px; box-shadow: 0 0 0 1px #baddea, 14px 28px 50px #4292b326; background: white; }
.app-screen img { border: 0; border-radius: 0; box-shadow: none; }
.app-screen .preview-outgoing { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.scene-motion-toggle { display: none; align-items: center; justify-content: center; min-height: 36px; margin-block: -8px; padding: 5px 11px; border: 1px solid #fff; border-radius: 999px; background: #ffffffb8; color: #235b76; font-size: .75rem; letter-spacing: 0; }
.motion-enabled .scene-motion-toggle, .motion-paused .scene-motion-toggle { display: inline-flex; }
.scene-motion-toggle:hover { background: white; }
.scene-motion-toggle:focus-visible { outline-color: var(--pink); }
.scroll-progress { position: fixed; inset: 0 0 auto; height: 2px; z-index: 40; background: linear-gradient(90deg, var(--pink), #ed7caa, #35b6df); transform: scaleX(0); transform-origin: left; pointer-events: none; }
.site-header { transition: box-shadow .35s, background .35s; }
.site-header.is-scrolled { background: #fffffff7; box-shadow: 0 5px 24px #187ba30a; }

@media (prefers-reduced-motion: no-preference) {
    .button { position: relative; isolation: isolate; overflow: hidden; }
    .button::after { content: ""; position: absolute; inset: -70% auto -70% -70%; width: 45%; background: linear-gradient(90deg, transparent, #ffffff28, transparent); transform: skewX(-22deg) translateX(-100%); pointer-events: none; }
    .button .icon, .text-link .icon { transition: transform .3s var(--ease); }
    .text-link:hover .icon, .text-link:focus-visible .icon { transform: translateX(5px); }
    .button:active { transform: translateY(0) scale(.975); }
    .story { position: relative; }
    .story::before { content: ""; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: var(--pink); transform: scaleX(0); transform-origin: left; transition: transform .55s var(--ease); }
    .story > .icon { transition: transform .55s var(--ease); }
    .step-button { transition: background .3s, border-color .3s, box-shadow .3s; }
    .step-button .step-index { transition: color .3s; }
    .motion-enabled .hero-visual { --scene-x: 0px; --scene-y: 0px; }
    .motion-enabled .hero-visual::before { content: ""; position: absolute; inset: -15%; z-index: -1; pointer-events: none; background: radial-gradient(ellipse at 62% 38%, #ffffff30, transparent 55%); transform: translate3d(calc(var(--scene-x) * 2), calc(var(--scene-y) * 2), 0); }
    .motion-enabled .hero-visual .ocean { animation: ocean-drift 18s ease-in-out infinite alternate; }
    .motion-enabled .sample-note { animation: note-drift 7s ease-in-out infinite; }
    .motion-enabled .response-note { animation: response-drift 8s ease-in-out infinite; }
    .motion-enabled .frequency i { animation: frequency-pulse 1.7s ease-in-out infinite alternate; }
    .frequency i:nth-child(2) { animation-delay: -.35s; }
    .frequency i:nth-child(3) { animation-delay: -.8s; }
    .frequency i:nth-child(4) { animation-delay: -.2s; }
    .frequency i:nth-child(5) { animation-delay: -1.1s; }
    .frequency i:nth-child(6) { animation-delay: -.55s; }
    .frequency i:nth-child(7) { animation-delay: -.95s; }
    .motion-enabled .hero-visual .ocean,
    .motion-enabled .sample-note,
    .motion-enabled .response-note,
    .motion-enabled .frequency i { animation-play-state: paused; }
    .motion-enabled .scene-active .ocean,
    .motion-enabled .scene-active .sample-note,
    .motion-enabled .scene-active .response-note,
    .motion-enabled .scene-active .frequency i { animation-play-state: running; }
    .motion-enabled details[open] > p { animation: answer-enter .32s var(--ease); }
    @media (hover: hover) and (pointer: fine) {
        .motion-enabled .button:hover::after { animation: button-sheen .7s var(--ease); }
        .motion-enabled .button:hover .icon { transform: translateY(-1px); }
        .motion-enabled .story:hover::before { transform: scaleX(1); }
        .motion-enabled .story:hover > .icon { transform: translateY(-4px) rotate(-8deg); }
    }
    @keyframes ocean-drift {
        from { transform: translate3d(calc(var(--scene-x) * -.4), calc(var(--scene-y) * -.4), 0) scale(1.06); }
        to { transform: translate3d(calc(var(--scene-x) * -.4), calc(var(--scene-y) * -.4 - 8px), 0) scale(1.13); }
    }
    @keyframes note-drift {
        0%, 100% { transform: translate3d(var(--scene-x), var(--scene-y), 0) rotate(-4deg); }
        50% { transform: translate3d(var(--scene-x), calc(var(--scene-y) - 7px), 0) rotate(-3deg); }
    }
    @keyframes response-drift {
        0%, 100% { transform: translate3d(calc(var(--scene-x) * 1.6), calc(var(--scene-y) * 1.4), 0) rotate(3deg); }
        50% { transform: translate3d(calc(var(--scene-x) * 1.6), calc(var(--scene-y) * 1.4 + 5px), 0) rotate(2deg); }
    }
    @keyframes frequency-pulse { from { transform: scaleY(.45); opacity: .5; } to { transform: scaleY(1); opacity: 1; } }
    @keyframes button-sheen { from { transform: skewX(-22deg) translateX(0); } to { transform: skewX(-22deg) translateX(550%); } }
    @keyframes answer-enter { from { opacity: 0; transform: translateY(-5px); } to { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
    .headline-line { overflow: visible; }
    .button:hover, .button:active, .text-link:hover .icon { transform: none; }
    .scroll-progress, .scene-motion-toggle { display: none !important; }
}