/* ============================================================
   galaxy.css — uiverse-inspired accents, recolored for the
   cream/butter system. Adds what motion.css doesn't have:
   cursor-tracked glow BORDER ring, live ping, chip hovers,
   dot texture, tooltip. (Shine + inner glare already exist
   in motion.css — not duplicated here.)
   ============================================================ */

/* ---------- 1. cursor-tracked glow border ring (cards) ---------- */
.has-glow{ position:relative; }
.card-glow{
  position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:0; z-index:3;
  transition:opacity .45s var(--ease);
}
.has-glow:hover .card-glow{ opacity:1; }
.card-glow::before{
  content:""; position:absolute; inset:0; border-radius:inherit; padding:2px;
  background:radial-gradient(320px circle at var(--ggx,50%) var(--ggy,50%),
    rgba(185,131,26,.95), rgba(243,196,76,.4) 45%, transparent 72%);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
}
.card-glow::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  background:radial-gradient(220px circle at var(--ggx,50%) var(--ggy,50%),
    rgba(243,196,76,.14), transparent 65%);
}

/* ---------- 2. live status ping ring ---------- */
.status.live{ position:relative; }
.status.live::after{
  content:""; position:absolute; left:0; top:50%; width:8px; height:8px; margin-top:-4px;
  border-radius:50%; background:rgba(63,174,107,.5);
  animation:live-ping 2s var(--ease) infinite;
  pointer-events:none;
}
@keyframes live-ping{
  0%{ transform:scale(1); opacity:.6; }
  70%, 100%{ transform:scale(2.5); opacity:0; }
}

/* ---------- 3. chips & tags hover ---------- */
.chip, .tag{
  transition:background .3s var(--ease), border-color .3s var(--ease),
             color .3s var(--ease), transform .3s var(--ease);
}
.chip:hover, .tag:hover{
  background:var(--butter-sf);
  border-color:rgba(185,131,26,.45);
  color:var(--ink);
  transform:translateY(-1px);
}

/* ---------- 4. dot texture behind Direction / Work ---------- */
#work > .wrap, #direction > .wrap{ position:relative; z-index:1; }
#work::before, #direction::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:radial-gradient(rgba(33,30,24,.06) 1px, transparent 1.5px);
  background-size:24px 24px;
  -webkit-mask-image:radial-gradient(72% 62% at 50% 42%, #000 28%, transparent 76%);
          mask-image:radial-gradient(72% 62% at 50% 42%, #000 28%, transparent 76%);
}

/* ---------- 5. rotating aurora ring on the closing avatar ---------- */
@property --ga{
  syntax:"<angle>";
  initial-value:0deg;
  inherits:false;
}
.closing .face::after{
  content:""; position:absolute; inset:0; border-radius:50%; padding:3px;
  background:conic-gradient(from var(--ga),
    #F3C44C, #F0A05A, #EC8B8B, #7E9CF2, #4BC3A2, #F3C44C);
  -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite:xor;
          mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
          mask-composite:exclude;
  animation:face-spin 7s linear infinite;
  pointer-events:none;
}
@keyframes face-spin{ to{ --ga:360deg; } }

/* ---------- 6. breathing glow on the Say hello CTA ---------- */
.closing .cta-row .btn:not(.ghost){
  animation:hello-glow 3s var(--ease) infinite;
}
@keyframes hello-glow{
  0%, 100%{ box-shadow:0 8px 26px -8px rgba(243,196,76,.3); }
  50%{ box-shadow:0 8px 38px -4px rgba(243,196,76,.7); }
}

/* ---------- 7. tooltip ---------- */
[data-tip]{ position:relative; }
[data-tip]::after{
  content:attr(data-tip);
  position:absolute; bottom:calc(100% + 10px); left:50%;
  transform:translateX(-50%) translateY(5px);
  background:var(--ink); color:var(--cream);
  font-family:var(--mono); font-size:10.5px; letter-spacing:.06em;
  padding:6px 11px; border-radius:8px; white-space:nowrap;
  opacity:0; pointer-events:none;
  transition:opacity .3s var(--ease), transform .3s var(--ease);
}
[data-tip]:hover::after{
  opacity:1;
  transform:translateX(-50%) translateY(0);
}

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce){
  .card-glow{ display:none; }
  .status.live::after{ animation:none; opacity:0; }
  .chip, .tag, [data-tip]::after{ transition:none; }
  .closing .face::after{ animation:none; }
  .closing .cta-row .btn:not(.ghost){ animation:none; }
}