/*
 * Noah motion: hover states, the hero pre-hide and scroll-linked image zoom 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).
 */
: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(.home-page-hero-sec .hero-text-wrapper > *, .home-page-hero-sec .div-block-512,
    .home-page-hero-sec .div-block-513, .home-page-hero-sec .category-sliders > *, .ed-hero-container .slide,
    .wl-badge-absolute, [class^="ed-hero-col"] > *) {
    opacity: 0;
    animation: ofm-failsafe 0s 3s forwards;
  }
}
@keyframes ofm-failsafe { to { opacity: 1; } }

/* Large photos zoom out slowly as they scroll past (browsers with scroll-driven animations; others stay still).
   Each sits in a rounded wrapper that clips it. */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .hard-enough-bg, .bg-fullscreen, .simplified-image {
      animation: ofm-drift linear both;
      animation-timeline: view();
      animation-range: entry 0% exit 100%;
    }
  }
}
@keyframes ofm-drift { from { scale: 1.14; } to { scale: 1; } }

/* ---------- Transitions (all devices) ---------- */
.category-card .category-bg-new { transition: scale 1.2s var(--ofm-ease); }
.category-title-wrapper, .condition-image, .condition-name > :last-child, .cta-arrow-holder, .arrow-svg, .arrow-17px,
[class^="faq-question-block"] > :first-child, [class^="feature_title"] > :first-child {
  transition: translate .45s var(--ofm-ease), rotate .45s var(--ofm-ease);
}
.category-cta, .ed-cta-button, [class^="button-orange"], [class*=" button-orange"], [class^="button-darkgreen"] {
  transition: background-color .25s, color .25s, scale .35s var(--ofm-ease), box-shadow .35s var(--ofm-ease);
}
.category-cta:active, .ed-cta-button:active, [class^="button-orange"]:active, [class*=" button-orange"]:active,
[class^="button-darkgreen"]:active {
  scale: .97;
}
a[class^="footer-link"], .footer_link-small, .phone-number, .hl-source {
  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) {
  /* Home: category cards in the hero */
  .category-card:hover .category-bg-new { scale: 1.06; }
  .category-card:hover .category-title-wrapper { translate: 0 -6px; }

  /* Home: "Explore … treatments" product cards — the bottle lifts and tilts, the arrow nudges */
  .condition-card:hover .condition-image { translate: 0 -10px; rotate: -4deg; }
  .condition-card:hover .condition-name > :last-child { translate: 5px 0; }

  /* Buttons */
  .category-cta:hover, .ed-cta-button:hover, [class^="button-orange"]:hover, [class*=" button-orange"]:hover,
  [class^="button-darkgreen"]:hover {
    scale: 1.04;
    box-shadow: 0 12px 28px -12px rgb(48 45 40 / .45);
  }
  .category-cta:hover { background-color: rgb(255 255 255 / .14); }
  .category-cta.black:hover { background-color: rgb(48 45 40 / .08); }
  .category-cta:hover .arrow-svg, .ed-cta-button:hover .arrow-svg { translate: 3px -3px; }

  /* ED / hair loss / weight loss medication cards: the price link's arrow nudges */
  .med-card-price-new:hover .arrow-17px { translate: 3px -3px; }

  /* "Am I hard enough?" / hair loss answer rows */
  .cta-item:hover .cta-arrow-holder { translate: 8px 0; }

  /* FAQ and "why us?" rows: the question slides over */
  [class^="faq-question-block"]:hover > :first-child, [class^="feature_title"]:hover > :first-child { translate: 8px 0; }

  /* Footer and inline links: underline fades in */
  a[class^="footer-link"]:hover, .footer_link-small:hover, .phone-number:hover, .hl-source:hover {
    text-decoration-color: currentColor;
    text-underline-offset: .22em;
  }
}

:is(.category-cta, .ed-cta-button, [class^="button-orange"], [class*=" button-orange"], [class^="button-darkgreen"]):focus-visible {
  scale: 1.04;
  box-shadow: 0 12px 28px -12px rgb(48 45 40 / .45);
}
:is(a[class^="footer-link"], .footer_link-small, .phone-number, .hl-source):focus-visible {
  text-decoration-color: currentColor;
  text-underline-offset: .22em;
}

@media (prefers-reduced-motion: reduce) {
  .category-card .category-bg-new, .category-title-wrapper, .condition-image, .condition-name > :last-child,
  .cta-arrow-holder, .arrow-svg, .arrow-17px, [class^="faq-question-block"] > :first-child, [class^="feature_title"] > :first-child,
  .category-cta, .ed-cta-button, [class^="button-orange"], [class*=" button-orange"], [class^="button-darkgreen"] {
    transition-property: background-color, color, box-shadow;
  }
  .category-card:hover .category-bg-new, .category-card:hover .category-title-wrapper, .condition-card:hover .condition-image,
  .condition-card:hover .condition-name > :last-child, .cta-item:hover .cta-arrow-holder, .category-cta:hover .arrow-svg,
  .ed-cta-button:hover .arrow-svg, .med-card-price-new:hover .arrow-17px, [class^="faq-question-block"]:hover > :first-child,
  [class^="feature_title"]:hover > :first-child {
    translate: none; rotate: none; scale: none;
  }
  .category-cta, .ed-cta-button, [class^="button-orange"], [class*=" button-orange"], [class^="button-darkgreen"] { scale: none !important; }
}