/* enhance: contact (owned by its section agent) */
/* Signature: an atmospheric arrival. You've walked into a slightly
   questionable whiskey bar. The sign sets in, the lights come up over
   the couch, the glow warms, the copy lands in rhythm. Motion lives in
   contact.js; this file only prepares surfaces (transform/opacity only). */

/* Teal glow behind the couch, now driven by CSS vars so the "lights up"
   tween can fade + swell it. Defaults keep it fully lit with no JS
   (reduced-motion / no-motion never touch these). */
.contact-hero::before{
  opacity:var(--glow, 1);
  transform:translate(-50%, -50%) scale(var(--glowScale, 1));
  will-change:opacity, transform;
}

/* Headline words ride masked wrappers (SplitText mask), so the set-in
   slide never bleeds past the type. */
.contact-hero .ct-word{will-change:transform, opacity}

/* The couch CONTAINER is what reveals (canvas is owned by couch.js). */
.contact-hero #couch{will-change:transform, opacity}

/* Wrapper we add in JS so the drag-invite can pulse without fighting the
   container's global .reveal. */
.contact-hero .couch-hint .ch-inner{display:inline-block;will-change:transform, opacity}

/* Considered link hover: a small lift + the bar's own warm gold glow
   (the same vocabulary the cigarette's CONTACT reveal uses). */
.contact-copy .links a{
  position:relative;display:inline-block;
  transition:color .3s cubic-bezier(0.25, 1, 0.5, 1),
             transform .38s cubic-bezier(0.16, 1, 0.3, 1),
             text-shadow .38s ease;
}
.contact-copy .links a:hover{
  color:var(--gold);
  transform:translateY(-3px);
  text-shadow:0 0 16px rgba(237, 162, 0, .5);
}

/* Music control is wired by music.js; only dressed here. A soft warm
   arrival when it appears, and a gold halo on hover to match the room. */
#music-toggle{
  transition:transform .3s cubic-bezier(0.16, 1, 0.3, 1),
             border-color .25s, box-shadow .35s, opacity .4s;
}
#music-toggle.show{animation:mt-arrive .55s cubic-bezier(0.16, 1, 0.3, 1)}
#music-toggle:hover{
  box-shadow:0 10px 30px rgba(0, 0, 0, .5), 0 0 22px rgba(237, 162, 0, .28);
}
@keyframes mt-arrive{
  from{opacity:0;transform:scale(.72)}
  to{opacity:1;transform:scale(1)}
}

@media (prefers-reduced-motion: reduce){
  .contact-copy .links a{transition:color .2s}
  .contact-copy .links a:hover{transform:none;text-shadow:0 0 14px rgba(237, 162, 0, .45)}
  #music-toggle.show{animation:none}
}