/* ==========================================================================
   Claps Learn — micro-interaction layer (Phase 1)
   Loaded on the React app (index.html) and on every static page.

   Rules of the road
   - Only translate / scale / rotate / opacity / colour / shadow are animated,
     so nothing triggers layout or shifts the page.
   - The individual `translate` / `scale` / `rotate` properties are used on
     purpose: they compose with Tailwind's `transform` utilities instead of
     overriding them.
   - Every movement lives inside `prefers-reduced-motion: no-preference`.
     With reduced motion on, users get instant state changes only.
   - Hover effects are limited to devices that actually hover.
   ========================================================================== */

:root {
  --m-fast: 120ms;
  --m-base: 200ms;
  --m-slow: 320ms;
  --m-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
  --m-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --m-ring: #0d9488;
  --m-lift-shadow: 0 14px 32px -16px rgba(15, 23, 42, 0.28);
  --m-header-shadow: 0 8px 24px -16px rgba(15, 23, 42, 0.35);
}

/* Static-page FAQ: expose state to assistive tech styling hooks (no motion). */
.faq-item .faq-question { cursor: pointer; }

@media (prefers-reduced-motion: no-preference) {

  /* ---------- 1. Buttons & CTAs ---------------------------------------- */
  :is(a, button).inline-flex.justify-center:not(:disabled),
  .reels-stories-cta,
  .btn,
  .ss-root :is(button, .ss-btn) {
    transition-property: color, background-color, border-color, box-shadow, opacity, translate, scale;
    transition-duration: var(--m-base);
    transition-timing-function: var(--m-ease);
  }

  .m-press {
    transition-property: color, background-color, border-color, box-shadow, opacity, transform, scale;
    transition-duration: var(--m-base);
    transition-timing-function: var(--m-ease);
  }

  :is(a, button).inline-flex.justify-center:not(:disabled):active,
  .m-press:not(:disabled):active,
  .reels-stories-cta:active,
  .btn:active,
  .ss-root button:not(:disabled):active,
  header.fixed nav :is(a, button):active,
  .nav-link:active {
    scale: 0.97;
    transition-duration: var(--m-fast);
  }

  /* Arrow / chevron icons inside actions nudge forward. */
  :is(a, button) svg:is([class*="lucide-arrow-right"], [class*="lucide-chevron-right"], [class*="lucide-arrow-up-right"]) {
    transition: translate var(--m-base) var(--m-ease);
  }

  /* ---------- 2. Header & navigation ----------------------------------- */
  header.fixed.top-0,
  .site-header {
    transition: box-shadow var(--m-slow) var(--m-ease), background-color var(--m-slow) var(--m-ease);
  }
  html.m-scrolled header.fixed.top-0,
  html.m-scrolled .site-header {
    box-shadow: var(--m-header-shadow);
  }

  /* Desktop mega-menu panels mount on open: fade + drop in. */
  header.fixed > div.absolute.top-full {
    animation: m-drop var(--m-base) var(--m-ease) both;
  }

  /* Static pages: underline grows from the left. */
  .nav-link { position: relative; }
  .nav-link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -6px;
    height: 2px;
    border-radius: 2px;
    background: var(--primary-color, #0d9488);
    scale: 0 1;
    transform-origin: left center;
    transition: scale var(--m-base) var(--m-ease);
  }
  .nav-link.active::after { scale: 1 1; }

  /* ---------- 3. Clickable cards (tagged .m-card by motion.js) --------- */
  .m-card,
  .related-card,
  .blog-index-card {
    transition-property: translate, box-shadow, border-color, background-color;
    transition-duration: var(--m-base);
    transition-timing-function: var(--m-ease);
  }
  .m-card:active,
  .related-card:active,
  .blog-index-card:active {
    scale: 0.99;
    transition-duration: var(--m-fast);
  }
  .m-zoom { transition: scale var(--m-slow) var(--m-ease); }

  /* ---------- 4. FAQ accordions (static pages) ------------------------- */
  .faq-item {
    transition: border-color var(--m-base) var(--m-ease), box-shadow var(--m-base) var(--m-ease);
  }
  .faq-item.active { box-shadow: 0 10px 28px -20px rgba(13, 148, 136, 0.55); }
  .faq-item .faq-answer {
    transition: max-height var(--m-slow) var(--m-ease), padding var(--m-slow) var(--m-ease) !important;
  }
  .faq-item .faq-answer > * {
    opacity: 0;
    translate: 0 -4px;
    transition: opacity var(--m-base) var(--m-ease), translate var(--m-base) var(--m-ease);
  }
  .faq-item.active .faq-answer > * {
    opacity: 1;
    translate: 0 0;
    transition-delay: 80ms;
  }
  .faq-item .faq-icon { transition: transform var(--m-slow) var(--m-spring) !important; }

  /* React accordions: soften the chevron turn. */
  [data-radix-collection-item][aria-expanded] > svg {
    transition: transform var(--m-slow) var(--m-spring);
  }

  /* ---------- 5. Floating action buttons ------------------------------- */
  html.m-intro button.fixed.bottom-6.right-6,
  html.m-intro .floating-whatsapp {
    animation: m-fab-in 520ms var(--m-spring) 900ms both;
  }
  html.m-intro #claps-widget-root #claps-toggle-wrapper {
    animation: m-fab-in 520ms var(--m-spring) 1050ms both !important;
  }
  html.m-nudge button.fixed.bottom-6.right-6,
  html.m-nudge .floating-whatsapp {
    animation: m-nudge 900ms var(--m-ease) both;
  }

  /* ---------- 6. Focus ------------------------------------------------- */
  :where(a, button, summary, [role="button"], [tabindex]):focus-visible {
    animation: m-focus 180ms var(--m-ease);
  }

  /* ---------- 7. Inline text links in articles ------------------------- */
  :is(.blog-article, .article-links, .faq-answer) a:not(.btn) {
    text-decoration-color: rgba(13, 148, 136, 0.35);
    text-underline-offset: 3px;
    transition: color var(--m-base) var(--m-ease), text-decoration-color var(--m-base) var(--m-ease);
  }

  /* ---------- Hover (pointer devices only) ----------------------------- */
  @media (hover: hover) and (pointer: fine) {
    :is(a, button).inline-flex.justify-center:not(:disabled):hover,
    .reels-stories-cta:hover,
    .btn:hover {
      translate: 0 -1px;
    }
    /* Static .btn-primary already lifts with transform; don't double it. */
    .btn-primary:hover { translate: none; }

    :is(a, button):hover svg:is([class*="lucide-arrow-right"], [class*="lucide-chevron-right"]) { translate: 3px 0; }
    :is(a, button):hover svg[class*="lucide-arrow-up-right"] { translate: 2px -2px; }

    .nav-link:hover::after { scale: 1 1; }

    .m-card:hover,
    .related-card:hover,
    .blog-index-card:hover {
      translate: 0 -3px;
      box-shadow: var(--m-lift-shadow);
      border-color: rgba(13, 148, 136, 0.35);
    }
    .blog-index-card:hover { transform: none; }
    .m-card:hover .m-zoom { scale: 1.03; }

    :is(.blog-article, .article-links, .faq-answer) a:not(.btn):hover {
      text-decoration-color: currentColor;
    }
  }
}

@keyframes m-drop {
  from { opacity: 0; translate: 0 -6px; }
  to { opacity: 1; translate: 0 0; }
}

@keyframes m-fab-in {
  from { opacity: 0; scale: 0.6; }
  to { opacity: 1; scale: 1; }
}

@keyframes m-nudge {
  0%, 100% { rotate: 0deg; scale: 1; }
  20% { rotate: -10deg; scale: 1.06; }
  40% { rotate: 8deg; }
  60% { rotate: -5deg; }
  80% { rotate: 2deg; }
}

@keyframes m-focus {
  from { outline-offset: 6px; }
}

/* ==========================================================================
   Phase 2 — page moments
   Items only wait hidden (.m-await) when motion.js found them below the fold,
   so nothing visible ever blinks out.
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {

  /* Staggered groups ---------------------------------------------------- */
  .m-grow { transform-origin: bottom center; }
  .m-await .m-grow { scale: 1 0; }
  .m-in .m-grow {
    scale: 1 1;
    transition: scale 600ms var(--m-ease);
    transition-delay: calc(var(--m-i, 0) * 70ms);
  }

  .m-await .m-pop { opacity: 0; scale: 0.4; }
  .m-in .m-pop {
    opacity: 1;
    scale: 1;
    transition: opacity 240ms var(--m-ease), scale 420ms var(--m-spring);
    transition-delay: calc(120ms + var(--m-i, 0) * 70ms);
  }

  /* Individual Tuition 1-2-3 row: a connector grows between the numbers. */
  @media (min-width: 768px) {
    .m-steps { position: relative; }
    .m-steps::before {
      content: "";
      position: absolute;
      top: 32px;
      left: 16.66%;
      right: 16.66%;
      height: 2px;
      border-radius: 2px;
      background: linear-gradient(90deg, rgba(13, 148, 136, 0.15), rgba(13, 148, 136, 0.55), rgba(13, 148, 136, 0.15));
      transform-origin: left center;
      scale: 0 1;
      transition: scale 900ms var(--m-ease) 150ms;
      z-index: 0;
    }
    .m-steps.m-in::before { scale: 1 1; }
    .m-steps > * { position: relative; z-index: 1; }
    .m-steps > * > :first-child { transition: scale 380ms var(--m-spring); }
    .m-steps.m-await > * > :first-child { scale: 0.7; }
    .m-steps.m-in > :nth-child(1) > :first-child { transition-delay: 100ms; }
    .m-steps.m-in > :nth-child(2) > :first-child { transition-delay: 450ms; }
    .m-steps.m-in > :nth-child(3) > :first-child { transition-delay: 800ms; }
  }

  /* Timelines draw with scroll (--m-progress set by motion.js) ----------- */
  .m-spine::after {
    content: "";
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    transform-origin: top center;
    scale: 1 var(--m-progress, 0);
    transition: scale 120ms linear;
  }
  .about-journey-timeline.m-spine::after {
    left: 50%;
    top: 0;
    bottom: 3.5rem;
    width: 3px;
    translate: -50% 0;
    background: linear-gradient(180deg, #14b8a6, #0d9488);
    z-index: 0;
  }
  @media (max-width: 900px) {
    .about-journey-timeline.m-spine::after { left: 1.25rem; translate: none; }
  }
  .methodology-timeline.m-spine::after { display: none; }
  @media (min-width: 768px) {
    .methodology-timeline.m-spine::after {
      display: block;
      left: 1.55rem;
      top: 2rem;
      bottom: 2rem;
      width: 2px;
      background: #0d9488;
      z-index: 1;
    }
  }

  .about-journey-node,
  .methodology-marker {
    transition: scale 360ms var(--m-spring), box-shadow 360ms var(--m-ease);
  }
  .about-journey-node.m-reached {
    scale: 1.3;
    box-shadow: 0 0 0 2px currentColor, 0 0 0 7px rgba(13, 148, 136, 0.16);
  }
  .methodology-marker.m-reached {
    scale: 1.08;
    box-shadow: 0 0 0 6px rgba(13, 148, 136, 0.14), 0 8px 24px rgba(15, 23, 42, 0.12);
  }

  /* Small hover touches ------------------------------------------------- */
  .reels-story-card__play { transition: scale var(--m-base) var(--m-spring); }
  .comparison-card-claps li { transition: background-color var(--m-base) var(--m-ease), translate var(--m-base) var(--m-ease); }

  @media (hover: hover) and (pointer: fine) {
    .reels-story-card:hover .reels-story-card__play { scale: 1.12; }
    .comparison-card-claps li:hover { background-color: rgba(0, 208, 148, 0.08); translate: 2px 0; }
  }
}

/* ==========================================================================
   Phase 3 — blog reading progress
   The bar is a status indicator, not decoration, so it stays for everyone;
   only its smoothing transition depends on the motion preference.
   ========================================================================== */
.m-read-progress {
  position: fixed;
  top: 72px;
  left: 0;
  right: 0;
  height: 3px;
  z-index: 101;
  pointer-events: none;
  background: linear-gradient(90deg, #0d9488, #14b8a6);
  transform-origin: left center;
  transform: scaleX(var(--m-read, 0));
}
@media (prefers-reduced-motion: no-preference) {
  .m-read-progress { transition: transform 80ms linear; }
}