/* The Incubator Hub — animation helper styles (loaded site-wide)
 * ----------------------------------------------------------------
 * Hover micro-interactions that complement /assets/js/gsap-animations.js.
 * Everything is gated behind (hover: hover) so touch devices never get
 * sticky hover states, and (prefers-reduced-motion: no-preference) so
 * reduced-motion users get an entirely static site.
 *
 * Most homepage cards/buttons already carry Tailwind hover utilities
 * (hover:-translate-y-1, hover:shadow-xl, group-hover:scale-105…) — these
 * classes are for sections/pages that don't, keeping hover behaviour
 * consistent across the site:
 *
 *   .animate-card  card lift + soft shadow on hover (also a JS reveal hook)
 *   .hover-lift    same lift, no JS reveal
 *   .hover-zoom    wrap an image; the image scales gently on hover
 *   .hover-raise   tiny 2px raise for buttons / inline CTAs
 */

@media (hover: hover) and (prefers-reduced-motion: no-preference) {
  .animate-card,
  .hover-lift {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
  }
  .animate-card:hover,
  .hover-lift:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 32px -12px rgba(0, 0, 0, 0.18);
  }

  .hover-zoom {
    overflow: hidden;
  }
  .hover-zoom img {
    transition: transform 0.45s ease;
  }
  .hover-zoom:hover img,
  .hover-lift:hover .hover-zoom img {
    /* second selector: zoom the photo when the whole card is hovered
       (team cards pair hover-lift on the card with hover-zoom inside) */
    transform: scale(1.05);
  }

  .hover-raise {
    transition: transform 0.2s ease;
  }
  .hover-raise:hover {
    transform: translateY(-2px);
  }
}

/* Partner logo marquee (homepage "Trusted by" section).
 * Design translated from 21st.dev "Marquee Logo Scroller": a pure-CSS
 * infinite scroll — the logo set is duplicated and the track slides
 * exactly one set width (-50%), so the loop is seamless. Edges fade via
 * mask-image, hover pauses, and reduced-motion users get a static
 * centered wrap instead (duplicate set hidden). */
.logo-marquee {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
  mask-image: linear-gradient(to right, transparent, black 8%, black 92%, transparent);
}
.logo-marquee-track {
  display: flex;
  width: max-content;
}
.logo-marquee-set {
  display: flex;
  align-items: center;
}
.logo-marquee-item {
  width: 9rem;
  margin-right: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
}
.logo-marquee-item img {
  max-height: 3rem;
  width: 100%;
  object-fit: contain;
  filter: grayscale(1);
  opacity: 0.75;
  transition: filter 0.3s ease, opacity 0.3s ease;
}
.logo-marquee-item:hover img {
  filter: none;
  opacity: 1;
}
@media (prefers-reduced-motion: no-preference) {
  .logo-marquee-track {
    animation: logo-marquee 55s linear infinite;
  }
  .logo-marquee:hover .logo-marquee-track {
    animation-play-state: paused;
  }
  @keyframes logo-marquee {
    to {
      transform: translateX(-50%);
    }
  }
}
@media (prefers-reduced-motion: reduce) {
  .logo-marquee {
    -webkit-mask-image: none;
    mask-image: none;
  }
  .logo-marquee-track {
    width: 100%;
  }
  .logo-marquee-set {
    flex-wrap: wrap;
    justify-content: center;
    width: 100%;
  }
  .logo-marquee-set[aria-hidden="true"] {
    display: none;
  }
  .logo-marquee-item {
    margin: 0.5rem 1rem;
    width: 8rem;
  }
}

/* FAQ accordion (native <details>, see /faqs/). Chevron rotation is
 * handled by Tailwind's group-open variant in the markup; this only
 * hides the default disclosure marker and fades the answer in. */
.faq-item summary::-webkit-details-marker {
  display: none;
}
@media (prefers-reduced-motion: no-preference) {
  .faq-item[open] .faq-answer {
    animation: faq-reveal 0.35s ease both;
  }
  @keyframes faq-reveal {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
  }
}

/* Custom cursor (created by gsap-animations.js on fine-pointer devices).
 * html.has-cursor-fx is only added by JS, so no-JS visitors and touch
 * devices always keep their native cursor. Over text fields the JS adds
 * html.cursor-native, restoring the platform cursor (I-beam etc.). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  html.has-cursor-fx,
  html.has-cursor-fx * {
    cursor: none;
  }
  html.has-cursor-fx.cursor-native,
  html.has-cursor-fx.cursor-native * {
    cursor: auto;
  }

  .cursor-dot,
  .cursor-ring {
    position: fixed;
    top: 0;
    left: 0;
    pointer-events: none;
    border-radius: 9999px;
    opacity: 0; /* faded in by JS on first mouse move */
    z-index: 9999;
  }
  .cursor-dot {
    width: 8px;
    height: 8px;
    background: #22c55e; /* brand green-500 */
  }
  .cursor-ring {
    width: 38px;
    height: 38px;
    border: 1.5px solid rgba(34, 197, 94, 0.55);
    background: rgba(34, 197, 94, 0);
  }
}