/* Layout: the room's layers (seasonal light, grain, particle canvas), the
   chrome that obeys the cursor hush, and the mode panels' cross-dissolve. */

.bg {
  position: fixed; inset: 0; z-index: var(--z-ground);
  transition: background var(--dur-season) var(--ease-breath);
  background: var(--atmosphere);
}
.grain {
  position: fixed; inset: 0; z-index: var(--z-grain); pointer-events: none;
  opacity: var(--grain-opacity); mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
.particles { position: fixed; inset: 0; z-index: var(--z-particles); pointer-events: none; }

/* chrome that obeys cursor-hush */
.chrome { transition: opacity var(--dur-hush) var(--ease-breath); }
body.hushed .chrome { opacity: 0; pointer-events: none; }
/* boot: the room lights up once the first poem is ready (class managed by
   app.js; if JS never runs, nothing is ever hidden) */
body.preboot .chrome { opacity: 0; }

/* ---- mode panels (cross-dissolve) ---- */
.panel {
  position: fixed; inset: 0; z-index: var(--z-panel);
  opacity: 0; pointer-events: none;
  /* visibility keeps the two inactive panels' controls (compose inputs,
     gallery tiles) out of the tab order; it flips after the dissolve */
  visibility: hidden;
  transition: opacity 1s var(--ease-breath), visibility 0s linear 1s;
}
.panel.active {
  opacity: 1; pointer-events: auto; visibility: visible;
  transition: opacity 1s var(--ease-breath);
}
/* a panel takes focus only after a back/forward or in-app step, as a place
   to stand, not a control: no ring */
.panel:focus { outline: none; }

/* a very gentle drift of the light source: transform is composited, so the
   gradient stack is not repainted every frame; scale(1.06) keeps the
   oversized layer covering the viewport while it wanders */
@media (prefers-reduced-motion: no-preference) {
  .bg {
    will-change: transform;
    animation: ambient-drift 46s ease-in-out infinite alternate;
  }
  @keyframes ambient-drift {
    from { transform: translate3d(0, 0, 0) scale(1.06); }
    to   { transform: translate3d(-1.6%, 1.4%, 0) scale(1.06); }
  }
}

@media (prefers-reduced-motion: reduce) {
  .bg { animation: none; transform: none; }
}