/* ==========================================================================
   glassmorphism.css — reusable glass-card treatment, enter screen,
   floating music player
   ========================================================================== */

/* Shared glass treatment — applied to the hero and every bento/content
   card, instead of a single wrapping .page like before. Same technique as
   the old design (layered shadow + static gradient edge), just usable on
   as many simultaneous cards as the layout needs. */
.glass-card{
  position:relative;
  text-align:left;
  background: var(--card-bg);
  border: 1px solid rgba(255,255,255,.06);
  border-radius:16px;
  padding: 1.6rem 1.6rem 1.8rem;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 1px 2px rgba(0,0,0,.35),
    0 24px 60px -24px rgba(0,0,0,.65);
  transition: transform .2s ease, box-shadow .2s ease;
  --spot-x: 50%;
  --spot-y: 50%;
}

/* Static (non-animated, deliberately) diagonal gradient edge — light
   catching one corner of the glass, like a premium UI panel. A *linear*
   gradient reads as "edge lighting"; the old *conic* gradient this
   replaced read as circular/spinning even without animation — using
   linear instead avoids the spinner look at the source, not just by
   removing motion. */
.glass-card::before{
  content:"";
  position:absolute;
  inset:-1px;
  border-radius:17px;
  padding:1px;
  background: linear-gradient(135deg,
    var(--link) 0%,
    rgba(255,255,255,.14) 35%,
    transparent 65%);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  pointer-events:none;
  opacity:.9;
}

/* Spotlight — the site's one signature hover effect (see
   assets/js/interactions.js). A soft radial glow that follows the
   cursor, clipped to the card's own rounded shape via border-radius:
   inherit rather than overflow:hidden, so it never clips the ::before
   edge-lighting layer above (which deliberately extends slightly past
   the card's own edge). */
.glass-card::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  background: radial-gradient(circle 240px at var(--spot-x) var(--spot-y),
    color-mix(in srgb, var(--link) 22%, transparent), transparent 70%);
  opacity:0;
  transition: opacity .35s ease;
  pointer-events:none;
}
.glass-card.spotlight-active::after{ opacity:1; }
.glass-card:hover{ transform: translateY(-2px); }

/* Only the hero breathes/glows — every bento card doing this at once
   reads as chaotic rather than premium. */
.hero.glass-card{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.07),
    0 1px 2px rgba(0,0,0,.35),
    0 24px 60px -24px rgba(0,0,0,.65),
    0 8px 44px -14px var(--link);
  animation: card-breathe 5s ease-in-out infinite;
}
@keyframes card-breathe{
  0%,100%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 1px 2px rgba(0,0,0,.35),
      0 24px 60px -24px rgba(0,0,0,.65),
      0 8px 44px -16px var(--link);
  }
  50%{
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.07),
      0 1px 2px rgba(0,0,0,.35),
      0 24px 60px -24px rgba(0,0,0,.65),
      0 10px 58px -10px var(--link);
  }
}

@media (prefers-reduced-motion: reduce){
  .hero.glass-card{ animation:none; }
  .glass-card{ transition:none; }
}

.enter-screen{
  position:fixed;
  inset:0;
  background: rgba(6,8,11,.94);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:100;
  cursor:pointer;
  transition: opacity .5s ease;
}
.enter-screen.hidden{
  opacity:0;
  pointer-events:none;
}

/* Floating music player — deliberately a body-level element, never
   nested inside anything with backdrop-filter/transform/filter. Those
   properties redefine the *containing block* for position:fixed
   descendants to themselves instead of the viewport — nested inside a
   .glass-card, this would end up fixed to that card's box, not the
   actual screen corner. Also never touched by the router's page swap
   (assets/js/router.js only replaces #page-content), which is what
   keeps the audio itself playing uninterrupted across navigation. */
.music-controls{
  position:fixed;
  top:15px;
  left:15px;
  display:flex;
  align-items:center;
  gap:10px;
  background: var(--card-bg);
  border:1px solid rgba(255,255,255,.08);
  border-radius:20px;
  padding:6px 12px;
  backdrop-filter: blur(14px) saturate(150%);
  -webkit-backdrop-filter: blur(14px) saturate(150%);
  z-index:50;
}