/* Motion follows the quiet, connected character of NiNi. */

.motion-enabled .hero-visual { translate: var(--look-x, 0px) var(--look-y, 0px); transition: translate .7s cubic-bezier(.2,.75,.25,1); }
.motion-enabled .hero-visual .phone { --float-distance: -12px; animation: nini-float 6.5s ease-in-out infinite; }
.motion-enabled .hero-visual .phone-parent { --float-distance: -9px; animation-duration: 7.5s; animation-delay: -2.8s; }
.motion-enabled .hero-visual::before { animation: nini-glow 8s ease-in-out infinite; }
.motion-enabled .orbit-two { animation: nini-halo 8s ease-in-out infinite; }
.motion-enabled .star { animation: nini-twinkle 5.5s ease-in-out infinite; }
.motion-enabled .star-two { animation-delay: -2s; }
.motion-enabled .star-three { animation-delay: -3.5s; }
.motion-enabled .sound-note { --float-distance: -7px; animation: nini-float 6s ease-in-out -1.5s infinite; }
.motion-enabled .baby-scene { animation: nini-breathe 5s ease-in-out infinite; }
.motion-enabled .connection-path path:first-child { animation: nini-signal 5s linear infinite; }
.motion-enabled .little-signal i, .motion-enabled .baby-wave i { animation: nini-wave 1.8s ease-in-out infinite alternate; }
.motion-enabled .little-signal i:nth-child(2n), .motion-enabled .baby-wave i:nth-child(2n) { animation-delay: -.65s; }
.motion-enabled .little-signal i:nth-child(3n), .motion-enabled .baby-wave i:nth-child(3n) { animation-delay: -1.3s; }
.motion-enabled .baby-wave i:nth-child(4n) { animation-delay: -.4s; }
.motion-enabled .scene-note > .icon, .motion-enabled .monitor-state > .small-dot { animation: nini-beacon 3.5s ease-in-out infinite; }
.audio-wave i { animation-play-state: paused; }
.motion-enabled .motion-active .audio-wave i { animation-play-state: running; animation-duration: 1.25s; }
.motion-enabled .audio-wave i:nth-child(3n) { animation-duration: 1.8s; }
.motion-enabled .privacy-orbit { animation: nini-privacy-orbit 48s linear infinite; }
.motion-enabled .privacy-satellite { --float-distance: -6px; animation: nini-float 5s ease-in-out infinite; }
.motion-enabled .privacy-satellite.second { animation-delay: -2.5s; }
.motion-enabled .shield-main { animation: nini-breathe 5s ease-in-out infinite; }
.motion-enabled .plus-plan::before, .motion-enabled .plus-plan::after { animation: nini-halo 7s ease-in-out infinite; }
.motion-enabled .plus-plan::after { animation-delay: -3.5s; }
.motion-enabled .cta-orbit { animation: nini-halo 10s ease-in-out infinite; }

/* Small responses to intentional interactions. */
.motion-enabled .button { position: relative; overflow: hidden; isolation: isolate; }
.motion-enabled .store-button::after, .motion-enabled .plus-bottom .button::after { content: ""; position: absolute; inset: -50% auto -50% -60%; width: 35%; transform: skewX(-20deg); background: linear-gradient(90deg, transparent, #fff4, transparent); pointer-events: none; }
.motion-enabled .button > .icon, .motion-enabled .text-link > .icon, .motion-enabled .round-arrow .icon { transition: translate .3s ease; }
.motion-enabled .button:hover > .icon, .motion-enabled .text-link:hover > .icon, .motion-enabled .text-link:hover .round-arrow .icon { translate: 3px 0; }
.motion-enabled .button:active { transform: translateY(0) scale(.98); }
.motion-enabled .desktop-nav a { position: relative; }
.motion-enabled .desktop-nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: -5px; height: 1px; background: var(--peach); transform: scaleX(0); transform-origin: left; transition: transform .3s; }
.motion-enabled .desktop-nav a:hover::after, .motion-enabled .desktop-nav a:focus-visible::after { transform: scaleX(1); }
.motion-enabled .mobile-menu:not([hidden]) { animation: nini-panel-in .3s ease-out both; }
.motion-enabled .faq-answer { transform-origin: top; }
.motion-enabled .faq-list details[open] .faq-answer { animation: nini-panel-in .35s ease-out both; }
.motion-enabled .feature-row .feature-icon, .motion-enabled .plus-feature-grid .icon { transition: translate .35s, color .35s; }
.motion-enabled .feature-row:hover .feature-icon, .motion-enabled .plus-feature-grid li:hover > .icon { translate: 0 -3px; color: var(--peach); }
@media (hover: hover) and (pointer: fine) {
  .motion-enabled .basic-plan, .motion-enabled .plus-plan { transition: translate .4s, border-color .4s, box-shadow .4s; }
  .motion-enabled .basic-plan:hover, .motion-enabled .plus-plan:hover { translate: 0 -4px; border-color: #91a68b; box-shadow: 0 18px 45px #303d3512; }
  .motion-enabled[data-motion="playing"] .store-button:hover::after, .motion-enabled[data-motion="playing"] .plus-bottom .button:hover::after { animation: nini-sheen .8s ease-out; }
}
@media (max-width: 700px) {
  .motion-enabled .header-actions { gap: 9px; }
  .motion-enabled .hero-visual .phone { --float-distance: -5px; }
  .motion-enabled .hero-visual .phone-parent { --float-distance: -4px; }
  .motion-enabled .hero-visual { translate: none; }
}
@media (max-width: 350px) {
  .motion-enabled .header-actions { gap: 6px; }
  .motion-enabled .header-inner { gap: 8px; }
}

/* Loops run only while visible and respect the system motion preference. */
html[data-motion="paused"] { scroll-behavior: auto; }
.motion-enabled .motion-zone:not(.motion-active),
.motion-enabled .motion-zone:not(.motion-active) *,
.motion-enabled .motion-zone:not(.motion-active)::before,
.motion-enabled .motion-zone:not(.motion-active)::after,
.motion-enabled .motion-zone:not(.motion-active) *::before,
.motion-enabled .motion-zone:not(.motion-active) *::after { animation-play-state: paused !important; }
.motion-enabled[data-motion="paused"] *, .motion-enabled[data-motion="paused"] *::before, .motion-enabled[data-motion="paused"] *::after { animation-play-state: paused !important; transition-duration: .01ms !important; }
.motion-enabled[data-motion="paused"] .preview-panel, .motion-enabled[data-motion="paused"] .mobile-menu, .motion-enabled[data-motion="paused"] .faq-answer { animation: none !important; }

@keyframes nini-float { 0%, 100% { translate: 0 0; } 50% { translate: 0 var(--float-distance); } }
@keyframes nini-glow { 0%, 100% { opacity: .6; scale: .96; } 50% { opacity: 1; scale: 1.04; } }
@keyframes nini-privacy-orbit { from { transform: rotate(-20deg); } to { transform: rotate(340deg); } }
@keyframes nini-twinkle { 0%, 100% { opacity: .45; scale: .85; rotate: -8deg; } 50% { opacity: 1; scale: 1.12; rotate: 8deg; } }
@keyframes nini-breathe { 0%, 100% { scale: 1; } 50% { scale: 1.025; } }
@keyframes nini-halo { 0%, 100% { scale: .94; opacity: .5; } 50% { scale: 1.04; opacity: 1; } }
@keyframes nini-signal { to { stroke-dashoffset: -90; } }
@keyframes nini-beacon { 0%, 100% { opacity: .5; } 50% { opacity: 1; } }
@keyframes nini-wave { from { transform: scaleY(.4); } to { transform: scaleY(1.2); } }
@keyframes nini-panel-in { from { opacity: 0; translate: 0 9px; } to { opacity: 1; translate: 0 0; } }
@keyframes nini-sheen { to { left: 130%; } }
@media (prefers-reduced-motion: reduce) {
  .motion-enabled *, .motion-enabled *::before, .motion-enabled *::after { animation: none !important; transition: none !important; }
}