/* ============================================================
   FRESNO WATERSPORTS — REAL LIQUID GLASS LAYER
   Loaded AFTER style.css so it enhances the existing glass system.
   Technique: SVG feDisplacementMap refracts the real backdrop
   (Chromium) with a graceful blur fallback (Safari / iOS / Firefox).
   Everything keeps the existing pink / purple / cyan palette.
   ============================================================ */

/* ---- 1. Richer glass rim (upgrades EVERY card at once) ----
   Every glass box uses box-shadow: ..., var(--glass-highlight).
   Overriding the token gives them all a crisp refractive edge. */
:root {
  --glass-highlight:
    inset 0 1px 1px rgba(255, 255, 255, 0.9),
    inset 1px 0 1px rgba(255, 255, 255, 0.35),
    inset -1px 0 1px rgba(255, 255, 255, 0.25),
    inset 0 -1px 2px rgba(255, 255, 255, 0.16),
    inset 0 0 0 1px rgba(255, 255, 255, 0.22);
  --glass-sheen: linear-gradient(
    125deg,
    rgba(255, 255, 255, 0.55) 0%,
    rgba(255, 255, 255, 0.10) 22%,
    rgba(255, 255, 255, 0.02) 48%,
    rgba(255, 255, 255, 0.06) 70%,
    rgba(255, 255, 255, 0.30) 100%
  );
}

/* Hidden SVG host injected by liquid-glass.js */
.lg-svg { position: absolute; width: 0; height: 0; overflow: hidden; pointer-events: none; }

/* ---- 2. Real refraction on every glass surface ----
   @supports(url) is only true where SVG backdrop filters actually
   work (Chromium). Everywhere else the original blur remains. */
@supports (backdrop-filter: url(#lg-strong)) {
  .nav.scrolled,
  .stat-item,
  .delivery-card,
  .testimonial-card,
  .faq-item,
  .chat-window,
  .booking-toast,
  .promo-banner,
  .countdown-banner,
  .hero-pill {
    backdrop-filter: url(#lg-strong) blur(5px) saturate(1.8) brightness(1.05);
  }
  .nav.scrolled {
    backdrop-filter: url(#lg-subtle) blur(10px) saturate(1.7) brightness(1.03);
  }
  /* refraction reads best over a lighter tint */
  .delivery-card,
  .testimonial-card,
  .faq-item,
  .stat-item { background-color: rgba(255, 255, 255, 0.30); }
}

/* ---- 3. Interactive specular glint + 3D tilt ----
   JS adds .lg-tilt and injects a .lg-glint child into glass cards. */
.lg-tilt {
  transform-style: preserve-3d;
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
  will-change: transform;
}
.lg-glint {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 4;
  opacity: 0;
  transition: opacity 0.4s ease;
  background:
    radial-gradient(180px 180px at var(--gx, 50%) var(--gy, 0%),
      rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.08) 45%, transparent 68%),
    radial-gradient(320px 320px at var(--gx, 50%) var(--gy, 0%),
      rgba(249, 83, 198, 0.16), transparent 60%);
  mix-blend-mode: screen;
}
.lg-tilt:hover .lg-glint { opacity: 1; }
.lg-tilt:hover {
  box-shadow:
    var(--shadow-xl),
    var(--glass-highlight),
    0 0 40px -12px rgba(249, 83, 198, 0.5);
}

/* ---- 4. Hero: animated light caustics (sun dancing on water) ---- */
.hero-caustics {
  position: absolute;
  inset: -10%;
  z-index: 4;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.55;
  background:
    radial-gradient(38% 30% at 22% 18%, rgba(120, 200, 255, 0.35), transparent 60%),
    radial-gradient(34% 26% at 74% 30%, rgba(249, 83, 198, 0.28), transparent 62%),
    radial-gradient(46% 34% at 50% 82%, rgba(0, 210, 220, 0.25), transparent 64%);
  filter: blur(28px);
  animation: causticsDrift 16s ease-in-out infinite alternate;
}
@keyframes causticsDrift {
  0%   { transform: translate3d(-2%, -1%, 0) scale(1.05); }
  50%  { transform: translate3d(3%, 2%, 0) scale(1.12); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.08); }
}

/* God-ray shimmer sweeping down through the hero */
.hero-rays {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  mix-blend-mode: screen;
  opacity: 0.28;
  background: repeating-linear-gradient(
    100deg,
    transparent 0px,
    transparent 60px,
    rgba(255, 255, 255, 0.06) 60px,
    rgba(255, 255, 255, 0.16) 90px,
    transparent 120px,
    transparent 220px
  );
  transform: translateY(-8%) rotate(2deg);
  animation: rayShift 9s linear infinite;
}
@keyframes rayShift {
  0%   { background-position: 0 0; }
  100% { background-position: 900px 0; }
}

/* ---- 5. Floating liquid-glass price pills in hero ---- */
.hero-pills {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 34px;
  animation: fadeSlideUp 0.8s var(--ease-out-expo) 1.4s both;
}
.hero-pill {
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 128px;
  padding: 12px 22px;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.35);
  backdrop-filter: blur(14px) saturate(1.6);
  -webkit-backdrop-filter: blur(14px) saturate(1.6);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25), var(--glass-highlight);
  color: #fff;
  transition: transform 0.35s var(--ease-out-expo), box-shadow 0.35s ease;
}
.hero-pill::after {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--glass-sheen);
  opacity: 0.7;
  pointer-events: none;
}
.hero-pill:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 44px rgba(249, 83, 198, 0.35), var(--glass-highlight);
}
.hero-pill .pill-value {
  font-family: var(--font-display);
  font-weight: 800;
  font-size: 1.25rem;
  line-height: 1;
  background: var(--gradient-text);
  background-size: 200% auto;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s linear infinite;
}
.hero-pill .pill-label {
  font-family: var(--font-display);
  font-size: 0.55rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.75);
  margin-top: 6px;
}

/* ---- 6. Liquid-glass upgrade for the outline (glass) buttons ---- */
.btn-outline {
  backdrop-filter: blur(6px) saturate(1.4);
  -webkit-backdrop-filter: blur(6px) saturate(1.4);
  box-shadow: var(--glass-highlight);
}
@supports (backdrop-filter: url(#lg-subtle)) {
  .hero .btn-outline:hover {
    backdrop-filter: url(#lg-subtle) blur(4px) saturate(1.6);
  }
}

/* ---- 6b. SplashBooq dedicated booking blocks ---- */
.sb-book-block { margin-bottom: 56px; }
.sb-book-block:last-child { margin-bottom: 0; }
.sb-book-title {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
  color: var(--text-primary);
}
.sb-book-title span {
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 0.85rem;
  color: var(--text-secondary);
  letter-spacing: 0;
}

/* ---- 7. Respect user preferences & weaker devices ---- */
@media (prefers-reduced-motion: reduce) {
  .hero-caustics, .hero-rays { animation: none; }
  .lg-tilt { transition: none; }
}
/* Touch devices (mostly iOS Safari) skip tilt transforms & heavy rays */
@media (hover: none) {
  .lg-tilt { transform: none !important; }
  .hero-rays { opacity: 0.18; }
}