/* ═══════════════════════════════════════════════════════════
   TG WOW — "Depth & Light" creative layer
   Pure overlay: targets compiled Tailwind classes + blog classes.
   Theme shades only: cyan #22d3ee · indigo #6366f1 · navy #0f1117
   Excluded: admin (/egypt → body.tg-admin)
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Custom scrollbar ────────────────────────────────── */
html:not(:has(body.tg-admin))::-webkit-scrollbar { width: 10px; }
html:not(:has(body.tg-admin))::-webkit-scrollbar-track { background: #0f1117; }
html:not(:has(body.tg-admin))::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #22d3ee, #6366f1);
  border-radius: 6px;
  border: 2px solid #0f1117;
}
html:not(:has(body.tg-admin))::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #4ae3f7, #818cf8);
}

/* ── 2. Header — glass + glow line when scrolled ────────── */
body:not(.tg-admin) header.fixed,
.site-header {
  transition: background-color .35s ease, box-shadow .35s ease, backdrop-filter .35s ease;
}
body:not(.tg-admin) header.fixed.wow-scrolled,
.site-header.wow-scrolled {
  box-shadow:
    0 1px 0 rgba(34, 211, 238, .22),
    0 14px 44px -20px rgba(34, 211, 238, .28),
    0 10px 32px -16px rgba(0, 0, 0, .6);
}

/* ── 3. Cards — 3D depth, glare light, cyan-tinted shadows ─
   div.bg-card.border = service cards, why-cards, value cards.
   JS drives perspective tilt + --wow-mx/--wow-my glare vars. */
body:not(.tg-admin) div.bg-card.border,
.post-card {
  position: relative;
  transition: transform .25s ease-out, box-shadow .35s ease, border-color .3s ease;
  background-image: radial-gradient(
    420px circle at var(--wow-mx, 50%) var(--wow-my, 50%),
    rgba(34, 211, 238, var(--wow-glare, 0)),
    transparent 65%
  );
  will-change: transform;
}
body:not(.tg-admin) div.bg-card.border:hover,
.post-card:hover {
  border-color: rgba(34, 211, 238, .5) !important;
  box-shadow:
    0 0 0 1px rgba(34, 211, 238, .16),
    0 18px 40px -16px rgba(0, 0, 0, .65),
    0 10px 30px -10px rgba(34, 211, 238, .26),
    0 26px 64px -24px rgba(99, 102, 241, .35);
}

/* ── 4. Primary buttons — gradient, glow halo, shine sweep ─ */
body:not(.tg-admin) a.bg-primary,
body:not(.tg-admin) button.bg-primary,
.site-cta-btn,
.blog-cta .btn {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-image: linear-gradient(135deg, #4ae3f7 0%, #22d3ee 48%, #38bdf8 100%) !important;
  box-shadow:
    0 4px 18px -6px rgba(34, 211, 238, .55),
    0 12px 36px -14px rgba(99, 102, 241, .5);
  transition: transform .2s ease, box-shadow .25s ease, filter .2s ease;
}
body:not(.tg-admin) a.bg-primary:hover,
body:not(.tg-admin) button.bg-primary:hover,
.site-cta-btn:hover,
.blog-cta .btn:hover {
  transform: translateY(-2px);
  filter: brightness(1.07);
  box-shadow:
    0 6px 24px -6px rgba(34, 211, 238, .7),
    0 18px 48px -14px rgba(99, 102, 241, .65),
    0 0 0 1px rgba(34, 211, 238, .35);
}
body:not(.tg-admin) a.bg-primary:active,
body:not(.tg-admin) button.bg-primary:active,
.site-cta-btn:active,
.blog-cta .btn:active {
  transform: translateY(1px) scale(.98);
  box-shadow: 0 2px 10px -4px rgba(34, 211, 238, .5);
}
/* shine sweep */
body:not(.tg-admin) a.bg-primary::after,
body:not(.tg-admin) button.bg-primary::after,
.site-cta-btn::after,
.blog-cta .btn::after {
  content: "";
  position: absolute;
  top: 0; left: -80%;
  width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .5), transparent);
  transform: skewX(-20deg);
  transition: left .55s ease;
  pointer-events: none;
}
body:not(.tg-admin) a.bg-primary:hover::after,
body:not(.tg-admin) button.bg-primary:hover::after,
.site-cta-btn:hover::after,
.blog-cta .btn:hover::after { left: 130%; }

/* ── 5. Stats strip — frosted glass with glowing edges ──── */
body:not(.tg-admin) section.bg-card.z-20 {
  background-image: linear-gradient(180deg, rgba(34, 211, 238, .04), rgba(99, 102, 241, .05));
  box-shadow:
    inset 0 1px 0 rgba(34, 211, 238, .18),
    inset 0 -1px 0 rgba(99, 102, 241, .14),
    0 24px 60px -30px rgba(34, 211, 238, .15);
}

/* ── 6. Ambient depth — soft studio-light glows behind sections ── */
body:not(.tg-admin) section.bg-background { position: relative; }
body:not(.tg-admin) section.bg-background::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(640px 340px at 10% 6%, rgba(34, 211, 238, .06), transparent 70%),
    radial-gradient(720px 400px at 90% 94%, rgba(99, 102, 241, .07), transparent 70%);
}
/* blog hero + cta ambient */
.blog-hero, .blog-cta { position: relative; overflow: hidden; }
.blog-hero::before, .blog-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(560px 300px at 14% 10%, rgba(34, 211, 238, .07), transparent 70%),
    radial-gradient(640px 360px at 86% 90%, rgba(99, 102, 241, .08), transparent 70%);
}

/* ── 7. Gradient shimmer on heading accent words ────────── */
body:not(.tg-admin) h1 .text-primary,
body:not(.tg-admin) h2 .text-primary,
body:not(.tg-admin) h3 .text-primary,
.blog-hero h1 span,
.blog-cta h2 span {
  background-image: linear-gradient(100deg, #67e8f9 0%, #22d3ee 45%, #818cf8 100%);
  background-size: 200% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
  animation: wow-shimmer 6s ease-in-out infinite;
}
@keyframes wow-shimmer {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* ── 8. Footer — gradient light line + ambient glow ─────── */
body:not(.tg-admin) footer { position: relative; }
body:not(.tg-admin) footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent 5%, #22d3ee 35%, #6366f1 65%, transparent 95%);
  opacity: .55;
  pointer-events: none;
}
body:not(.tg-admin) footer::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: radial-gradient(720px 280px at 50% 110%, rgba(34, 211, 238, .05), transparent 70%);
}

/* ── Safety rails ───────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  body:not(.tg-admin) h1 .text-primary,
  body:not(.tg-admin) h2 .text-primary,
  body:not(.tg-admin) h3 .text-primary,
  .blog-hero h1 span,
  .blog-cta h2 span { animation: none; }
  body:not(.tg-admin) a.bg-primary::after,
  body:not(.tg-admin) button.bg-primary::after,
  .site-cta-btn::after,
  .blog-cta .btn::after { display: none; }
}