/* ====================================================================
   BEAUTIES OF THE BEASTS — 10 VISUAL LEVEL-UP UPGRADES
   Pure visual excellence. No functional changes.
   ==================================================================== */

/* ================================================================== */
/* 1. HERO LOGO — From flat circle to editorial portrait               */
/*    Adds a rotating gradient ring, scale-on-hover, and              */
/*    a subtle inner glow that matches the ambient background          */
/* ================================================================== */
.hero-portrait-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* The rotating conic gradient ring behind the logo */
.hero-portrait-wrap::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: conic-gradient(
    from 0deg,
    rgba(42,135,101,0) 0%,
    rgba(42,135,101,0.6) 25%,
    rgba(79,169,133,0.8) 40%,
    rgba(42,135,101,0.5) 55%,
    rgba(42,135,101,0) 75%,
    rgba(42,135,101,0) 100%
  );
  animation: ring-spin 8s linear infinite;
  pointer-events: none;
}

/* Mask the inside to keep just the ring */
.hero-portrait-wrap::after {
  content: '';
  position: absolute;
  inset: 2px;
  border-radius: 50%;
  background: var(--color-obsidian-900);
  pointer-events: none;
}

@keyframes ring-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.hero-portrait-wrap img {
  position: relative;
  z-index: 1;
  transition: transform 0.6s cubic-bezier(0.16,1,0.3,1) !important;
}

.hero-portrait-wrap:hover img {
  transform: scale(1.04);
}

/* Outer ambient glow */
.hero-portrait-wrap .portrait-glow {
  position: absolute;
  inset: -40px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(26,110,80,0.18) 0%, transparent 65%);
  pointer-events: none;
  z-index: -1;
}

/* ================================================================== */
/* 2. HERO H1 — Word-by-word gradient text on the headline            */
/*    The rescue count number gets an accent color burst              */
/* ================================================================== */
h1.h-display-xl .count-accent {
  background: linear-gradient(135deg, #4fa985 0%, #2a8765 50%, #8cc7ad 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  font-variation-settings: "opsz" 72, "SOFT" 20, "WONK" 1;
}

/* The eyebrow line above the hero gets a breathing glow */
.hero-eyebrow-line {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.hero-eyebrow-line .line-accent {
  display: block;
  height: 1px;
  width: 32px;
  background: linear-gradient(90deg, rgba(42,135,101,0.3), rgba(79,169,133,1));
  position: relative;
}
.hero-eyebrow-line .line-accent::after {
  content: '';
  position: absolute;
  right: 0; top: 50%;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: rgba(79,169,133,1);
  transform: translateY(-50%);
  box-shadow: 0 0 6px rgba(79,169,133,0.8);
  animation: dot-pulse 2.5s ease-in-out infinite;
}
@keyframes dot-pulse {
  0%, 100% { opacity: 1; box-shadow: 0 0 6px rgba(79,169,133,0.8); }
  50%       { opacity: 0.5; box-shadow: 0 0 12px rgba(79,169,133,0.4); }
}

/* ================================================================== */
/* 3. SECTION EYEBROWS — Animated expanding line on scroll entry      */
/*    The horizontal jade lines before section headings grow in       */
/* ================================================================== */
.section-eyebrow {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.section-eyebrow .eyebrow-line {
  display: block;
  height: 1px;
  width: 0;
  background: linear-gradient(90deg, rgba(42,135,101,0.4), rgba(79,169,133,0.9));
  transition: width 0.9s cubic-bezier(0.16,1,0.3,1) 0.2s;
}

.is-revealed .section-eyebrow .eyebrow-line,
.eyebrow-revealed .section-eyebrow .eyebrow-line {
  width: 32px;
}

/* ================================================================== */
/* 4. STATS / NUMBERS — Oversized editorial number treatment          */
/*    The "75+" count and other numbers get display-scale treatment   */
/* ================================================================== */
[data-count] {
  font-family: 'Fraunces Variable', Georgia, serif;
  font-weight: 300;
  font-size: clamp(2rem, 5vw, 3.5rem);
  letter-spacing: -0.04em;
  color: #f5f2ec;
  font-variation-settings: "opsz" 72, "SOFT" 0, "WONK" 1;
  line-height: 1;
}

/* ================================================================== */
/* 5. MARQUEE BAR — Upgraded visual quality                           */
/*    Gradient fade masks at edges, tighter dot separators            */
/* ================================================================== */
.marquee-container {
  position: relative;
}
.marquee-container::before,
.marquee-container::after {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  width: 80px;
  z-index: 2;
  pointer-events: none;
}
.marquee-container::before {
  left: 0;
  background: linear-gradient(90deg, rgba(6,34,24,0.95) 0%, transparent 100%);
}
.marquee-container::after {
  right: 0;
  background: linear-gradient(270deg, rgba(6,34,24,0.95) 0%, transparent 100%);
}

/* ================================================================== */
/* 6. CARDS — Diagonal texture overlay on hover                       */
/*    Care program cards get a subtle scale-space pattern on hover    */
/* ================================================================== */
.border.border-obsidian-700\/60.bg-obsidian-900\/70,
div[class*="border-obsidian-700/60"][class*="bg-obsidian-900"] {
  background-image: 
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 8px,
      rgba(42,135,101,0.02) 8px,
      rgba(42,135,101,0.02) 9px
    ) !important;
  transition: background-image 0.3s ease, transform 0.3s cubic-bezier(0.16,1,0.3,1),
              box-shadow 0.3s ease, border-color 0.3s ease !important;
}

div[class*="border-obsidian-700/60"][class*="bg-obsidian-900"]:hover {
  background-image:
    repeating-linear-gradient(
      -45deg,
      transparent 0px,
      transparent 8px,
      rgba(42,135,101,0.05) 8px,
      rgba(42,135,101,0.05) 9px
    ) !important;
}

/* ================================================================== */
/* 7. BUTTONS — Premium glass morphism secondary button               */
/*    The "Meet the Reptiles" ghost button gets a glass refraction    */
/* ================================================================== */
a[href="/adopt"].inline-flex,
a[href*="adopt"].inline-flex:not([href*="zeffy"]):not(.btn-sheen) {
  background: rgba(255,255,255,0.04) !important;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  transition: background 0.3s ease, border-color 0.3s ease,
              transform 0.2s ease, box-shadow 0.3s ease !important;
}
a[href="/adopt"].inline-flex:hover,
a[href*="adopt"].inline-flex:not([href*="zeffy"]):not(.btn-sheen):hover {
  background: rgba(42,135,101,0.08) !important;
  border-color: rgba(42,135,101,0.5) !important;
  box-shadow: 0 0 24px rgba(42,135,101,0.15) !important;
}

/* ================================================================== */
/* 8. HERO SECTION — Organic scale-pattern SVG background             */
/*    Replace the simple diagonal line repeat with a reptile-         */
/*    inspired subtle scale/hex grid overlay                          */
/* ================================================================== */
.skin-bg {
  background-color: var(--color-obsidian-900);
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='52' viewBox='0 0 60 52'%3E%3Cpath d='M30 0 L60 17.3 L60 34.6 L30 52 L0 34.6 L0 17.3Z' fill='none' stroke='rgba(42,135,101,0.04)' stroke-width='0.5'/%3E%3C/svg%3E"),
    radial-gradient(ellipse 80% 60% at 15% 25%, rgba(26,110,80,0.16) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 85% 75%, rgba(26,110,80,0.09) 0%, transparent 50%),
    radial-gradient(ellipse 60% 40% at 50% 100%, rgba(6,7,10,0.7) 0%, transparent 60%) !important;
  background-size: 60px 52px, 100% 100%, 100% 100%, 100% 100% !important;
}

/* ================================================================== */
/* 9. FAQ SECTION — Accordion hover with left bar indicator           */
/*    The FAQ items on the homepage get a premium accordion feel      */
/* ================================================================== */
.border-t.border-obsidian-700.pt-6 {
  position: relative;
  padding-left: 0;
  transition: padding-left 0.4s cubic-bezier(0.16,1,0.3,1);
}
.border-t.border-obsidian-700.pt-6::before {
  content: '';
  position: absolute;
  left: 0; top: 24px; bottom: 0;
  width: 0;
  background: linear-gradient(180deg, rgba(42,135,101,0.7), rgba(42,135,101,0.1));
  transition: width 0.35s cubic-bezier(0.16,1,0.3,1);
}
.border-t.border-obsidian-700.pt-6:hover::before {
  width: 2px;
}
.border-t.border-obsidian-700.pt-6:hover {
  padding-left: 12px;
}

/* ================================================================== */
/* 10. FOOTER — Premium branded treatment                             */
/*     Subtle reptile-scale SVG watermark, richer layout visual      */
/* ================================================================== */
footer .container-edge {
  position: relative;
}
footer .container-edge::after {
  content: '';
  position: absolute;
  bottom: 80px;
  right: -20px;
  width: 320px;
  height: 320px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300' viewBox='0 0 300 300'%3E%3Ccircle cx='150' cy='150' r='140' fill='none' stroke='rgba(42,135,101,0.04)' stroke-width='1'/%3E%3Ccircle cx='150' cy='150' r='100' fill='none' stroke='rgba(42,135,101,0.03)' stroke-width='1'/%3E%3Ccircle cx='150' cy='150' r='60' fill='none' stroke='rgba(42,135,101,0.025)' stroke-width='1'/%3E%3C/svg%3E") no-repeat center;
  background-size: contain;
  pointer-events: none;
  opacity: 0.6;
  animation: watermark-breathe 8s ease-in-out infinite;
}
@keyframes watermark-breathe {
  0%, 100% { opacity: 0.4; transform: scale(1) rotate(0deg); }
  50%       { opacity: 0.7; transform: scale(1.03) rotate(5deg); }
}

/* Footer column titles get a refined separator */
footer [class*="font-mono"][class*="jade-300"] {
  position: relative;
  padding-bottom: 0.6rem;
}
footer [class*="font-mono"][class*="jade-300"]::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 20px; height: 1px;
  background: rgba(42,135,101,0.5);
  transition: width 0.4s cubic-bezier(0.16,1,0.3,1);
}
footer:hover [class*="font-mono"][class*="jade-300"]::after {
  width: 32px;
}

/* Copyright line — refined */
footer .border-t.border-obsidian-800 {
  position: relative;
  border-image: linear-gradient(90deg, transparent, rgba(42,135,101,0.2), transparent) 1 !important;
}

/* ================================================================== */
/* BONUS: Custom text cursor glow (existing #cursor-glow enhancement) */
/* ================================================================== */
#cursor-glow {
  width: 500px !important;
  height: 500px !important;
  background: radial-gradient(circle,
    rgba(42,135,101,0.055) 0%,
    rgba(26,110,80,0.02) 40%,
    transparent 70%) !important;
  transition: transform 0.08s ease,
              opacity 0.3s ease !important;
}

/* ================================================================== */
/* BONUS: Section number labels get editorial scale                   */
/* ================================================================== */
.font-mono.text-\[10px\].tracking-widest-2.text-jade-300:first-child,
span.font-mono.text-\[10px\].text-jade-300 {
  font-size: 9px !important;
  letter-spacing: 0.3em !important;
  opacity: 0.7;
}

/* ================================================================== */
/* ACCESSIBILITY + MOTION SAFETY                                       */
/* ================================================================== */
@media (prefers-reduced-motion: reduce) {
  .hero-portrait-wrap::before { animation: none; }
  .hero-eyebrow-line .line-accent::after { animation: none; }
  footer .container-edge::after { animation: none; }
  @keyframes ring-spin { from { transform: none; } to { transform: none; } }
}

/* ================================================================== */
/* MOBILE REFINEMENTS                                                  */
/* ================================================================== */
@media (max-width: 768px) {
  .hero-portrait-wrap::before { inset: -2px; }
  footer .container-edge::after { display: none; }
  .marquee-container::before,
  .marquee-container::after { width: 40px; }
}

/* ================================================================== */
/* SCALE-PATTERN DIVIDER — signature reptile motif                      */
/* Subtle SVG arc-row that replaces / augments section borders          */
/* Apply by adding `.scale-divider` to a section's parent or inserting  */
/* `<div class="scale-divider" aria-hidden="true"></div>` between secs  */
/* ================================================================== */
.scale-divider {
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'><path d='M0 8 Q 5 0 10 8 Q 15 0 20 8 Q 25 0 30 8 Q 35 0 40 8 Q 45 0 50 8 Q 55 0 60 8' stroke='%2386c9a8' stroke-opacity='0.22' fill='none' stroke-width='1'/></svg>");
  background-repeat: repeat-x;
  background-size: 60px 8px;
  background-position: center center;
  width: 100%;
  border: 0;
}

/* Apply scale pattern over an existing top border on a section */
.scale-border-top {
  position: relative;
}
.scale-border-top::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 8px;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 8' preserveAspectRatio='none'><path d='M0 8 Q 5 0 10 8 Q 15 0 20 8 Q 25 0 30 8 Q 35 0 40 8 Q 45 0 50 8 Q 55 0 60 8' stroke='%2386c9a8' stroke-opacity='0.22' fill='none' stroke-width='1'/></svg>");
  background-repeat: repeat-x;
  background-size: 60px 8px;
  pointer-events: none;
}

/* ================================================================== */
/* FIX: lazy-loaded images stuck at opacity:0 in static HTML            */
/* The base CSS sets img[loading="lazy"]{opacity:0} expecting React to  */
/* flip to 1 on load. In our static export we restore native behavior.  */
/* ================================================================== */
img[loading="lazy"] {
  opacity: 1 !important;
  transition: none !important;
}

/* ================================================================== */
/* MOBILE: scale up tiny monospace labels for readability               */
/* The design uses text-[9px]/text-[10px] tracking-widest labels that  */
/* become illegible on small screens. Floor them at 11px on mobile.     */
/* ================================================================== */
@media (max-width: 767px) {
  /* Taxonomy labels e.g. [ Ball Python · Python regius ] */
  .font-mono[class*="text-[9px]"],
  [class*="tracking-widest"][class*="text-[9px]"] {
    font-size: 11px !important;
    letter-spacing: 0.1em !important;
  }

  /* Section overlines, stat labels, badge text */
  .font-mono[class*="text-[10px]"],
  [class*="tracking-widest"][class*="text-[10px]"] {
    font-size: 11px !important;
  }

  /* Slightly bump 11px labels too */
  .font-mono[class*="text-[11px]"],
  [class*="tracking-widest"][class*="text-[11px]"] {
    font-size: 12px !important;
  }

  /* Blockquote / pullquote - make sure it reads on narrow screens */
  blockquote.font-display,
  .font-display[style],
  blockquote {
    font-size: 1.1rem !important;
    line-height: 1.55 !important;
  }
}