/* ── APPLE DESIGN PRINCIPLES ──────────────────────────────────────────────────
   Applied from: emilkowalski/skills — apple-design/SKILL.md
   Principles: materials/translucency, typography, pointer-down feedback,
   spring-like easing, spatial consistency, reduced-motion/transparency.
   ──────────────────────────────────────────────────────────────────────────── */

/* ── 1. SPRING EASING — critically-damped, no overshoot ── */
:root {
  --spring: cubic-bezier(0.25, 0.46, 0.45, 0.94);   /* default UI spring */
  --spring-out: cubic-bezier(0.34, 1.06, 0.64, 1);  /* slight overshoot for momentum interactions */
}

/* ── 2. NAV AS TRANSLUCENT MATERIAL ──
   §12: backdrop-filter layer, content scrolls under, bright top edge = light
   catching the material. Saturate(180%) keeps colours vivid through the blur.
   §12: "Never stack a light translucent surface on another" — dark nav over
   dark hero is fine; light nav over light content uses a heavier background. */
nav.dark {
  background: rgba(17, 23, 22, 0.72) !important;
  backdrop-filter: blur(20px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important; /* bright top edge */
}
nav.light {
  background: rgba(243, 235, 221, 0.82) !important;
  backdrop-filter: blur(20px) saturate(160%) !important;
  -webkit-backdrop-filter: blur(20px) saturate(160%) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.55) !important; /* bright top edge on light */
  box-shadow: 0 1px 0 rgba(17, 23, 22, 0.06), 0 4px 24px rgba(17, 23, 22, 0.05) !important;
}

/* §12: Scroll edge effect — fade mask where content meets floating chrome.
   Replaces the hard 1px border with a soft gradient shadow. */
nav.light::after {
  content: '';
  position: absolute;
  bottom: -12px;
  left: 0;
  right: 0;
  height: 12px;
  background: linear-gradient(to bottom, rgba(17, 23, 22, 0.04), transparent);
  pointer-events: none;
}

/* ── 3. MOBILE MENU — materialize, don't just fade ──
   §12: "animate blur radius and scale together on enter/exit, so the surface
   reads as a real material arriving rather than a plain opacity fade." */
.mob-overlay {
  background: rgba(17, 23, 22, 0.88) !important;
  backdrop-filter: blur(0px) saturate(100%) !important;
  -webkit-backdrop-filter: blur(0px) saturate(100%) !important;
  transform: scale(1.04);
  transition:
    opacity 0.35s var(--spring),
    transform 0.35s var(--spring),
    backdrop-filter 0.35s var(--spring) !important;
}
.mob-overlay.open {
  backdrop-filter: blur(24px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(24px) saturate(180%) !important;
  transform: scale(1) !important;
}

/* ── 4. POINTER-DOWN FEEDBACK — respond on press, not release ──
   §1: "Respond on pointer-down, not on release. Highlight a button the instant
   it's pressed." Instant scale on :active, fast 100ms settle. */
.btn-primary:active,
.btn-ghost:active,
.btn-gold:active,
.nav-cta:active,
.price-cta a:active,
.form-submit:active,
.wa-float:active,
.svc-link:active {
  transform: scale(0.97) !important;
  transition: transform 80ms ease-out !important;
}

/* Buttons: spring-like hover (scale up from origin, not just translateY) */
.btn-primary,
.btn-ghost,
.btn-gold {
  transition:
    background 0.25s var(--spring),
    color 0.25s var(--spring),
    transform 0.3s var(--spring),
    box-shadow 0.3s var(--spring) !important;
  transform-origin: center;
}
.btn-primary:hover,
.btn-ghost:hover,
.btn-gold:hover {
  transform: translateY(-2px) scale(1.01) !important;
}

/* ── 5. TYPOGRAPHY — optical sizing, tracking, leading ──
   §15: "Large display text wants negative tracking; small text wants slightly
   positive tracking. Tight leading on large headings, looser on body copy." */
.hero h1 {
  letter-spacing: -0.02em;
  line-height: 1.05;
  font-optical-sizing: auto;
}
.section-title {
  letter-spacing: -0.015em;
  line-height: 1.12;
  font-optical-sizing: auto;
}
/* Body copy: near-zero tracking, comfortable leading (already 1.7 — keep) */
.hero-sub,
.about-text p,
.pain-card p,
.svc p,
.step-body p,
.testi-text,
.faq-a-inner,
.contact-info p {
  letter-spacing: 0.005em; /* slight positive for legibility at small sizes */
}
/* Section labels (tiny uppercase): positive tracking for legibility */
.section-label,
.svc-num,
.hero-badge,
.price-card-step,
.price-card-tag {
  letter-spacing: 0.18em; /* already set, but enforce via optical rule */
}

/* ── 6. CARD INTERACTIONS — spring from origin, not just translateY ──
   §7: "Anchor interactions to their source." Scale from the card's own center.
   §4: Spring easing for anything interactive. */
.svc {
  transition:
    border-color 0.3s var(--spring),
    transform 0.35s var(--spring),
    background 0.3s var(--spring),
    box-shadow 0.35s var(--spring) !important;
  transform-origin: center bottom;
}
.svc:hover {
  transform: translateY(-5px) scale(1.005) !important;
  box-shadow: 0 12px 40px rgba(17, 23, 22, 0.10) !important;
}

.pain-card {
  transition:
    background 0.35s var(--spring),
    transform 0.35s var(--spring) !important;
  transform-origin: center;
}
.pain-card:hover {
  transform: translateY(-3px) !important;
}

.testi {
  transition:
    box-shadow 0.35s var(--spring),
    transform 0.35s var(--spring) !important;
  transform-origin: center;
}
.testi:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 48px rgba(17, 23, 22, 0.12) !important;
}

.price-card {
  transition:
    transform 0.4s var(--spring),
    box-shadow 0.4s var(--spring) !important;
  transform-origin: center bottom;
}
.price-card:hover {
  transform: translateY(-7px) scale(1.005) !important;
}

/* Step numbers: spring scale on hover */
.step-num {
  transition:
    background 0.3s var(--spring),
    color 0.3s var(--spring),
    transform 0.3s var(--spring-out) !important;
  transform-origin: center;
}
.step:hover .step-num {
  transform: scale(1.08) !important;
}

/* FAQ arrow: spring rotation */
.faq-arrow {
  transition: transform 0.4s var(--spring) !important;
}

/* ── 7. REVEAL ANIMATIONS — spring settle, not linear ── */
.reveal {
  transition:
    opacity 0.65s var(--spring),
    transform 0.65s var(--spring) !important;
}

/* ── 8. NAV TRANSITION — spring, not ease ── */
nav {
  transition:
    background 0.4s var(--spring),
    border-color 0.4s var(--spring),
    box-shadow 0.4s var(--spring) !important;
}

/* ── 9. FORM INPUTS — spring focus ring ── */
form input,
form select,
form textarea {
  transition:
    border-color 0.2s var(--spring),
    box-shadow 0.2s var(--spring) !important;
}
form input:focus-visible,
form select:focus-visible,
form textarea:focus-visible {
  border-color: var(--indigo) !important;
  box-shadow: 0 0 0 3px rgba(111, 159, 173, 0.25) !important;
  outline: none !important;
}

/* ── 10. REDUCED TRANSPARENCY ──
   §14: "make translucent surfaces frostier/solid: raise background opacity,
   drop the blur." */
@media (prefers-reduced-transparency: reduce) {
  nav.dark {
    background: rgba(17, 23, 22, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  nav.light {
    background: rgba(243, 235, 221, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .mob-overlay {
    background: rgba(17, 23, 22, 0.98) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  .hero-stat {
    background: rgba(17, 23, 22, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ── 11. REDUCED MOTION — cross-fade, not slide/spring ──
   §14: "replace slides/springs/parallax with short opacity cross-fades." */
@media (prefers-reduced-motion: reduce) {
  .btn-primary:active,
  .btn-ghost:active,
  .btn-gold:active,
  .nav-cta:active,
  .price-cta a:active,
  .form-submit:active {
    transform: none !important;
  }
  .svc:hover,
  .pain-card:hover,
  .testi:hover,
  .price-card:hover,
  .btn-primary:hover,
  .btn-ghost:hover,
  .btn-gold:hover {
    transform: none !important;
  }
  .mob-overlay {
    transform: none !important;
    transition: opacity 0.2s ease !important;
  }
  .step:hover .step-num {
    transform: none !important;
  }
}