/* Redesign: motion.css — restrained presence */

@media (prefers-reduced-motion: no-preference) {
  .hero-panel {
    animation: panel-rise 900ms var(--ease-out) both;
  }

  .hero-panel:nth-child(2) { animation-delay: 80ms; }
  .hero-panel:nth-child(3) { animation-delay: 160ms; }

  .habit-block,
  .product-panel,
  .review-card,
  .cta-band,
  .connector {
    animation: fade-up 780ms var(--ease-out) both;
    animation-timeline: view();
    animation-range: entry 8% cover 28%;
  }

  .geo-marker {
    transition: transform var(--dur-med) var(--ease-out), background var(--dur-med) var(--ease-out);
  }

  .habit-block:hover .geo-marker {
    transform: rotate(8deg) scale(1.05);
    background: var(--brand-primary);
  }

  .menu-fab {
    animation: fab-in 700ms var(--ease-out) 400ms both;
  }

  .hero-hint .arrow {
    display: inline-block;
    animation: nudge-x 1.8s var(--ease-out) infinite;
  }
}

@keyframes panel-rise {
  from {
    opacity: 0;
    transform: translateY(1.25rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fade-up {
  from {
    opacity: 0;
    transform: translateY(1.5rem);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fab-in {
  from {
    opacity: 0;
    transform: translateY(1rem) scale(0.92);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes nudge-x {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(0.35rem); }
}

.menu-panel a {
  transition: color var(--dur-fast), padding-left var(--dur-fast) var(--ease-out);
}

.menu-panel a:hover {
  padding-left: 0.35rem;
}

.cta-btn {
  transition:
    background var(--dur-fast) var(--ease-out),
    transform var(--dur-fast) var(--ease-out),
    box-shadow var(--dur-fast) var(--ease-out);
}

.cta-btn:hover {
  box-shadow: 0 10px 28px rgba(20, 20, 20, 0.18);
}

.block-media img,
.hero-visual-frame img,
.product-visual img {
  transition: transform var(--dur-slow) var(--ease-out);
}

.block-media:hover img,
.hero-visual-frame:hover img {
  transform: scale(1.03);
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
    scroll-behavior: auto !important;
  }
}