/* ============================================================
   Royal Equestrian Academy — Custom CSS
   Google Fonts loaded in head.php
   ============================================================ */

/* ── Scroll animation system ─────────────────────────────── */
.anim-hidden { opacity: 0; }

[data-animate].anim-hidden { opacity: 0; }
[data-animate="fade-up"].anim-hidden   { opacity:0; transform:translateY(28px); }
[data-animate="fade-in"].anim-hidden   { opacity:0; }
[data-animate="slide-right"].anim-hidden { opacity:0; transform:translateX(-32px); }
[data-animate="slide-left"].anim-hidden  { opacity:0; transform:translateX(32px); }
[data-animate="scale-in"].anim-hidden   { opacity:0; transform:scale(0.94); }

[data-animate="fade-up"].animated   { animation: fadeUp 0.65s cubic-bezier(0.16,1,0.3,1) forwards; }
[data-animate="fade-in"].animated   { animation: fadeIn 0.5s ease-out forwards; }
[data-animate="slide-right"].animated { animation: slideRight 0.65s cubic-bezier(0.16,1,0.3,1) forwards; }
[data-animate="slide-left"].animated  { animation: slideLeft 0.65s cubic-bezier(0.16,1,0.3,1) forwards; }
[data-animate="scale-in"].animated   { animation: scaleIn 0.5s cubic-bezier(0.16,1,0.3,1) forwards; }

/* Animation delays */
[data-delay="100"] { animation-delay:100ms !important; }
[data-delay="150"] { animation-delay:150ms !important; }
[data-delay="200"] { animation-delay:200ms !important; }
[data-delay="300"] { animation-delay:300ms !important; }
[data-delay="400"] { animation-delay:400ms !important; }
[data-delay="500"] { animation-delay:500ms !important; }
[data-delay="600"] { animation-delay:600ms !important; }
[data-delay="700"] { animation-delay:700ms !important; }

/* ── Keyframes ───────────────────────────────────────────── */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes fadeIn {
  from { opacity:0; }
  to   { opacity:1; }
}
@keyframes slideRight {
  from { opacity:0; transform:translateX(-32px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes slideLeft {
  from { opacity:0; transform:translateX(32px); }
  to   { opacity:1; transform:translateX(0); }
}
@keyframes scaleIn {
  from { opacity:0; transform:scale(0.94); }
  to   { opacity:1; transform:scale(1); }
}
@keyframes heroDrift {
  0%   { transform:scale(1.04) translate(0px,0px); }
  33%  { transform:scale(1.06) translate(-6px,-4px); }
  66%  { transform:scale(1.05) translate(4px,-2px); }
  100% { transform:scale(1.04) translate(0px,0px); }
}
@keyframes heroTextFade {
  from { opacity:0; transform:translateY(20px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── Hero background drift ───────────────────────────────── */
.hero-img-drift {
  animation: heroDrift 20s ease-in-out infinite;
  transform-origin: center center;
}

/* ── Hero text entrance ──────────────────────────────────── */
.hero-text-1 { animation: heroTextFade 0.8s ease-out forwards; }
.hero-text-2 { animation: heroTextFade 0.8s ease-out 0.2s both; }
.hero-text-3 { animation: heroTextFade 0.8s ease-out 0.35s both; }
.hero-cta    { animation: heroTextFade 0.8s ease-out 0.5s both; }

/* ── Navbar scroll state ─────────────────────────────────── */
#main-nav.scrolled {
  background: rgba(26,21,16,0.98) !important;
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 20px rgba(0,0,0,0.3);
  border-bottom: 1px solid rgba(196,124,41,0.1);
}

/* ── Dropdown nav (desktop) ──────────────────────────────── */
.nav-dropdown-wrap { position:relative; }
.nav-dropdown {
  position:absolute;
  top:100%;
  left:0;
  padding-top:4px;
  z-index:50;
}

/* ── Gallery lightbox ────────────────────────────────────── */
#lightbox {
  display:none;
  position:fixed;
  inset:0;
  z-index:100;
  background:rgba(26,21,16,0.96);
  align-items:center;
  justify-content:center;
  padding:1rem;
  animation: fadeIn 0.2s ease-out forwards;
}
#lightbox.active { display:flex; }

/* ── FAQ Accordion ───────────────────────────────────────── */
.faq-content {
  max-height:0;
  overflow:hidden;
  transition:max-height 0.3s ease-out, padding 0.3s ease;
}
.faq-content.open {
  max-height:400px;
}
.faq-item.open .faq-chevron {
  transform:rotate(180deg);
}
.faq-chevron {
  transition:transform 0.3s ease;
  flex-shrink:0;
}

/* ── Card hover elevation ────────────────────────────────── */
.card-hover {
  transition:transform 0.2s ease, box-shadow 0.2s ease;
}
.card-hover:hover {
  transform:translateY(-2px);
  box-shadow:0 8px 24px rgba(0,0,0,0.1);
}

/* ── Body padding for mobile sticky bar ─────────────────── */
@media (max-width:1024px) {
  body { padding-bottom:56px; }
}

/* ── Gallery item hover ──────────────────────────────────── */
.gallery-img-wrap img {
  transition:transform 0.5s ease;
}
.gallery-img-wrap:hover img {
  transform:scale(1.05);
}

/* ── CTA Block gold gradient line ────────────────────────── */
.gold-line {
  width:40px;
  height:2px;
  background:#c47c29;
}

/* ── Badge pill ──────────────────────────────────────────── */
.badge-pill {
  display:inline-block;
  padding:4px 12px;
  border-radius:999px;
  font-size:0.65rem;
  font-family:'Open Sans',sans-serif;
  letter-spacing:0.12em;
  text-transform:uppercase;
  color:#d4b87a;
  border:1px solid rgba(196,124,41,0.3);
}

/* ── Smooth scroll ───────────────────────────────────────── */
html { scroll-behavior:smooth; }