/* ============================================
   COACH HP — Premium Animations v12
   ============================================ */


/* ── SCROLL PROGRESS BAR ─────────────────── */
#scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--teal);
  z-index: 9999;
  transition: width 0.1s linear;
  box-shadow: 0 0 8px rgba(0,184,173,0.6);
}


/* ── CUSTOM CURSOR ───────────────────────── */
#cursor-ring {
  position: fixed;
  top: -20px; left: -20px;
  width: 40px; height: 40px;
  border: 1px solid var(--teal);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transition: width 0.3s ease, height 0.3s ease, border-color 0.3s ease, opacity 0.3s ease;
  will-change: transform;
}

#cursor-dot {
  position: fixed;
  top: -3px; left: -3px;
  width: 6px; height: 6px;
  background: var(--teal);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transition: opacity 0.3s ease;
  will-change: transform;
}

#cursor-ring.cursor-hover {
  width: 60px; height: 60px;
  top: -30px; left: -30px;
  border-color: var(--teal-light);
  background: rgba(0,184,173,0.06);
}


/* ── PAGE TRANSITION OVERLAY ─────────────── */
#page-transition {
  position: fixed;
  inset: 0;
  background: var(--warm-light);
  z-index: 9990;
  opacity: 1;
  transition: opacity 0.38s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
}

#page-transition.fade-out {
  opacity: 0;
}


/* ── FADE UP & IN ────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-up.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in {
  opacity: 0;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}

.fade-in.visible {
  opacity: 1;
}

/* Delay helpers */
.fade-up-delay-1 { transition-delay: 0.1s; }
.fade-up-delay-2 { transition-delay: 0.2s; }
.fade-up-delay-3 { transition-delay: 0.3s; }
.fade-up-delay-4 { transition-delay: 0.4s; }


/* ── WORD REVEAL (hero headline) ─────────── */
.word-reveal {
  display: inline-block;
  opacity: 0;
  transform: translateY(16px) skewY(1.5deg);
  transition: opacity 0.6s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.word-reveal.visible {
  opacity: 1;
  transform: translateY(0) skewY(0deg);
}

.word-reveal + .word-reveal { margin-left: 0.25em; }


/* ── SECTION ENTRY LINE ──────────────────── */
.section-entry-line {
  position: absolute;
  top: 0; left: 0;
  width: 0;
  height: 1px;
  background: var(--teal);
  opacity: 0.4;
  transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}

section, .creds-bar { position: relative; overflow: hidden; }

.section-entry-line.drawn { width: 100%; }


/* ── NAV HIDE ON SCROLL DOWN ─────────────── */
.nav {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              background 0.3s ease,
              box-shadow 0.3s ease;
}

.nav.nav-hidden { transform: translateY(-100%); }


/* ── SCROLL-TRIGGERED ACCENT BORDERS ────── */
.method-step,
.diff-pillar,
.past-event-card {
  border-left: 2px solid transparent;
  transition: border-color 0.5s ease 0.2s, transform 0.75s cubic-bezier(0.22,1,0.36,1), opacity 0.75s cubic-bezier(0.22,1,0.36,1);
  padding-left: 24px;
}

.method-step.accent-active,
.diff-pillar.accent-active,
.past-event-card.accent-active {
  border-left-color: var(--teal);
}


/* ── BUTTON BASE TRANSITION ──────────────── */
.btn-primary,
.btn-ghost,
.btn-ghost-dark,
.btn-ghost-light,
.btn-event,
.btn-program {
  transition: transform 0.3s cubic-bezier(0.23,1,0.32,1),
              background 0.3s ease,
              color 0.3s ease,
              border-color 0.3s ease,
              box-shadow 0.3s ease;
  will-change: transform;
}

.btn-primary:hover {
  box-shadow: 0 6px 28px rgba(0,184,173,0.35);
}


/* ── CARD HOVER LIFT ─────────────────────── */
.program-card,
.testimonial-card,
.testimonial-large,
.event-card,
.result-card {
  transition: transform 0.4s cubic-bezier(0.22,1,0.36,1),
              box-shadow 0.4s cubic-bezier(0.22,1,0.36,1);
}

.program-card:hover,
.testimonial-card:hover,
.testimonial-large:hover,
.event-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 50px rgba(30,28,25,0.12);
}


/* ── TEAL GLOW ON ACTIVE ELEMENTS ────────── */
.event-status.upcoming {
  box-shadow: 0 0 0 1px rgba(0,184,173,0.3);
}

.price-pill-vip,
.cred:hover .cred-value {
  color: var(--teal);
  transition: color 0.3s ease;
}


/* ── IMAGE ZOOM ON HOVER ─────────────────── */
.about-hero-image img,
.eldoa-visual img {
  transition: transform 0.8s cubic-bezier(0.22,1,0.36,1);
}

.about-hero-image:hover img,
.eldoa-visual:hover img {
  transform: scale(1.03);
}


/* ── LINK UNDERLINE SLIDE ────────────────── */
.footer-links a {
  position: relative;
  transition: color 0.3s ease;
}

.footer-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--teal);
  transition: width 0.35s cubic-bezier(0.22,1,0.36,1);
}

.footer-links a:hover::after { width: 100%; }


/* ── MARQUEE STRIP ───────────────────────── */
.marquee-track {
  transition: animation-play-state 0.3s ease;
}

/* ── HERO SCROLL HINT ────────────────────── */
.scroll-line {
  animation: scrollPulse 1.8s ease infinite;
}

@keyframes scrollPulse {
  0%   { transform: scaleY(0); transform-origin: top; }
  50%  { transform: scaleY(1); transform-origin: top; }
  51%  { transform: scaleY(1); transform-origin: bottom; }
  100% { transform: scaleY(0); transform-origin: bottom; }
}


/* ── TEAL PULSE (event banner dot) ───────── */
@keyframes pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(0,184,173,0.5); }
  50%       { box-shadow: 0 0 0 6px rgba(0,184,173,0); }
}

.event-banner-dot { animation: pulse 2s ease infinite; }


/* ── SECTION LABEL SLIDE IN ──────────────── */
.section-label {
  display: inline-block;
  transition: letter-spacing 0.5s ease;
}

section:hover .section-label {
  letter-spacing: 0.28em;
}


/* ── REDUCE MOTION RESPECT ───────────────── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .fade-up, .fade-in { opacity: 1; transform: none; }
  .word-reveal { opacity: 1; transform: none; }
  #cursor-ring, #cursor-dot { display: none; }
}