html,
body {
  background: #0a0a0a;
}
.hero {
  position: relative;
  z-index: 10;
}
.hero,
.glass-section {
  font-family: "Satoshi", sans-serif;
}

.creative-svg {
  width: 100%;
  height: 100vh;
  display: block;
}

/* Section wrapper */
.glass-section {
  position: relative;
  /* ✨ Add this */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 6vw;
}

.glass-panel {
  position: relative;
  /* Already present — good */
}

.parallax-heading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
  font-size: clamp(2rem, 6vw, 7rem);
  color: whitesmoke;
  pointer-events: none;
  mix-blend-mode: lighten;
  will-change: transform;
}

/* ===========================
   REMOVE GLASS FROM CREATIVE SVG
   =========================== */
.glass-panel:has(.creative-svg) {
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border: none;
  box-shadow: none;
}

/* Text rendering */
text {
  letter-spacing: -0.02em;
  dominant-baseline: middle;
}

.glass-bg {
  position: relative;
  border-radius: 20px;

  background: linear-gradient(to bottom,
      rgba(255, 255, 255, 0.14),
      rgba(255, 255, 255, 0.04));

  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);

  border: 1px solid rgba(255, 255, 255, 0.18);

  box-shadow:
    0 20px 40px rgba(0, 0, 0, 0.35),
    inset 0 1px 0 rgba(255, 255, 255, 0.25);

  overflow: hidden;

  /* 🔑 REQUIRED for blend modes */
  isolation: isolate;
}

.glass-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;

  background: linear-gradient(135deg,
      rgba(255, 255, 255, 0.28) 0%,
      rgba(255, 255, 255, 0.12) 35%,
      rgba(255, 255, 255, 0.04) 60%,
      rgba(0, 0, 0, 0.18) 100%);

  opacity: 0.6;
}

.flash-dot {
  position: absolute;
  width: 120px;
  height: 120px;
  pointer-events: none;

  background: radial-gradient(circle at center,
      rgba(255, 255, 255, 0.75) 0%,
      rgba(255, 255, 255, 0.35) 30%,
      rgba(255, 255, 255, 0) 65%);

  filter: blur(8px);
  opacity: 0;
  mix-blend-mode: screen;

  animation: camera-flash 6.5s ease-in-out infinite;
}

.flash-1 {
  top: 8%;
  left: 10%;
  animation-delay: 0s;
}

.flash-2 {
  top: 18%;
  right: 8%;
  width: 150px;
  height: 150px;
  animation-delay: 1.2s;
}

.flash-3 {
  bottom: 16%;
  left: 24%;
  width: 100px;
  height: 100px;
  animation-delay: 2.6s;
}

.flash-4 {
  bottom: 10%;
  right: 18%;
  width: 140px;
  height: 140px;
  animation-delay: 3.8s;
}

.flash-fast {
  position: absolute;
  width: 80px;
  height: 80px;
  pointer-events: none;

  background: radial-gradient(circle at center,
      rgba(255, 255, 255, 1) 0%,
      rgba(255, 255, 255, 0.7) 30%,
      rgba(255, 255, 255, 0) 70%);

  filter: blur(6px);
  opacity: 0;
  mix-blend-mode: screen;

  animation: quick-flash 3s ease-in-out infinite;
}

.flash-5 {
  top: 5%;
  left: 40%;
  animation-delay: 0.8s;
}

.flash-6 {
  bottom: 20%;
  right: 40%;
  animation-delay: 1.7s;
}

@keyframes camera-flash {
  0% {
    opacity: 0;
    transform: scale(0.9);
  }

  6% {
    opacity: 0.55;
    transform: scale(1.05);
  }

  10% {
    opacity: 0.18;
    transform: scale(1);
  }

  14% {
    opacity: 0;
    transform: scale(0.95);
  }

  100% {
    opacity: 0;
  }
}

@keyframes quick-flash {
  0% {
    opacity: 0;
    transform: scale(0.8);
  }

  3% {
    opacity: 0.9;
    transform: scale(1.1);
  }

  6% {
    opacity: 0.4;
    transform: scale(1);
  }

  10% {
    opacity: 0;
  }

  100% {
    opacity: 0;
  }
}

/* ============================================================
   Tier list — hover swipe-up
   Webflow markup on index.html (.list-parent links: Home, Brands,
   Icons, Platinums, Essentials, Contact). The original Webflow
   Interactions JS that drove this animation was stripped during
   migration; this CSS-only implementation restores the effect.

   .card-whipe.bg-hover already has base styling in
   br-market-group.br.css (position: absolute; inset: auto auto 0 0;
   100% width/height; background-color: var(--text-colors--hover)).
   We just animate it from below into place on hover.
   ============================================================ */

.list-parent {
  overflow: hidden;
}

.list-parent .card-whipe.bg-hover {
  transform: translateY(100%);
  transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
  pointer-events: none;
  z-index: 0;
}

.list-parent:hover .card-whipe.bg-hover,
.list-parent:focus-visible .card-whipe.bg-hover {
  transform: translateY(0);
}

/* Keep the link content (heading, number, border, tag) above the
   swipe overlay so the swipe colors the background, not the text. */
.list-parent > :not(.card-whipe) {
  position: relative;
  z-index: 1;
}

@media (prefers-reduced-motion: reduce) {
  .list-parent .card-whipe.bg-hover {
    transition: none;
  }
}