/**
 * ╔══════════════════════════════════════════════════════════════╗
 * ║  PHYSICAL GLASSMORPHISM — Vibe OS 4.0                       ║
 * ║  Simulates real frosted glass: noise texture, specular      ║
 * ║  edge highlights, prismatic refraction, cursor-reactive     ║
 * ║  ambient glow. All CSP-safe (no external resources).        ║
 * ╚══════════════════════════════════════════════════════════════╝
 */

/* ════════════════════════════════════════════════════════════════
   SVG FRACTAL NOISE — Simulates glass surface microtexture
   Encoded as data URI (CSP-safe, counts as 'self' stylesheet)
════════════════════════════════════════════════════════════════ */

:root {
  /* Noise textures at different scales */
  --noise-fine:   url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.035'/%3E%3C/svg%3E");
  --noise-coarse: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='256' height='256'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.45' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='256' height='256' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E");
}

/* ════════════════════════════════════════════════════════════════
   PHYSICAL GLASS MIXIN — applies to all card types
════════════════════════════════════════════════════════════════ */

/* Layer 0: base element */
.glass-card,
.service-card,
.bento-card,
.vibe-what-card,
.course-card,
.skill-card,
.terminal-window,
.persona-side,
.ai-voice-tooltip,
[data-glass] {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  /* Base glass surface */
  background: var(--glass-depth-2) !important;
  -webkit-backdrop-filter: var(--glass-blur-md) !important;
  backdrop-filter: var(--glass-blur-md) !important;
  border: 1px solid rgba(255,255,255,0.072) !important;
  box-shadow:
    var(--shadow-3),
    inset 0 1px 0 rgba(255,255,255,0.09),
    inset 0 -1px 0 rgba(0,0,0,0.25) !important;
  transition:
    transform      var(--dur-normal) var(--ease-expo-out),
    box-shadow     var(--dur-normal) var(--ease-expo-out),
    border-color   var(--dur-normal) ease,
    background     var(--dur-slow)   ease !important;
}

/* Layer 1: noise texture (::before) */
.glass-card::before,
.service-card::before,
.bento-card::before,
.vibe-what-card::before,
.course-card::before,
.skill-card::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 0;
  border-radius: inherit;
  pointer-events: none;
  /* Noise texture */
  background-image: var(--noise-fine);
  background-size: 256px 256px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.55;
}

/* Layer 2: light refraction + cursor glow (::after) */
.glass-card::after,
.service-card::after,
.bento-card::after,
.vibe-what-card::after,
.course-card::after,
.skill-card::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  border-radius: inherit;
  pointer-events: none;
  /* Cursor-reactive ambient glow */
  background:
    radial-gradient(
      circle 280px at var(--glow-x, 50%) var(--glow-y, -30%),
      rgba(163,207,43,0.10) 0%,
      rgba(163,207,43,0.04) 40%,
      transparent 70%
    ),
    /* Top-left specular highlight (simulates overhead light) */
    radial-gradient(
      ellipse 60% 30% at 20% 0%,
      rgba(255,255,255,0.065) 0%,
      transparent 60%
    ),
    /* Bottom-right ambient shadow */
    radial-gradient(
      ellipse 50% 40% at 85% 100%,
      rgba(0,0,0,0.15) 0%,
      transparent 60%
    );
  transition: background 0.25s ease;
}

/* ── Hover state: physical elevation ──────────────────────────── */
.glass-card:hover,
.service-card:hover,
.bento-card:hover,
.vibe-what-card:hover,
.course-card:hover,
.skill-card:hover {
  border-color: rgba(163,207,43,0.16) !important;
  box-shadow:
    var(--shadow-4),
    var(--glow-lime),
    inset 0 1px 0 rgba(255,255,255,0.14),
    inset 0 -1px 0 rgba(0,0,0,0.3) !important;
  transform: translateY(-6px) !important;
}

/* Hover: amplified top specular */
.glass-card:hover::after,
.service-card:hover::after,
.bento-card:hover::after {
  background:
    radial-gradient(
      circle 320px at var(--glow-x, 50%) var(--glow-y, -30%),
      rgba(163,207,43,0.15) 0%,
      rgba(163,207,43,0.05) 50%,
      transparent 70%
    ),
    radial-gradient(
      ellipse 70% 35% at 20% 0%,
      rgba(255,255,255,0.1) 0%,
      transparent 60%
    ),
    radial-gradient(
      ellipse 55% 45% at 85% 100%,
      rgba(0,0,0,0.2) 0%,
      transparent 60%
    );
}

/* ════════════════════════════════════════════════════════════════
   TOP EDGE SPECULAR — physical glass edge catching light
════════════════════════════════════════════════════════════════ */
.glass-card > *,
.service-card > *,
.bento-card > *,
.course-card > * {
  position: relative;
  z-index: 2; /* ensure content is above noise/glow layers */
}

/* ════════════════════════════════════════════════════════════════
   PRISMATIC BORDER — iridescent edge on featured cards
════════════════════════════════════════════════════════════════ */
.glass-card.featured,
.service-card.featured,
[data-glass="prismatic"] {
  border-color: transparent !important;
}

.glass-card.featured::before,
.service-card.featured::before,
[data-glass="prismatic"]::before {
  /* Prismatic shimmer overlay instead of noise for featured cards */
  background-image:
    linear-gradient(125deg,
      rgba(163,207,43,0.18) 0%,
      rgba(0,224,198,0.12) 25%,
      rgba(125,79,243,0.10) 50%,
      rgba(0,137,123,0.12) 75%,
      rgba(163,207,43,0.18) 100%
    );
  background-size: 200% 200%;
  animation: prismaticShift 6s ease-in-out infinite;
  mix-blend-mode: screen;
  opacity: 0.7;
}

/* Prismatic border via outline pseudo-element */
.glass-card.featured::after,
.service-card.featured::after,
[data-glass="prismatic"]::after {
  background:
    radial-gradient(circle 350px at var(--glow-x, 50%) var(--glow-y, -30%),
      rgba(163,207,43,0.18) 0%, transparent 65%),
    radial-gradient(ellipse 80% 40% at 15% 0%, rgba(255,255,255,0.12) 0%, transparent 60%);
}

@keyframes prismaticShift {
  0%, 100% { background-position: 0% 0%; }
  33%       { background-position: 100% 50%; }
  66%       { background-position: 50% 100%; }
}

/* ════════════════════════════════════════════════════════════════
   NAVIGATION — Sovereign Glass
════════════════════════════════════════════════════════════════ */
.nav {
  background: rgba(1, 16, 20, 0.65) !important;
  -webkit-backdrop-filter: saturate(200%) blur(28px) brightness(0.9) !important;
  backdrop-filter: saturate(200%) blur(28px) brightness(0.9) !important;
  border-bottom: 1px solid rgba(255,255,255,0.055) !important;
  box-shadow:
    0 1px 0 rgba(163,207,43,0.06),
    0 4px 32px rgba(0,0,0,0.35),
    inset 0 -1px 0 rgba(0,0,0,0.2) !important;
}

/* Nav noise texture */
.nav::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: var(--noise-fine);
  background-size: 256px 256px;
  background-repeat: repeat;
  mix-blend-mode: overlay;
  opacity: 0.3;
  pointer-events: none;
  z-index: 0;
}

/* ════════════════════════════════════════════════════════════════
   LOADER GLASS — cinematic frosted overlay
════════════════════════════════════════════════════════════════ */
.loader {
  -webkit-backdrop-filter: saturate(180%) blur(40px) !important;
  backdrop-filter: saturate(180%) blur(40px) !important;
}

/* ════════════════════════════════════════════════════════════════
   MODAL / OVERLAY GLASS
════════════════════════════════════════════════════════════════ */
.sp-box,
#sp-modal .sp-box,
.modal-content,
[data-glass-modal] {
  background: rgba(3, 14, 18, 0.88) !important;
  -webkit-backdrop-filter: saturate(200%) blur(40px) !important;
  backdrop-filter: saturate(200%) blur(40px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow:
    0 40px 120px rgba(0,0,0,0.7),
    0 0 0 1px rgba(163,207,43,0.08),
    inset 0 1px 0 rgba(255,255,255,0.12) !important;
}

/* ════════════════════════════════════════════════════════════════
   BUTTON PHYSICAL GLASS
════════════════════════════════════════════════════════════════ */
.btn-outline {
  background: rgba(255,255,255,0.04) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), var(--shadow-2) !important;
  transition:
    background   var(--dur-normal) var(--ease-expo-out),
    border-color var(--dur-normal) ease,
    box-shadow   var(--dur-normal) ease,
    transform    var(--dur-fast)   var(--ease-back-out) !important;
}

.btn-outline:hover {
  background:    rgba(163,207,43,0.08) !important;
  border-color:  rgba(163,207,43,0.35) !important;
  box-shadow:    inset 0 1px 0 rgba(255,255,255,0.12), var(--glow-lime) !important;
  transform:     translateY(-2px) scale(1.02) !important;
}

/* ════════════════════════════════════════════════════════════════
   MAGNETIC BUTTON ENHANCEMENT — GSAP will add .js-magnetic class
════════════════════════════════════════════════════════════════ */
.magnetic-btn {
  will-change: transform;
}

/* ════════════════════════════════════════════════════════════════
   ICON BUTTONS — Nav icon physical glass
════════════════════════════════════════════════════════════════ */
.nav-actions .icon-btn {
  background: rgba(255,255,255,0.04) !important;
  -webkit-backdrop-filter: blur(12px) !important;
  backdrop-filter: blur(12px) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.06), var(--shadow-1) !important;
  transition:
    background   var(--dur-fast) ease,
    border-color var(--dur-fast) ease,
    transform    var(--dur-fast) var(--ease-back-out),
    box-shadow   var(--dur-fast) ease !important;
}

.nav-actions .icon-btn:hover {
  background:    rgba(163,207,43,0.12) !important;
  border-color:  rgba(163,207,43,0.3) !important;
  transform:     translateY(-2px) scale(1.08) !important;
  box-shadow:    inset 0 1px 0 rgba(255,255,255,0.1), 0 4px 16px rgba(163,207,43,0.2) !important;
}

/* ════════════════════════════════════════════════════════════════
   TERMINAL WINDOW — special frosted glass for terminal
════════════════════════════════════════════════════════════════ */
.terminal-window {
  background: rgba(0, 8, 12, 0.82) !important;
  -webkit-backdrop-filter: saturate(140%) blur(24px) !important;
  backdrop-filter: saturate(140%) blur(24px) !important;
  border: 1px solid rgba(163,207,43,0.15) !important;
  box-shadow:
    0 0 0 1px rgba(163,207,43,0.06),
    var(--shadow-4),
    inset 0 1px 0 rgba(163,207,43,0.08) !important;
}

/* ════════════════════════════════════════════════════════════════
   SECTION AMBIENT GRADIENT — Living background per section
════════════════════════════════════════════════════════════════ */
#services::before,
#work::before,
#courses::before,
#skills::before,
#contact::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 80% 50% at 20% 30%, rgba(163,207,43,0.03) 0%, transparent 60%),
    radial-gradient(ellipse 60% 50% at 80% 70%, rgba(0,137,123,0.03) 0%, transparent 60%);
}

#skills::before {
  background:
    radial-gradient(ellipse 70% 60% at 30% 20%, rgba(125,79,243,0.04) 0%, transparent 60%),
    radial-gradient(ellipse 60% 60% at 70% 80%, rgba(0,224,198,0.03) 0%, transparent 60%);
}

/* ════════════════════════════════════════════════════════════════
   prefers-reduced-motion
════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  .glass-card::before,
  .service-card::before,
  .bento-card::before {
    animation: none;
  }
  .glass-card.featured::before,
  .service-card.featured::before {
    animation: none;
  }
}