/* ──────────────────────────────────────────────
 * Apple-style motion system (shared)
 *
 * Goals:
 *  - Smooth, calm, premium feel (no bounce, no jitter).
 *  - Apple's signature easing: cubic-bezier(0.22, 1, 0.36, 1)
 *    (a soft "ease-out-quart"). Used for reveals + UI.
 *  - Honor prefers-reduced-motion.
 *
 * Class API (drop on any element, or auto-tagged by
 * apple-anim.js):
 *   .a-reveal           → fade + soft rise + tiny scale + light blur
 *   .a-reveal-up        → fade + larger upward translate
 *   .a-reveal-left      → fade in from left
 *   .a-reveal-right     → fade in from right
 *   .a-reveal-scale     → fade + scale up (hero media)
 *   .a-reveal.is-in     → triggered state (added by JS)
 *   .a-stagger-{1..8}   → stagger child reveals
 * ────────────────────────────────────────────── */

:root {
  --a-ease:        cubic-bezier(0.22, 1, 0.36, 1);
  --a-ease-soft:   cubic-bezier(0.32, 0.72, 0, 1);

  /* Scroll-speed multiplier — written by apple-anim.js.
     1.0  = idle / slow read pace (full cinematic length).
     ~0.35 = very fast scroll (snappy, keeps up with the viewport).
     Hover / press / focus transitions are intentionally NOT scaled. */
  --a-speed-mult:  1;

  --a-dur:         calc(900ms * var(--a-speed-mult));
  --a-dur-fast:    calc(520ms * var(--a-speed-mult));
}

html {
  scroll-behavior: smooth;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

*, *::before, *::after {
  -webkit-tap-highlight-color: transparent;
}

img, picture, video {
  display: block;
  max-width: 100%;
  height: auto;
  backface-visibility: hidden;
  transform: translateZ(0);
}

/* ── Reveal base ── */
.a-reveal,
.a-reveal-up,
.a-reveal-left,
.a-reveal-right,
.a-reveal-scale,
.reveal,
.reveal-cinematic {
  opacity: 0;
  will-change: opacity, transform, filter;
  transform: translateZ(0);
  transition:
    opacity      var(--a-dur) var(--a-ease),
    transform    var(--a-dur) var(--a-ease),
    filter       var(--a-dur) var(--a-ease);
}

.a-reveal        { transform: translateY(28px) scale(0.992); filter: blur(4px); }
.a-reveal-up     { transform: translateY(56px); }
.a-reveal-left   { transform: translateX(-48px); }
.a-reveal-right  { transform: translateX(48px); }
.a-reveal-scale  { transform: scale(0.94); filter: blur(8px); }

.a-reveal.is-in,
.a-reveal-up.is-in,
.a-reveal-left.is-in,
.a-reveal-right.is-in,
.a-reveal-scale.is-in {
  opacity: 1;
  transform: none;
  filter: none;
}

/* ── Legacy aliases (index.html markup uses .reveal / .reveal-cinematic
 *    / .reveal-delay-N / .visible). Map them onto the Apple system so
 *    existing pages animate consistently without per-element edits.
 * ── */
.reveal,
.reveal-cinematic {
  opacity: 0;
  will-change: opacity, transform, filter;
  transition:
    opacity   var(--a-dur) var(--a-ease),
    transform var(--a-dur) var(--a-ease),
    filter    var(--a-dur) var(--a-ease);
}
.reveal           { transform: translateY(28px) scale(0.992); filter: blur(4px); }
.reveal-cinematic { transform: translateY(48px) scale(0.985); filter: blur(6px); }

.reveal.is-in,
.reveal.visible,
.reveal-cinematic.is-in,
.reveal-cinematic.visible {
  opacity: 1;
  transform: none;
  filter: none;
}

.reveal-delay-1 { transition-delay: calc( 90ms * var(--a-speed-mult)); }
.reveal-delay-2 { transition-delay: calc(180ms * var(--a-speed-mult)); }
.reveal-delay-3 { transition-delay: calc(270ms * var(--a-speed-mult)); }
.reveal-delay-4 { transition-delay: calc(360ms * var(--a-speed-mult)); }
.reveal-delay-5 { transition-delay: calc(450ms * var(--a-speed-mult)); }
.reveal-delay-6 { transition-delay: calc(540ms * var(--a-speed-mult)); }

/* Stagger helpers — apply to a parent to delay each child reveal. */
.a-stagger > * { transition-delay: 0ms; }
.a-stagger > *:nth-child(1) { transition-delay: calc( 60ms * var(--a-speed-mult)); }
.a-stagger > *:nth-child(2) { transition-delay: calc(140ms * var(--a-speed-mult)); }
.a-stagger > *:nth-child(3) { transition-delay: calc(220ms * var(--a-speed-mult)); }
.a-stagger > *:nth-child(4) { transition-delay: calc(300ms * var(--a-speed-mult)); }
.a-stagger > *:nth-child(5) { transition-delay: calc(380ms * var(--a-speed-mult)); }
.a-stagger > *:nth-child(6) { transition-delay: calc(460ms * var(--a-speed-mult)); }
.a-stagger > *:nth-child(7) { transition-delay: calc(540ms * var(--a-speed-mult)); }
.a-stagger > *:nth-child(8) { transition-delay: calc(620ms * var(--a-speed-mult)); }

/* ── Apple-style micro-interactions ── */

/* Buttons / pill links: subtle lift + soft shadow on hover, slight press. */
button,
.btn,
.btn-primary,
.btn-accent,
.btn-ghost,
.btn-nav,
.btn-card,
.btn-submit,
.site-nav-link {
  transition:
    transform     320ms var(--a-ease-soft),
    box-shadow    320ms var(--a-ease-soft),
    background    320ms var(--a-ease-soft),
    color         320ms var(--a-ease-soft),
    border-color  320ms var(--a-ease-soft),
    filter        320ms var(--a-ease-soft);
}
button:hover,
.btn:hover,
.btn-primary:hover,
.btn-accent:hover,
.btn-ghost:hover,
.btn-nav:hover,
.btn-card:hover,
.btn-submit:hover,
.site-nav-link:hover {
  transform: translateY(-1px);
}
button:active,
.btn:active,
.btn-primary:active,
.btn-accent:active,
.btn-ghost:active,
.btn-nav:active,
.btn-card:active,
.btn-submit:active,
.site-nav-link:active {
  transform: translateY(0) scale(0.985);
  transition-duration: 120ms;
}

/* Inputs & selects — gentle focus glow */
input, select, textarea {
  transition:
    border-color 280ms var(--a-ease-soft),
    box-shadow   280ms var(--a-ease-soft),
    background   280ms var(--a-ease-soft);
}

/* Card-style elements (tier cards, work tiles, testimonial cards) lift on hover */
.tier-card,
.work-tile,
.testimonial-card,
.review-card,
.plan-card,
.featured {
  transition:
    transform   520ms var(--a-ease),
    box-shadow  520ms var(--a-ease),
    border-color 520ms var(--a-ease);
}
.tier-card:hover,
.work-tile:hover,
.testimonial-card:hover,
.review-card:hover,
.plan-card:hover,
.featured:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.10);
}
html[data-theme="dark"] .tier-card:hover,
html[data-theme="dark"] .work-tile:hover,
html[data-theme="dark"] .testimonial-card:hover,
html[data-theme="dark"] .review-card:hover,
html[data-theme="dark"] .plan-card:hover,
html[data-theme="dark"] .featured:hover {
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.55);
}

/* Media (images / videos) inside work tiles — subtle parallax-style zoom */
.work-tile img,
.work-tile video,
.tile-media img,
.tile-media video {
  transition: transform 900ms var(--a-ease), filter 900ms var(--a-ease);
}
.work-tile:hover img,
.work-tile:hover video,
.tile-media:hover img,
.tile-media:hover video {
  transform: scale(1.035);
}

/* Theme switch — already styled, just lengthen for smoother feel */
.theme-toggle-face,
.theme-toggle-face::before {
  transition-duration: 420ms !important;
  transition-timing-function: var(--a-ease-soft) !important;
}

/* ── Page entrance — first paint feels like a soft fade-in ── */
@keyframes a-page-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: none; }
}
body.a-page-in {
  animation: a-page-in 700ms var(--a-ease) both;
}

@media (max-width: 900px) {
  .navbar,
  .mobile-menu,
  .work-tile-overlay,
  .theme-toggle-face,
  .hero-chip {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }

  .work-tile:hover .work-tile-bg,
  .work-tile:hover .work-tile-overlay,
  .btn,
  .btn-primary,
  .btn-ghost,
  .site-nav-link {
    transition-duration: 200ms !important;
  }
}

/* ── Reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .a-reveal,
  .a-reveal-up,
  .a-reveal-left,
  .a-reveal-right,
  .a-reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    transition: none !important;
  }
  body.a-page-in { animation: none; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}