/* ============================================================
   Golden Dreams Doodles — Visual Enhancement Layer
   Layered on top of style.css for premium polish.
   All values use the existing CSS variable system.
   ============================================================ */

/* ============================================================
   1. HERO SECTION — Rich dark-to-golden gradient for legible white text
   ============================================================ */

/*
   The hero title uses color:#FFFCF5 (cream/white).
   Background must be DARK enough to guarantee readability.
   Gradient: deep warm chocolate at top-left → rich golden amber at bottom-right.
*/
.hero-bg {
  background: linear-gradient(
    155deg,
    #1C0F04 0%,
    #3D2210 22%,
    #7A4818 48%,
    #B87828 74%,
    #D4A030 100%
  ) !important;
}

/* Soft warm glow bloom — adds depth without lightening the text area */
.hero-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 65% 50% at 65% 25%, rgba(212,168,83,0.18), transparent);
  pointer-events: none;
}

/* Hero title highlight — italic gold with readable text glow */
.hero-title .highlight {
  text-shadow: 0 0 40px rgba(212,168,83,0.5), 0 2px 12px rgba(212,168,83,0.3);
}

/* Hero badge — amber glow on dark hero */
.hero-badge {
  background: rgba(212,168,83,0.20) !important;
  border-color: rgba(212,168,83,0.50) !important;
  box-shadow: 0 2px 12px rgba(212,168,83,0.20);
}

/* Stats bar — warmer glass against the dark hero */
.hero-stats {
  background: rgba(255,252,245,0.12) !important;
  border-color: rgba(255,252,245,0.20) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
}

/* ── Mobile hero stats fix ──────────────────────────────────────────────────
   On small screens the hero content (badge + title + subtitle + CTAs + stats)
   is taller than 100svh. `overflow:hidden` on #hero clips the stats which sit
   at the bottom via `margin-top:auto`. Fix by:
   1. Letting #hero grow past 100svh on mobile (min-height:auto)
   2. Swapping `margin-top:auto` for a fixed small gap on .hero-stats
   3. Collapsing the huge CTA bottom-margin that eats the most space
   4. Tightening stats grid padding/gap so it reads cleanly at 2×2
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 639px) {
  /* Allow hero to be taller than viewport so nothing gets clipped */
  #hero {
    min-height: 100svh !important;
    overflow: visible !important;
  }

  /* Collapse the oversized gap below the CTA buttons */
  .hero-ctas {
    margin-bottom: var(--sp-6) !important;
  }

  /* Replace auto-push with a compact fixed gap */
  .hero-stats {
    margin-top: var(--sp-5) !important;
    margin-bottom: var(--sp-6) !important;
    padding: var(--sp-3) var(--sp-3) !important;
    gap: var(--sp-2) var(--sp-3) !important;
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Slightly smaller numerals so they still look bold without wrapping */
  .hero-stat-value {
    font-size: clamp(1.5rem, 7vw, 2rem) !important;
  }

  .hero-stat-label {
    font-size: 0.68rem !important;
    letter-spacing: 0.04em !important;
  }
}

/* ============================================================
   1b. NAV — Dark warm glass always, scrolled or not
   ============================================================ */

/*
   The user wants the nav to KEEP the dark hero look even after scrolling.
   Override .scrolled to use a dark warm glass instead of the default white.
*/

/* Always dark warm glass — scrolled or not */
#main-nav,
#main-nav.scrolled {
  background: rgba(28, 15, 4, 0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 2px 24px rgba(0, 0, 0, 0.35) !important;
}

/* Mobile menu open → slightly more opaque */
#main-nav.menu-open {
  background: rgba(28, 15, 4, 0.96) !important;
}

/* Logo always golden amber */
#main-nav .nav-logo,
#main-nav.scrolled .nav-logo {
  color: var(--primary) !important;
  text-shadow: 0 0 12px rgba(212, 168, 83, 0.3);
}

/* ALL nav link text → cream, scrolled or not */
#main-nav .nav-links a,
#main-nav .nav-dropdown-trigger,
#main-nav .nav-direct-link {
  color: rgba(255, 252, 245, 0.80) !important;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}

/* Hover / active links → bright cream with amber glow */
#main-nav .nav-links a:hover,
#main-nav .nav-links a.active,
#main-nav .nav-dropdown-trigger:hover,
#main-nav .nav-dropdown-trigger.active,
#main-nav .nav-direct-link:hover,
#main-nav .nav-direct-link.active {
  color: #FFFCF5 !important;
  text-shadow: 0 0 14px rgba(212,168,83,0.55), 0 1px 4px rgba(0,0,0,0.4) !important;
}

/* Active underline stays amber */
#main-nav .nav-links a::after,
#main-nav .nav-dropdown-trigger::after,
#main-nav .nav-direct-link::after {
  background: var(--primary) !important;
}

/* Hamburger lines → cream always */
#main-nav .hamburger span {
  background: rgba(255, 252, 245, 0.88) !important;
}
#main-nav.menu-open .hamburger span {
  background: rgba(255, 252, 245, 0.95) !important;
}

/* Dropdown panel stays light since it appears over the page body */
.nav-dropdown {
  background: rgba(28, 15, 4, 0.96) !important;
  border-color: rgba(212, 168, 83, 0.20) !important;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4) !important;
}

.nav-dropdown-label {
  color: rgba(255, 252, 245, 0.92) !important;
}

.nav-dropdown-desc {
  color: rgba(255, 252, 245, 0.50) !important;
}

.nav-dropdown-item:hover {
  background: rgba(212, 168, 83, 0.12) !important;
}

.nav-dropdown-item.active {
  background: rgba(212, 168, 83, 0.16) !important;
}

/* Mobile full-screen menu → dark warm */
.mobile-menu {
  background: rgba(22, 12, 3, 0.98) !important;
}

.mobile-menu a {
  color: rgba(255, 252, 245, 0.85) !important;
}

.mobile-menu a:hover,
.mobile-menu a:active,
.mobile-menu a.active {
  color: var(--primary) !important;
  background: rgba(212, 168, 83, 0.10) !important;
}

.mm-group-label {
  color: rgba(255, 252, 245, 0.40) !important;
}

/* ============================================================
   1c. HERO WITH IMAGE — Darker overlay ensures text legibility
   ============================================================ */

/* When admin sets a hero image, add a richer dark overlay */
.hero-bg-image::after {
  background: linear-gradient(
    to bottom,
    rgba(28,15,4,0.55) 0%,
    rgba(28,15,4,0.25) 45%,
    rgba(28,15,4,0.60) 100%
  ) !important;
}

/* Scroll hint line */
.hero-scroll-hint {
  display: flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,252,245,0.55);
  font-size: 0.7rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 600;
}
.hero-scroll-line {
  width: 32px;
  height: 1px;
  background: rgba(255,252,245,0.4);
}

/* ============================================================
   2. SECTION HEADERS — More editorial presence
   ============================================================ */

/* Section divider — glowing golden bar */
.section-divider {
  background: linear-gradient(90deg, transparent, var(--primary), var(--primary-light), var(--primary), transparent) !important;
  height: 2px !important;
  width: 80px !important;
  box-shadow: 0 0 12px rgba(212,168,83,0.5);
}

/* Eyebrow — more refined letter-spacing */
.section-eyebrow {
  letter-spacing: 0.18em !important;
  font-size: 0.7rem !important;
}

/* Section title — slightly tighter tracking */
.section-title {
  letter-spacing: -0.01em;
}

/* ============================================================
   3. PUPPY CARDS — Warm hover glow & richer placeholders
   ============================================================ */

.puppy-card {
  border: 1px solid var(--border);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              border-color 0.25s ease !important;
}

.puppy-card:hover {
  transform: translateY(-10px) scale(1.012) !important;
  box-shadow:
    0 20px 60px rgba(212,168,83,0.22),
    0 8px 24px rgba(44,36,22,0.14),
    0 0 0 1px rgba(212,168,83,0.18) !important;
  border-color: rgba(212,168,83,0.3) !important;
}

/* Richer placeholder background */
.puppy-placeholder {
  background: linear-gradient(145deg, #F5E8C8 0%, #E8D4A0 50%, #D4BC80 100%) !important;
  position: relative;
}

.puppy-placeholder::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 30% 40%, rgba(255,255,255,0.3), transparent);
}

/* Image zoom — smoother */
.puppy-card:hover .puppy-card-image img {
  transform: scale(1.08) !important;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Status badge — slightly elevated */
.status-available {
  background: rgba(74,124,89,0.95) !important;
  box-shadow: 0 2px 8px rgba(74,124,89,0.35);
}

.status-reserved {
  background: rgba(212,168,83,0.95) !important;
  box-shadow: 0 2px 8px rgba(212,168,83,0.35);
}

/* Puppy name — warmer serif */
.puppy-name {
  font-size: 1.45rem !important;
}

/* Puppy card action button glow */
.puppy-card .btn-primary {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary)) !important;
  box-shadow: 0 4px 16px rgba(212,168,83,0.4) !important;
}

.puppy-card .btn-primary:hover {
  box-shadow: 0 6px 24px rgba(212,168,83,0.55) !important;
}

/* ============================================================
   4. GALLERY — Warm golden overlay on hover
   ============================================================ */

.gallery-item-inner {
  border-radius: var(--r-md);
  overflow: hidden;
}

.gallery-item img,
.gallery-item .gallery-placeholder {
  border-radius: var(--r-md);
}

/* Overlay that appears on hover */
.gallery-item-inner::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(212,168,83,0) 0%,
    rgba(212,168,83,0.08) 50%,
    rgba(44,36,22,0.35) 100%
  );
  border-radius: var(--r-md);
  opacity: 0;
  transition: opacity 0.35s ease;
  pointer-events: none;
  z-index: 1;
}

.gallery-item:hover .gallery-item-inner::after {
  opacity: 1;
}

.gallery-item:hover img {
  transform: scale(1.07) !important;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* Filter tab — active state glow */
.tab-btn.active {
  box-shadow: 0 4px 16px rgba(212,168,83,0.45) !important;
  letter-spacing: 0.01em;
}

/* Gallery placeholder — richer warm gradient */
.gallery-placeholder {
  background: linear-gradient(145deg, #E8D4A0 0%, #D4BC80 60%, #C4A860 100%) !important;
}

/* ============================================================
   5. TESTIMONIALS — Dramatic quote mark & warm premium feel
   ============================================================ */

.testimonial-card {
  border: 1px solid var(--border);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.35s ease,
              border-color 0.25s ease !important;
}

.testimonial-card:hover {
  transform: translateY(-8px) !important;
  box-shadow:
    0 20px 48px rgba(212,168,83,0.16),
    0 8px 20px rgba(44,36,22,0.10) !important;
  border-color: rgba(212,168,83,0.25) !important;
}

/* Giant decorative opening quote */
.testimonial-card::before {
  content: '\201C' !important;
  font-family: var(--font-display) !important;
  font-size: 8rem !important;
  font-weight: 700 !important;
  color: var(--primary) !important;
  opacity: 0.12 !important;
  top: -16px !important;
  left: 16px !important;
  line-height: 1 !important;
}

/* Stars — slightly larger & warmer */
.testimonial-stars span {
  font-size: 1.2rem !important;
  filter: drop-shadow(0 1px 4px rgba(212,168,83,0.4));
}

/* Quote text — more readable, slightly larger */
.testimonial-quote {
  font-size: 1rem !important;
  line-height: 1.85 !important;
  color: var(--text-2) !important;
}

/* Avatar — golden gradient ring */
.testimonial-avatar {
  background: linear-gradient(135deg, var(--primary-light), var(--primary-dark)) !important;
  box-shadow: 0 0 0 2px rgba(212,168,83,0.3);
}

/* Puppy name tag below reviewer */
.testimonial-puppy {
  font-weight: 600 !important;
}

/* ============================================================
   6. CONTACT SECTION — Premium form feel
   ============================================================ */

.contact-input,
.contact-textarea,
.contact-select {
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.contact-input:focus,
.contact-textarea:focus,
.contact-select:focus {
  border-color: var(--primary) !important;
  box-shadow: 0 0 0 3px rgba(212,168,83,0.15), 0 2px 8px rgba(212,168,83,0.1) !important;
  outline: none !important;
}

/* Contact info items */
.contact-info-item {
  transition: transform 0.2s ease;
}
.contact-info-item:hover {
  transform: translateX(4px);
}

/* ============================================================
   7. PROCESS STEPS — Richer cards & connector
   ============================================================ */

.process-step-card {
  border: 1px solid var(--border);
  transition: border-color 0.25s ease, box-shadow 0.25s ease, transform 0.3s cubic-bezier(0.22,1,0.36,1) !important;
}

.process-step-card:hover {
  border-color: rgba(212,168,83,0.35) !important;
  box-shadow: 0 8px 32px rgba(212,168,83,0.14) !important;
  transform: translateY(-4px);
}

.process-step-num {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light)) !important;
  box-shadow: 0 4px 16px rgba(212,168,83,0.4) !important;
  font-weight: 700 !important;
}

.process-step-icon {
  background: linear-gradient(145deg, rgba(212,168,83,0.18), rgba(212,168,83,0.06)) !important;
  border: 1px solid rgba(212,168,83,0.2) !important;
}

.process-step-connector::before {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary-light)) !important;
  opacity: 0.5;
}

/* ============================================================
   8. FOOTER — Warm accent & richer feel
   ============================================================ */

/* Warm amber accent line at top of footer */
footer {
  position: relative;
}

footer::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg,
    transparent 0%,
    var(--primary-dark) 15%,
    var(--primary) 40%,
    var(--primary-light) 60%,
    var(--primary) 85%,
    transparent 100%
  );
}

/* Social icons — hover glow */
.footer-social-link {
  transition: color 0.2s ease, background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.footer-social-link:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 4px 16px rgba(212,168,83,0.3) !important;
}

.footer-links a {
  transition: color 0.2s ease, transform 0.15s ease !important;
  display: inline-block;
}

.footer-links a:hover {
  transform: translateX(4px) !important;
}

/* Footer logo — warm text shadow */
.footer-logo {
  text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

/* ============================================================
   9. PAGE HERO BANNER — More dramatic sub-page headers
   ============================================================ */

.page-hero-banner {
  background: linear-gradient(
    155deg,
    #FFFCF5 0%,
    #FDF3D8 30%,
    #F9E8BE 65%,
    #F5DFA8 100%
  ) !important;
  position: relative;
  overflow: hidden;
}

/* Ambient glow blob — top right */
.page-hero-banner::after {
  content: '';
  position: absolute;
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(212,168,83,0.20) 0%, transparent 70%);
  top: -150px; right: -100px;
  pointer-events: none;
  z-index: 0;
}

/* Ambient glow blob — bottom left */
.page-hero-banner::before {
  content: '';
  position: absolute;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(74,124,89,0.12) 0%, transparent 70%);
  bottom: -80px; left: -60px;
  pointer-events: none;
  z-index: 0;
}

/* All content inside page-hero-banner sits above the blobs */
.page-hero-banner > * {
  position: relative;
  z-index: 1;
}

/* Page hero icon — warmer gradient background */
.page-hero-icon {
  background: linear-gradient(135deg, rgba(212,168,83,0.22), rgba(212,168,83,0.08)) !important;
  border-color: rgba(212,168,83,0.35) !important;
  box-shadow: 0 4px 16px rgba(212,168,83,0.15) !important;
}

/* Page hero title — warmer gold highlight */
.page-hero-title .text-gold {
  font-style: italic;
  text-shadow: 0 0 24px rgba(212,168,83,0.3);
}

/* Page hero subtitle — improved line height */
.page-hero-subtitle {
  line-height: 1.75 !important;
}

/* Breadcrumb — more visible */
.page-breadcrumb {
  opacity: 0.72;
  transition: opacity 0.2s ease, color 0.2s ease !important;
}
.page-breadcrumb:hover {
  opacity: 1;
}

/* ============================================================
   10. BUTTONS — Shimmer animation on primary
   ============================================================ */

@keyframes btnShimmer {
  0%   { background-position: -200% center; }
  100% { background-position: 200% center; }
}

.btn-primary {
  background-image: linear-gradient(
    105deg,
    var(--primary) 0%,
    var(--primary) 40%,
    rgba(255,255,255,0.18) 50%,
    var(--primary) 60%,
    var(--primary) 100%
  ) !important;
  background-size: 200% auto !important;
  transition: background-position 0.6s ease, transform 0.2s ease, box-shadow 0.2s ease !important;
}

.btn-primary:hover {
  background-position: right center !important;
  animation: btnShimmer 1.4s linear infinite !important;
}

/* Outlined secondary button — warm hover */
.btn-secondary:hover {
  background: rgba(212,168,83,0.08) !important;
}

/* Nav inquire button — matching shimmer */
.btn-inquire-nav {
  background-image: linear-gradient(
    105deg,
    var(--primary) 0%,
    var(--primary) 40%,
    rgba(255,255,255,0.18) 50%,
    var(--primary) 60%,
    var(--primary) 100%
  ) !important;
  background-size: 200% auto !important;
}
.btn-inquire-nav:hover {
  background-position: right center !important;
}

/* ============================================================
   11. ABOUT SECTION — Warm trait bars & generation tree
   ============================================================ */

.trait-bar-fill {
  background: linear-gradient(90deg, var(--primary-dark), var(--primary), var(--primary-light)) !important;
  box-shadow: 0 0 8px rgba(212,168,83,0.3);
}

.gen-node.highlight {
  box-shadow: 0 4px 16px rgba(212,168,83,0.15) !important;
}

.gen-badge {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light)) !important;
  box-shadow: 0 2px 8px rgba(212,168,83,0.35);
}

.tab-btn.active {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light)) !important;
}

/* ============================================================
   12. LITTER BANNER — Keep dark background; ensure ALL text is visible
   ============================================================ */

/*
   Original background: #1A1209 → #2A1E0A (very dark — intentional).
   DO NOT override it to golden (countdown digits are also golden — invisible on gold).
   Instead, just add a richer shadow and ensure all child text is white.
*/
.litter-banner {
  box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important;
}

/* Ensure paw SVG is visible */
.litter-banner-inner svg {
  color: var(--primary) !important;
  fill: var(--primary) !important;
}

/* Main text — cream */
.litter-banner-text {
  color: rgba(255, 252, 245, 0.88) !important;
}
.litter-banner-text strong {
  color: var(--primary) !important;
}

/* Countdown numbers — WHITE (not golden, since background was changed) */
.lc-num {
  color: #FFFFFF !important;
  text-shadow: 0 0 8px rgba(212,168,83,0.5);
}

/* Countdown labels (d/h/m/s) */
.lc-lbl {
  color: rgba(255,252,245,0.6) !important;
}

/* Countdown separators */
.lc-sep {
  color: rgba(255,252,245,0.5) !important;
}

/* Banner CTA link */
.litter-banner-link {
  color: var(--primary) !important;
  font-weight: 600 !important;
}

/* ============================================================
   13. PARENTS / OUR DOGS — Warm card polish
   ============================================================ */

.parent-card {
  border: 1px solid var(--border);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.25s ease !important;
}

.parent-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(212,168,83,0.3) !important;
  box-shadow: 0 16px 48px rgba(212,168,83,0.18), 0 4px 16px rgba(44,36,22,0.10) !important;
}

/* ============================================================
   14. FAQ SECTION — Warm expand/collapse
   ============================================================ */

.faq-item {
  border-color: var(--border) !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

.faq-item:hover,
.faq-item.open {
  border-color: rgba(212,168,83,0.35) !important;
  box-shadow: 0 4px 20px rgba(212,168,83,0.10) !important;
}

.faq-chevron {
  color: var(--primary) !important;
}

/* ============================================================
   15. FLOATING INQUIRE BUTTON — Pulse ring
   ============================================================ */

@keyframes floatingPulse {
  0%   { box-shadow: 0 0 0 0 rgba(212,168,83,0.55), var(--shadow-xl); }
  70%  { box-shadow: 0 0 0 12px rgba(212,168,83,0), var(--shadow-xl); }
  100% { box-shadow: 0 0 0 0 rgba(212,168,83,0), var(--shadow-xl); }
}

.floating-inquire {
  animation: floatingPulse 2.8s cubic-bezier(0.22, 1, 0.36, 1) infinite !important;
}

.floating-inquire:hover {
  animation: none !important;
  box-shadow: 0 20px 50px rgba(212,168,83,0.5) !important;
}

/* ============================================================
   16. SCROLL PROGRESS BAR — Warmer shimmer
   ============================================================ */

#scroll-progress-bar {
  height: 3px !important;
  background: linear-gradient(
    90deg,
    var(--primary-dark),
    var(--primary),
    var(--primary-light),
    var(--secondary-light),
    var(--primary-light),
    var(--primary)
  ) !important;
  background-size: 300% 100% !important;
}

/* ============================================================
   17. ANIMATIONS — Smoother reveal + CSS fallback for sub-pages
   ============================================================ */

/*
   animate-item starts at opacity:0 (style.css). JS adds .visible after scroll
   or via preRevealAll() at 1.2s. Add a CSS-only fallback animation so that
   even if the JS observer is slow or the server fetch delays DoodleData.init(),
   content always becomes visible within 1s — no permanently invisible sections.
*/

@keyframes revealFallback {
  0%   { opacity: 0; transform: translateY(20px); }
  100% { opacity: 1; transform: translateY(0); }
}

.animate-item {
  /* CSS fallback: reveal after 0.8s delay even without JS adding .visible */
  animation: revealFallback 0.6s cubic-bezier(0.22, 1, 0.36, 1) 0.8s both;
  /* Improve transition timing for JS-driven reveals */
  transition: opacity 0.65s cubic-bezier(0.22, 1, 0.36, 1),
              transform 0.65s cubic-bezier(0.22, 1, 0.36, 1) !important;
}

/* When JS adds .visible, cancel the fallback animation immediately */
.animate-item.visible {
  animation: none !important;
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stagger delays for sibling animate-items */
.animate-item.delay-1 { animation-delay: 0.9s; }
.animate-item.delay-2 { animation-delay: 1.0s; }
.animate-item.delay-3 { animation-delay: 1.1s; }
.animate-item.delay-4 { animation-delay: 1.2s; }

/* ============================================================
   18. CUSTOM CURSOR — More golden
   ============================================================ */

#cursor-dot {
  box-shadow: 0 0 0 1.5px rgba(255,255,255,0.95), 0 2px 10px rgba(212,168,83,0.4) !important;
}

#cursor-ring {
  border-color: var(--primary) !important;
  opacity: 0.7;
}

/* ============================================================
   19. PUPPY QUIZ — Warm interactive states
   ============================================================ */

.quiz-option:hover,
.quiz-option.selected {
  border-color: rgba(212,168,83,0.5) !important;
  background: rgba(212,168,83,0.08) !important;
  box-shadow: 0 4px 16px rgba(212,168,83,0.15) !important;
}

.quiz-option.selected {
  box-shadow: 0 0 0 2px var(--primary), 0 4px 16px rgba(212,168,83,0.2) !important;
}

/* ============================================================
   20. PUPPY PREP / HEALTH GUARANTEE — Checklist & timeline polish
   ============================================================ */

/* Category headings on sub-pages */
.prep-category-title {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
}

/* Checklist items */
.prep-item {
  transition: background 0.2s ease, transform 0.2s ease !important;
}
.prep-item:hover {
  background: rgba(212,168,83,0.06) !important;
  transform: translateX(4px) !important;
}

/* Health guarantee bullet icons */
.guarantee-bullet-icon {
  background: linear-gradient(135deg, var(--primary-dark), var(--primary-light)) !important;
  box-shadow: 0 4px 12px rgba(212,168,83,0.35) !important;
}

/* Vaccine timeline */
.vaccine-step.current {
  border-color: var(--primary) !important;
  box-shadow: 0 4px 16px rgba(212,168,83,0.25) !important;
}

/* ============================================================
   21. UPDATES PAGE — Post card polish
   ============================================================ */

.update-card {
  border: 1px solid var(--border);
  transition: transform 0.35s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.25s ease !important;
}

.update-card:hover {
  transform: translateY(-8px) !important;
  border-color: rgba(212,168,83,0.3) !important;
  box-shadow: 0 16px 48px rgba(212,168,83,0.16), 0 4px 12px rgba(44,36,22,0.08) !important;
}

/* ============================================================
   22. UPCOMING LITTERS — Litter card & countdown
   ============================================================ */

.litter-card {
  border: 1px solid var(--border);
  transition: transform 0.3s cubic-bezier(0.22,1,0.36,1), box-shadow 0.3s ease, border-color 0.25s ease !important;
}

.litter-card:hover {
  transform: translateY(-6px) !important;
  border-color: rgba(212,168,83,0.3) !important;
  box-shadow: 0 16px 40px rgba(212,168,83,0.16) !important;
}

/* Countdown timer digits */
.countdown-num {
  font-family: var(--font-display) !important;
  color: var(--primary) !important;
  font-weight: 700 !important;
  text-shadow: 0 0 20px rgba(212,168,83,0.3);
}

/* ============================================================
   23. LIGHTBOX / MODAL — Warm overlay
   ============================================================ */

.lightbox-overlay,
.modal-overlay {
  background: rgba(44,36,22,0.88) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
}

/* ============================================================
   23b. TYPOGRAPHY CONSISTENCY — Same scale across all pages
   ============================================================ */

/*
   Home page:    .hero-title        = clamp(3rem, 9vw, 7rem) — full-screen hero
   Sub-pages:    .page-hero-title   = clamp(2.4rem, 6vw, 4rem)
   Sections:     .section-title     = clamp(2rem, 4vw, 3rem) italic
   Cards:        guarantee-card-title, vaccine-section-title, etc.

   Make all section headings within page content use the same display font,
   weight, and colour so every page feels like one coherent brand.
*/

/* All h2/h3 in page-section areas use display font */
.page-section h2,
.page-section h3 {
  font-family: var(--font-display) !important;
  color: var(--text) !important;
}

/* Guarantee cards — consistent serif heading */
.guarantee-card-title {
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  font-style: italic;
  color: var(--text) !important;
}

/* Vaccine / deworm section headings */
.vaccine-section-title,
.deworm-title {
  font-family: var(--font-display) !important;
  font-size: 1.1rem !important;
  font-weight: 600 !important;
  color: var(--text) !important;
}

/* Upcoming litters page headings */
.litter-card-name,
.litter-card-title {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  font-style: italic;
  color: var(--text) !important;
}

/* Puppy prep headings */
.prep-category-title {
  font-family: var(--font-display) !important;
  font-size: 1.5rem !important;
  font-weight: 600 !important;
  font-style: italic;
  color: var(--text) !important;
}

/* Updates page card headings */
.update-card-title,
.update-title {
  font-family: var(--font-display) !important;
  font-size: 1.4rem !important;
  font-weight: 600 !important;
  font-style: italic;
  color: var(--text) !important;
}

/* Process step headings */
.process-step-card h3 {
  font-family: var(--font-display) !important;
  font-size: 1.3rem !important;
  font-weight: 600 !important;
  font-style: italic;
  color: var(--text) !important;
}

/* Consistent body text color across all pages */
.page-section p,
.guarantee-card-desc,
.process-step-card p,
.prep-item-text,
.update-card-excerpt,
.litter-card-desc {
  font-family: var(--font-body) !important;
  color: var(--text-2) !important;
  line-height: 1.75 !important;
}

/* Section eyebrow labels — consistent across all pages */
.section-eyebrow,
.page-hero-eyebrow {
  font-family: var(--font-body) !important;
  font-size: 0.72rem !important;
  font-weight: 700 !important;
  letter-spacing: 0.16em !important;
  text-transform: uppercase !important;
  color: var(--primary) !important;
}

/* ============================================================
   24. RESPONSIVE REFINEMENTS
   ============================================================ */

@media (max-width: 768px) {
  /* Slightly smaller hero text glow on mobile */
  .hero-title .highlight {
    text-shadow: 0 0 24px rgba(212,168,83,0.3) !important;
  }

  /* Tighter puppy card hover on mobile */
  .puppy-card:hover {
    transform: translateY(-5px) scale(1.008) !important;
  }

  /* Reduce animation distance on mobile */
  .animate-item {
    transform: translateY(16px) !important;
  }
}

/* ============================================================
   25. PRINT / REDUCED MOTION OVERRIDES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  .floating-inquire {
    animation: none !important;
  }
  .btn-primary:hover {
    animation: none !important;
    background-position: left center !important;
  }
  /* For reduced-motion, skip the slide animation but still reveal at 0.8s */
  @keyframes revealFallback {
    0%   { opacity: 0; }
    100% { opacity: 1; }
  }
  .animate-item {
    transform: none !important;
    transition: opacity 0.3s ease !important;
  }
  .animate-item.visible {
    transform: none !important;
  }
}

/* ============================================================
   26. PAGE TRANSITIONS, BACK-TO-TOP, TOUCH RIPPLE
   ============================================================ */

/* ── Page Transition Curtain ─────────────────────────────────────────── */

#page-transition {
  position: fixed;
  inset: 0;
  background: var(--bg, #FFFCF5);
  z-index: 99990;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.28s cubic-bezier(0.4, 0, 1, 1);
  will-change: opacity;
}

#page-transition.leaving {
  opacity: 1;
  pointer-events: all;
}

/* Page entrance: content fades up on load */
body.page-entering {
  overflow-x: hidden;
}
body.page-entering #main-content,
body.page-entering main {
  animation: pageEnter 0.55s cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes pageEnter {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Back-to-Top Button ──────────────────────────────────────────────── */

.back-to-top {
  position: fixed;
  bottom: 88px; /* sits above mobile bottom nav */
  right: 20px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--primary, #D4A853);
  border: none;
  cursor: pointer;
  z-index: 975;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transform: translateY(16px) scale(0.82);
  transition: opacity 0.3s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease;
  box-shadow: 0 4px 18px rgba(212, 168, 83, 0.38);
  pointer-events: none;
  color: #2C2416;
}

.back-to-top.visible {
  opacity: 1;
  transform: translateY(0) scale(1);
  pointer-events: all;
}

.back-to-top:hover {
  box-shadow: 0 6px 28px rgba(212, 168, 83, 0.55);
  transform: translateY(-3px) scale(1.06) !important;
  background: var(--primary-light, #E8C87A);
}

.back-to-top:active {
  transform: scale(0.94) !important;
}

@media (min-width: 769px) {
  .back-to-top {
    bottom: 32px;
    right: 28px;
  }
}

/* ── Mobile Touch Ripple ─────────────────────────────────────────────── */

.touch-ripple {
  position: fixed;
  width: 0;
  height: 0;
  border-radius: 50%;
  pointer-events: none;
  z-index: 9975;
  background: radial-gradient(circle, rgba(212, 168, 83, 0.32) 0%, transparent 70%);
  transform: translate(-50%, -50%);
  animation: touchRippleExpand 0.55s ease-out forwards;
}

@keyframes touchRippleExpand {
  from { width: 0;    height: 0;    opacity: 0.8; }
  to   { width: 90px; height: 90px; opacity: 0;   }
}

/* ── Hero Gold Text Glow ─────────────────────────────────────────────── */

.hero-highlight,
#hero .text-gold {
  animation: goldPulse 4.5s ease-in-out infinite;
}

@keyframes goldPulse {
  0%, 100% { text-shadow: 0 0 30px rgba(212,168,83,0.25), 0 0 60px rgba(212,168,83,0.1); }
  50%       { text-shadow: 0 0 50px rgba(212,168,83,0.55), 0 0 90px rgba(212,168,83,0.2); }
}

/* ── Sub-page Hero Parallax ──────────────────────────────────────────── */

.page-hero-banner {
  overflow: hidden;
}

.page-hero-banner .container {
  will-change: transform;
}

/* ── Section eyebrow subtle shimmer ─────────────────────────────────── */

.section-eyebrow {
  background: linear-gradient(90deg, var(--primary, #D4A853) 0%, #E8C87A 40%, var(--primary, #D4A853) 100%);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: eyebrowShimmer 5s linear infinite;
}

@keyframes eyebrowShimmer {
  to { background-position: 200% center; }
}

/* ── Puppy card subtle glow on hover ────────────────────────────────── */

.puppy-card:hover {
  box-shadow: 0 20px 60px rgba(212, 168, 83, 0.18), 0 4px 16px rgba(44, 36, 22, 0.08) !important;
}

/* ── Reduced motion ──────────────────────────────────────────────────── */

@media (prefers-reduced-motion: reduce) {
  body.page-entering #main-content,
  body.page-entering main { animation: none !important; }
  #page-transition { transition: none !important; }
  .back-to-top { transition: opacity 0.2s ease !important; }
  .touch-ripple { display: none !important; }
  .hero-highlight, #hero .text-gold { animation: none !important; }
  .section-eyebrow { animation: none !important; -webkit-text-fill-color: var(--primary) !important; }
}

/* ============================================================
   27. PREMIUM SCROLL ANIMATIONS
   ============================================================ */

/* ── System 1: Hero Cinematic Exit ──────────────────────────────────── */

/* Hero becomes a sticky backdrop — subsequent sections scroll over it */
#hero {
  position: sticky !important;
  top: 0 !important;
  z-index: 1 !important;
}

/* Inner elements respond to JS-driven custom properties.
   Exclude .hero-shapes & .paw-particles — they have their own JS parallax transforms */
.hero-content,
.hero-stats,
.hero-scroll-hint {
  transform: scale(var(--hero-scale, 1)) !important;
  opacity: var(--hero-opacity, 1) !important;
  filter: blur(var(--hero-blur, 0px)) !important;
  will-change: transform, opacity, filter;
  transition: none !important;
}

/* main-content needs relative so the absolute SVG thread is positioned correctly */
#main-content {
  position: relative;
}

/* Golden curved arc — the leading edge of #about rising over the hero */
.section-arc {
  position: absolute;
  top: -50px;
  left: -6%;
  right: -6%;
  height: 72px;
  background: var(--bg-2, #FDF6EC);
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  z-index: 5;
  pointer-events: none;
  box-shadow: 0 -6px 28px rgba(212, 168, 83, 0.14);
}

/* All sections after hero stack on top with solid backgrounds */
#main-content > section:not(#hero) {
  position: relative !important;
  z-index: 2 !important;
}

/* ── System 2: Section Stacking Depth ──────────────────────────────── */

#main-content > section:not(#hero) {
  transform: translateY(calc(var(--section-lift, 0) * 30px));
  will-change: transform;
}

.section-in-view {
  box-shadow: 0 -18px 52px -18px rgba(44, 36, 22, 0.09);
}

@media (max-width: 768px) {
  #main-content > section:not(#hero) {
    transform: translateY(calc(var(--section-lift, 0) * 15px));
  }
}

/* ── System 3: Clip-Path Section Reveals ───────────────────────────── */

.clip-reveal {
  clip-path: circle(0% at 50% 50%);
  transition: clip-path 1.05s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: clip-path;
  /* Reset directional slide transforms that may have been added */
  transform: none !important;
  opacity: 1 !important;
}

.clip-reveal.revealed {
  clip-path: circle(120% at 50% 50%) !important;
}

.clip-reveal-diamond {
  clip-path: polygon(50% 50%, 50% 50%, 50% 50%, 50% 50%);
  transition: clip-path 1.15s cubic-bezier(0.22, 1, 0.36, 1) !important;
  will-change: clip-path;
  transform: none !important;
  opacity: 1 !important;
}

.clip-reveal-diamond.revealed {
  clip-path: polygon(50% -35%, 135% 50%, 50% 135%, -35% 50%) !important;
}

/* ── System 4: Scroll Velocity Paw Prints ──────────────────────────── */

.scroll-paw {
  position: fixed;
  width: 30px;
  height: 30px;
  pointer-events: none;
  z-index: 9985;
  opacity: 0;
  animation: pawBurst 0.85s ease-out forwards;
  fill: var(--primary, #D4A853);
  filter: drop-shadow(0 0 7px rgba(212, 168, 83, 0.55));
}

@keyframes pawBurst {
  0%   { opacity: 0.75; transform: scale(0.35) rotate(var(--paw-rot, 0deg)); }
  20%  { opacity: 0.55; transform: scale(1.15) rotate(var(--paw-rot, 0deg)); }
  100% { opacity: 0;    transform: scale(1.25) rotate(var(--paw-rot, 0deg)) translateY(-14px); }
}

/* ── System 5: Golden Thread Connector ─────────────────────────────── */

.golden-thread {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  pointer-events: none;
  z-index: 0;
  overflow: visible;
}

#golden-thread-path {
  filter: drop-shadow(0 0 5px rgba(212, 168, 83, 0.4));
}

@media (max-width: 768px) {
  .golden-thread { display: none !important; }
}

/* ── System 7: Intra-section depth ─────────────────────────────────── */

.section-divider { will-change: transform; }
.section-eyebrow { will-change: transform; }

/* ============================================================
   26a. PREMIUM SCROLL — REDUCED MOTION OVERRIDES
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  /* Hero cinematic exit — disable */
  .hero-content,
  .hero-stats,
  .hero-scroll-hint {
    transform: none !important;
    filter: none !important;
    opacity: 1 !important;
  }
  /* Section stacking — disable */
  #main-content > section:not(#hero) {
    transform: none !important;
    box-shadow: none !important;
    will-change: auto !important;
  }
  /* Clip-path reveals — instant opacity only */
  .clip-reveal,
  .clip-reveal-diamond {
    clip-path: none !important;
    opacity: 0;
    transition: opacity 0.35s ease !important;
  }
  .clip-reveal.revealed,
  .clip-reveal-diamond.revealed {
    opacity: 1 !important;
  }
  /* Hide decorative elements */
  .scroll-paw { display: none !important; }
  .golden-thread { display: none !important; }
  .section-divider,
  .section-eyebrow { will-change: auto !important; }
}