/* ═══════════════════════════════════════════════════════════
   PREMIUM UPGRADE LAYER — Esports-Level UI Enhancement
   Ajinkya2OP · bgmisensi-calcuator.pages.dev
   ─────────────────────────────────────────────────────────
   RULES: No logic changes. No ID/class renames.
          Enhances main.css + conversion.css only.
═══════════════════════════════════════════════════════════ */


/* ─────────────────────────────────────────────────────────
   § 1  HERO — FADE-IN & RADIAL GLOW
───────────────────────────────────────────────────────── */

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

/* Staggered entrance for every hero child */
.hero-section { position: relative; }
.hero-section .trust-strip  { animation: heroFadeUp .55s .08s cubic-bezier(.22,1,.36,1) both; }
.hero-section .hero-title   { animation: heroFadeUp .6s  .2s  cubic-bezier(.22,1,.36,1) both; }
.hero-section .hero-sub     { animation: heroFadeUp .6s  .3s  cubic-bezier(.22,1,.36,1) both; }
.hero-section .hero-actions { animation: heroFadeUp .6s  .4s  cubic-bezier(.22,1,.36,1) both; }
.hero-section .hero-stats-row { animation: heroFadeUp .6s .52s cubic-bezier(.22,1,.36,1) both; }

/* Radial bloom behind the headline */
.hero-section::before {
  content: '';
  position: absolute;
  top: 38%; left: 50%;
  transform: translate(-50%, -50%);
  width: 680px; height: 320px;
  background: radial-gradient(
    ellipse,
    rgba(0,245,160,.06) 0%,
    rgba(0,200,255,.025) 40%,
    transparent 70%
  );
  pointer-events: none;
  z-index: 0;
}

/* Glow on the accent text */
.hero-accent {
  text-shadow:
    0 0 28px rgba(0,245,160,.35),
    0 0 60px rgba(0,245,160,.12);
}

/* Glassmorphism treatment on stats bar */
.hero-stats-row {
  background: rgba(255,255,255,.028);
  border: 1px solid rgba(255,255,255,.08);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  box-shadow: 0 1px 0 rgba(255,255,255,.05) inset;
}


/* ─────────────────────────────────────────────────────────
   § 2  PRIMARY CTA — GLOW + SHIMMER LIFT
───────────────────────────────────────────────────────── */

.hero-cta-primary {
  position: relative;
  overflow: hidden;
  box-shadow:
    0 0 0 1px rgba(0,245,160,.22),
    0 5px 26px rgba(0,245,160,.28);
}

/* Shimmer sweep */
.hero-cta-primary::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255,255,255,.22) 50%,
    transparent 100%
  );
  transform: translateX(-110%);
  transition: transform .55s ease;
}

.hero-cta-primary:hover::after  { transform: translateX(110%); }
.hero-cta-primary:hover {
  box-shadow:
    0 0 0 1px rgba(0,245,160,.4),
    0 10px 38px rgba(0,245,160,.42);
  transform: translateY(-3px);
}


/* ─────────────────────────────────────────────────────────
   § 3  BASE CARDS — LIGHT GLASSMORPHISM
───────────────────────────────────────────────────────── */

.card {
  background: rgba(12,16,32,.92);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow:
    0 1px 0 rgba(255,255,255,.045) inset,
    0 22px 56px rgba(0,0,0,.42);
  transition:
    border-color var(--tr),
    box-shadow var(--tr),
    transform var(--trS);
}

.card:hover {
  border-color: rgba(255,255,255,.1);
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 28px 64px rgba(0,0,0,.48);
}


/* ─────────────────────────────────────────────────────────
   § 4  TILT INFRASTRUCTURE (updated via JS)
   JS adds: style.transform = 'perspective(820px) rotateX(...) rotateY(...)'
   CSS handles shine overlay + mobile disable
───────────────────────────────────────────────────────── */

/* Shared shine pseudo — added to tiltable elements */
.proof-card,
.pm-price-featured,
.pmgc-featured {
  isolation: isolate; /* new stacking context for pseudo */
}

/* Shine layer — JS controls --shine-x / --shine-y via element style */
.proof-card::after,
.pm-price-featured::after,
.pmgc-featured::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(
    circle at var(--shine-x, 50%) var(--shine-y, 50%),
    rgba(255,255,255,.065) 0%,
    transparent 58%
  );
  pointer-events: none;
  z-index: 2;
  opacity: 0;
  transition: opacity .28s ease;
}

/* Override the existing .card::after shimmer on proof cards
   (the .card::before handles top-line gradient already) */
.proof-card::before { z-index: 3; }

/* Activate shine on hover — JS also sets transform */
.proof-card:hover::after,
.pm-price-featured:hover::after,
.pmgc-featured:hover::after {
  opacity: 1;
}

/* Smooth ease-back when cursor leaves */
.proof-card,
.pm-price-featured,
.pmgc-featured {
  transition:
    transform .32s cubic-bezier(.22,1,.36,1),
    box-shadow .32s ease,
    border-color var(--tr);
  will-change: transform;
}

/* ── Mobile: kill tilt completely ── */
@media (hover: none), (max-width: 768px) {
  .proof-card,
  .pm-price-featured,
  .pmgc-featured {
    transform: none !important;
    transition: border-color var(--tr), box-shadow var(--tr) !important;
    will-change: auto;
  }
  .proof-card::after,
  .pm-price-featured::after,
  .pmgc-featured::after {
    display: none;
  }
}


/* ─────────────────────────────────────────────────────────
   § 5  PROOF SECTION — GLOW + CLEAR LABELS
───────────────────────────────────────────────────────── */

/* "Optimized Sensitivity" eyebrow label (CSS-injected, non-intrusive) */
.proof-before .proof-card-body::before {
  content: 'Random Sensitivity';
  display: block;
  font-family: var(--fd);
  font-size: .4rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255,77,109,.55);
  margin-bottom: 6px;
}

.proof-after .proof-card-body::before {
  content: 'Optimized Sensitivity';
  display: block;
  font-family: var(--fd);
  font-size: .4rem;
  font-weight: 700;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(0,245,160,.55);
  margin-bottom: 6px;
}

/* After-card top glow bar (overrides the generic .card::before) */
.proof-after::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(0,245,160,.65),
    transparent
  );
  border-radius: var(--rXL) var(--rXL) 0 0;
  z-index: 3;
}

/* Glow aura on optimized card */
.proof-after {
  border-color: rgba(0,245,160,.24);
  box-shadow:
    0 0 0 1px rgba(0,245,160,.07),
    0 16px 50px rgba(0,245,160,.08),
    0 4px 20px rgba(0,0,0,.35);
}

.proof-after:hover {
  border-color: rgba(0,245,160,.36);
  box-shadow:
    0 0 0 1px rgba(0,245,160,.1),
    0 20px 60px rgba(0,245,160,.12),
    0 6px 28px rgba(0,0,0,.4);
}

/* Media perfectly contained */
.proof-img-wrap {
  aspect-ratio: 16 / 9;
  background: var(--out);
  overflow: hidden;
}

.proof-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ─────────────────────────────────────────────────────────
   § 6  UPGRADE NUDGE — GLASSMORPHISM
───────────────────────────────────────────────────────── */

.upgrade-nudge {
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,215,0,.16);
  box-shadow:
    0 0 0 1px rgba(255,215,0,.04),
    0 18px 46px rgba(0,0,0,.38);
}

/* PMGC row subtle depth */
#nudgePMGCRow .nudge-item {
  background: rgba(255,107,53,.05);
  border-color: rgba(255,107,53,.2);
  box-shadow: 0 0 18px rgba(255,107,53,.07);
}

#nudgeProRow .nudge-item {
  background: rgba(255,215,0,.03);
}


/* ─────────────────────────────────────────────────────────
   § 7  PMGC PREVIEW CARD — GLASS DEPTH
───────────────────────────────────────────────────────── */

.pmgc-preview-card {
  background: rgba(10,14,22,.9);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,107,53,.24);
  box-shadow:
    0 0 0 1px rgba(255,107,53,.06),
    0 22px 54px rgba(0,0,0,.44),
    0 0 44px rgba(255,107,53,.07);
}


/* ─────────────────────────────────────────────────────────
   § 8  FEATURED TIER CARD & PRICE BOX (Modal)
───────────────────────────────────────────────────────── */

.pmgc-featured {
  background: rgba(255,107,53,.055);
  box-shadow:
    0 0 32px rgba(255,107,53,.13),
    inset 0 1px 0 rgba(255,255,255,.06);
}

.pm-price-featured {
  background: rgba(255,107,53,.07);
  box-shadow:
    0 0 26px rgba(255,107,53,.13),
    inset 0 1px 0 rgba(255,255,255,.05);
}


/* ─────────────────────────────────────────────────────────
   § 9  GENERATE BUTTON — GLOW BOOST
───────────────────────────────────────────────────────── */

.genbtn {
  box-shadow:
    0 4px 22px rgba(0,245,160,.24),
    0 0 0 1px rgba(0,245,160,.12);
}

.genbtn:hover {
  transform: translateY(-3px);
  box-shadow:
    0 10px 34px rgba(0,245,160,.42),
    0 0 0 1px rgba(0,245,160,.28);
}

.genbtn:active { transform: translateY(0); }


/* ─────────────────────────────────────────────────────────
   § 10  MICRO-INTERACTIONS — ALL BUTTONS
───────────────────────────────────────────────────────── */

/* Copy / Regen */
.cpybtn:hover { box-shadow: 0 6px 22px rgba(0,245,160,.14); }
.regbtn:hover { box-shadow: 0 6px 22px rgba(0,200,255,.14); }
.cpybtn:active, .regbtn:active { transform: translateY(0); }

/* Pro header button */
.pro-btn:hover {
  box-shadow:
    0 0 22px rgba(255,215,0,.24),
    0 0 0 1px rgba(255,215,0,.32);
}

/* Nudge CTA */
.nudge-btn-pro:hover  { box-shadow: 0 6px 22px rgba(255,215,0,.32); transform: translateY(-3px); }
.nudge-btn-pmgc:hover { box-shadow: 0 6px 22px rgba(255,107,53,.36); transform: translateY(-3px); }

/* Modal pay buttons */
.pm-pay:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px rgba(255,215,0,.38);
}

.pm-pay-pmgc:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(255,107,53,.52);
}

/* PMGC unlock CTA */
.pmgc-unlock-cta:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 34px rgba(255,107,53,.55);
}

/* Share buttons */
.sharebtn:hover { transform: translateY(-3px); }

/* Creator links */
.creator-link:hover { box-shadow: 0 0 16px rgba(0,245,160,.15); }

/* Footer social */
.footer-social-link:hover { box-shadow: 0 0 14px rgba(0,245,160,.12); }


/* ─────────────────────────────────────────────────────────
   § 11  STICKY CTA — DEPTH TREATMENT
───────────────────────────────────────────────────────── */

#mobileStickyCTA {
  box-shadow: 0 -10px 34px rgba(0,0,0,.5);
  border-top: 1px solid rgba(255,107,53,.3);
}

.sticky-cta-btn {
  box-shadow: 0 4px 18px rgba(255,107,53,.36);
}

.sticky-cta-btn:hover {
  box-shadow: 0 7px 24px rgba(255,107,53,.52);
  transform: translateY(-2px);
}


/* ─────────────────────────────────────────────────────────
   § 12  WYG CARDS — DEPTH
───────────────────────────────────────────────────────── */

.wyg-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 16px 42px rgba(0,0,0,.32);
}

.wyg-card:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 22px 52px rgba(0,0,0,.42);
}

.wyg-card-pmgc:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 22px 52px rgba(0,0,0,.42),
    0 0 28px rgba(255,107,53,.1);
}


/* ─────────────────────────────────────────────────────────
   § 13  TESTIMONIAL CARDS — DEPTH
───────────────────────────────────────────────────────── */

.testi-public-card {
  box-shadow:
    0 1px 0 rgba(255,255,255,.04) inset,
    0 12px 32px rgba(0,0,0,.3);
}

.testi-public-card:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 44px rgba(0,0,0,.4);
}

.tpq-featured:hover {
  box-shadow:
    0 1px 0 rgba(255,255,255,.06) inset,
    0 18px 44px rgba(0,0,0,.4),
    0 0 26px rgba(255,107,53,.1) !important;
}


/* ─────────────────────────────────────────────────────────
   § 14  FOCUS STATES — ACCESSIBILITY
───────────────────────────────────────────────────────── */

.hero-cta-primary:focus-visible {
  outline: 2px solid rgba(0,245,160,.85);
  outline-offset: 4px;
  border-radius: var(--r);
}

.hero-cta-ghost:focus-visible {
  outline: 2px solid rgba(255,255,255,.5);
  outline-offset: 4px;
}

.genbtn:focus-visible,
.cpybtn:focus-visible,
.regbtn:focus-visible {
  outline: 2px solid rgba(0,245,160,.8);
  outline-offset: 4px;
}

.pm-pay:focus-visible {
  outline: 2px solid rgba(255,215,0,.8);
  outline-offset: 4px;
}

.pm-pay-pmgc:focus-visible,
.pmgc-unlock-cta:focus-visible,
.nudge-btn-pmgc:focus-visible {
  outline: 2px solid rgba(255,107,53,.8);
  outline-offset: 4px;
}


/* ─────────────────────────────────────────────────────────
   § 15  MOBILE CLEANUP — SAFE PERF
───────────────────────────────────────────────────────── */

@media (max-width: 540px) {
  /* Shrink hero glow — saves GPU */
  .hero-section::before {
    width: 320px;
    height: 200px;
    opacity: .7;
  }

  /* Proof after card — simplify glow on mobile */
  .proof-after {
    box-shadow: 0 8px 28px rgba(0,0,0,.35);
  }

  /* PMGC preview — simplify */
  .pmgc-preview-card {
    box-shadow: 0 14px 40px rgba(0,0,0,.36);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  /* Upgrade nudge — simplify */
  .upgrade-nudge {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}