/* Home page layout: hero, and the spacing rhythm between its sections. */

/* ── Hero ────────────────────────────────────────────────────── */
.hero {
  padding-block: clamp(2.5rem, 1rem + 6vw, 5rem) var(--section-y);
}

.hero__inner {
  display: grid;
  gap: var(--block-y);
  align-items: center;
}

@media (min-width: 1024px) {
  .hero__inner {
    grid-template-columns: 1.05fr 1fr;
    gap: clamp(2rem, 4vw, 4rem);
  }
}

.hero__copy {
  display: flex;
  flex-direction: column;
  gap: var(--gap-2);
  max-width: 34ch;
}

.hero__lead {
  max-width: 44ch;
}

.hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--gap-1);
  margin-block-start: var(--gap-1);
}

/* ── Hero art: mascot with app tiles floating around it ──────── */
.hero__art {
  position: relative;
  display: grid;
  place-items: center;
  /* Room for the tiles that sit outside the mascot's box. */
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 3rem);
}

.hero__mascot {
  width: min(340px, 78%);
  height: auto;
  /* The render carries its own contact shadow; this grounds it on paper. */
  filter: drop-shadow(0 18px 28px rgba(28, 25, 22, 0.14));
}

/* The tilt is a variable so the idle drift can sway around it. */
.hero__art .tile {
  rotate: var(--tilt);
}

.hero__art .tile--typical {
  inset-block-start: 6%;
  inset-inline-start: 0;
  --tilt: -3deg;
}

.hero__art .tile--range {
  inset-block-end: 12%;
  inset-inline-end: 0;
  --tilt: 2.5deg;
}

.hero__art .tile--work {
  inset-block-start: 2%;
  inset-inline-end: 6%;
  --tilt: 3deg;
}

.hero__art .tile--home {
  inset-block-end: 4%;
  inset-inline-start: 8%;
  --tilt: -2deg;
}

@media (max-width: 479px) {
  .hero__art {
    padding-inline: 0;
  }

  .hero__mascot {
    width: 68%;
  }

  .hero__art .tile--typical,
  .hero__art .tile--range {
    padding: var(--p-1) var(--p-2);
  }

  .hero__art .tile__value {
    font-size: 1.25rem;
  }
}

/* ── Hero motion ─────────────────────────────────────────────────
 * The intro follows family.co: the headline rises word by word, the copy
 * follows, then the mascot and tiles spring in and keep drifting. The springs
 * are family.co's Framer Motion ones, baked into linear() so no animation
 * library ships. Where linear() is unsupported the var() makes the whole
 * animation invalid, so those elements simply render in place. The drag tug
 * and the FAQ accordion live in scripts/home.js and read the curves below. */
:root {
  /* Framer's text reveal: easeOutExpo over 0.937s. */
  --ease-reveal: cubic-bezier(0.19, 1, 0.22, 1);
  --t-reveal: 940ms;
  /* Spring mass 4, stiffness 800, damping 80: about 4% overshoot. */
  --spring-pop: linear(0, 0.034, 0.116, 0.224, 0.345, 0.466, 0.581, 0.685,
    0.774, 0.849, 0.909, 0.956, 0.99, 1.014, 1.03, 1.038, 1.042, 1.042, 1.04,
    1.036, 1.031, 1.025, 1.02, 1.016, 1.011, 1.008, 1.005, 1.003, 1.001, 1,
    0.999, 0.999, 0.998, 0.998, 0.998, 0.998, 0.999, 0.999, 0.999, 0.999, 1);
  --t-pop: 760ms;
  /* Spring mass 1, stiffness 600, damping 20: the bouncy return from a tug. */
  --spring-snap: linear(0, 0.083, 0.282, 0.533, 0.774, 0.983, 1.133, 1.218,
    1.244, 1.226, 1.179, 1.119, 1.059, 1.007, 0.97, 0.948, 0.94, 0.944, 0.955,
    0.97, 0.985, 0.997, 1.007, 1.013, 1.015, 1.014, 1.011, 1.008, 1.004, 1.001,
    0.998, 0.997, 0.996, 0.997, 0.997, 0.998, 0.999, 1, 1, 1.001, 1);
  --t-snap: 700ms;
  /* Spring mass 0.2, stiffness 280, damping 18: overdamped, no bounce. */
  --spring-faq: linear(0, 0.06, 0.171, 0.298, 0.411, 0.515, 0.599, 0.673, 0.731,
    0.781, 0.82, 0.854, 0.88, 0.903, 0.92, 0.935, 0.947, 0.957, 0.965, 0.971,
    0.976, 0.981, 0.984, 0.987, 0.99, 0.991, 0.993, 0.994, 0.995, 0.996, 0.997,
    0.997, 0.998, 0.998, 0.999, 0.999, 0.999, 0.999, 0.999, 1, 1);
  --t-faq: 410ms;
}

.hero__word {
  display: inline-block;
}

@media (prefers-reduced-motion: no-preference) {
  .hero__title {
    perspective: 600px;
  }

  .hero__word {
    animation: hero-rise var(--t-reveal) var(--ease-reveal)
      calc(150ms + var(--i) * 70ms) both;
  }

  .hero__lead {
    animation: hero-lift var(--t-reveal) var(--ease-reveal) 650ms both;
  }

  .hero__actions {
    animation: hero-lift var(--t-reveal) var(--ease-reveal) 750ms both;
  }

  .hero__copy .btn__note {
    animation: hero-lift var(--t-reveal) var(--ease-reveal) 850ms both;
  }

  /* Each piece pops in, then drifts between rest and its own --bob/--sway.
     The drift starts once the pop has settled, so the two never fight over
     translate. */
  .hero__mascot,
  .hero__art .tile {
    animation:
      hero-pop var(--t-pop) var(--spring-pop) var(--pop-at) both,
      hero-drift var(--float) ease-in-out calc(var(--pop-at) + var(--t-pop))
        infinite alternate;
  }

  .hero__mascot {
    --pop-at: 200ms;
    --bob: -8px;
    --sway: 1.5deg;
    --float: 3.2s;
  }

  .hero__art .tile {
    --pop-at: calc(450ms + var(--i) * 80ms);
  }
}

@keyframes hero-rise {
  from {
    opacity: 0;
    transform: translateY(100%) rotateX(-45deg);
  }
}

@keyframes hero-lift {
  from {
    opacity: 0;
    translate: 0 32px;
  }
}

@keyframes hero-pop {
  from {
    opacity: 0;
    scale: 0;
    translate: 0 40px;
  }

  to {
    opacity: 1;
    scale: 1;
    translate: 0 0;
  }
}

@keyframes hero-drift {
  to {
    translate: 0 var(--bob);
    rotate: calc(var(--tilt, 0deg) + var(--sway));
  }
}

/* Hero pieces can be tugged (scripts/home.js). Only the small tiles claim
   touch; the mascot is large enough that it must keep scrolling the page. */
[data-drag] {
  user-select: none;
  -webkit-user-select: none;
}

.hero__art .tile[data-drag] {
  touch-action: none;
}

@media (pointer: fine) {
  [data-drag] {
    cursor: grab;
  }
}

[data-drag].is-dragging {
  z-index: 1;
  cursor: grabbing;
}

[data-drag].is-snapping {
  transition: transform var(--t-snap) var(--spring-snap);
}

/* ── Section rhythm ──────────────────────────────────────────── */
.section--tight {
  padding-block: var(--block-y);
}

.section__head {
  margin-block-end: var(--block-y);
}

.features__grid {
  margin-block-start: var(--block-y);
}

/* ── Free (dark) ─────────────────────────────────────────────── */
.free__price {
  max-width: 52rem;
  margin-block-start: var(--block-y);
  margin-inline: auto;
}

/* Wide enough that phones stack the tiles instead of splitting a line. */
.free__price .price__item {
  flex-basis: 200px;
}

/* ── Privacy strip ───────────────────────────────────────────── */
.privacy__grid {
  margin-block-start: var(--block-y);
}

/* ── FAQ ─────────────────────────────────────────────────────── */
.faq__wrap {
  margin-block-start: var(--block-y);
}

/* ── Closing CTA ─────────────────────────────────────────────── */
.closing {
  padding-block: var(--section-y);
  text-align: center;
}

.closing__inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-2);
  max-width: 40ch;
  margin-inline: auto;
}

.closing__actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap-1);
  margin-block-start: var(--gap-1);
}

.not-found {
  min-height: calc(100svh - var(--nav-h) - 12rem);
  display: grid;
  align-content: center;
}