/*
 * Zoey motion: hover states and the hero pre-hide for the main pages.
 * Loaded only on the pages listed in src/lib/motion.mjs, after the Webflow CSS. Scroll reveals are in
 * public/js/of-motion.js. Hover effects go on things you can click only, and move with `translate` / `scale`
 * (separate from `transform`, which Webflow, Swiper and GSAP use).
 * (Noah's slow zoom on large photos isn't used: no Zoey photo sits in a wrapper that clips it.)
 */
:root {
  --ofm-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Hero copy stays hidden from first paint until of-motion.js takes over (html.ofm-ready). If the script never
   runs, the failsafe shows it after 3s; if the script runs later than that, it leaves what's on screen as it is. */
@media (prefers-reduced-motion: no-preference) {
  html.ofm-js:not(.ofm-ready) :is(.hero-section-new .div-block-549 > *, .hero-section-new .div-block-503 > :not(.div-block-549),
    .hero-section-new .div-block-503-copy > *, .zoey-hero-sec .left-text-block > *, .zoey-fertility-sec .main-blocks-holder > *,
    .zoey-hero-sec .right-img-block-3, .zoey-fertility-sec .right-img-block-3, .section-main .div-block-219 > h1,
    .section-main .container-5 > :last-child, .div-block-288 .water > *) {
    opacity: 0;
    animation: ofm-failsafe 0s 3s forwards;
  }
}
@keyframes ofm-failsafe { to { opacity: 1; } }

/* ---------- Transitions (all devices) ---------- */
.sheet-trigger .ng-underlined, .faq-question-block > :first-child, .faq-ques-block > :first-child, .faq-heading > :first-child {
  transition: translate .45s var(--ofm-ease);
}
a.ng-btn-primary, a.ng-btn-secondary, a.green-button, a.green-button-2, a.journal-button, a[class^="btn-main"] {
  transition: background-color .25s, color .25s, border-color .25s, scale .35s var(--ofm-ease), box-shadow .35s var(--ofm-ease);
}
a.ng-btn-primary:active, a.ng-btn-secondary:active, a.green-button:active, a.green-button-2:active, a.journal-button:active,
a[class^="btn-main"]:active {
  scale: .97;
}
a.footer-link-new, a.footer_link-small, a.insta:not(.under-line) {
  text-decoration-line: underline;
  text-decoration-color: transparent;
  text-underline-offset: .4em;
  transition: text-decoration-color .3s, text-underline-offset .3s var(--ofm-ease), opacity .3s;
}

/* ---------- Hover (mouse / trackpad) and keyboard focus ---------- */
@media (hover: hover) and (pointer: fine) {
  /* Buttons */
  a.ng-btn-primary:hover, a.ng-btn-secondary:hover, a.green-button:hover, a.green-button-2:hover, a.journal-button:hover,
  a[class^="btn-main"]:hover {
    scale: 1.04;
    box-shadow: 0 12px 28px -12px rgb(48 45 40 / .45);
  }

  /* Home: "Looking for something else? Browse all treatments →" (opens the treatments sheet) */
  .sheet-trigger:hover .ng-underlined { translate: 6px 0; }

  /* FAQ rows: the question slides over */
  .faq-question-block:hover > :first-child, .faq-ques-block:hover > :first-child, .faq-heading:hover > :first-child { translate: 8px 0; }

  /* Footer links: underline fades in */
  a.footer-link-new:hover, a.footer_link-small:hover, a.insta:not(.under-line):hover {
    text-decoration-color: currentColor;
    text-underline-offset: .22em;
  }
}

:is(a.ng-btn-primary, a.ng-btn-secondary, a.green-button, a.green-button-2, a.journal-button, a[class^="btn-main"]):focus-visible {
  scale: 1.04;
  box-shadow: 0 12px 28px -12px rgb(48 45 40 / .45);
}
:is(a.footer-link-new, a.footer_link-small, a.insta:not(.under-line)):focus-visible {
  text-decoration-color: currentColor;
  text-underline-offset: .22em;
}

@media (prefers-reduced-motion: reduce) {
  .sheet-trigger .ng-underlined, .faq-question-block > :first-child, .faq-ques-block > :first-child, .faq-heading > :first-child {
    transition: none;
  }
  a.ng-btn-primary, a.ng-btn-secondary, a.green-button, a.green-button-2, a.journal-button, a[class^="btn-main"] {
    transition-property: background-color, color, border-color, box-shadow;
  }
  .sheet-trigger:hover .ng-underlined, .faq-question-block:hover > :first-child, .faq-ques-block:hover > :first-child,
  .faq-heading:hover > :first-child {
    translate: none;
  }
  a.ng-btn-primary, a.ng-btn-secondary, a.green-button, a.green-button-2, a.journal-button, a[class^="btn-main"] { scale: none !important; }
}