/* ATC motion.css: entrance + interactive animation. Loaded last (after atc.css / pages.css).
   Rules:
   - Hiding before reveal ONLY happens under html.js-motion (set by the head snippet, never when reduced motion is on
     or IntersectionObserver is missing). Without it everything is simply visible.
   - Entrances use opacity + the independent `translate` property in an animation, so they never fight the
     `transform` hover rules on the same cards. Only transform/opacity/box-shadow animate: no layout shift.
   - LCP elements (home h1 + hero photo, .phero h1, single listing photo) are never hidden: transform-only or untouched.
   Keep the list in :is() in sync with REVEAL in assets/js/motion.js. */

:root { --mo-ease: cubic-bezier(.22, 1, .36, 1); }

/* ---------- 1. Scroll entrance ---------- */
@keyframes atc-rise { from { opacity: 0; translate: 0 16px; } to { opacity: 1; translate: 0 0; } }

html.js-motion :is(.section-head, .lcard, .acard, .type2, .tq, .pcard, .post-row, .post-feature, .usp li, .feats li, .steps li, .mv-card, .reg-chips li, .hot, .ptable, .cta-band, .slim-cta, .collage, .calcs__tabs .calcs__tab, .atc-faq__item, .rx-tile, [data-reveal]):not(.is-in) {
  opacity: 0;
  translate: 0 16px;
}
html.js-motion :is(.section-head, .lcard, .acard, .type2, .tq, .pcard, .post-row, .post-feature, .usp li, .feats li, .steps li, .mv-card, .reg-chips li, .hot, .ptable, .cta-band, .slim-cta, .collage, .calcs__tabs .calcs__tab, .atc-faq__item, .rx-tile, [data-reveal]).is-in {
  animation: atc-rise .55s var(--mo-ease) var(--rd, 0ms) backwards;
}

/* ---------- 2. Accent bars draw in ---------- */
html.js-motion :is(.prose h2, .atc-faq__title, .ptable-wrap h2, .eyebrow)::before {
  transform-origin: left center;
  transition: transform .6s var(--mo-ease) .12s;
}
html.js-motion :is(.prose h2, .atc-faq__title, .ptable-wrap h2, .eyebrow):not(.is-in)::before { transform: scaleX(0); }

/* ---------- 3. Home opening (CSS only, transform only so LCP is never delayed) ---------- */
/* Timeline (ms): kicker 0-500 | words 60+70n, 700 each (last lands ~1040) | photo wipe 50-1150 + Ken Burns
   | lead 500, buttons 620, proof 740 (blur-to-sharp, 750) | faces 900+80n | underline draw 1000-1450, shimmer 1450-2350
   | inset 550, badge 750, card 900 (pop 700) | primary shine 1350 | search bar 1200 | then idle: badge/card float, glow breathes.
   All inside no-preference so reduced motion renders the plain final state. No JS needed (JS only adds pointer parallax).
   Parallax uses the independent `translate` property (set by motion.js), animations here use `transform`/opacity/clip-path/filter. */
@media (prefers-reduced-motion: no-preference) {
  .hero2 { --hy: 24px; --hb: 6px; --hp: 28px; }
  @keyframes atc-word { from { transform: translateY(105%); } to { transform: translateY(0); } }
  @keyframes atc-drop { from { opacity: 0; transform: translateY(-16px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes atc-blur-rise { from { opacity: 0; filter: blur(var(--hb)); transform: translateY(var(--hy)); } to { opacity: 1; filter: blur(0); transform: translateY(0); } }
  @keyframes atc-pop-face { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
  @keyframes atc-wipe { from { clip-path: inset(100% 0 0 0 round var(--r-xl)); } to { clip-path: inset(-60px -60px -100px -60px round var(--r-xl)); } }
  @keyframes atc-kenburns { from { transform: scale(1.15); } to { transform: scale(1.02); } }
  @keyframes atc-pop { from { opacity: 0; transform: translateY(var(--hp)) scale(.9); } to { opacity: 1; transform: translateY(0) scale(1); } }
  @keyframes atc-draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  @keyframes atc-shimmer { from { background-position: 0% 0, 0 0; } to { background-position: 100% 0, 0 0; } }
  @keyframes atc-shine { from { transform: translateX(-160%) skewX(-20deg); } to { transform: translateX(420%) skewX(-20deg); } }
  @keyframes atc-ring { 0% { transform: scale(1); opacity: .55; } 70%, 100% { transform: scale(3.4); opacity: 0; } }
  @keyframes atc-float-a { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(-6px); } 75% { transform: translateY(6px); } }
  @keyframes atc-float-b { 0%, 100% { transform: translateY(0); } 25% { transform: translateY(6px); } 75% { transform: translateY(-6px); } }
  @keyframes atc-glow { from { transform: translate(-3%, -2%) scale(1); opacity: .75; } to { transform: translate(6%, 5%) scale(1.18); opacity: 1; } }

  /* headline: each word slides up inside its own mask (padding/negative margin keeps descenders and tight tracking unclipped) */
  .hero2 h1 .w { display: inline-block; overflow: hidden; vertical-align: top; padding: 0 .04em .16em; margin: 0 -.04em -.16em; }
  .hero2 h1 .w > span { display: inline-block; animation: atc-word .7s cubic-bezier(.16, 1, .3, 1) calc(60ms + var(--wi, 0) * 70ms) backwards; }
  .hero2 h1 > .w:nth-of-type(2) > span { --wi: 1; }
  .hero2 h1 > .w:nth-of-type(3) > span { --wi: 2; }
  .hero2 h1 em .w:nth-of-type(1) > span { --wi: 3; }
  .hero2 h1 em .w:nth-of-type(2) > span { --wi: 4; }
  .hero2 h1 em::after { transform-origin: left center;
    background: linear-gradient(100deg, transparent 44%, rgba(255, 255, 255, .9) 50%, transparent 56%) 0% 0 / 300% 100% no-repeat,
      linear-gradient(90deg, var(--red-500), rgba(227, 43, 43, 0));
    animation: atc-draw .45s cubic-bezier(.65, 0, .25, 1) 1s backwards, atc-shimmer .9s ease-in-out 1.45s backwards; }

  /* kicker + live dot */
  .hero2__kicker { animation: atc-drop .5s var(--mo-ease) backwards; }
  .hero2__kicker .dot { position: relative; }
  .hero2__kicker .dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--red-500); pointer-events: none;
    animation: atc-ring 2s ease-out 1s infinite backwards; }

  /* lead, buttons, proof */
  .hero2__lead { animation: atc-blur-rise .75s var(--mo-ease) .5s backwards; }
  .hero2 .btn-row { animation: atc-blur-rise .75s var(--mo-ease) .62s backwards; }
  .hero2__proof { animation: atc-blur-rise .75s var(--mo-ease) .74s backwards; }
  .hero2__proof .faces span { animation: atc-pop-face .45s cubic-bezier(.34, 1.56, .64, 1) backwards; }
  .hero2__proof .faces span:nth-child(1) { animation-delay: .9s; }
  .hero2__proof .faces span:nth-child(2) { animation-delay: .98s; }
  .hero2__proof .faces span:nth-child(3) { animation-delay: 1.06s; }
  .hero2__proof .faces span:nth-child(4) { animation-delay: 1.14s; }
  .hero2 .btn--primary { position: relative; overflow: hidden; }
  .hero2 .btn--primary::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; pointer-events: none;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .45), transparent); transform: translateX(-160%) skewX(-20deg);
    animation: atc-shine .9s ease-in-out 1.35s backwards; }

  /* media: wipe + Ken Burns, then pops, then idle float */
  .hero2__photo { animation: atc-wipe 1.1s cubic-bezier(.16, 1, .3, 1) .05s backwards; }
  .hero2__photo img { animation: atc-kenburns 7s cubic-bezier(.16, .6, .3, 1) backwards; }
  .hero2__inset { animation: atc-pop .7s var(--mo-ease) .55s backwards; }
  .hero2__badge { animation: atc-pop .7s var(--mo-ease) .75s backwards, atc-float-a 5s ease-in-out 1.5s infinite; }
  .hero2__listing { animation: atc-pop .7s var(--mo-ease) .9s backwards, atc-float-b 7s ease-in-out 1.7s infinite; }

  /* background glow breathes/drifts (oversized so the drift never shows an edge) */
  .hero2::before { inset: -25%; background: radial-gradient(40% 40% at 27% 23%, rgba(227, 43, 43, .20) 0%, rgba(227, 43, 43, 0) 100%);
    animation: atc-glow 14s ease-in-out infinite alternate; }

  /* search bar (home only) rises at the end of the intro */
  .hero2 + .section .search-wrap { animation: atc-pop .7s var(--mo-ease) 1.2s backwards; --hp: 32px; }

  @media (max-width: 899px) {
    .hero2 { --hy: 14px; --hb: 4px; --hp: 16px; }
    .hero2__photo { animation-duration: .9s; }
    .hero2 + .section .search-wrap { --hp: 18px; }
  }
}

/* ---------- 4. Hover: harmonised lift + photo zoom ---------- */
.lcard { transition: transform .35s var(--mo-ease), box-shadow .35s var(--mo-ease); }
.lcard:hover, .pcard:hover, .acard:hover, .type2:hover, .mv-card:hover { transform: translateY(-4px); }
.lcard__media img { transition: transform .6s var(--mo-ease); }
.lcard:hover .lcard__media img { transform: scale(1.04); }
.pcard { transition: transform .35s var(--mo-ease), box-shadow .35s var(--mo-ease), border-color .25s; }
.acard { transition: transform .35s var(--mo-ease), box-shadow .35s var(--mo-ease); }
.acard:hover { box-shadow: var(--shadow-3); }
.acard img { transition: transform .8s var(--mo-ease); }
.acard:hover img { transform: scale(1.04); }
.type2 { transition: transform .35s var(--mo-ease), box-shadow .35s var(--mo-ease), border-color .25s; }

/* ---------- 5. Buttons ---------- */
.btn { transition: background-color .25s ease, color .25s ease, border-color .25s ease, box-shadow .25s ease, transform .2s var(--mo-ease); }
.btn:active, .calcs__tab:active { transform: scale(.97); }

/* ---------- 6. WhatsApp pulse (once) ---------- */
@keyframes atc-pulse-red {
  0% { box-shadow: 0 0 0 0 rgba(227, 43, 43, .55), 0 0 0 0 rgba(227, 43, 43, .35); }
  70% { box-shadow: 0 0 0 12px rgba(227, 43, 43, 0), 0 0 0 4px rgba(227, 43, 43, .1); }
  100% { box-shadow: 0 0 0 16px rgba(227, 43, 43, 0), 0 0 0 18px rgba(227, 43, 43, 0); }
}
@keyframes atc-pulse-green {
  0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, .6), 0 0 0 0 rgba(37, 211, 102, .35); }
  70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0), 0 0 0 4px rgba(37, 211, 102, .1); }
  100% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0), 0 0 0 18px rgba(37, 211, 102, 0); }
}
.header-cta .btn--primary.wa-pulse { animation: atc-pulse-red 1.4s ease-out 1; }
.action-bar .btn--wa.wa-pulse { animation: atc-pulse-green 1.4s ease-out 1; }

/* ---------- 7. FAQ: closing state keeps the icon in step with the slide ---------- */
.atc-faq__item.is-closing .atc-faq__q::after, .faq details.is-closing summary::after { transform: none; }
.atc-faq__item.is-closing { box-shadow: none; }

/* ---------- 8. Calculator panel crossfade (class added by tools.js on tab change) ---------- */
@keyframes atc-panel-in { from { opacity: 0; translate: 0 8px; } to { opacity: 1; translate: 0 0; } }
.calc.is-enter { animation: atc-panel-in .4s var(--mo-ease) backwards; }

/* ---------- Reduced motion: everything just shows, nothing moves ---------- */
@media (prefers-reduced-motion: reduce) {
  .calc.is-enter { animation: none !important; }
  .lcard:hover, .pcard:hover, .acard:hover, .type2:hover, .mv-card:hover,
  .lcard:hover .lcard__media img, .acard:hover img, .btn:active, .calcs__tab:active { transform: none; }
}