/* =========================================================
   SNK PREMIUM LAYER  ("5D": depth, tilt, glare, ambient light)
   Loaded AFTER each page's own CSS. Pairs with premium.js.
   ========================================================= */

::selection { background: rgba(184, 255, 53, .35); color: #fff; }

/* ---------- ambient background (3 soft lights + film grain) ---------- */
.p5-bg { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.p5-orb { position: absolute; border-radius: 50%; filter: blur(90px); will-change: transform, translate; }
.p5-orb.a {
  width: 48vmax; height: 48vmax; left: -14vmax; top: -16vmax;
  background: radial-gradient(circle, rgba(184, 255, 53, .20), transparent 65%);
  translate: calc(var(--px, 0) * 34px) calc(var(--py, 0) * 28px);
  animation: p5a 24s ease-in-out infinite alternate;
}
.p5-orb.b {
  width: 42vmax; height: 42vmax; right: -14vmax; bottom: -16vmax;
  background: radial-gradient(circle, rgba(91, 156, 255, .15), transparent 65%);
  translate: calc(var(--px, 0) * -40px) calc(var(--py, 0) * -30px);
  animation: p5b 28s ease-in-out infinite alternate;
}
.p5-orb.c {
  width: 26vmax; height: 26vmax; right: 14vmax; top: 8vmax;
  background: radial-gradient(circle, rgba(167, 123, 255, .10), transparent 65%);
  translate: calc(var(--px, 0) * 22px) calc(var(--py, 0) * -24px);
  animation: p5a 32s ease-in-out infinite alternate-reverse;
}
.p5-bg::after {
  content: ""; position: absolute; inset: 0; opacity: .05;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
@keyframes p5a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(5vmax, 4vmax, 0) scale(1.12); } }
@keyframes p5b { from { transform: translate3d(0, 0, 0) scale(1.05); } to { transform: translate3d(-5vmax, -3vmax, 0) scale(.94); } }

/* let the ambient light show through the full-page wrappers */
.main-content { background: transparent !important; }
.gate { background: transparent !important; }

/* ---------- layered surfaces ---------- */
.panel, .gate-box, .login-card, .card, .service-card, .stat-card, .dashboard-card,
.project-card, .settings-card, .payment-box, .table-card, .messages-card, .quick-action,
.req, .about-small-card, .floating-card, .cta-box, .work-image {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .06),
    0 1px 2px rgba(0, 0, 0, .45),
    0 22px 44px -24px rgba(0, 0, 0, .80);
}
.card:hover, .service-card:hover, .stat-card:hover, .project-card:hover, .settings-card:hover,
.quick-action:hover, .work-card:hover .work-image, .p5-on {
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .10),
    0 0 0 1px rgba(184, 255, 53, .22),
    0 34px 70px -30px rgba(184, 255, 53, .20),
    0 26px 50px -24px rgba(0, 0, 0, .75);
}
.topbar, .top, .site-head { box-shadow: 0 12px 30px -20px rgba(0, 0, 0, .85); }

/* ---------- pointer glare (added by premium.js while hovering) ---------- */
.p5-on { transition-duration: .12s !important; }
.p5-on::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 3;
  background: radial-gradient(420px circle at var(--mx, 50%) var(--my, 50%), rgba(184, 255, 53, .13), transparent 55%);
}
.p5-layer { transition: translate .15s ease-out; will-change: translate; }

/* ---------- premium buttons ---------- */
.primary-button, .btn.primary, .btn-primary, .login-btn, .nav-cta {
  position: relative; overflow: hidden;
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .30), rgba(255, 255, 255, 0) 55%);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .55), 0 12px 26px -10px rgba(184, 255, 53, .50);
}
.primary-button::before, .btn.primary::before, .btn-primary::before, .login-btn::before, .nav-cta::before {
  content: ""; position: absolute; top: 0; bottom: 0; left: -60%; width: 40%; pointer-events: none;
  background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .55), transparent);
  transform: skewX(-18deg); transition: left .6s ease;
}
.primary-button:hover::before, .btn.primary:hover::before, .btn-primary:hover::before,
.login-btn:hover::before, .nav-cta:hover::before { left: 130%; }

/* ---------- homepage depth cues ---------- */
.hero-glow { translate: calc(var(--px, 0) * -26px) calc(var(--py, 0) * -20px); }
.floating-card { translate: calc(var(--px, 0) * var(--d, 22) * 1px) calc(var(--py, 0) * var(--d, 22) * 1px); transition: translate .25s ease-out; }
.floating-one { --d: -28; }
.floating-two { --d: 32; }

@media (prefers-reduced-motion: reduce) {
  .p5-orb, .p5-orb.a, .p5-orb.b, .p5-orb.c { animation: none; translate: none; }
  .hero-glow, .floating-card { translate: none; }
  .primary-button::before, .btn.primary::before, .btn-primary::before, .login-btn::before, .nav-cta::before { transition: none; }
}