/* ============================================================
   SHARED ANIMATION SYSTEM — The Nursing Directory
   Opt-in via CSS classes + data attributes. No existing styles overridden.
   All animations respect prefers-reduced-motion.
   ============================================================ */

/* ----------------------------------------------------------
   CSS Custom Properties (animation-specific)
   ---------------------------------------------------------- */
:root {
  --anim-ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --anim-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
  --anim-duration-reveal: 0.7s;
  --anim-duration-hover: 0.3s;
  --anim-stagger: 80ms;
}

/* ----------------------------------------------------------
   1. SCROLL-TRIGGERED ENTRANCE ANIMATIONS
   Add class="reveal" to any element.
   Add class="reveal-stagger" to parent → children auto-stagger.
   Variants: reveal-left, reveal-right, reveal-scale
   ---------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity var(--anim-duration-reveal) var(--anim-ease-out),
              transform var(--anim-duration-reveal) var(--anim-ease-out);
  will-change: opacity, transform;
}

.reveal-left {
  opacity: 0;
  transform: translateX(-30px);
  transition: opacity var(--anim-duration-reveal) var(--anim-ease-out),
              transform var(--anim-duration-reveal) var(--anim-ease-out);
  will-change: opacity, transform;
}

.reveal-right {
  opacity: 0;
  transform: translateX(30px);
  transition: opacity var(--anim-duration-reveal) var(--anim-ease-out),
              transform var(--anim-duration-reveal) var(--anim-ease-out);
  will-change: opacity, transform;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.92);
  transition: opacity var(--anim-duration-reveal) var(--anim-ease-out),
              transform var(--anim-duration-reveal) var(--anim-ease-out);
  will-change: opacity, transform;
}

.reveal.visible,
.reveal-left.visible,
.reveal-right.visible,
.reveal-scale.visible {
  opacity: 1;
  transform: none;
}

/* Stagger children: JS sets --i on each child */
.reveal-stagger > * {
  transition-delay: calc(var(--i, 0) * var(--anim-stagger));
}

/* ----------------------------------------------------------
   2. CURSOR-TRACKING CARD GLOW
   Add class="glow-card" to any card element.
   ---------------------------------------------------------- */
.glow-card {
  position: relative;
  overflow: hidden;
}

.glow-card::after {
  content: '';
  position: absolute;
  inset: 0;
  opacity: 0;
  background: radial-gradient(
    600px circle at var(--glow-x, 50%) var(--glow-y, 50%),
    rgba(8, 145, 178, 0.08),
    transparent 40%
  );
  transition: opacity 0.3s ease;
  pointer-events: none;
  z-index: 1;
}

.glow-card:hover::after {
  opacity: 1;
}

/* ----------------------------------------------------------
   3. 3D CARD TILT
   Add class="tilt-card" to any card element.
   JS handles the transform via inline style.
   ---------------------------------------------------------- */
.tilt-card {
  transform-style: preserve-3d;
  transition: transform 0.15s ease-out;
  will-change: transform;
}

.tilt-card.tilt-reset {
  transition: transform 0.5s var(--anim-ease-out);
}

/* ----------------------------------------------------------
   4. MAGNETIC BUTTONS
   Add class="magnetic-btn" to any button.
   JS handles the transform via inline style.
   ---------------------------------------------------------- */
.magnetic-btn {
  transition: transform 0.2s var(--anim-ease-out);
  will-change: transform;
}

/* ----------------------------------------------------------
   5. IMAGE REVEAL ON SCROLL
   Wrap images in class="reveal-image" or add directly.
   ---------------------------------------------------------- */
.reveal-image {
  overflow: hidden;
}

.reveal-image img,
img.reveal {
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 0.8s var(--anim-ease-out),
              transform 0.8s var(--anim-ease-out);
}

.reveal-image.visible img,
img.reveal.visible {
  opacity: 1;
  transform: scale(1);
}

/* ----------------------------------------------------------
   6. SMOOTH FAQ ACCORDION
   Targets .faq-item with grid-based height transition.
   ---------------------------------------------------------- */
.faq-item .faq-answer,
.faq-item [class*="answer"],
.faq-item .faq-content {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.35s var(--anim-ease-out);
}

.faq-item.open .faq-answer,
.faq-item.open [class*="answer"],
.faq-item.open .faq-content {
  grid-template-rows: 1fr;
}

.faq-item .faq-answer > *,
.faq-item [class*="answer"] > *,
.faq-item .faq-content > * {
  overflow: hidden;
  min-height: 0;
}

/* Chevron rotation */
.faq-item .faq-toggle svg,
.faq-item .faq-question svg,
.faq-item [class*="toggle"] svg {
  transition: transform 0.35s var(--anim-ease-out);
}

.faq-item.open .faq-toggle svg,
.faq-item.open .faq-question svg,
.faq-item.open [class*="toggle"] svg {
  transform: rotate(180deg);
}

/* ----------------------------------------------------------
   7. INPUT FOCUS MICRO-INTERACTIONS
   Targets .field-input, .field-select inside tool pages.
   ---------------------------------------------------------- */
.field-input,
.field-select {
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}

.field-input:focus,
.field-select:focus {
  border-color: rgba(8, 145, 178, 0.6);
  box-shadow: 0 0 0 3px rgba(8, 145, 178, 0.12), 0 0 20px rgba(8, 145, 178, 0.08);
}

/* Animated underline on focus */
.field {
  position: relative;
}

.field::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg, #0891b2, #06b6d4);
  transform: translateX(-50%) scaleX(0);
  transition: transform 0.35s var(--anim-ease-out);
  border-radius: 1px;
  pointer-events: none;
}

.field:focus-within::after {
  transform: translateX(-50%) scaleX(1);
}

/* ----------------------------------------------------------
   8. CUSTOM SCROLLBAR (dark theme pages)
   Applied via body.dark-scrollbar or auto-detected.
   ---------------------------------------------------------- */
.dark-scrollbar,
.dark-scrollbar * {
  scrollbar-width: thin;
  scrollbar-color: #0891b2 #0f172a;
}

.dark-scrollbar::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.dark-scrollbar::-webkit-scrollbar-track {
  background: #0f172a;
}

.dark-scrollbar::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #0891b2, #0e7490);
  border-radius: 4px;
}

.dark-scrollbar::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #06b6d4, #0891b2);
}

/* ----------------------------------------------------------
   9. PAGE SCROLL PROGRESS BAR
   Auto-created by JS as #scroll-progress-bar.
   ---------------------------------------------------------- */
#scroll-progress-bar {
  position: fixed;
  top: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #0891b2, #6ee7b7);
  transform-origin: left;
  transform: scaleX(0);
  z-index: 99999;
  pointer-events: none;
  transition: none;
  will-change: transform;
}

/* ----------------------------------------------------------
   10. TEXT REVEAL (word-by-word)
   Add class="text-reveal" to headlines.
   ---------------------------------------------------------- */
.text-reveal {
  overflow: hidden;
}

.text-reveal .reveal-word {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 0.5s var(--anim-ease-spring);
  transition-delay: calc(var(--i, 0) * 60ms);
}

.text-reveal.visible .reveal-word {
  transform: translateY(0);
}

/* ----------------------------------------------------------
   11. CONFETTI CANVAS (quiz results)
   ---------------------------------------------------------- */
.confetti-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

/* ----------------------------------------------------------
   MOBILE PERFORMANCE — Simplified animations on phones
   ---------------------------------------------------------- */
@media (max-width: 767px) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  .reveal-image img,
  img.reveal {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .text-reveal .reveal-word {
    transform: none !important;
    transition: none !important;
  }

  .glow-card::after {
    display: none;
  }

  .tilt-card {
    transform: none !important;
    transition: none !important;
    will-change: auto !important;
  }

  #scroll-progress-bar {
    display: none;
  }

  .field::after {
    display: none;
  }

  .confetti-canvas {
    display: none;
  }

  /* Kill backdrop-filter on nav — very GPU-expensive on mobile */
  #main-nav,
  nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
}

/* ----------------------------------------------------------
   REDUCED MOTION — Disable all shared animations
   ---------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal-left,
  .reveal-right,
  .reveal-scale,
  .reveal-image img,
  img.reveal,
  .text-reveal .reveal-word {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }

  .glow-card::after {
    display: none;
  }

  .tilt-card {
    transform: none !important;
    transition: none !important;
  }

  .magnetic-btn {
    transform: none !important;
    transition: none !important;
  }

  #scroll-progress-bar {
    display: none;
  }

  .faq-item .faq-answer,
  .faq-item [class*="answer"],
  .faq-item .faq-content {
    transition: none;
  }

  .field::after {
    transition: none;
  }
}