/* ═══════════════════════════════════════════════════════════════════════
   3D STYLE ENHANCEMENTS — gauravbhargava.ai  (v3)
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. NAV: frosted glass on scroll ── */
.nav {
  transition: background 0.45s ease, backdrop-filter 0.45s ease, box-shadow 0.45s ease;
}
.nav--glass {
  background: rgba(210, 215, 226, 0.68) !important;
  backdrop-filter: blur(28px) !important;
  -webkit-backdrop-filter: blur(28px) !important;
  box-shadow: 0 2px 24px rgba(13, 59, 102, 0.09) !important;
}


/* ── 2. HERO STATS: glass pill ── */
.hero-stats {
  background: rgba(255, 255, 255, 0.72) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.95) !important;
  box-shadow: 0 8px 32px rgba(13, 59, 102, 0.10),
              inset 0 1px 0 rgba(255, 255, 255, 1) !important;
}


/* ── 3. VISUAL CARD: no transform (back to original) ── */
.hero-visual .visual-card {
  transform: none !important;
  animation: none !important;
}


/* ── 4. DARK BRIEFING CARDS: glass + tilt ──
   IMPORTANT: reveal is opacity-only — transform stays free for JS tilt
   ──────────────────────────────────────────────────────────────────── */
.dark-briefing-grid .dark-briefing-card {
  opacity: 0;
  transition: opacity 0.65s ease;
  will-change: transform;
  /* Stronger glass highlight on top edge */
  box-shadow: 0 18px 42px rgba(13, 59, 102, 0.22),
              inset 0 1.5px 0 rgba(255, 255, 255, 0.28) !important;
  border: 1px solid rgba(255, 255, 255, 0.20) !important;
  overflow: hidden;
}
.dark-briefing-grid .dark-briefing-card:nth-child(1) { transition: opacity 0.65s 0.08s ease; }
.dark-briefing-grid .dark-briefing-card:nth-child(2) { transition: opacity 0.65s 0.20s ease; }
.dark-briefing-grid .dark-briefing-card:nth-child(3) { transition: opacity 0.65s 0.32s ease; }
.dark-briefing-grid .dark-briefing-card.vis { opacity: 1; }

.dark-briefing-card:hover {
  border-color: rgba(87, 185, 255, 0.55) !important;
  box-shadow: 0 32px 70px rgba(13, 59, 102, 0.35),
              inset 0 1.5px 0 rgba(255, 255, 255, 0.40) !important;
}

/* Glare: JS injects <div class="card-glare"> */
.card-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 10;
  background: radial-gradient(
    circle at var(--mx, 50%) var(--my, 50%),
    rgba(255, 255, 255, 0.20) 0%,
    transparent 60%
  );
  opacity: 0;
  transition: opacity 0.2s ease;
  border-radius: inherit;
}
.dark-briefing-card:hover .card-glare { opacity: 1; }

.dark-icon {
  background: rgba(87, 185, 255, 0.15) !important;
  border: 1px solid rgba(87, 185, 255, 0.42) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition: background 0.25s, border-color 0.25s, transform 0.25s;
}
.dark-briefing-card:hover .dark-icon {
  background: rgba(87, 185, 255, 0.28) !important;
  border-color: rgba(87, 185, 255, 0.65) !important;
  transform: scale(1.10) translateY(-2px);
}


/* ── 5. BOOK CARDS: glass + cover tilt ──
   Same rule: opacity-only reveal, transform free for JS
   ──────────────────────────────────────────────────────────────────── */
.light-book-grid .light-book-card {
  opacity: 0;
  transition: opacity 0.65s ease;
  will-change: transform;
  background: rgba(255, 255, 255, 0.94) !important;
  border: 1px solid rgba(255, 255, 255, 0.40) !important;
  box-shadow: 0 22px 54px rgba(0, 0, 0, 0.26),
              inset 0 1.5px 0 rgba(255, 255, 255, 0.80) !important;
  overflow: hidden;
}
.light-book-grid .light-book-card:nth-child(1) { transition: opacity 0.65s 0.10s ease; }
.light-book-grid .light-book-card:nth-child(2) { transition: opacity 0.65s 0.24s ease; }
.light-book-grid .light-book-card.vis { opacity: 1; }

.light-book-card:hover {
  border-color: rgba(87, 185, 255, 0.60) !important;
  box-shadow: 0 40px 80px rgba(0, 0, 0, 0.32),
              inset 0 1.5px 0 rgba(255, 255, 255, 0.90) !important;
}

/* Cover stays fixed — whole card tilts as one unit via JS */
.light-book-cover-wrap {
  flex-shrink: 0;
}


/* ── 6. EXPERTISE CARDS (about page): light glass + tilt ── */
.expertise {
  background:
    radial-gradient(ellipse at 85% 0%, rgba(87,185,255,0.08), transparent 50%),
    var(--cream-warm) !important;
}
.e-card {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 4px 28px rgba(13, 59, 102, 0.08),
              inset 0 1.5px 0 rgba(255, 255, 255, 1) !important;
  will-change: transform;
  overflow: hidden;
}
.e-card:hover {
  border-color: rgba(87, 185, 255, 0.40) !important;
  box-shadow: 0 28px 60px rgba(13, 59, 102, 0.14),
              inset 0 1.5px 0 rgba(255, 255, 255, 1) !important;
}
.e-card-icon { transition: transform 0.25s, box-shadow 0.25s; }
.e-card:hover .e-card-icon {
  transform: scale(1.10) translateY(-2px);
  box-shadow: 0 8px 24px rgba(13, 59, 102, 0.28) !important;
}


/* ── 7. CONTACT FORM: glass card ── */
.contact-form-wrap {
  background: rgba(255, 255, 255, 0.82) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255, 255, 255, 0.98) !important;
  box-shadow: 0 8px 40px rgba(13, 59, 102, 0.09),
              inset 0 1.5px 0 rgba(255, 255, 255, 1) !important;
}


/* ── 8. FOOTER: shimmer top border ── */
.footer { position: relative; }
.footer::before {
  content: '';
  position: absolute;
  top: 0; left: 5%; right: 5%;
  height: 1px;
  background: linear-gradient(90deg,
    transparent,
    rgba(13,59,102,0.12),
    rgba(87,185,255,0.35),
    rgba(13,59,102,0.12),
    transparent);
}


/* ── PAGE HERO TEXT STAGGER ── */
@keyframes gb-hero-in {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.page-hero h1,
.briefings-hero h1,
.resources-hero h1 {
  animation: gb-hero-in 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.05s both !important;
}
.page-hero p,
.briefings-hero p,
.resources-hero p {
  animation: gb-hero-in 0.7s cubic-bezier(0.23, 1, 0.32, 1) 0.23s both !important;
}


/* ── SECTION LABEL LINE DRAW ── */
.s-label-line {
  width: 0 !important;
  transition: width 0.6s cubic-bezier(0.23, 1, 0.32, 1) !important;
}
.s-label.vis .s-label-line {
  width: 30px !important;
}


/* ── 9. BUTTON SHIMMER SWEEP ──
   A diagonal white light slides across buttons on hover.
   Applies to: .btn-main, .btn-light, .form-submit, .light-book-btn.primary, .nav-btn
   ──────────────────────────────────────────────────────────────────────── */
.btn-main,
.btn-light,
.form-submit,
.light-book-btn.primary,
.nav-btn,
.briefing-btn.primary,
.resource-btn.primary,
.site-content-path-btn.primary,
.site-content-path-btn.secondary,
.site-content-path-btn.tertiary,
.i-card-pill.primary {
  position: relative;
  overflow: hidden;
}

.btn-main::after,
.btn-light::after,
.form-submit::after,
.light-book-btn.primary::after,
.nav-btn::after,
.briefing-btn.primary::after,
.resource-btn.primary::after,
.site-content-path-btn.primary::after,
.site-content-path-btn.secondary::after,
.site-content-path-btn.tertiary::after,
.i-card-pill.primary::after {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    120deg,
    transparent 0%,
    rgba(255, 255, 255, 0.28) 50%,
    transparent 100%
  );
  transform: skewX(-20deg);
  transition: left 0s;
  pointer-events: none;
}

.btn-main:hover::after,
.btn-light:hover::after,
.form-submit:hover::after,
.light-book-btn.primary:hover::after,
.nav-btn:hover::after,
.briefing-btn.primary:hover::after,
.resource-btn.primary:hover::after,
.site-content-path-btn.primary:hover::after,
.site-content-path-btn.secondary:hover::after,
.site-content-path-btn.tertiary:hover::after,
.i-card-pill.primary:hover::after {
  left: 130%;
  transition: left 0.55s ease;
}


/* ── 10. NOISE TEXTURE: subtle grain ── */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");
  pointer-events: none;
  z-index: 9997;
  opacity: 0.50;
  mix-blend-mode: multiply;
}