/* ==========================================================================
   DEPTH3D — immersive 3D layer: WebGL hero canvas, glare-tilt cards,
   glassmorphism, floating volumetric orbs, and perspective depth.
   Loaded after style.css/animations.css so it can safely override/extend.
   ========================================================================== */

/* -- 3D hero canvas sits above the flat 2D particle field -- */
.hero-canvas-3d {
  position: absolute; inset: 0; width: 100%; height: 100%;
  z-index: 1; pointer-events: none;
  transition: opacity .6s var(--ease);
}
.hero-canvas { z-index: 0; }
.hero-inner { position: relative; z-index: 2; }

/* -- floating volumetric depth orbs: soft blurred gradient spheres that
      drift, adding atmospheric depth behind content without any imagery -- */
.depth-orb {
  position: absolute; z-index: 0; border-radius: 50%; pointer-events: none;
  filter: blur(70px); opacity: 0.45; will-change: transform;
  animation: orbDrift 16s ease-in-out infinite;
}
@keyframes orbDrift {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(18px, -22px, 0) scale(1.08); }
}
.depth-orb--a { top: 6%; right: 8%; width: 340px; height: 340px; background: radial-gradient(circle, rgba(139,92,246,0.55), transparent 70%); animation-delay: 0s; }
.depth-orb--b { bottom: 4%; left: 4%; width: 280px; height: 280px; background: radial-gradient(circle, rgba(62,166,255,0.5), transparent 70%); animation-delay: -6s; }
.depth-orb--c { top: 10%; left: 50%; width: 380px; height: 380px; background: radial-gradient(circle, rgba(34,229,208,0.35), transparent 70%); animation-delay: -3s; }
.depth-orb--d { bottom: 0; right: 10%; width: 320px; height: 320px; background: radial-gradient(circle, rgba(255,59,129,0.32), transparent 70%); animation-delay: -9s; }
.about, .projects { position: relative; overflow: hidden; }

/* ==========================================================================
   TILT-3D CARDS — perspective wrapper on grids + glare sweep on elements
   ========================================================================== */
.about-grid, .stat-grid, .skill-cloud, .project-grid, .cert-grid, .github-grid, .v-timeline {
  perspective: 1400px;
}

.tilt-3d {
  position: relative;
  transform-style: preserve-3d;
  transition: box-shadow .35s var(--ease), border-color .35s var(--ease);
  --glare-o: 0;
}
.tilt-3d::after {
  content: '';
  position: absolute; inset: 0; z-index: 3; pointer-events: none;
  border-radius: inherit;
  opacity: var(--glare-o, 0);
  transition: opacity .3s var(--ease);
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,0.14), transparent 60%);
  mix-blend-mode: overlay;
}
.tilt-3d:hover {
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.65), 0 0 40px -18px rgba(62,166,255,0.25);
  z-index: 5;
}

/* keep inner content slightly raised for a layered-depth feel */
.project-card.tilt-3d > *,
.cert-card.tilt-3d > *,
.about-card.tilt-3d > *,
.v-card.tilt-3d > * {
  transform: translateZ(18px);
}
.hero-console.tilt-3d { transform-style: preserve-3d; }
.hero-console.tilt-3d .console-frame { transform: translateZ(24px); }
.hero-console.tilt-3d .console-glow { transform: translateZ(-10px); }

/* ==========================================================================
   GLASSMORPHISM — frosted-glass surfaces for a more premium, dimensional UI
   ========================================================================== */
.navbar .nav-inner {
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
}
.modal-panel {
  backdrop-filter: blur(22px) saturate(160%);
  -webkit-backdrop-filter: blur(22px) saturate(160%);
  background: rgba(13,13,15,0.72) !important;
}
.about-card, .project-card, .cert-card, .repo-card, .v-card, .skill-tag {
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: linear-gradient(155deg, rgba(255,255,255,0.035), rgba(255,255,255,0) 45%), var(--bg-card);
}

/* subtle top-edge highlight to sell the "raised glass panel" look */
.about-card, .project-card, .cert-card, .v-card {
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow-soft);
}

/* ==========================================================================
   BUTTONS & SMALL DEPTH TOUCHES
   ========================================================================== */
.btn-primary {
  box-shadow: 0 12px 30px -12px rgba(62,166,255,0.45), inset 0 1px 0 rgba(255,255,255,0.15);
}
.btn { transition: transform .3s var(--ease), box-shadow .3s var(--ease); }
.btn:hover { transform: translateY(-3px) translateZ(0); }

.stat { transform-style: preserve-3d; transition: transform .35s var(--ease); }
.stat:hover { transform: translateZ(14px); }

/* ==========================================================================
   MODAL 3D FLIP + PARALLAX — project detail panel flips in/out through
   real 3D space, with its contents layered on staggered depth planes.
   ========================================================================== */
.modal { perspective: 2200px; }
.modal-backdrop { opacity: 0; transition: opacity .4s var(--ease); }
.modal.is-open .modal-backdrop { opacity: 1; }

.modal-panel {
  transform-style: preserve-3d;
  transform-origin: 50% 30%;
  animation: none;
}
.modal-panel.flip-in { animation: modalFlipIn .6s cubic-bezier(.19,1,.22,1); }
.modal-panel.flip-out { animation: modalFlipOut .36s cubic-bezier(.5,0,.85,.35) forwards; }

@keyframes modalFlipIn {
  0%   { opacity: 0; transform: translateY(50px) translateZ(-260px) rotateX(-22deg) rotateY(8deg) scale(.92); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) scale(1); }
}
@keyframes modalFlipOut {
  0%   { opacity: 1; transform: translateY(0) translateZ(0) rotateX(0deg) rotateY(0deg) scale(1); }
  100% { opacity: 0; transform: translateY(30px) translateZ(-200px) rotateX(16deg) rotateY(-6deg) scale(.94); }
}

/* content sits on staggered depth planes for a genuine parallax read */
.modal-eyebrow { transform: translateZ(24px); }
.modal-title { transform: translateZ(38px); }
.modal-content > .project-badges { transform: translateZ(28px); }
.modal-meta-grid { transform-style: preserve-3d; }
.modal-meta-grid div { transform: translateZ(20px); transition: transform .3s var(--ease); }
.modal-meta-grid div:hover { transform: translateZ(34px); }
.modal-section { transform: translateZ(8px); }
.modal-section:hover { transform: translateZ(16px); }

/* subtle pointer-driven parallax on the whole panel (bound via tilt3d.js) */
.modal-panel.tilt-3d::after { border-radius: var(--radius-l); }

@media (prefers-reduced-motion: reduce) {
  .modal-panel.flip-in, .modal-panel.flip-out { animation: none; }
  .modal-eyebrow, .modal-title, .modal-content > .project-badges,
  .modal-meta-grid div, .modal-section { transform: none !important; }
}
@media (max-width: 700px) {
  .modal-eyebrow, .modal-title, .modal-content > .project-badges,
  .modal-meta-grid div, .modal-section { transform: none; }
  @keyframes modalFlipIn {
    0% { opacity: 0; transform: translateY(30px) scale(.96); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .depth-orb { animation: none; }
  .tilt-3d, .tilt-3d > * { transform: none !important; }
}
@media (pointer: coarse) {
  .tilt-3d > * { transform: none !important; }
  .depth-orb { opacity: 0.28; }
}
@media (max-width: 900px) {
  .depth-orb { display: none; }
  .hero-canvas-3d { opacity: 0.6; }
}