/* Everything in the dark layer is hidden until the visitor asks for it. */
#listen-veil,#listen-sky,#listen-star,#listen-back{ display:none; }
.listen-active #listen-veil,
.listen-active #listen-sky,
.listen-active #listen-star,
.listen-active #listen-back{ display:block; }

/* ---------- the darkening ---------- */
#listen-veil{
  position:fixed;inset:0;background:#050608;opacity:0;
  pointer-events:none;z-index:9010;
}

/* ---------- the star field ----------
   A faint, still scatter of small stars behind the one that breathes. Dim and
   motionless on purpose, so the single warm star stays the clear signal. */
#listen-sky{
  position:fixed;inset:0;z-index:9020;pointer-events:none;
  opacity:0;transition:opacity 2.4s ease;
}
.listen-active #listen-sky{ display:block; }
#listen-sky.on{ opacity:1; }
#listen-sky i{
  position:absolute;display:block;border-radius:50%;background:#CFD6E0;
  opacity:var(--o1);
  animation-name:listen-sky-tw;
  animation-timing-function:ease-in-out;
  animation-iteration-count:infinite;
  animation-direction:alternate;
  will-change:opacity,transform;
}
/* Light swelling and fading, plus a few pixels of drift — every star on its own
   duration and phase, so the field shimmers irregularly like a real sky. */
@keyframes listen-sky-tw{
  from{ opacity:var(--o0); transform:translate(0,0); }
  to  { opacity:var(--o1); transform:translate(var(--tx),var(--ty)); }
}
@media (prefers-reduced-motion:reduce){
  #listen-sky i{ animation:none; }
}

/* ---------- the star ----------
   Warm rather than pure white, so it sits in the warm dark instead of punching
   a cold hole in it. Off-centre, the brightest thing among the field, with a
   soft flare so it reads as a star and not a dot. It is clickable — the caption
   appears only when the visitor asks. */
#listen-star{
  position:fixed;z-index:9030;border-radius:50%;background:#FFF7EC;
  width:3px;height:3px;margin:-1.5px 0 0 -1.5px;opacity:0;
  cursor:pointer;pointer-events:none;
  transition:opacity 1.6s ease,width 1.6s ease,height 1.6s ease,
             margin 1.6s ease,box-shadow 1.6s ease;
}
#listen-star.on{ pointer-events:auto;animation:listen-twinkle 8.4s ease-in-out infinite; }

/* Irregular on purpose: a regular pulse reads as a loading indicator, an
   uneven one reads as atmosphere. */
@keyframes listen-twinkle{
  0%,100%{transform:scale(1);    filter:brightness(1);}
  18%    {transform:scale(1.4);  filter:brightness(1.6);}
  31%    {transform:scale(1.05); filter:brightness(1.05);}
  47%    {transform:scale(1.38); filter:brightness(1.5);}
  68%    {transform:scale(.82);  filter:brightness(.75);}
  84%    {transform:scale(1.18); filter:brightness(1.25);}
}

/* Diffraction spikes — the flare the eye reads as "star" rather than "dot". */
#listen-star::before{
  content:'';position:absolute;left:50%;top:50%;
  width:56px;height:56px;margin:-28px 0 0 -28px;
  opacity:0;transition:opacity 3s ease;pointer-events:none;
  background:
    linear-gradient(to right,transparent 0%,rgba(255,240,222,.5) 50%,transparent 100%) center/100% 1px no-repeat,
    linear-gradient(to bottom,transparent 0%,rgba(255,240,222,.5) 50%,transparent 100%) center/1px 100% no-repeat;
  animation:listen-flare 8.4s ease-in-out infinite;
}
#listen-star.lit::before{ opacity:.75; }
@keyframes listen-flare{
  0%,100%{transform:scale(.8);}
  18%    {transform:scale(1.25);}
  68%    {transform:scale(.65);}
}

/* A 64px target around a tiny star, so it can be hit — on a phone least of all.
   The ring shows on hover so it can be found in the dark. */
#listen-star::after{
  content:'';position:absolute;left:50%;top:50%;
  width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;
  border:1px solid rgba(255,240,222,0);transition:border-color .6s ease;
}
#listen-star.on:hover::after{ border-color:rgba(255,240,222,.22); }

/* ---------- the caption ----------
   A work's information as a caption beside its own star, not a panel. Hidden
   until the star is clicked. */
#listen-info{
  position:fixed;z-index:9040;max-width:19rem;
  opacity:0;pointer-events:none;transition:opacity 1.4s ease;
  font-family:var(--mono);
}
#listen-info.on{ opacity:1;pointer-events:auto; }
#listen-info h3{
  font-family:inherit;font-size:.92rem;font-weight:400;letter-spacing:.06em;
  color:var(--dark-ink);margin:0 0 .35rem;
}
#listen-info p{ margin:.1rem 0;color:#8b8177;font-size:.72rem;letter-spacing:.04em;line-height:1.5; }

/* ---------- the way back ----------
   Absent while the piece settles, then surfacing slowly. */
#listen-back{
  position:fixed;bottom:2.2rem;left:50%;transform:translateX(-50%);z-index:9030;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.22em;
  text-transform:uppercase;color:var(--dark-dim);
  opacity:0;cursor:pointer;-webkit-user-select:none;user-select:none;
  background:none;border:1px solid var(--dark-line);border-radius:999px;
  padding:.5rem 1.1rem;transition:opacity 2.5s ease,color .3s ease,border-color .3s ease;
}
#listen-back:hover{ color:var(--dark-ink);border-color:#4a453d; }

/* Motion-sensitive visitors keep the offer but not the twinkle. */
@media (prefers-reduced-motion:reduce){
  #listen-star.on{ animation:none; }
  #listen-star.lit::before{ animation:none; }
}

/* The onward step out of the dark, beside "home". */
#listen-onward{
  display:none;position:fixed;left:50%;bottom:2.4rem;transform:translateX(-50%) translateX(5.5rem);
  z-index:9040;opacity:0;transition:opacity 1.2s ease;
  font-family:var(--mono);font-size:.78rem;letter-spacing:.06em;
  color:#E9B44C;text-decoration:none;border-bottom:1px solid rgba(233,180,76,.4);padding-bottom:2px;
}
.listen-active #listen-onward{ display:block; }
#listen-onward:hover{ opacity:1 !important;border-bottom-color:#E9B44C; }
#listen-back{ transform:translateX(-5.5rem); }