/* ==========================================================================
   Frenzo motion — purposeful slide-ins, 60fps, reduced-motion first
   Durations follow UI motion: enter 250–400ms ease-out, press <100ms
   ========================================================================== */

:root {
  --motion-ease-out: cubic-bezier(0, 0, 0.2, 1);
  --motion-ease-in: cubic-bezier(0.4, 0, 1, 1);
  --motion-ease-io: cubic-bezier(0.4, 0, 0.2, 1);
  --motion-enter: 380ms;
  --motion-enter-hero: 480ms;
  --motion-micro: 90ms;
  --motion-small: 200ms;
  --motion-stagger: 55ms;
}

@media (max-width: 640px) {
  :root {
    --motion-enter: 270ms;
    --motion-enter-hero: 340ms;
    --motion-stagger: 40ms;
  }
}

html,
body {
  max-width: 100%;
  overflow-x: clip;
}

/* Cross-page continuity */
@view-transition {
  navigation: auto;
}

::view-transition-old(root) {
  animation: frenzo-fade-out 200ms var(--motion-ease-in) both;
}

::view-transition-new(root) {
  animation: frenzo-fade-in 250ms var(--motion-ease-out) both;
}

@keyframes frenzo-fade-out {
  to { opacity: 0; }
}

@keyframes frenzo-fade-in {
  from { opacity: 0; }
}

/* --------------------------------------------------------------------------
   Scroll reveals — hidden only when JS opted in (.js-motion)
   -------------------------------------------------------------------------- */
.js-motion .reveal,
.js-motion .reveal-left,
.js-motion .reveal-right,
.js-motion .reveal-scale {
  opacity: 0;
  transition:
    opacity var(--motion-enter) var(--motion-ease-out),
    transform var(--motion-enter) var(--motion-ease-out);
}

.js-motion .reveal {
  transform: translate3d(0, 28px, 0);
}

.js-motion .reveal-left {
  transform: translate3d(-28px, 0, 0);
}

.js-motion .reveal-right {
  transform: translate3d(28px, 0, 0);
}

.js-motion .reveal-scale {
  transform: translate3d(0, 16px, 0) scale(0.97);
}

.js-motion .reveal.is-visible,
.js-motion .reveal-left.is-visible,
.js-motion .reveal-right.is-visible,
.js-motion .reveal-scale.is-visible {
  opacity: 1;
  transform: none;
}

.js-motion .reveal-hero {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--motion-enter-hero) var(--motion-ease-out),
    transform var(--motion-enter-hero) var(--motion-ease-out);
}

.js-motion .reveal-hero.is-visible {
  opacity: 1;
  transform: none;
}

@keyframes frenzo-slide-up {
  from {
    opacity: 0;
    transform: translate3d(0, 22px, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* Homepage hero plays on first paint so above-the-fold never waits on JS */
.js-motion .f-hero > .f-eyebrow {
  animation: frenzo-slide-up var(--motion-enter) var(--motion-ease-out) both;
}

.js-motion .f-hero-title {
  animation: frenzo-slide-up var(--motion-enter-hero) var(--motion-ease-out) 70ms both;
}

.js-motion .f-hero-image {
  animation: frenzo-slide-up 500ms var(--motion-ease-out) 120ms both;
}

.js-motion .f-facts span {
  animation: frenzo-slide-up var(--motion-enter) var(--motion-ease-out) both;
}

.js-motion .f-facts span:nth-child(1) { animation-delay: 200ms; }
.js-motion .f-facts span:nth-child(2) { animation-delay: 260ms; }
.js-motion .f-facts span:nth-child(3) { animation-delay: 320ms; }

/* Staggered groups: children slide in after the parent is visible */
.js-motion .reveal-stagger > * {
  opacity: 0;
  transform: translate3d(0, 22px, 0);
  transition:
    opacity var(--motion-enter) var(--motion-ease-out),
    transform var(--motion-enter) var(--motion-ease-out);
}

.js-motion .reveal-stagger.is-visible > * {
  opacity: 1;
  transform: none;
}

.js-motion .reveal-stagger.is-visible > *:nth-child(1) { transition-delay: calc(var(--motion-stagger) * 0); }
.js-motion .reveal-stagger.is-visible > *:nth-child(2) { transition-delay: calc(var(--motion-stagger) * 1); }
.js-motion .reveal-stagger.is-visible > *:nth-child(3) { transition-delay: calc(var(--motion-stagger) * 2); }
.js-motion .reveal-stagger.is-visible > *:nth-child(4) { transition-delay: calc(var(--motion-stagger) * 3); }
.js-motion .reveal-stagger.is-visible > *:nth-child(5) { transition-delay: calc(var(--motion-stagger) * 4); }
.js-motion .reveal-stagger.is-visible > *:nth-child(6) { transition-delay: calc(var(--motion-stagger) * 5); }
.js-motion .reveal-stagger.is-visible > *:nth-child(7) { transition-delay: calc(var(--motion-stagger) * 6); }
.js-motion .reveal-stagger.is-visible > *:nth-child(8) { transition-delay: calc(var(--motion-stagger) * 7); }

.stagger-1 { transition-delay: 60ms; }
.stagger-2 { transition-delay: 120ms; }
.stagger-3 { transition-delay: 180ms; }
.stagger-4 { transition-delay: 240ms; }
.stagger-5 { transition-delay: 300ms; }

/* --------------------------------------------------------------------------
   Micro-interactions
   -------------------------------------------------------------------------- */
.f-button {
  transition:
    background var(--motion-small) var(--motion-ease-io),
    color var(--motion-small) var(--motion-ease-io),
    transform var(--motion-micro) var(--motion-ease-in),
    border-color var(--motion-small) var(--motion-ease-io);
}

.f-button:hover {
  transform: translateY(-1px);
}

.f-button:active {
  transform: scale(0.98);
  transition-duration: var(--motion-micro);
}

.f-link {
  transition: color var(--motion-small) var(--motion-ease-io), gap var(--motion-small) var(--motion-ease-out);
}

.f-link:hover {
  gap: 28px;
}

.f-price-row {
  transition:
    background var(--motion-small) var(--motion-ease-io),
    transform var(--motion-small) var(--motion-ease-out);
}

.f-price-row:hover {
  transform: translateX(6px);
}

.f-price-row:active {
  transform: scale(0.99);
}

.f-process-grid article img,
.f-about-visual > img,
.f-hero-image > img,
.f-price-aside img {
  transition: transform 500ms var(--motion-ease-out);
}

.f-process-grid article:hover img,
.f-about-visual:hover > img,
.f-price-aside:hover img {
  transform: scale(1.03);
}

.hover-lift {
  transition:
    transform 250ms var(--motion-ease-out),
    box-shadow 250ms var(--motion-ease-out),
    border-color 250ms var(--motion-ease-io);
}

.hover-lift:hover {
  transform: translateY(-4px);
}

/* --------------------------------------------------------------------------
   Mobile drawer + backdrop
   -------------------------------------------------------------------------- */
.f-backdrop {
  opacity: 0;
  transition: opacity var(--motion-small) var(--motion-ease-out);
}

.f-backdrop.is-open {
  opacity: 1;
}

.f-drawer {
  transform: translate3d(100%, 0, 0);
  transition: transform 300ms var(--motion-ease-out);
}

.f-drawer.is-open {
  transform: none;
}

.f-drawer.is-open nav a {
  animation: frenzo-nav-in 320ms var(--motion-ease-out) both;
}

.f-drawer.is-open nav a:nth-child(1) { animation-delay: 40ms; }
.f-drawer.is-open nav a:nth-child(2) { animation-delay: 80ms; }
.f-drawer.is-open nav a:nth-child(3) { animation-delay: 120ms; }
.f-drawer.is-open nav a:nth-child(4) { animation-delay: 160ms; }
.f-drawer.is-open nav a:nth-child(5) { animation-delay: 200ms; }
.f-drawer.is-open nav a:nth-child(6) { animation-delay: 240ms; }

@keyframes frenzo-nav-in {
  from {
    opacity: 0;
    transform: translate3d(18px, 0, 0);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

/* --------------------------------------------------------------------------
   Forms, FAQ accordion, header
   -------------------------------------------------------------------------- */
input,
select,
textarea {
  transition: border-color 150ms var(--motion-ease-io), box-shadow 150ms var(--motion-ease-io);
}

.accordion-content {
  display: block !important;
  max-height: 0;
  overflow: hidden;
  transition: max-height 320ms var(--motion-ease-out);
}

.accordion-content.is-open {
  max-height: 720px;
}

.faq-chevron {
  transition: transform 250ms var(--motion-ease-io);
}

header.f-header {
  transition: box-shadow 250ms var(--motion-ease-io), background-color 250ms var(--motion-ease-io);
}

header.f-header.is-scrolled {
  box-shadow: 0 8px 24px -16px rgba(36, 61, 48, 0.35) !important;
}

/* --------------------------------------------------------------------------
   Reduced motion: keep state changes, drop travel
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-enter: 1ms;
    --motion-enter-hero: 1ms;
    --motion-micro: 1ms;
    --motion-small: 1ms;
    --motion-stagger: 0ms;
  }

  @view-transition {
    navigation: none;
  }

  .js-motion .reveal,
  .js-motion .reveal-left,
  .js-motion .reveal-right,
  .js-motion .reveal-scale,
  .js-motion .reveal-hero,
  .js-motion .reveal-stagger > *,
  .js-motion .f-hero > .f-eyebrow,
  .js-motion .f-hero-title,
  .js-motion .f-hero-image,
  .js-motion .f-facts span {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    animation: none !important;
  }

  .f-drawer,
  .f-backdrop,
  .f-button,
  .f-price-row,
  .f-process-grid article img,
  .hover-lift {
    transition: none !important;
    transform: none !important;
    animation: none !important;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}