/* ═══════════════════════════
   ZONE 11 — 491
   ═══════════════════════════ */

html, body {
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: #000;
}

/* ═══════════════════════════
   ZONE — occupe la colonne
   contenu sur desktop (grille
   zone-sidebar.css), plein écran
   sur mobile
   ═══════════════════════════ */

.zone-491 {
  position: relative;
  width: 100%;
  height: 100dvh;
  overflow: hidden;

  background:
    radial-gradient(
      circle at center,
      rgba(255,255,255,0.03),
      transparent 42%
    ),
    #020202;
}

/* Desktop : s'assurer d'occuper la colonne 2 de la grille */
@media (pointer: fine) {
  .zone-491 {
    grid-column: 2 !important;
    height: 100vh !important;
  }
}

/* ═══════════════════════════
   BRUIT
   ═══════════════════════════ */

.archive-noise {
  position: absolute;
  inset: -50%;
  pointer-events: none;
  opacity: 0.14;
  mix-blend-mode: screen;
  z-index: 1;

  background:
    repeating-radial-gradient(
      circle at center,
      rgba(255,255,255,0.045) 0px,
      rgba(255,255,255,0.025) 1px,
      transparent 2px,
      transparent 9px
    ),
    repeating-radial-gradient(
      circle at center,
      transparent 0px,
      transparent 18px,
      rgba(255,255,255,0.02) 19px,
      transparent 22px
    );

  background-size: 100% 100%, 140% 140%;

  animation: recursiveGrid 42s linear infinite;
}

@keyframes recursiveGrid {
  0%   { transform: rotate(0deg)   scale(1);    }
  33%  { transform: rotate(0.8deg) scale(1.02); }
  66%  { transform: rotate(-0.4deg) scale(0.99); }
  100% { transform: rotate(0deg)   scale(1);    }
}

/* ═══════════════════════════
   HALO
   ═══════════════════════════ */

.center-glow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 58vw;
  height: 58vw;
  max-width: 900px;
  max-height: 900px;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(255,255,255,0.06), transparent 65%);
  opacity: 0.45;
  pointer-events: none;
  z-index: 2;
}

/* ═══════════════════════════
   GIF — plein écran
   ═══════════════════════════ */

.gif-core {
  position: absolute;
  inset: 0;            /* couvre toute la zone */
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 3;
  background: rgba(255,255,255,0.01);
}

.gif-core img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.14) brightness(0.94);
  opacity: 0.96;
  display: block;
}

/* ═══════════════════════════
   TEXT ECOSYSTEM
   ═══════════════════════════ */

.text-ecosystem {
  position: absolute;
  inset: 0;
  z-index: 5;
  overflow: hidden;
  pointer-events: none;
}

/* base */
.soft-text {
  position: absolute;
  color: rgba(255, 255, 255, 0.58);
  text-transform: uppercase;
  font-family: Arial, Helvetica, sans-serif;
  letter-spacing: 0.08em;
  line-height: 1.1;
  mix-blend-mode: difference;
  opacity: 0.98;
  transition: opacity 5s ease;
}

/* horizontal — taille légèrement augmentée */
.horizontal-text {
  display: flex;
  flex-wrap: wrap;
  gap: 0.02em;
  font-size: clamp(15px, 1.55vw, 26px);
  max-width: 40vw;
}

/* vertical — taille légèrement augmentée */
.vertical-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: clamp(14px, 1.35vw, 23px);
  line-height: 1.02;
}

/* variations couleur / taille */
.soft-text:nth-child(3n) {
  color: rgba(255, 255, 255, 0.692);
}
.soft-text:nth-child(5n) {
  color: rgba(255, 0, 0, 0.46);
}
.soft-text:nth-child(7n) {
  font-size: clamp(22px, 4.4vw, 92px);
  opacity: 0.12;
  font-weight: 800;
}

/* lettres */
.soft-text span {
  opacity: 0;
  animation: letterAppear 0.25s linear forwards;
}

@keyframes letterAppear {
  0%   { opacity: 0; }
  100% {
    opacity: 1;
    text-shadow: 0.5px 0 rgba(255,0,0,0.22), -0.5px 0 rgba(0,255,255,0.18);
  }
}

/* disparition */
.fade-out { opacity: 0 !important; }

/* ═══════════════════════════
   NOISYLIVINGCODE BUTTON
   ═══════════════════════════ */

#transmissionToggle {
  position: fixed;
  left:   18px;
  bottom: 28px;
  z-index: 100070; /* passe au-dessus de la sidebar */

  border: 1px solid rgba(255,255,255,0.22);
  background: rgba(255, 255, 255, 0.778);
  color: rgb(0, 0, 0);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);

  font-family: "Courier New", Courier, monospace;
  font-size: 10px;
  font-weight: 400;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 9px 13px;
  cursor: pointer;

  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

#transmissionToggle:hover {
  color: rgba(255,255,255,0.92);
  border-color: rgba(255,255,255,0.44);
 
}

#transmissionToggle:active { transform: scale(0.96); }

/* État désactivé */
#transmissionToggle.tx-off {
  border-color: rgba(255, 255, 255, 0);
  color: rgb(255, 255, 255);
  background: rgba(160, 0, 0, 0.778);
}

#transmissionToggle.tx-off:hover {
  border-color: rgba(255,40,40,0.72);
  color: rgba(255,40,40,0.88);
}

/* Desktop — petit décalage pour la marge de la sidebar */
@media (pointer: fine) {
  #transmissionToggle {
    left:   26px;
    bottom: 26px;
  }
}
/* MOBILE + TABLETTE */
@media (pointer: coarse) {

  #transmissionToggle {
    left: calc(16px + env(safe-area-inset-left, 0px)) !important;
   bottom: calc(28px + env(safe-area-inset-bottom, 0px)) !important;
    z-index: 100430 !important;

    padding: 12px 28px !important;

    font-size: 10px !important;
    letter-spacing: 0.16em !important;
    line-height: 1 !important;

    max-width: 52vw !important;

    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
  }
}