/* ═══════════════════════════════════════════════
   REFLECTIVE LEARNING STUDIO — ENHANCEMENTS
   Custom cursor · Image gradients · Animations
════════════════════════════════════════════════ */

/* ── HIDE DEFAULT CURSOR ── */
*, *::before, *::after { cursor: none !important; }

/* ── CUSTOM CURSOR ── */
.cursor-dot {
  position: fixed;
  width: 6px; height: 6px;
  background: var(--green, #1b3a2d);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: transform 0.1s ease, background 0.3s ease, width 0.3s ease, height 0.3s ease;
  will-change: left, top;
}

.cursor-ring {
  position: fixed;
  width: 36px; height: 36px;
  border: 1px solid rgba(27,58,45,0.5);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9998;
  transform: translate(-50%, -50%);
  transition: width 0.4s ease, height 0.4s ease,
              border-color 0.4s ease, border-width 0.3s ease,
              background 0.4s ease;
  will-change: left, top;
}

/* Hover states — links */
body.cursor-hover .cursor-dot {
  width: 10px; height: 10px;
  background: var(--gold, #b8924a);
}
body.cursor-hover .cursor-ring {
  width: 52px; height: 52px;
  border-color: rgba(184,146,74,0.45);
  border-width: 1.5px;
}

/* Hover states — buttons */
body.cursor-btn .cursor-dot {
  width: 48px; height: 48px;
  background: rgba(184,146,74,0.15);
  border-radius: 50%;
}
body.cursor-btn .cursor-ring {
  width: 56px; height: 56px;
  border-color: var(--gold, #b8924a);
  border-width: 1.5px;
}

/* Hover state — images */
body.cursor-img .cursor-ring {
  width: 80px; height: 80px;
  border-color: rgba(184,146,74,0.3);
  background: rgba(242,236,224,0.06);
}

/* Click ripple */
.cursor-dot.clicking {
  transform: translate(-50%, -50%) scale(2.5);
  background: var(--gold, #b8924a);
}

/* ── TEXT SELECTION ── */
::selection {
  background: rgba(184,146,74,0.25);
  color: #1a2820;
}
::-moz-selection {
  background: rgba(184,146,74,0.25);
  color: #1a2820;
}

/* ── IMAGE GRADIENT OVERLAYS ── */

/* Hero right panel */
.hero-right::after,
.page-hero-right::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right,  rgba(242,236,224,0.4) 0%, transparent 35%),
    linear-gradient(to top,    rgba(27,58,45,0.35)   0%, transparent 45%),
    linear-gradient(to bottom, rgba(27,58,45,0.2)    0%, transparent 30%);
  pointer-events: none;
  z-index: 1;
}

/* All images get a soft Ken Burns hover */
.hero-right img,
.page-hero-right img,
.philosophy-img img,
.intro-band-img img,
.contact-img img,
.work-photo-strip img,
.cta-band-img img,
.portfolio-cta-img img,
.about-cta img,
.close-section img,
.img-break img,
.image-break img {
  transition: transform 8s ease !important;
}

.hero-right:hover img,
.page-hero-right:hover img,
.philosophy-img:hover img,
.intro-band-img:hover img,
.contact-img:hover img {
  transform: scale(1.04);
}

/* Project card image zoom */
.card-visual img {
  transition: transform 0.7s ease !important;
}
.project-card:hover .card-visual img {
  transform: scale(1.08) !important;
}

/* Full-bleed sections — gradient enhancement */
.work-photo-strip::after,
.cta-band-img::after,
.portfolio-cta-img::after,
.img-break::after,
.image-break::after,
.close-section::after,
.featured::after {
  background:
    linear-gradient(to bottom, rgba(27,58,45,0.15) 0%, rgba(27,58,45,0.65) 100%),
    linear-gradient(to right,  rgba(27,58,45,0.2)  0%, transparent 50%) !important;
}

/* Philosophy image — gradient bleeds into green panel */
.philosophy-img::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, transparent 50%, rgba(27,58,45,0.85) 100%),
    linear-gradient(to bottom, rgba(27,58,45,0.1) 0%, transparent 40%);
  pointer-events: none;
  z-index: 1;
}

/* Contact image */
.contact-img::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, transparent 55%, rgba(242,236,224,0.5) 100%),
    linear-gradient(to bottom, rgba(27,58,45,0.05) 0%, rgba(27,58,45,0.25) 100%);
  pointer-events: none;
  z-index: 1;
}

/* ── NAV LINK ANIMATIONS ── */

/* Animated gold underline slides in from left */
.nav-links a {
  position: relative;
  padding-bottom: 3px;
}
.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--gold, #b8924a);
  transition: width 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}
.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* Nav link color lift */
.nav-links a {
  transition: color 0.25s ease, transform 0.2s ease !important;
}
.nav-links a:hover { transform: translateY(-1px); }

/* Mobile menu link shimmer */
.mobile-menu a {
  position: relative; overflow: hidden;
}
.mobile-menu a::before {
  content: '';
  position: absolute; left: -100%; top: 0;
  width: 100%; height: 100%;
  background: linear-gradient(to right, transparent, rgba(184,146,74,0.06), transparent);
  transition: left 0.5s ease;
}
.mobile-menu a:hover::before { left: 100%; }

/* Service nav items */
.service-nav-item {
  position: relative; overflow: hidden;
}
.service-nav-item::after {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  width: 0; height: 2px;
  background: var(--gold, #b8924a);
  transition: width 0.3s ease, left 0.3s ease;
  transform: translateX(-50%);
}
.service-nav-item:hover::after,
.service-nav-item.active::after { width: 100%; left: 0; transform: none; }

/* Filter buttons */
.filter-btn {
  position: relative; overflow: hidden;
}
.filter-btn::before {
  content: '';
  position: absolute; bottom: 0; left: 50%;
  width: 0; height: 2px; background: var(--gold, #b8924a);
  transition: width 0.3s ease, left 0.3s ease;
  transform: translateX(-50%);
}
.filter-btn:hover::before,
.filter-btn.active::before { width: 100%; left: 0; transform: none; }

/* ── BUTTON ANIMATIONS ── */
.btn-primary, .btn-secondary, .btn-submit,
.btn-view, .btn-ghost, .btn-ghost {
  position: relative; overflow: hidden;
}
.btn-primary::before, .btn-secondary::before,
.btn-submit::before, .btn-view::before {
  content: '';
  position: absolute; top: 50%; left: 50%;
  width: 0; height: 0;
  background: rgba(255,255,255,0.12);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width 0.5s ease, height 0.5s ease, opacity 0.5s ease;
  opacity: 0;
}
.btn-primary:hover::before, .btn-submit:hover::before,
.btn-view:hover::before {
  width: 300px; height: 300px; opacity: 1;
}

/* ── CARD HOVER LIFT ── */
.service-card,
.work-card,
.diff-card,
.engagement-card,
.how-step,
.pillar {
  transition: transform 0.3s ease, background 0.3s ease !important;
}
.service-card:hover,
.diff-card:hover,
.engagement-card:hover,
.how-step:hover {
  transform: translateY(-4px);
}

/* ── SECTION REVEAL ENHANCEMENT ── */
.reveal {
  transition: opacity 0.85s cubic-bezier(0.4,0,0.2,1),
              transform 0.85s cubic-bezier(0.4,0,0.2,1) !important;
}

/* ── GOLD SHIMMER ON SECTION EYEBROWS ── */
.section-eyebrow, .eyebrow {
  position: relative;
}

/* ── FAQ HOVER ── */
.faq-question {
  transition: color 0.25s ease;
}
.faq-question:hover .faq-q-text { color: var(--green-mid, #2a5040); }

/* ── MOBILE: restore default cursor ── */
@media (max-width: 960px) {
  * { cursor: auto !important; }
  .cursor-dot, .cursor-ring { display: none !important; }
}