/* =========================================================
   APPLE-STYLE ANIMATIONS — entrance, transitions, micro-interactions
   ========================================================= */

:root {
  --ease-apple-spring: cubic-bezier(.32, .72, 0, 1);   /* signature Apple spring */
  --ease-apple-ease:   cubic-bezier(.4, 0, .2, 1);
  --ease-apple-out:    cubic-bezier(.16, 1, .3, 1);    /* expo-out, the "snap" */
}

/* ---------------------------------------------------------
   Hero — first-paint entrance
   --------------------------------------------------------- */
.ap-hero .eyebrow,
.ap-hero h1.display,
.ap-hero__sub,
.ap-hero__ctas,
.ap-hero__price,
.ap-hero__stage {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(6px);
  will-change: opacity, transform, filter;
}
.ap-hero.is-loaded .eyebrow      { animation: heroIn .9s var(--ease-apple-out) .05s both; }
.ap-hero.is-loaded h1.display    { animation: heroIn 1.1s var(--ease-apple-out) .15s both; }
.ap-hero.is-loaded .ap-hero__sub { animation: heroIn 1.0s var(--ease-apple-out) .30s both; }
.ap-hero.is-loaded .ap-hero__ctas{ animation: heroIn .9s var(--ease-apple-out) .42s both; }
.ap-hero.is-loaded .ap-hero__price{animation: heroIn .9s var(--ease-apple-out) .50s both; }
.ap-hero.is-loaded .ap-hero__stage{
  animation: heroStageIn 1.4s var(--ease-apple-out) .55s both;
}

@keyframes heroIn {
  0%   { opacity: 0; transform: translateY(28px); filter: blur(6px); }
  100% { opacity: 1; transform: translateY(0);    filter: blur(0); }
}
@keyframes heroStageIn {
  0%   { opacity: 0; transform: translateY(50px) scale(.96); filter: blur(10px); }
  100% { opacity: 1; transform: translateY(0)    scale(1);   filter: blur(0); }
}

/* ---------------------------------------------------------
   Hero slides — animate copy & visual on slide change
   (transition itself is set in apple.css to support horizontal slide)
   --------------------------------------------------------- */
.ap-hero__slide .hs-copy > *,
.ap-hero__slide .hs-visual {
  opacity: 0;
  transform: translateY(20px);
  filter: blur(4px);
  transition:
    opacity .9s var(--ease-apple-out),
    transform 1.05s var(--ease-apple-out),
    filter .9s var(--ease-apple-out);
}
.ap-hero__slide .hs-visual {
  transform: translateY(20px) scale(.96);
}
.ap-hero__slide.is-active .hs-copy > * {
  opacity: 1; transform: translateY(0); filter: blur(0);
}
.ap-hero__slide.is-active .hs-visual {
  opacity: 1; transform: translateY(0) scale(1); filter: blur(0);
}
/* stagger inside the active slide */
.ap-hero__slide.is-active .hs-copy h2 { transition-delay: .15s; }
.ap-hero__slide.is-active .hs-copy p  { transition-delay: .30s; }
.ap-hero__slide.is-active .hs-visual  { transition-delay: .20s; }

/* ---------------------------------------------------------
   Reveal on scroll — upgraded with blur + scale
   --------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(36px) scale(.985);
  filter: blur(6px);
  transition:
    opacity 1s var(--ease-apple-out),
    transform 1.1s var(--ease-apple-out),
    filter 1s var(--ease-apple-out);
  will-change: opacity, transform, filter;
}
.reveal.is-in {
  opacity: 1;
  transform: translateY(0) scale(1);
  filter: blur(0);
}

/* Stagger children when parent has .reveal--stagger */
.reveal--stagger > * {
  opacity: 0;
  transform: translateY(28px);
  filter: blur(5px);
  transition:
    opacity .9s var(--ease-apple-out),
    transform 1s var(--ease-apple-out),
    filter .9s var(--ease-apple-out);
}
.reveal--stagger.is-in > *           { opacity: 1; transform: translateY(0); filter: blur(0); }
.reveal--stagger.is-in > *:nth-child(1) { transition-delay: .05s; }
.reveal--stagger.is-in > *:nth-child(2) { transition-delay: .12s; }
.reveal--stagger.is-in > *:nth-child(3) { transition-delay: .19s; }
.reveal--stagger.is-in > *:nth-child(4) { transition-delay: .26s; }
.reveal--stagger.is-in > *:nth-child(5) { transition-delay: .33s; }
.reveal--stagger.is-in > *:nth-child(6) { transition-delay: .40s; }
.reveal--stagger.is-in > *:nth-child(7) { transition-delay: .47s; }
.reveal--stagger.is-in > *:nth-child(8) { transition-delay: .54s; }
.reveal--stagger.is-in > *:nth-child(9) { transition-delay: .61s; }
.reveal--stagger.is-in > *:nth-child(10){ transition-delay: .68s; }
.reveal--stagger.is-in > *:nth-child(11){ transition-delay: .75s; }
.reveal--stagger.is-in > *:nth-child(12){ transition-delay: .82s; }

/* ---------------------------------------------------------
   Card hover lifts — Apple-spring
   --------------------------------------------------------- */
.terminal,
.feat,
.support__card,
.icon-grid__cell,
.scene-card,
.testimonial,
.price-card,
.ap-strip__cell {
  transition:
    transform .55s var(--ease-apple-spring),
    box-shadow .55s var(--ease-apple-spring),
    border-color .3s var(--ease-apple-ease) !important;
}
.terminal:hover,
.feat:hover,
.icon-grid__cell:hover,
.scene-card:hover,
.testimonial:hover,
.price-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 1px 3px rgba(0,0,0,.05), 0 22px 44px -16px rgba(0,0,0,.18);
}

/* terminal badge spring on hover */
.terminal__badge {
  transition: transform .6s var(--ease-apple-spring), background .3s var(--ease-apple-ease);
}
.terminal:hover .terminal__badge {
  transform: scale(1.12) rotate(-4deg);
}

/* ---------------------------------------------------------
   Buttons — Apple press feedback
   --------------------------------------------------------- */
.btn {
  transition:
    transform .35s var(--ease-apple-spring),
    background .25s var(--ease-apple-ease),
    box-shadow .35s var(--ease-apple-spring),
    color .25s var(--ease-apple-ease) !important;
}
.btn:hover     { transform: translateY(-1px) scale(1.02); }
.btn:active    { transform: translateY(0) scale(.97); transition-duration: .12s; }

.link::after   { transition: transform .4s var(--ease-apple-spring); }
.link:hover::after { transform: translateX(4px); }

/* ---------------------------------------------------------
   Form / input — Apple focus ring (soft halo)
   --------------------------------------------------------- */
input, textarea, select {
  transition:
    border-color .25s var(--ease-apple-ease),
    box-shadow .35s var(--ease-apple-out),
    background .25s var(--ease-apple-ease) !important;
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--sub-accent, #0071e3) !important;
  box-shadow:
    0 0 0 4px color-mix(in srgb, var(--sub-accent, #0071e3) 18%, transparent),
    0 1px 2px rgba(0,0,0,.04) !important;
}

/* ---------------------------------------------------------
   Details / FAQ — smooth open
   --------------------------------------------------------- */
.faq details {
  transition: background .3s var(--ease-apple-ease);
}
.faq details > *:not(summary) {
  animation: faqOpen .5s var(--ease-apple-out);
}
@keyframes faqOpen {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.faq summary::after {
  transition: transform .45s var(--ease-apple-spring) !important;
}

/* ---------------------------------------------------------
   Nav — backdrop blur transitions in
   --------------------------------------------------------- */
.ap-nav {
  transition:
    background .4s var(--ease-apple-ease),
    backdrop-filter .4s var(--ease-apple-ease),
    box-shadow .4s var(--ease-apple-ease),
    border-color .4s var(--ease-apple-ease);
}
.ap-nav__menu a,
.ap-nav__cta {
  transition:
    opacity .25s var(--ease-apple-ease),
    color .25s var(--ease-apple-ease),
    transform .35s var(--ease-apple-spring) !important;
}
.ap-nav__menu a:hover { transform: translateY(-1px); }

/* logo subtle pop */
.ap-nav__logo img {
  transition: transform .5s var(--ease-apple-spring), opacity .3s ease;
}
.ap-nav__logo:hover img { transform: scale(1.05); }

/* ---------------------------------------------------------
   Stat numbers — count-up entrance feel via scale
   --------------------------------------------------------- */
.stat-band__num,
.mp-stat__num {
  display: inline-block;
  transition: transform .6s var(--ease-apple-spring);
}
.stat-band__cell:hover .stat-band__num {
  transform: scale(1.06);
}

/* ---------------------------------------------------------
   Tech-pill tag — soft float
   --------------------------------------------------------- */
.tech-pill {
  transition:
    transform .45s var(--ease-apple-spring),
    border-color .3s var(--ease-apple-ease),
    color .3s var(--ease-apple-ease),
    background .3s var(--ease-apple-ease) !important;
}
.tech-pill:hover { transform: translateY(-3px) scale(1.03); }

/* ---------------------------------------------------------
   Reduced motion — respect user pref
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .ap-hero .eyebrow,
  .ap-hero h1.display,
  .ap-hero__sub,
  .ap-hero__ctas,
  .ap-hero__price,
  .ap-hero__stage,
  .reveal,
  .reveal--stagger > * {
    opacity: 1 !important;
    transform: none !important;
    filter: none !important;
    animation: none !important;
    transition: none !important;
  }
}