/* ==========================================================================
   EAT Meals — Dashboard Enhancements
   Scroll animations · Atmosphere · Micro-interactions · Visual polish
   ========================================================================== */

/* ---- 1. SELECTION COLOR ------------------------------------------------ */
::selection {
  background: rgba(255, 122, 26, 0.28);
  color: #ffffff;
}

::-moz-selection {
  background: rgba(255, 122, 26, 0.28);
  color: #ffffff;
}

/* ---- 2. SCROLL REVEAL BASE STATES -------------------------------------- */
/* Elements start invisible and get revealed by JS IntersectionObserver / GSAP */
[data-reveal] {
  opacity: 0;
  will-change: transform, opacity;
}

[data-reveal="up"] {
  transform: translateY(40px);
}

[data-reveal="scale"] {
  transform: scale(0.92);
}

[data-reveal="left"] {
  transform: translateX(-40px);
}

[data-reveal="right"] {
  transform: translateX(40px);
}

[data-reveal="fade"] {
  transform: none;
}

/* Revealed state (GSAP handles the tween, but this is the fallback) */
[data-reveal].is-revealed {
  opacity: 1;
  transform: none;
}

/* ---- 3. ATMOSPHERE — FLOATING GLOW ORBS -------------------------------- */
.atmosphere-layer {
  position: fixed;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  overflow: hidden;
}

.atmo-orb {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0;
  will-change: transform, opacity;
  animation: orbFloat 18s ease-in-out infinite alternate;
}

.atmo-orb--1 {
  width: 380px;
  height: 380px;
  background: radial-gradient(circle, rgba(255, 122, 26, 0.10) 0%, transparent 70%);
  top: 8%;
  right: -5%;
  animation-delay: 0s;
  animation-duration: 20s;
  opacity: 1;
}

.atmo-orb--2 {
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(0, 212, 255, 0.08) 0%, transparent 70%);
  bottom: 20%;
  left: -8%;
  animation-delay: -6s;
  animation-duration: 24s;
  opacity: 1;
}

.atmo-orb--3 {
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(255, 107, 107, 0.06) 0%, transparent 70%);
  top: 55%;
  right: 15%;
  animation-delay: -12s;
  animation-duration: 22s;
  opacity: 1;
}

@keyframes orbFloat {
  0% {
    transform: translate(0, 0) scale(1);
  }
  33% {
    transform: translate(30px, -20px) scale(1.08);
  }
  66% {
    transform: translate(-20px, 15px) scale(0.95);
  }
  100% {
    transform: translate(15px, -30px) scale(1.04);
  }
}

/* ---- 4. HERO SHIMMER SWEEP --------------------------------------------- */
.overview-hero--premium,
.rewards-banner,
.account-hero {
  overflow: hidden;
}

.hero-shimmer {
  position: absolute;
  top: 0;
  left: -100%;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 20%,
    rgba(255, 255, 255, 0.03) 40%,
    rgba(255, 255, 255, 0.06) 50%,
    rgba(255, 255, 255, 0.03) 60%,
    transparent 80%
  );
  pointer-events: none;
  z-index: 1;
  animation: heroShimmer 6s ease-in-out infinite;
  animation-delay: 2s;
}

@keyframes heroShimmer {
  0%, 100% {
    left: -100%;
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  50% {
    left: 200%;
    opacity: 1;
  }
  60%, 100% {
    left: 200%;
    opacity: 0;
  }
}

/* ---- 5. CARD TILT + GLOW ON HOVER ------------------------------------- */
.card-tilt {
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.card-tilt:hover {
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(255, 255, 255, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Glow border effect */
.card-tilt::after {
  content: '';
  position: absolute;
  inset: -1px;
  border-radius: inherit;
  background: linear-gradient(
    135deg,
    rgba(0, 212, 255, 0.15),
    transparent 40%,
    transparent 60%,
    rgba(255, 122, 26, 0.12)
  );
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
  z-index: -1;
}

.card-tilt:hover::after {
  opacity: 1;
}

/* ---- 6. STAGGER DIM SIBLINGS ------------------------------------------- */
.overview-grid--premium:hover .card-tilt,
.rewards-grid:hover .card-tilt {
  opacity: 0.65;
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.overview-grid--premium:hover .card-tilt:hover,
.rewards-grid:hover .card-tilt:hover {
  opacity: 1;
}

/* ---- 7. MAGNETIC BUTTON ------------------------------------------------ */
.magnetic-btn {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- 8. RIPPLE EFFECT -------------------------------------------------- */
.ripple-container {
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate; /* Create a new stacking context */
}

.ripple-container .ripple {
  position: absolute;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.22);
  transform: scale(0);
  animation: rippleExpand 0.6s ease-out forwards;
  pointer-events: none;
  z-index: 0;
}

@keyframes rippleExpand {
  to {
    transform: scale(4);
    opacity: 0;
  }
}

/* ---- 9. BOTTOM NAV MICRO-INTERACTIONS ---------------------------------- */
/* Active tap bounce */
.bottom-nav .nav-item {
  transition: all 0.25s var(--ease-out);
}

.bottom-nav .nav-item:active i {
  animation: navBounce 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes navBounce {
  0% { transform: scale(1) translateY(0); }
  30% { transform: scale(0.85) translateY(2px); }
  60% { transform: scale(1.2) translateY(-4px); }
  100% { transform: scale(1.12) translateY(-2px); }
}

/* Ink indicator for active tab */
.bottom-nav .nav-item::before {
  content: '';
  position: absolute;
  bottom: 4px;
  left: 50%;
  width: 0;
  height: 3px;
  background: var(--eat-electric);
  border-radius: var(--r-pill);
  transform: translateX(-50%);
  transition: width 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* These selectors target the active tab nav items */
#tabToggleOverview:checked ~ .bottom-nav label[for="tabToggleOverview"]::before,
#tabToggleMeals:checked ~ .bottom-nav label[for="tabToggleMeals"]::before,
#tabToggleRewards:checked ~ .bottom-nav label[for="tabToggleRewards"]::before,
#tabToggleAccount:checked ~ .bottom-nav label[for="tabToggleAccount"]::before,
#tabToggleBox:checked ~ .bottom-nav label[for="tabToggleBox"]::before,
#tabToggleMenu:checked ~ .bottom-nav label[for="tabToggleMenu"]::before {
  width: 24px;
}

/* ---- 10. ELASTIC QUANTITY BUTTONS -------------------------------------- */
.qty-btn {
  transition: background-color 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.2s ease !important;
}

.qty-btn:active {
  transform: scale(0.82) !important;
}

/* Pop feedback on value change */
.meal-qty.qty-pop {
  animation: qtyPop 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes qtyPop {
  0% { transform: scale(1); }
  40% { transform: scale(1.15); color: var(--eat-primary, #ff7a1a); }
  100% { transform: scale(1); }
}

/* ---- 11. REWARD COIN PULSE --------------------------------------------- */
.reward-coin {
  animation: coinPulse 3s ease-in-out infinite;
}

@keyframes coinPulse {
  0%, 100% {
    box-shadow:
      0 4px 16px rgba(184,115,51,0.36),
      0 0 0 rgba(251,191,36,0),
      var(--shadow-gold);
  }
  50% {
    box-shadow:
      0 4px 28px rgba(184,115,51,0.52),
      0 0 40px rgba(251,191,36,0.18),
      var(--shadow-gold);
  }
}

/* ---- 11b. REWARDS HERO SHOWSTOPPER ------------------------------------- */

/* Panel: glass container with pulsing golden aura */
.rewards-balance-panel {
  position: relative;
  padding: 40px 28px;
  border-radius: var(--r-xl);
  background:
    radial-gradient(ellipse at 25% 45%, rgba(251,191,36,0.10) 0%, transparent 55%),
    radial-gradient(ellipse at 80% 30%, rgba(255,159,11,0.07) 0%, transparent 50%),
    radial-gradient(ellipse at 50% 90%, rgba(184,115,51,0.05) 0%, transparent 40%),
    rgba(255,255,255,0.025);
  border: 1px solid rgba(251,191,36,0.18);
  overflow: hidden;
  flex-direction: column;
  gap: 16px;
  animation: panelAuraGlow 4s ease-in-out infinite;
}

@keyframes panelAuraGlow {
  0%, 100% {
    box-shadow:
      0 0 20px rgba(251,191,36,0.06),
      0 0 60px rgba(251,191,36,0.03),
      inset 0 0 30px rgba(251,191,36,0.02);
    border-color: rgba(251,191,36,0.18);
  }
  50% {
    box-shadow:
      0 0 30px rgba(251,191,36,0.14),
      0 0 80px rgba(251,191,36,0.07),
      0 0 120px rgba(251,191,36,0.03),
      inset 0 0 50px rgba(251,191,36,0.04);
    border-color: rgba(251,191,36,0.32);
  }
}

/* Shimmer sweep across the panel */
.rewards-balance-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 30%,
    rgba(251,191,36,0.06) 42%,
    rgba(255,255,255,0.10) 50%,
    rgba(251,191,36,0.06) 58%,
    transparent 70%
  );
  animation: rewardShimmer 5s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes rewardShimmer {
  0%, 18% { left: -100%; opacity: 0; }
  22% { opacity: 1; }
  78% { opacity: 1; }
  82%, 100% { left: 250%; opacity: 0; }
}

/* Static sparkle field — tiny gold dots that drift */
.rewards-balance-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 22%, rgba(251,191,36,0.55) 50%, transparent 50%),
    radial-gradient(1px 1px at 28% 68%, rgba(251,191,36,0.35) 50%, transparent 50%),
    radial-gradient(2px 2px at 48% 12%, rgba(255,215,0,0.50) 50%, transparent 50%),
    radial-gradient(1px 1px at 62% 82%, rgba(251,191,36,0.35) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 78% 32%, rgba(251,191,36,0.45) 50%, transparent 50%),
    radial-gradient(1px 1px at 88% 58%, rgba(255,215,0,0.30) 50%, transparent 50%),
    radial-gradient(2px 2px at 8% 52%, rgba(251,191,36,0.40) 50%, transparent 50%),
    radial-gradient(1px 1px at 42% 88%, rgba(251,191,36,0.30) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 68% 8%, rgba(255,215,0,0.45) 50%, transparent 50%),
    radial-gradient(1px 1px at 95% 42%, rgba(251,191,36,0.35) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 35% 38%, rgba(255,215,0,0.30) 50%, transparent 50%);
  animation: sparkleFieldDrift 7s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
  opacity: 0.6;
}

@keyframes sparkleFieldDrift {
  0% { transform: translateY(0) translateX(0); opacity: 0.4; }
  50% { opacity: 0.8; }
  100% { transform: translateY(-8px) translateX(4px); opacity: 0.4; }
}

/* ---- Mega Coin ---- */
.rewards-balance-panel .reward-coin-wrap {
  --coin-size: 86px;
  position: relative;
  perspective: 800px;
  z-index: 3;
}

/* Pulsing golden halo */
.rewards-balance-panel .reward-coin-wrap::before {
  content: "";
  position: absolute;
  inset: -18px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,0.22) 25%, transparent 70%);
  animation: haloBreath 3s ease-in-out infinite;
  pointer-events: none;
}

@keyframes haloBreath {
  0%, 100% { transform: scale(1); opacity: 0.35; }
  50% { transform: scale(1.3); opacity: 0.85; }
}

/* Orbiting sparkle dot */
.rewards-balance-panel .reward-coin-wrap::after {
  content: "";
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #fcd34d;
  box-shadow:
    0 0 6px 2px rgba(252,211,77,0.7),
    0 0 14px 4px rgba(251,191,36,0.3);
  top: calc(50% - 2.5px);
  left: calc(50% - 2.5px);
  animation: orbitSpark 3.5s linear infinite;
  pointer-events: none;
  z-index: 4;
}

@keyframes orbitSpark {
  0%   { transform: rotate(0deg) translateX(54px); }
  100% { transform: rotate(360deg) translateX(54px); }
}

/* 3D coin wobble + golden rim pulse */
.rewards-balance-panel .reward-coin {
  animation:
    coinRotate3D 5s ease-in-out infinite,
    coinPulse 3s ease-in-out infinite;
  transform-style: preserve-3d;
}

/* Rim ring pulses with warm glow */
.rewards-balance-panel .reward-coin::before {
  animation: coinRimGlow 3s ease-in-out infinite;
}

@keyframes coinRotate3D {
  0%, 100% { transform: rotateY(0deg); }
  25% { transform: rotateY(20deg); }
  75% { transform: rotateY(-20deg); }
}

@keyframes coinRimGlow {
  0%, 100% {
    box-shadow:
      inset 0 0 0 2px rgba(251,191,36,0.25),
      inset 0 2px 4px rgba(255,255,255,0.18),
      inset 0 -2px 4px rgba(0,0,0,0.12);
  }
  50% {
    box-shadow:
      inset 0 0 0 2px rgba(251,191,36,0.50),
      inset 0 2px 6px rgba(255,255,255,0.30),
      inset 0 -2px 4px rgba(0,0,0,0.12),
      inset 0 0 12px rgba(251,191,36,0.12);
  }
}

/* Holographic shine streak across the coin face */
.rewards-balance-panel .reward-coin::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -80%;
  width: 260%;
  height: 120%;
  border-radius: 50%;
  background: linear-gradient(
    110deg,
    transparent 25%,
    rgba(255,255,255,0.15) 38%,
    rgba(255,255,255,0.30) 44%,
    rgba(255,255,255,0.50) 50%,
    rgba(255,255,255,0.30) 56%,
    rgba(255,255,255,0.15) 62%,
    transparent 75%
  );
  animation: coinShine 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

@keyframes coinShine {
  0%, 25%  { transform: translateX(-70%); opacity: 0; }
  46% { opacity: 0; }
  50% { opacity: 1; }
  54% { opacity: 0; }
  75%, 100% { transform: translateX(70%); opacity: 0; }
}

/* ---- Golden Neon Number ---- */
.rewards-balance-panel__copy {
  position: relative;
  z-index: 3;
}

.rewards-balance-panel__copy .value {
  font-size: 3.8rem;
  font-weight: 800;
  color: var(--eat-gold);
  text-shadow:
    0 0 10px rgba(251,191,36,0.50),
    0 0 30px rgba(251,191,36,0.30),
    0 0 60px rgba(251,191,36,0.14),
    0 2px 4px rgba(0,0,0,0.30);
  animation: numberGlow 2.5s ease-in-out infinite;
  line-height: 1;
}

@keyframes numberGlow {
  0%, 100% {
    text-shadow:
      0 0 10px rgba(251,191,36,0.50),
      0 0 30px rgba(251,191,36,0.30),
      0 0 60px rgba(251,191,36,0.14),
      0 2px 4px rgba(0,0,0,0.30);
  }
  50% {
    text-shadow:
      0 0 16px rgba(251,191,36,0.70),
      0 0 44px rgba(251,191,36,0.40),
      0 0 90px rgba(251,191,36,0.20),
      0 0 130px rgba(251,191,36,0.08),
      0 2px 4px rgba(0,0,0,0.30);
  }
}

/* Label treatment — golden uppercase */
.rewards-balance-panel__copy .label {
  letter-spacing: 0.18em;
  color: var(--eat-gold-mid);
  opacity: 0.8;
  font-size: 0.75rem;
  text-shadow: 0 0 12px rgba(251,191,36,0.15);
}

/* ---- 11c. OVERVIEW TOKEN ROW — compact version of the showstopper ------ */

.rewards-row {
  position: relative;
  padding: 18px 16px;
  border-radius: var(--r-lg);
  background:
    radial-gradient(ellipse at 20% 50%, rgba(251,191,36,0.07) 0%, transparent 55%),
    radial-gradient(ellipse at 85% 40%, rgba(255,159,11,0.04) 0%, transparent 50%),
    rgba(255,255,255,0.018);
  border: 1px solid rgba(251,191,36,0.12);
  overflow: hidden;
  animation: rowAuraGlow 5s ease-in-out infinite;
}

@keyframes rowAuraGlow {
  0%, 100% {
    box-shadow:
      0 0 12px rgba(251,191,36,0.04),
      0 0 36px rgba(251,191,36,0.02);
    border-color: rgba(251,191,36,0.12);
  }
  50% {
    box-shadow:
      0 0 18px rgba(251,191,36,0.09),
      0 0 48px rgba(251,191,36,0.04);
    border-color: rgba(251,191,36,0.22);
  }
}

/* Gentle shimmer sweep */
.rewards-row::before {
  content: "";
  position: absolute;
  top: 0;
  left: -100%;
  width: 45%;
  height: 100%;
  background: linear-gradient(
    105deg,
    transparent 32%,
    rgba(251,191,36,0.04) 44%,
    rgba(255,255,255,0.07) 50%,
    rgba(251,191,36,0.04) 56%,
    transparent 68%
  );
  animation: rowShimmer 6s ease-in-out infinite;
  pointer-events: none;
  z-index: 2;
}

@keyframes rowShimmer {
  0%, 20% { left: -100%; opacity: 0; }
  24% { opacity: 1; }
  76% { opacity: 1; }
  80%, 100% { left: 250%; opacity: 0; }
}

/* Sparse sparkle dots */
.rewards-row::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1px 1px at 18% 30%, rgba(251,191,36,0.45) 50%, transparent 50%),
    radial-gradient(1px 1px at 55% 65%, rgba(255,215,0,0.35) 50%, transparent 50%),
    radial-gradient(1.5px 1.5px at 82% 25%, rgba(251,191,36,0.40) 50%, transparent 50%),
    radial-gradient(1px 1px at 40% 80%, rgba(251,191,36,0.30) 50%, transparent 50%),
    radial-gradient(1px 1px at 70% 50%, rgba(255,215,0,0.30) 50%, transparent 50%);
  animation: sparkleFieldDrift 7s ease-in-out infinite alternate;
  pointer-events: none;
  z-index: 1;
  opacity: 0.45;
}

/* Coin: subtle perspective + halo (keep original 54px size) */
.rewards-row .reward-coin-wrap {
  position: relative;
  perspective: 600px;
  z-index: 3;
}

/* Smaller halo */
.rewards-row .reward-coin-wrap::before {
  content: "";
  position: absolute;
  inset: -10px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(251,191,36,0.18) 25%, transparent 70%);
  animation: haloBreath 3.5s ease-in-out infinite;
  pointer-events: none;
}

/* Smaller orbiting dot */
.rewards-row .reward-coin-wrap::after {
  content: "";
  position: absolute;
  width: 3.5px;
  height: 3.5px;
  border-radius: 50%;
  background: #fcd34d;
  box-shadow:
    0 0 4px 1.5px rgba(252,211,77,0.6),
    0 0 10px 3px rgba(251,191,36,0.2);
  top: calc(50% - 1.75px);
  left: calc(50% - 1.75px);
  animation: orbitSparkSmall 4s linear infinite;
  pointer-events: none;
  z-index: 4;
}

@keyframes orbitSparkSmall {
  0%   { transform: rotate(0deg) translateX(36px); }
  100% { transform: rotate(360deg) translateX(36px); }
}

/* Gentle 3D wobble */
.rewards-row .reward-coin {
  animation:
    coinRotate3DSmall 6s ease-in-out infinite,
    coinPulse 3s ease-in-out infinite;
  transform-style: preserve-3d;
}

/* Rim glow for compact coin */
.rewards-row .reward-coin::before {
  animation: coinRimGlow 3.5s ease-in-out infinite;
}

@keyframes coinRotate3DSmall {
  0%, 100% { transform: rotateY(0deg); }
  25% { transform: rotateY(12deg); }
  75% { transform: rotateY(-12deg); }
}

/* Shine streak */
.rewards-row .reward-coin::after {
  content: "";
  position: absolute;
  top: -10%;
  left: -80%;
  width: 260%;
  height: 120%;
  border-radius: 50%;
  background: linear-gradient(
    110deg,
    transparent 28%,
    rgba(255,255,255,0.12) 40%,
    rgba(255,255,255,0.25) 46%,
    rgba(255,255,255,0.40) 50%,
    rgba(255,255,255,0.25) 54%,
    rgba(255,255,255,0.12) 60%,
    transparent 72%
  );
  animation: coinShine 4.5s ease-in-out infinite;
  pointer-events: none;
  z-index: 1;
}

/* Token number — subtle gold glow */
.token-celebrate-badge .num {
  text-shadow:
    0 0 8px rgba(251,191,36,0.35),
    0 0 20px rgba(251,191,36,0.15);
  animation: numGlowSmall 3s ease-in-out infinite;
}

@keyframes numGlowSmall {
  0%, 100% {
    text-shadow:
      0 0 8px rgba(251,191,36,0.35),
      0 0 20px rgba(251,191,36,0.15);
  }
  50% {
    text-shadow:
      0 0 12px rgba(251,191,36,0.50),
      0 0 28px rgba(251,191,36,0.22),
      0 0 50px rgba(251,191,36,0.08);
  }
}

/* Cash amount — subtle success glow */
.token-celebrate-badge .cash-amount {
  text-shadow:
    0 0 6px rgba(52,211,153,0.25),
    0 0 16px rgba(52,211,153,0.10);
}

/* Badge border glow sync */
.token-celebrate-badge {
  animation: badgeBorderGlow 5s ease-in-out infinite;
}

@keyframes badgeBorderGlow {
  0%, 100% { border-color: rgba(244,201,139,0.18); }
  50% { border-color: rgba(251,191,36,0.30); }
}

/* Lift all content above shimmer/particles */
.rewards-row .reward-coin-wrap,
.rewards-row .token-balance {
  position: relative;
  z-index: 3;
}

/* ---- 12. TAB PANEL CROSSFADE ------------------------------------------- */
.tab-panel {
  animation: tabFadeIn 0.35s ease-out;
}

@keyframes tabFadeIn {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---- 13. COUNTER ANIMATE ----------------------------------------------- */
.counter-animate {
  display: inline-block;
  transition: transform 0.15s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.counter-animate.counting {
  transform: scale(1.08);
}

/* ---- 14. STAT TILE ACCENT ANIMATION ------------------------------------ */
.stat::before {
  transition: height 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* ---- 15. SUBSCRIPTION CARD HOVER --------------------------------------- */
.subscription {
  transition: box-shadow 0.35s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.subscription:hover {
  box-shadow:
    0 12px 44px rgba(0, 0, 0, 0.42),
    0 0 0 1px rgba(255, 255, 255, 0.06);
  transform: translateY(-2px);
}

/* ---- 16. STATUS PILL PULSE --------------------------------------------- */
.status-pill--active,
.status-text.status-active {
  animation: statusPulse 3s ease-in-out infinite;
}

@keyframes statusPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
  50% { box-shadow: 0 0 0 6px rgba(52, 211, 153, 0.12); }
}

/* ---- 17. HERO VALUE CARD SHIMMER --------------------------------------- */
.overview-value-card {
  position: relative;
  overflow: hidden;
}

.overview-value-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(255, 255, 255, 0.04),
    transparent
  );
  animation: valueShimmer 4s ease-in-out infinite;
  animation-delay: 3s;
  pointer-events: none;
  z-index: 0;
}

@keyframes valueShimmer {
  0%, 100% { left: -100%; }
  50% { left: 200%; }
}

/* ---- 18. SMOOTH LOADING SKELETON --------------------------------------- */
.muted {
  position: relative;
  overflow: hidden;
}

/* ---- 19. REDEEM CARD HOVER LIFT ---------------------------------------- */
.redeem-card {
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1),
              box-shadow 0.3s ease,
              border-color 0.2s ease;
}

.redeem-card:hover {
  transform: translateY(-4px) scale(1.02);
}

/* ---- 20. REDUCED MOTION OVERRIDE --------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  [data-reveal] {
    opacity: 1 !important;
    transform: none !important;
  }

  .atmo-orb,
  .hero-shimmer,
  .reward-coin,
  .overview-value-card::before {
    animation: none !important;
  }

  .card-tilt::after {
    display: none;
  }

  .status-pill--active,
  .status-text.status-active {
    animation: none !important;
  }

  .tab-panel {
    animation: none !important;
  }

  .rewards-balance-panel,
  .rewards-balance-panel::before,
  .rewards-balance-panel::after,
  .rewards-balance-panel .reward-coin-wrap::before,
  .rewards-balance-panel .reward-coin-wrap::after,
  .rewards-balance-panel .reward-coin,
  .rewards-balance-panel .reward-coin::after,
  .rewards-balance-panel__copy .value {
    animation: none !important;
  }

  .rewards-row,
  .rewards-row::before,
  .rewards-row::after,
  .rewards-row .reward-coin-wrap::before,
  .rewards-row .reward-coin-wrap::after,
  .rewards-row .reward-coin,
  .rewards-row .reward-coin::after,
  .token-celebrate-badge,
  .token-celebrate-badge .num {
    animation: none !important;
  }

  .reward-sparkle {
    display: none !important;
  }

  /* Splash: skip entrance animations, dismiss instantly */
  .splash-logo,
  .splash-label,
  .splash-loader,
  .splash-loader span,
  .splash-panel--top::after {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .splash-rule {
    animation: none !important;
    width: 96px !important;
  }
  #eat-splash.is-revealing .splash-panel--top,
  #eat-splash.is-revealing .splash-panel--bottom {
    transition: none !important;
  }
}


/* ============================================================
   THE SPLIT REVEAL — Members Area Splash Screen
   Deep navy palette matches .overview-hero--premium exactly.
   JS class flow: (default) → .is-revealing → .is-gone → removed
   ============================================================ */

#eat-splash {
  position: fixed;
  inset: 0;
  z-index: 10000;
  pointer-events: all;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

/* Same grain texture used by the hero sections */
#eat-splash::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
  background-size: 200px;
  pointer-events: none;
  z-index: 4;
}

/* — Panels — identical navy gradient to .overview-hero--premium */
.splash-panel {
  position: absolute;
  left: 0;
  right: 0;
  height: 50.5%; /* slight overlap prevents sub-pixel seam */
  will-change: transform;
  transition: transform 0.92s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 2;
}

.splash-panel--top {
  top: 0;
  background:
    radial-gradient(ellipse 55% 180px at 18% 100%, rgba(255, 107, 107, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 55% 180px at 82% 100%, rgba(0, 212, 255, 0.14) 0%, transparent 60%),
    linear-gradient(165deg, #121c33 0%, #0d1424 55%, #0a0e1a 100%);
}

.splash-panel--bottom {
  bottom: 0;
  background:
    radial-gradient(ellipse 55% 180px at 18% 0%,  rgba(255, 107, 107, 0.18) 0%, transparent 60%),
    radial-gradient(ellipse 55% 180px at 82% 0%,  rgba(0, 212, 255, 0.14) 0%, transparent 60%),
    linear-gradient(165deg, #121c33 0%, #0d1424 55%, #0a0e1a 100%);
}

/* Electric-cyan seam — the "vault seal" between the two panels */
.splash-panel--top::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 8%;
  right: 8%;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(0, 212, 255, 0.4)  20%,
    rgba(0, 212, 255, 0.95) 50%,
    rgba(0, 212, 255, 0.4)  80%,
    transparent 100%
  );
  animation: splashSeamPulse 2.2s ease-in-out infinite;
}

@keyframes splashSeamPulse {
  0%, 100% { opacity: 0.35; transform: scaleX(0.8); }
  50%       { opacity: 1;   transform: scaleX(1); }
}

/* — Center Brand Content — */
.splash-center {
  position: relative;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  pointer-events: none;
}

/* Logo: scales in with spring ease */
.splash-logo {
  display: block;
  opacity: 0;
  transform: scale(0.88) translateY(12px);
  animation: splashLogoIn 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.2s forwards;
}

@keyframes splashLogoIn {
  to {
    opacity: 1;
    transform: scale(1) translateY(0);
  }
}

/* Divider draws left → right in electric cyan */
.splash-rule {
  height: 1px;
  width: 0;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0, 212, 255, 0.7) 30%,
    rgba(0, 212, 255, 1)   50%,
    rgba(0, 212, 255, 0.7) 70%,
    transparent
  );
  animation: splashRuleDraw 0.7s cubic-bezier(0.22, 1, 0.36, 1) 0.62s forwards;
  border-radius: 1px;
}

@keyframes splashRuleDraw {
  to { width: 96px; }
}

/* "Members Area" small caps label */
.splash-label {
  margin: 0;
  opacity: 0;
  transform: translateY(8px);
  font-family: 'Manrope', -apple-system, BlinkMacSystemFont, sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.38);
  animation: splashFadeUp 0.5s ease-out 0.92s forwards;
}

@keyframes splashFadeUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Three pulsing cyan dots */
.splash-loader {
  display: flex;
  gap: 7px;
  opacity: 0;
  animation: splashFadeUp 0.45s ease-out 1.15s forwards;
}

.splash-loader span {
  display: block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(0, 212, 255, 0.9);
  opacity: 0.35;
  animation: splashDotPulse 1.35s ease-in-out infinite;
}

.splash-loader span:nth-child(2) { animation-delay: 0.22s; }
.splash-loader span:nth-child(3) { animation-delay: 0.44s; }

@keyframes splashDotPulse {
  0%, 100% { opacity: 0.3;  transform: scale(1); }
  50%       { opacity: 1;   transform: scale(1.55); }
}

/* — Reveal: panels split apart — */
#eat-splash.is-revealing .splash-panel--top {
  transform: translateY(-101%);
}

#eat-splash.is-revealing .splash-panel--bottom {
  transform: translateY(101%);
}

/* Center fades and slightly rises as panels peel away */
#eat-splash.is-revealing .splash-center {
  opacity: 0;
  transform: scale(0.93) translateY(-6px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}

/* Seam fades as panels separate */
#eat-splash.is-revealing .splash-panel--top::after {
  opacity: 0 !important;
  transition: opacity 0.18s ease;
}

/* — Fully removed — */
#eat-splash.is-gone {
  display: none !important;
}