/* ─── Symvolia — sound toggle · archive portal · void dive ─── */

/* Palette locale del void — black hole: horizon, photon ring, accretion disk */
:root {
  --void-black: #000000;
  --void-purple-deep: #2a0a4a;
  --void-purple: #7c3aed;
  --void-ember: #c45a12;
  --void-plasma: #f2c14e;
  --void-white: #ffffff;
  --void-ms: 3200ms;

  /* Shared with .main__header, which reserves this much room on its right
     so the floating toggle can never sit on top of the nav. */
  --sound-toggle-size: 2.75rem;
  --sound-toggle-gap: 0.75rem;
  --sound-toggle-x: clamp(0.9rem, 2.4vw, 1.5rem);
  --sound-toggle-y: clamp(0.9rem, 2.4vh, 1.4rem);
}

/* ─────────────────────────  Sound toggle  ───────────────────────── */

.sound-toggle {
  position: fixed;
  top: max(var(--sound-toggle-y), env(safe-area-inset-top, 0px));
  right: max(var(--sound-toggle-x), env(safe-area-inset-right, 0px));
  z-index: 300;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--sound-toggle-size);
  height: var(--sound-toggle-size);
  border-radius: 50%;
  color: rgba(198, 189, 177, 0.9);
  background: rgba(6, 5, 4, 0.6);
  border: 1px solid rgba(120, 108, 96, 0.32);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    0 6px 20px rgba(0, 0, 0, 0.45);
  backdrop-filter: blur(8px);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  transition:
    color 0.35s var(--ease-open),
    border-color 0.35s var(--ease-open),
    background 0.35s var(--ease-open),
    transform 0.35s var(--ease-open),
    opacity 0.6s var(--ease-open);
}

.sound-toggle:hover,
.sound-toggle:focus-visible {
  color: var(--void-white);
  border-color: rgba(124, 58, 237, 0.55);
  background: rgba(20, 14, 26, 0.72);
  transform: translateY(-1px);
  outline: none;
}

/* In the library the toggle rides the header row, aligned with the back arrow */
body.is-entered .sound-toggle {
  top: calc(
    max(1.5rem, env(safe-area-inset-top, 0px)) +
    (2.5rem - var(--sound-toggle-size)) / 2
  );
}

.sound-toggle__glyph {
  width: calc(var(--sound-toggle-size) * 0.47);
  height: calc(var(--sound-toggle-size) * 0.47);
  display: none;
}

.sound-toggle .sound-toggle__glyph--on {
  display: block;
}

.sound-toggle.is-muted .sound-toggle__glyph--on {
  display: none;
}

.sound-toggle.is-muted .sound-toggle__glyph--off {
  display: block;
}

.sound-toggle.is-muted {
  color: rgba(150, 138, 126, 0.6);
}

/* ─────────────────────────  Archive portal button  ───────────────────────── */

.archive-portal {
  display: flex;
  justify-content: center;
  padding: 1.5rem 1.5rem 2.5rem;
}

.archive-portal__btn {
  position: relative;
  display: flex;
  text-decoration: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: min(90vw, 32rem);
  min-height: 14rem;
  padding: 3rem 2rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: rgba(198, 189, 177, 0.82);
  cursor: pointer;
  overflow: visible;
  isolation: isolate;
  box-shadow: none;
  transition:
    transform 1s var(--ease-flow),
    color 0.9s var(--ease-open);
}

/* Sfumato veil — dissolves into the void, no visible edge */
.archive-portal__btn::before {
  content: '';
  position: absolute;
  inset: -12% -6%;
  z-index: -2;
  pointer-events: none;
  background:
    radial-gradient(
      ellipse 60% 66% at 50% 50%,
      rgba(22, 15, 32, 0.78) 0%,
      rgba(10, 7, 15, 0.52) 44%,
      rgba(3, 2, 5, 0.2) 72%,
      transparent 100%
    );
  -webkit-mask-image: radial-gradient(ellipse 58% 64% at 50% 50%, #000 36%, rgba(0, 0, 0, 0.5) 66%, transparent 100%);
  mask-image: radial-gradient(ellipse 58% 64% at 50% 50%, #000 36%, rgba(0, 0, 0, 0.5) 66%, transparent 100%);
  opacity: 0.85;
  transition: opacity 0.9s var(--ease-open);
}

.archive-portal__btn:hover::before,
.archive-portal__btn:focus-visible::before {
  opacity: 1;
}

.archive-portal__btn:hover,
.archive-portal__btn:focus-visible {
  transform: scale(1.015);
  color: rgba(228, 221, 210, 0.96);
  outline: none;
}

/* Aura — deep violet ember breathing behind the words */
.archive-portal__aura {
  position: absolute;
  inset: -35% -18%;
  z-index: -1;
  background:
    radial-gradient(circle at 50% 50%, rgba(88, 44, 170, 0.3) 0%, rgba(46, 18, 92, 0.14) 34%, transparent 68%);
  filter: blur(34px);
  opacity: 0.42;
  animation: portalAura 8s var(--ease-breathe) infinite;
}

.archive-portal__btn:hover .archive-portal__aura,
.archive-portal__btn:focus-visible .archive-portal__aura {
  opacity: 0.68;
}

/* Ring — a faint halo, edges dissolved */
.archive-portal__ring {
  position: absolute;
  width: 13rem;
  height: 13rem;
  z-index: -1;
  border-radius: 50%;
  border: 0;
  background:
    radial-gradient(circle at 50% 50%, transparent 58%, rgba(124, 58, 237, 0.16) 71%, transparent 84%);
  filter: blur(3px);
  opacity: 0.34;
  animation: portalRing 22s linear infinite;
}

.archive-portal__btn:hover .archive-portal__ring,
.archive-portal__btn:focus-visible .archive-portal__ring {
  opacity: 0.52;
}

.archive-portal__label {
  font-family: var(--font-elegant);
  font-size: clamp(1.35rem, 4.2vw, 1.85rem);
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(224, 216, 205, 0.92);
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.8),
    0 0 34px rgba(124, 58, 237, 0.22);
  transition: letter-spacing 0.9s var(--ease-open), text-shadow 0.9s var(--ease-open);
}

.archive-portal__btn:hover .archive-portal__label,
.archive-portal__btn:focus-visible .archive-portal__label {
  letter-spacing: 0.34em;
  text-shadow:
    0 1px 3px rgba(0, 0, 0, 0.8),
    0 0 44px rgba(140, 88, 245, 0.34);
}

.archive-portal__sub {
  font-family: var(--font-elegant);
  font-size: 0.66rem;
  font-weight: 300;
  font-style: italic;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(168, 158, 146, 0.5);
  transition: color 0.9s var(--ease-open);
}

.archive-portal__btn:hover .archive-portal__sub,
.archive-portal__btn:focus-visible .archive-portal__sub {
  color: rgba(198, 189, 177, 0.72);
}

/* The library is pulled toward the hole while the overlay opens over it */
.main.is-void-sucked {
  transform: scale(0.48);
  filter: blur(12px) brightness(0.4);
  opacity: 0.35;
  transform-origin: 50% 42%;
  transition:
    transform 1.6s cubic-bezier(0.55, 0, 0.25, 1),
    filter 1.4s var(--ease-open),
    opacity 1.1s var(--ease-open);
  pointer-events: none;
}

@keyframes portalAura {
  0%, 100% { opacity: 0.32; transform: scale(1); }
  50% { opacity: 0.58; transform: scale(1.05); }
}

@keyframes portalRing {
  from { transform: rotate(0deg) scale(1); }
  50% { transform: rotate(180deg) scale(1.03); }
  to { transform: rotate(360deg) scale(1); }
}

/* ─────────────────────────  Void dive overlay — black hole  ─────────────────────────
   Inspired by an accretion disk + event horizon: you fall into a dark center
   ringed by a bright photon rim and a spinning plasma disk. */

.void {
  position: fixed;
  inset: 0;
  z-index: 250;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: transparent;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* Canvas black hole — full-bleed plate for the Magnum Opus dive */
.void__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: none;
  z-index: 1;
  pointer-events: auto;
}

.void.void--canvas .void__canvas {
  display: block;
}

/* CSS layers stay for soft arrivals; hide them when the canvas owns the dive */
.void.void--canvas .void__gradient,
.void.void--canvas .void__vortex,
.void.void--canvas .void__glow,
.void.void--canvas .void__core,
.void.void--canvas .void__particles {
  display: none !important;
}

.void.void--canvas.is-active {
  opacity: 1 !important;
  visibility: visible !important;
  background: #0a0a0f;
  animation: none !important;
  pointer-events: auto;
}

.void.is-active,
.void.is-closing,
.void.is-arriving {
  visibility: visible;
  pointer-events: auto;
}

/* Arrival: the page is born already inside the darkness, which then dissolves.
   `is-void-arrival` is set in the document head before the overlay is parsed;
   the `is-arriving` animation (fill: forwards) later wins over both. */
html.is-void-arrival .void,
.void.is-arriving {
  opacity: 1;
  visibility: visible;
  background: var(--void-black);
}

/* Shared centering for every layer of the hole */
.void__gradient,
.void__vortex,
.void__glow,
.void__core {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  will-change: transform, opacity, filter;
}

/* Gravitational lensing veil — warped space around the horizon */
.void__gradient {
  width: 140vmax;
  height: 140vmax;
  background:
    radial-gradient(circle at center,
      transparent 0%,
      transparent 12%,
      rgba(124, 58, 237, 0.18) 18%,
      rgba(196, 90, 18, 0.12) 24%,
      rgba(10, 4, 18, 0.55) 42%,
      rgba(0, 0, 0, 0.92) 68%,
      #000 100%);
  opacity: 0;
  filter: blur(2px);
}

/* Accretion disk — hot plasma spinning into the hole */
.void__vortex {
  width: 78vmax;
  height: 78vmax;
  background:
    conic-gradient(from 0deg,
      transparent 0deg,
      rgba(242, 193, 78, 0.55) 18deg,
      rgba(196, 90, 18, 0.35) 42deg,
      transparent 70deg,
      rgba(124, 58, 237, 0.5) 110deg,
      rgba(74, 20, 140, 0.28) 150deg,
      transparent 185deg,
      rgba(242, 193, 78, 0.45) 220deg,
      rgba(196, 90, 18, 0.3) 255deg,
      transparent 290deg,
      rgba(168, 85, 247, 0.4) 330deg,
      transparent 360deg);
  -webkit-mask-image: radial-gradient(circle at center,
    transparent 0%,
    transparent 22%,
    #000 30%,
    #000 48%,
    transparent 62%);
  mask-image: radial-gradient(circle at center,
    transparent 0%,
    transparent 22%,
    #000 30%,
    #000 48%,
    transparent 62%);
  mix-blend-mode: screen;
  opacity: 0;
  filter: blur(1.5px);
}

/* Photon ring — the bright rim just outside the event horizon */
.void__glow {
  width: 28vmax;
  height: 28vmax;
  background:
    radial-gradient(circle at center,
      transparent 0%,
      transparent 54%,
      rgba(255, 236, 200, 0.95) 58%,
      rgba(242, 193, 78, 0.75) 61%,
      rgba(196, 90, 18, 0.35) 66%,
      rgba(124, 58, 237, 0.25) 72%,
      transparent 80%);
  filter: blur(2px);
  mix-blend-mode: screen;
  opacity: 0;
  box-shadow:
    0 0 40px rgba(242, 193, 78, 0.35),
    0 0 90px rgba(124, 58, 237, 0.25);
}

/* Event horizon — pure black. Grows until it swallows the frame. */
.void__core {
  width: 18vmax;
  height: 18vmax;
  background: #000;
  box-shadow:
    0 0 0 1px rgba(255, 220, 160, 0.35),
    0 0 24px 4px rgba(242, 193, 78, 0.45),
    0 0 60px 12px rgba(124, 58, 237, 0.3),
    inset 0 0 40px rgba(0, 0, 0, 1);
  opacity: 0;
}

/* Matter falling into the hole */
.void__particles {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
}

.void__particle {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--size, 5px);
  height: var(--size, 5px);
  margin: calc(var(--size, 5px) / -2) 0 0 calc(var(--size, 5px) / -2);
  border-radius: 50%;
  background: radial-gradient(circle at center,
    #fff7e0 0%,
    var(--void-plasma) 35%,
    var(--void-ember) 65%,
    transparent 100%);
  opacity: 0;
  will-change: transform, opacity;
  box-shadow: 0 0 6px rgba(242, 193, 78, 0.6);
}

/* ── Dive: fall into the black hole ── */
.void.is-active {
  animation: voidDiveVeil var(--void-ms) var(--ease-open) forwards;
}

.void.is-active .void__gradient {
  animation: voidLensingIn var(--void-ms) var(--ease-open) forwards;
}

.void.is-active .void__vortex {
  animation: voidDiskIn var(--void-ms) cubic-bezier(0.45, 0, 0.2, 1) forwards;
}

.void.is-active .void__glow {
  animation: voidPhotonIn var(--void-ms) cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.void.is-active .void__core {
  animation: voidHorizonIn var(--void-ms) cubic-bezier(0.55, 0, 0.25, 1) forwards;
}

.void.is-active .void__particle {
  animation: voidParticleIn var(--void-ms) cubic-bezier(0.5, 0, 0.25, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

/* ── Closing / arrival: soft dissolve out of the darkness (no reverse black hole) ── */
.void.is-closing {
  animation: voidDiveVeil var(--void-ms) var(--ease-open) forwards;
}

.void.is-arriving {
  animation: voidArrive var(--void-ms) var(--ease-open) forwards;
}

.void.is-closing .void__gradient,
.void.is-closing .void__vortex,
.void.is-closing .void__glow,
.void.is-closing .void__core,
.void.is-arriving .void__gradient,
.void.is-arriving .void__vortex,
.void.is-arriving .void__glow,
.void.is-arriving .void__core,
.void.is-arriving .void__particle {
  opacity: 0 !important;
  animation: none !important;
}

.void.is-closing .void__particle {
  animation: voidParticleOut var(--void-ms) cubic-bezier(0.5, 0, 0.3, 1) forwards;
  animation-delay: var(--delay, 0ms);
}

/* Dive veil: the frame darkens as the hole opens, then stays black for the handoff */
@keyframes voidDiveVeil {
  0% { opacity: 0; visibility: visible; background: transparent; }
  8% { opacity: 1; background: transparent; }
  55% { opacity: 1; background: rgba(0, 0, 0, 0.55); }
  78% { opacity: 1; background: #000; }
  100% { opacity: 1; visibility: visible; background: #000; }
}

/* Arrivo: si parte immersi nel nero, che si dirada rivelando la pagina */
@keyframes voidArrive {
  0% { opacity: 1; visibility: visible; background: #000; }
  45% { opacity: 0.85; background: #000; }
  100% { opacity: 0; visibility: hidden; background: #000; }
}

/* Lensing halo expands as space warps around the growing hole */
@keyframes voidLensingIn {
  0% { transform: translate(-50%, -50%) scale(0.18); opacity: 0; filter: blur(18px); }
  18% { opacity: 0.85; }
  55% { transform: translate(-50%, -50%) scale(1.1); opacity: 1; filter: blur(4px); }
  100% { transform: translate(-50%, -50%) scale(2.4); opacity: 0; filter: blur(2px); }
}

/* Disk spins and collapses into the horizon */
@keyframes voidDiskIn {
  0% { transform: translate(-50%, -50%) scale(1.35) rotate(0deg); opacity: 0; }
  14% { opacity: 0.95; }
  55% { transform: translate(-50%, -50%) scale(0.55) rotate(280deg); opacity: 0.85; }
  100% { transform: translate(-50%, -50%) scale(0.08) rotate(720deg); opacity: 0; }
}

/* Photon ring brightens, then is swallowed */
@keyframes voidPhotonIn {
  0% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; }
  12% { opacity: 1; }
  45% { transform: translate(-50%, -50%) scale(0.85); opacity: 1; }
  78% { transform: translate(-50%, -50%) scale(0.22); opacity: 0.7; }
  100% { transform: translate(-50%, -50%) scale(0); opacity: 0; }
}

/* Event horizon grows until nothing remains outside it */
@keyframes voidHorizonIn {
  0% { transform: translate(-50%, -50%) scale(0.08); opacity: 0; }
  10% { opacity: 1; }
  40% { transform: translate(-50%, -50%) scale(0.55); opacity: 1; }
  72% { transform: translate(-50%, -50%) scale(1.8); opacity: 1; }
  100% { transform: translate(-50%, -50%) scale(9); opacity: 1; }
}

/* Matter spirals into the center */
@keyframes voidParticleIn {
  0% { transform: translate(var(--tx), var(--ty)) scale(1) rotate(0deg); opacity: 0; }
  12% { opacity: 1; }
  100% { transform: translate(0, 0) scale(0.05) rotate(220deg); opacity: 0; }
}

@keyframes voidParticleOut {
  0% { transform: translate(0, 0) scale(0.05); opacity: 0; }
  18% { opacity: 1; }
  100% { transform: translate(var(--tx), var(--ty)) scale(1); opacity: 0; }
}

/* Accessibilità: niente animazioni pesanti */
@media (prefers-reduced-motion: reduce) {
  .void,
  .void.is-active,
  .void.is-closing,
  .void.is-arriving,
  .void.is-active *,
  .void.is-closing *,
  .void.is-arriving * {
    animation: none !important;
  }

  /* Without the dissolve animation the arrival veil would stay opaque forever */
  .void.is-arriving {
    opacity: 0 !important;
    visibility: hidden !important;
  }
  .archive-portal__aura,
  .archive-portal__ring {
    animation: none !important;
  }

  .void.void--canvas.is-active {
    opacity: 1 !important;
    visibility: visible !important;
  }

  .main.is-void-sucked,
  .archive-page.is-leaving {
    transition: none !important;
    transform: none !important;
    filter: none !important;
    opacity: 0 !important;
  }
}