/* MadhavAI homepage motion layer.
   Performance rules: CSS transforms/opacity only, no animation library,
   no parallax, continuous motion only on larger screens, and full
   prefers-reduced-motion support. Scoped to the public homepage. */

/* Keep interactive motion GPU-friendly and avoid layout movement. */
body:has(header a[href="#subjects"]):has(main #faq) main a,
body:has(header a[href="#subjects"]):has(main #faq) main button,
body:has(header a[href="#subjects"]):has(main #faq) header a,
body:has(header a[href="#subjects"]):has(main #faq) header button {
  -webkit-tap-highlight-color: transparent;
}

/* Hero Tutor: one-time reveal. The wrapper already uses the lightweight
   IntersectionObserver Reveal component; this adds a soft finish to the card. */
@keyframes madhavaiTutorEnter {
  from { opacity: 0.72; transform: translate3d(14px, 8px, 0) scale(0.985); }
  to   { opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
}

@keyframes madhavaiTutorFloat {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -4px, 0); }
}

@keyframes madhavaiMessageIn {
  from { opacity: 0; transform: translate3d(0, 7px, 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}

body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) > div {
  animation: madhavaiTutorEnter 520ms cubic-bezier(.22,.75,.24,1) 100ms both;
  transform: translateZ(0);
}

/* The Tutor conversation demonstrates the product once, then stays still. */
body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) .space-y-3.py-5.text-sm > div:nth-child(1) {
  animation: madhavaiMessageIn 360ms cubic-bezier(.22,.75,.24,1) 260ms both;
}
body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) .space-y-3.py-5.text-sm > div:nth-child(2) {
  animation: madhavaiMessageIn 420ms cubic-bezier(.22,.75,.24,1) 430ms both;
}
body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) .space-y-3.py-5.text-sm > div:nth-child(3) {
  animation: madhavaiMessageIn 380ms cubic-bezier(.22,.75,.24,1) 650ms both;
}
body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) .space-y-3.py-5.text-sm > div:nth-child(2) .grid > span:nth-child(1) {
  animation: madhavaiMessageIn 300ms ease-out 560ms both;
}
body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) .space-y-3.py-5.text-sm > div:nth-child(2) .grid > span:nth-child(2) {
  animation: madhavaiMessageIn 300ms ease-out 620ms both;
}
body:has(header a[href="#subjects"]):has(main #faq)
main > section:first-of-type > div > div:nth-child(2) .space-y-3.py-5.text-sm > div:nth-child(2) .grid > span:nth-child(3) {
  animation: madhavaiMessageIn 300ms ease-out 680ms both;
}

/* Desktop/laptop gets the subtle living AI effect. Phones stay static after
   the entrance animation to save battery/GPU time and keep scrolling smooth. */
@media (min-width: 768px) and (prefers-reduced-motion: no-preference) {
  body:has(header a[href="#subjects"]):has(main #faq)
  main > section:first-of-type > div > div:nth-child(2) > div {
    animation:
      madhavaiTutorEnter 520ms cubic-bezier(.22,.75,.24,1) 100ms both,
      madhavaiTutorFloat 6.5s ease-in-out 1.1s infinite;
    will-change: transform;
  }
}

/* Hover micro-interactions are intentionally limited to devices that really
   have hover (mouse/trackpad), so touch devices do not get sticky hover states. */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  body:has(header a[href="#subjects"]):has(main #faq)
  main a[href*="mode=signup"],
  body:has(header a[href="#subjects"]):has(main #faq)
  main a[href="#subjects"] {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
  }

  body:has(header a[href="#subjects"]):has(main #faq)
  main a[href*="mode=signup"]:hover,
  body:has(header a[href="#subjects"]):has(main #faq)
  main a[href="#subjects"]:hover {
    transform: translate3d(0, -2px, 0);
  }

  body:has(header a[href="#subjects"]):has(main #faq)
  main a[href*="mode=signup"] svg,
  body:has(header a[href="#subjects"]):has(main #faq)
  #subjects a svg {
    transition: transform 180ms ease;
  }

  body:has(header a[href="#subjects"]):has(main #faq)
  main a[href*="mode=signup"]:hover svg,
  body:has(header a[href="#subjects"]):has(main #faq)
  #subjects a:hover svg {
    transform: translate3d(3px, 0, 0);
  }

  body:has(header a[href="#subjects"]):has(main #faq)
  #why .rounded-2xl,
  body:has(header a[href="#subjects"]):has(main #faq)
  #how .rounded-2xl,
  body:has(header a[href="#subjects"]):has(main #faq)
  main > section:nth-of-type(5) .rounded-2xl,
  body:has(header a[href="#subjects"]):has(main #faq)
  #parents article,
  body:has(header a[href="#subjects"]):has(main #faq)
  #faq button {
    transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease, background-color 180ms ease;
  }

  body:has(header a[href="#subjects"]):has(main #faq)
  #why .rounded-2xl:hover,
  body:has(header a[href="#subjects"]):has(main #faq)
  #how .rounded-2xl:hover,
  body:has(header a[href="#subjects"]):has(main #faq)
  main > section:nth-of-type(5) .rounded-2xl:hover,
  body:has(header a[href="#subjects"]):has(main #faq)
  #parents article:hover {
    transform: translate3d(0, -3px, 0);
  }

  body:has(header a[href="#subjects"]):has(main #faq)
  #why .grid.h-11.w-11,
  body:has(header a[href="#subjects"]):has(main #faq)
  main > section:nth-of-type(5) .grid.h-11.w-11,
  body:has(header a[href="#subjects"]):has(main #faq)
  #parents article > div:first-child svg {
    transition: transform 180ms ease;
  }

  body:has(header a[href="#subjects"]):has(main #faq)
  #why .rounded-2xl:hover .grid.h-11.w-11,
  body:has(header a[href="#subjects"]):has(main #faq)
  main > section:nth-of-type(5) .rounded-2xl:hover .grid.h-11.w-11,
  body:has(header a[href="#subjects"]):has(main #faq)
  #parents article:hover > div:first-child svg {
    transform: scale(1.045);
  }

  body:has(header a[href="#subjects"]):has(main #faq) header {
    transition: box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
  }

  body:has(header a[href="#subjects"]):has(main #faq) header a[href="/"] img {
    transition: transform 180ms ease, box-shadow 180ms ease;
  }

  body:has(header a[href="#subjects"]):has(main #faq) header a[href="/"]:hover img {
    transform: scale(1.035);
  }
}

/* Motion accessibility: users asking for reduced motion get a fully static
   experience without losing any content or interaction. */
@media (prefers-reduced-motion: reduce) {
  body:has(header a[href="#subjects"]):has(main #faq) *,
  body:has(header a[href="#subjects"]):has(main #faq) *::before,
  body:has(header a[href="#subjects"]):has(main #faq) *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
  }
}