/* The immersive mode (tickets/T51-le-mode-immersif.md).

   The nebula: a canvas in the place of the page's paper. Fixed, under the
   water (#ripple, z 0, later in the body), the sleeve's wash and the page
   (z 1). It fades in and out; the loop in immersive.js stops a beat after it
   is gone (1.3 s > 1.2 s). */
.nebula {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s ease;
}
.nebula.is-on { opacity: 1; }

/* The key: anywhere in the dark. A phone (T56) and a narrow desktop window
   keep their page as it is; only its paper changes (immersive.js). */
#immersive-key[hidden],
:root:not([data-theme="dark"]) #immersive-key { display: none; }
/* No key for it on a phone, for now (T70): hidden, not removed — the mode
   stays whole on a wide screen. */
@media (max-width: 640px) { #immersive-key { display: none; } }

/* The page makes room. Nothing is laid out again: every move is a transform
   and every going is an opacity, so the page glides both ways — which is why
   the transitions sit on the elements themselves and not under .is-immersive:
   leaving is animated as much as arriving. The distances are measured by
   immersive.js (--immersive-lift, --immersive-sink). */
:root {
  --immersive-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --immersive-move: 900ms;
}
.schedule,
.actions { transition: opacity 500ms ease, transform var(--immersive-move) var(--immersive-ease), visibility 0s linear 0s; }
.headline,
.now,
.volume { transition: transform var(--immersive-move) var(--immersive-ease); }
/* .now .cover, not .cover: it has to outweigh stage.css's .cover:not(:disabled). */
.now .cover { transition: transform var(--immersive-move) var(--immersive-ease), box-shadow 160ms ease; }

/* One state, set by immersive.js from where the hand is:
     is-bottom — it went down to the foot (or the radio is silent): the keys
                 show, and the volume is whole
   Set on the way in, and a still hand puts it away. The bar stays. */

/* The mood and the credits rise to just under the bar. The mood shrinks from
   the margin; the credits keep their size — they are read and pressed — and
   only the sleeve shrinks, toward them. */
.is-immersive .headline { transform: translateY(var(--immersive-lift, 0px)) scale(0.55); transform-origin: left center; }
.is-immersive .now { transform: translateY(var(--immersive-lift, 0px)); }
.is-immersive .now .cover { transform: scale(0.6); transform-origin: right center; }

/* The keys are away unless called, a little downward, and out of reach once
   gone (visibility waits for the fade); the volume sinks into their place. */
.is-immersive .actions {
  opacity: 0;
  transform: translateY(12px);
  visibility: hidden;
  pointer-events: none;
  transition: opacity 500ms ease, transform var(--immersive-move) var(--immersive-ease), visibility 0s linear 500ms;
}
.is-immersive .volume { transform: translateY(var(--immersive-sink, 0px)); }
.is-immersive.is-bottom .actions {
  opacity: 1;
  transform: none;
  visibility: visible;
  pointer-events: auto;
  transition: opacity 500ms ease, transform var(--immersive-move) var(--immersive-ease), visibility 0s linear 0s;
}
.is-immersive.is-bottom .volume { transform: none; }

/* Unless the hand goes for the foot, the volume is what the phone shows
   (volume.css's .no-fader, T50): the meter alone, the track moving in the
   ticks — no scale, no grey rail, no grab. It is part of the foot, and comes
   out with the keys. Faded rather than hidden, so it comes back as it went.
   (.rail .grab, not .grab: it keeps .btn's own shadow ease.) */
.scale,
.rail::before,
#volume { transition: opacity 700ms ease; }
.rail .grab { transition: opacity 700ms ease, box-shadow 120ms ease; }
.is-immersive:not(.is-bottom) .scale,
.is-immersive:not(.is-bottom) .rail::before,
.is-immersive:not(.is-bottom) #volume,
.is-immersive:not(.is-bottom) .rail .grab { opacity: 0; }

/* The day's programme steps out for the whole mode: the mood rises into its row. */
.is-immersive .schedule { opacity: 0; visibility: hidden; transition: opacity 500ms ease, visibility 0s linear 500ms; }

@media (prefers-reduced-motion: reduce) {
  :root { --immersive-move: 1ms; }
}