/*
Aventura Energy — Liquid Glass theme styles.
Tailwind is intentionally NOT used here — the HTML markup was written
against Tailwind's CDN build originally (utility classes like
`flex items-center gap-3`), and those utility class names still work
fine as long as this stylesheet defines the custom pieces (.liquid-glass,
.reveal, animations, etc). If you want to drop the Tailwind CDN `<script>`
dependency entirely, run the markup through the Tailwind CLI to compile
a static utilities file — not done here to keep the theme dependency-free
at handoff.
*/

body { font-family: 'Inter', sans-serif; background: var(--bg-dark, #0A0E14); color: #F3F4F6; }
h1, h2 { font-family: 'Space Grotesk', sans-serif; }

.hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(var(--bg-dark-rgb),.05) 0%, rgba(var(--bg-dark-rgb),.35) 55%, rgba(var(--bg-dark-rgb),.92) 100%); }

/* =========================================================
   LIQUID GLASS — real refraction via SVG feDisplacementMap,
   not just blur. Falls back to blur+saturate where the
   browser doesn't support url() filters in backdrop-filter.
========================================================= */
.liquid-glass {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.08);
  backdrop-filter: blur(18px) saturate(1.6);
  -webkit-backdrop-filter: blur(18px) saturate(1.6);
  border: 1px solid rgba(255,255,255,.35);
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,.5),
    inset 0 -6px 12px -8px rgba(255,255,255,.15),
    0 20px 45px -15px rgba(0,0,0,.5);
}
/* Real SVG-refraction is GPU-expensive — reserved for a handful of
   "hero" elements only (.liquid-refract). Every other .liquid-glass
   card uses plain blur+saturate so pages with many cards stay smooth. */
@supports (backdrop-filter: url(#x)) {
  .liquid-glass.liquid-refract {
    backdrop-filter: url(#liquid-distortion) blur(6px) saturate(1.7) brightness(1.05);
    -webkit-backdrop-filter: url(#liquid-distortion) blur(6px) saturate(1.7) brightness(1.05);
  }
}
.liquid-glass::before {
  content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(115deg, rgba(255,255,255,.1) 0%, transparent 35%, transparent 70%, rgba(255,255,255,.05) 100%);
}

.liquid-pill { border-radius: 9999px; }
.liquid-card { border-radius: 1.75rem; }

.liquid-nav { transition: all .5s cubic-bezier(.23,1,.32,1); }

.reveal { opacity: 0; transform: translateY(30px); transition: opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1); }
.reveal.visible { opacity: 1; transform: translateY(0); }
.reveal-left { opacity: 0; transform: translateX(-45px); transition: opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1); }
.reveal-left.visible { opacity: 1; transform: translateX(0); }
.reveal-right { opacity: 0; transform: translateX(45px); transition: opacity .9s cubic-bezier(.23,1,.32,1), transform .9s cubic-bezier(.23,1,.32,1); }
.reveal-right.visible { opacity: 1; transform: translateX(0); }

.btn-primary {
  background: linear-gradient(135deg,var(--accent-gold),var(--accent-gold-light));
  color: var(--bg-dark, #0A0E14); transition: all .4s cubic-bezier(.23,1,.32,1);
  box-shadow: inset 0 1px 1px rgba(255,255,255,.6), 0 8px 24px -8px rgba(var(--accent-gold-rgb),.5);
}
.btn-primary:hover { transform: translateY(-2px) scale(1.02); box-shadow: inset 0 1px 1px rgba(255,255,255,.7), 0 12px 32px -8px rgba(var(--accent-gold-rgb),.65); }

@keyframes float { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
.float { animation: float 7s ease-in-out infinite; }

@keyframes drift-a { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(50px,-30px) scale(1.1); } }
@keyframes drift-b { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-40px,30px) scale(1.05); } }
.blob-a { animation: drift-a 18s ease-in-out infinite; }
.blob-b { animation: drift-b 22s ease-in-out infinite; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); pointer-events: none; }

@keyframes marquee { 0% { transform: translateX(0) } 100% { transform: translateX(-50%) } }
.marquee-track { display: flex; width: max-content; animation: marquee 36s linear infinite; }
.marquee-track:hover { animation-play-state: paused; }

.hamburger span { transition: all .3s ease; display: block; background: #F3F4F6; }
.hamburger.active span:nth-child(1) { transform: rotate(45deg) translate(6px,6px); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: rotate(-45deg) translate(6px,-6px); }

::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: var(--bg-dark, #0A0E14); }
::-webkit-scrollbar-thumb { background: rgba(var(--accent-gold-rgb),.4); }

@keyframes modal-in { from { opacity: 0; transform: scale(.94) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal-left, .reveal-right { opacity: 1; transform: none; transition: none; }
  .marquee-track { animation: none; }
  .float, .blob-a, .blob-b { animation: none; }
  .liquid-glass::after { display: none; }
}