/* ============================================================
   XWhiz 3D / Glassmorphism overlay  (visual-only, add-on layer)
   Loaded AFTER site.css. Defines the missing brand greens plus
   the 2026 football-green 3D visual system. No content, SEO,
   link, or layout changes.
   ============================================================ */

/* ---------- Brand green palette (defines classes the HTML already uses) ---------- */
:root {
  --xw-green: #00a651;          /* vibrant football green */
  --xw-green-700: #008a44;
  --xw-green-800: #00723a;
  --xw-green-soft: rgba(0, 166, 81, .12);
  --xw-green-glow: rgba(0, 255, 120, .35);
  --xw-lime: #7dfc9a;
  --xw-gold: #ffc531;
  --xw-ink: #05301f;
  --xw-glass: rgba(255, 255, 255, .55);
  --xw-glass-strong: rgba(255, 255, 255, .72);
}

/* Fix the missing utilities the HTML already references */
.bg-brand-600 { background-color: var(--xw-green) !important; }
.hover\:bg-brand-700:hover { background-color: var(--xw-green-700) !important; }
.text-brand-700 { color: var(--xw-green-700) !important; }

/* Slightly harder (accessible) green on the class used for badges */
.hover\:bg-green-700:hover { background-color: var(--xw-green-700) !important; }

/* ---------- 3D canvas backdrop (never blocks scroll/touch) ---------- */
#xw-bg-canvas {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;      /* lets clicks/scroll pass through */
  touch-action: none;        /* even on touch, canvas never traps gestures */
}

/* ---------- Site backdrop: deep green field → light gradient ---------- */
body {
  background:
    radial-gradient(1200px 800px at 85% -5%, rgba(0, 128, 64, .18), transparent 60%),
    radial-gradient(900px 700px at -10% 30%, rgba(0, 190, 90, .14), transparent 55%),
    radial-gradient(1000px 900px at 50% 120%, rgba(0, 90, 40, .20), transparent 60%),
    #f4f9f5;
  background-attachment: fixed;
}

/* Give white cards a subtle green-tinted glass lift */
.bg-white,
.rounded-2xl.border,
.rounded-3xl,
section .grid > * {
  background-color: var(--xw-glass);
  -webkit-backdrop-filter: blur(14px) saturate(1.25);
  backdrop-filter: blur(14px) saturate(1.25);
  box-shadow: 0 8px 32px rgba(0, 90, 40, .10), 0 1px 2px rgba(0, 90, 40, .05);
  border-color: rgba(255, 255, 255, .65) !important;
}

/* ---------- Glassmorphism nav ---------- */
header, nav:not([class*="bg-zinc-900"]),
[class*="sticky"] {
  background: var(--xw-glass-strong);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid rgba(255, 255, 255, .55);
  box-shadow: 0 8px 30px rgba(0, 90, 40, .08);
}

/* Logo tile gradient */
[class*="bg-brand-600"]:has(span), 
a[href^="/"] .rounded-lg.bg-brand-600,
[class*="bg-brand-600"][class*="flex"]:first-of-type {
  background: linear-gradient(135deg, #00b762, #00804a 60%, #00a651);
  box-shadow: 0 6px 18px rgba(0, 166, 81, .4);
}

/* ---------- Liquid / gradient 3D buttons ---------- */
a[class*="bg-brand-600"],
button[class*="bg-brand-600"] {
  background: linear-gradient(120deg, #00b762 0%, #00a651 50%, #00723a 100%) !important;
  background-size: 200% 200%;
  border: 1px solid rgba(255, 255, 255, .35);
  box-shadow: 0 10px 28px rgba(0, 166, 81, .45), inset 0 1px 0 rgba(255, 255, 255, .35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  position: relative;
  overflow: hidden;
  animation: xw-liquid 6s ease-in-out infinite;
}
a[class*="bg-brand-600"]::after,
button[class*="bg-brand-600"]::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 35%, rgba(255, 255, 255, .55) 50%, transparent 65%);
  transform: translateX(-120%);
  animation: xw-shine 3.2s ease-in-out infinite;
}

@keyframes xw-liquid {
  0%, 100% { background-position: 0% 0%; }
  50% { background-position: 100% 100%; }
}
@keyframes xw-shine {
  0% { transform: translateX(-120%); }
  55%, 100% { transform: translateX(120%); }
}

/* ---------- Prediction / news cards: glass + 3D tilt surface ---------- */
[data-tilt] {
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform .35s cubic-bezier(.22, 1, .36, 1), box-shadow .35s ease;
  border: 1px solid rgba(255, 255, 255, .7) !important;
  background: rgba(255, 255, 255, .5);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
[data-tilt]:hover {
  box-shadow: 0 30px 60px rgba(0, 120, 60, .25), 0 0 0 1px rgba(0, 200, 100, .25);
}

/* ---------- Scroll-reveal entrance ---------- */
.xw-reveal {
  opacity: 0;
  transform: translateY(28px) scale(.985);
  transition: opacity .7s ease, transform .7s cubic-bezier(.22, 1, .36, 1);
  will-change: opacity, transform;
}
.xw-reveal.xw-in {
  opacity: 1;
  transform: none;
}

/* Subtle green glow behind key headlines */
h1, h2[class*="extrabold"] {
  text-shadow: 0 2px 24px rgba(0, 200, 110, .25);
}

/* ---------- Morphing gradient accents ---------- */
.xw-hero, .xw-ball { filter: drop-shadow(0 14px 28px rgba(0, 160, 80, .35)); }

/* ---------- GUARDS: reduced motion → kill all animation/motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
    scroll-behavior: auto !important;
  }
  a[class*="bg-brand-600"]::after,
  button[class*="bg-brand-600"]::after { display: none; }
  .xw-reveal { opacity: 1; transform: none; }
  [data-tilt] { transform: none !important; }
}

/* ---------- GUARDS: mobile → lighten glass, keep 3D subtle ---------- */
@media (max-width: 767px) {
  body { background-attachment: scroll; }
  .bg-white, .rounded-2xl.border, .rounded-3xl,
  section .grid > * {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    background-color: rgba(255, 255, 255, .78);
  }
}

/* ---------- GUARDS: no-JS graceful fallback ---------- */
html:not(.xw-js) .xw-reveal { opacity: 1; transform: none; }