/* Sistema visivo unificato: tutte le misure e i tempi derivano dal logo */
:root {
  --logo-size: min(68vmin, 400px);
  --rhythm: 12s;
  --scan-step: calc(var(--rhythm) / 100);
  --gap: calc(var(--logo-size) * 0.09);
  --text-size: calc(var(--logo-size) * 0.058);
  --glitch-offset: calc(var(--logo-size) * 0.0035);
  --white: #ffffff;
  --white-soft: rgba(255, 255, 255, 0.92);
  --vhs-red: rgba(255, 72, 72, 0.42);
  --vhs-cyan: rgba(72, 196, 255, 0.42);
}

*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  width: 100%;
  min-height: 100%;
  background-color: #000;
}

html:has(.page--join),
body.page--join {
  height: auto;
  min-height: 100dvh;
  overflow-x: hidden;
  overflow-y: auto;
}

body:not(.page--join) {
  min-height: 100dvh;
  /* clip evita che overflow-y diventi auto sul body (taglia il contenuto flex) */
  overflow-x: clip;
  overflow-y: visible;
}

.stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  min-height: 100dvh;
  padding: clamp(1rem, 3.5vmin, 2.5rem);
}

.hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: var(--logo-size);
  gap: var(--gap);
}

/* Grana e scanline leggere su logo + testo */
.hero::before {
  content: "";
  position: absolute;
  inset: -4% -6%;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0,
      transparent 2px,
      rgba(255, 255, 255, 0.018) 2px,
      rgba(255, 255, 255, 0.018) 3px
    ),
    repeating-linear-gradient(
      90deg,
      transparent 0,
      transparent 3px,
      rgba(255, 255, 255, 0.012) 3px,
      rgba(255, 255, 255, 0.012) 4px
    );
  pointer-events: none;
  opacity: 0.55;
  mix-blend-mode: soft-light;
  animation: grain var(--rhythm) steps(8) infinite;
}

.hero__visual {
  position: relative;
  width: var(--logo-size);
  aspect-ratio: 1;
  display: grid;
  place-items: center;
}

.logo {
  width: 100%;
  height: auto;
  aspect-ratio: 1;
  object-fit: contain;
  animation:
    rotate var(--rhythm) linear infinite,
    logo-pulse var(--rhythm) steps(1) infinite;
  will-change: transform, filter;
}

.vhs {
  position: relative;
  width: 100%;
  text-align: center;
  padding: calc(var(--text-size) * 0.15) 0;
  overflow: hidden;
}

.vhs__track {
  position: relative;
  display: inline-block;
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: var(--text-size);
  font-weight: 400;
  letter-spacing: clamp(0.22em, calc(var(--logo-size) * 0.0011), 0.36em);
  text-transform: uppercase;
  color: var(--white-soft);
  text-shadow:
    0 0 calc(var(--logo-size) * 0.012) rgba(255, 255, 255, 0.28),
    var(--glitch-offset) 0 0 var(--vhs-red),
    calc(var(--glitch-offset) * -1) 0 0 var(--vhs-cyan);
  animation: vhs-flicker var(--rhythm) steps(1) infinite;
}

.vhs__track::before,
.vhs__track::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.vhs__track::before {
  color: var(--vhs-red);
  clip-path: inset(0 52% 0 0);
  animation: vhs-chroma-red var(--rhythm) steps(1) infinite;
}

.vhs__track::after {
  color: var(--vhs-cyan);
  clip-path: inset(0 0 0 52%);
  animation: vhs-chroma-cyan var(--rhythm) steps(1) infinite;
}

.vhs::before {
  content: "";
  position: absolute;
  inset: -18% 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.22) 2px,
    rgba(0, 0, 0, 0.22) 4px
  );
  pointer-events: none;
  animation: scanlines var(--scan-step) steps(2) infinite;
}

.vhs::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.04) 42%,
    rgba(255, 255, 255, 0.09) 50%,
    rgba(255, 255, 255, 0.04) 58%,
    transparent 100%
  );
  transform: translateX(-130%);
  pointer-events: none;
  animation: vhs-sweep var(--rhythm) cubic-bezier(0.4, 0, 0.2, 1) infinite;
}

/* Rotazione lenta, ipnotica — un giro completo ogni ciclo */
@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

/* Glitch sincronizzato al 83–87% del ciclo (logo + testo) */
@keyframes logo-pulse {
  0%,
  82%,
  88%,
  100% {
    filter: none;
  }

  83% {
    filter: brightness(1.04) contrast(1.03);
  }

  84% {
    filter: brightness(0.97);
  }

  85% {
    filter: brightness(1.02);
  }

  86% {
    filter: brightness(0.98) contrast(1.04);
  }

  87% {
    filter: none;
  }
}

@keyframes vhs-flicker {
  0%,
  82%,
  88%,
  100% {
    opacity: 1;
  }

  83% {
    opacity: 0.88;
  }

  84% {
    opacity: 0.96;
  }

  85% {
    opacity: 0.84;
  }

  86% {
    opacity: 0.94;
  }

  87% {
    opacity: 1;
  }
}

@keyframes vhs-chroma-red {
  0%,
  82%,
  88%,
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }

  83% {
    transform: translate(calc(var(--glitch-offset) * -2.5), calc(var(--glitch-offset) * 0.8));
    opacity: 1;
  }

  84% {
    transform: translate(calc(var(--glitch-offset) * 1.2), calc(var(--glitch-offset) * -0.5));
    opacity: 0.7;
  }

  85% {
    transform: translate(calc(var(--glitch-offset) * -1.8), 0);
    opacity: 1;
  }

  86% {
    transform: translate(calc(var(--glitch-offset) * 2), calc(var(--glitch-offset) * 0.4));
    opacity: 0.85;
  }

  87% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes vhs-chroma-cyan {
  0%,
  82%,
  88%,
  100% {
    transform: translate(0, 0);
    opacity: 0;
  }

  83% {
    transform: translate(calc(var(--glitch-offset) * 2.2), calc(var(--glitch-offset) * -0.6));
    opacity: 1;
  }

  84% {
    transform: translate(calc(var(--glitch-offset) * -1.4), calc(var(--glitch-offset) * 0.7));
    opacity: 0.75;
  }

  85% {
    transform: translate(calc(var(--glitch-offset) * 1.6), 0);
    opacity: 1;
  }

  86% {
    transform: translate(calc(var(--glitch-offset) * -2), calc(var(--glitch-offset) * -0.3));
    opacity: 0.8;
  }

  87% {
    transform: translate(0, 0);
    opacity: 0;
  }
}

@keyframes scanlines {
  to {
    transform: translateY(4px);
  }
}

/* Passata luminosa una volta per ciclo, in fase con il glitch */
@keyframes vhs-sweep {
  0%,
  78% {
    transform: translateX(-130%);
    opacity: 0;
  }

  79% {
    opacity: 1;
  }

  87% {
    transform: translateX(130%);
    opacity: 1;
  }

  88%,
  100% {
    transform: translateX(130%);
    opacity: 0;
  }
}

@keyframes grain {
  0% {
    transform: translate(0, 0);
  }

  25% {
    transform: translate(-1%, 1%);
  }

  50% {
    transform: translate(1%, -1%);
  }

  75% {
    transform: translate(-1%, -1%);
  }

  100% {
    transform: translate(0, 0);
  }
}

/* Pagina 404 — stesso ritmo, gerarchia tipografica diversa */
.hero--404 {
  gap: calc(var(--logo-size) * 0.055);
}

.hero--404 .hero__visual {
  margin-bottom: calc(var(--logo-size) * 0.035);
}

.vhs--code .vhs__track {
  font-size: calc(var(--logo-size) * 0.16);
  letter-spacing: 0.28em;
  padding-left: 0.28em;
}

.vhs--title .vhs__track {
  font-size: clamp(0.95rem, 3vmin, 1.15rem);
  letter-spacing: 0.28em;
}

.vhs--message .vhs__track {
  font-size: calc(var(--text-size) * 0.88);
  letter-spacing: clamp(0.12em, calc(var(--logo-size) * 0.00075), 0.24em);
  opacity: 0.88;
}

/* Pulsante VHS interattivo */
.vhs-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: calc(var(--logo-size) * 0.05);
  padding: calc(var(--text-size) * 0.7) calc(var(--text-size) * 1.35);
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(255, 255, 255, 0.2);
  text-decoration: none;
  cursor: pointer;
  overflow: hidden;
  isolation: isolate;
  transition:
    border-color 0.35s ease,
    background 0.35s ease,
    box-shadow 0.35s ease,
    transform 0.15s ease;
}

.vhs-btn__label {
  position: relative;
  z-index: 1;
  font-family: "Share Tech Mono", "Courier New", monospace;
  font-size: calc(var(--text-size) * 0.8);
  font-weight: 400;
  letter-spacing: clamp(0.14em, calc(var(--logo-size) * 0.00085), 0.22em);
  text-transform: uppercase;
  color: var(--white-soft);
  text-shadow:
    0 0 calc(var(--logo-size) * 0.01) rgba(255, 255, 255, 0.2),
    var(--glitch-offset) 0 0 var(--vhs-red),
    calc(var(--glitch-offset) * -1) 0 0 var(--vhs-cyan);
  transition: color 0.35s ease, text-shadow 0.35s ease;
}

.vhs-btn__label::before,
.vhs-btn__label::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.25s ease;
}

.vhs-btn__label::before {
  color: var(--vhs-red);
  clip-path: inset(0 52% 0 0);
}

.vhs-btn__label::after {
  color: var(--vhs-cyan);
  clip-path: inset(0 0 0 52%);
}

/* Scanline sul pulsante */
.vhs-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  background: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 2px,
    rgba(0, 0, 0, 0.18) 2px,
    rgba(0, 0, 0, 0.18) 4px
  );
  pointer-events: none;
  opacity: 0.45;
  z-index: 0;
}

/* Passata luminosa al passaggio del mouse */
.vhs-btn::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    transparent 0%,
    rgba(255, 255, 255, 0.07) 45%,
    rgba(255, 255, 255, 0.16) 50%,
    rgba(255, 255, 255, 0.07) 55%,
    transparent 100%
  );
  transform: translateX(-140%);
  pointer-events: none;
  z-index: 2;
  transition: transform 0.55s cubic-bezier(0.4, 0, 0.2, 1);
}

.vhs-btn:hover {
  border-color: rgba(255, 255, 255, 0.52);
  background: rgba(255, 255, 255, 0.06);
  box-shadow:
    0 0 calc(var(--logo-size) * 0.025) rgba(255, 255, 255, 0.12),
    inset 0 0 calc(var(--logo-size) * 0.02) rgba(255, 255, 255, 0.05);
}

.vhs-btn:hover::after {
  transform: translateX(140%);
}

.vhs-btn:hover .vhs-btn__label {
  color: var(--white);
  text-shadow:
    0 0 calc(var(--logo-size) * 0.018) rgba(255, 255, 255, 0.35),
    calc(var(--glitch-offset) * 1.5) 0 0 var(--vhs-red),
    calc(var(--glitch-offset) * -1.5) 0 0 var(--vhs-cyan);
}

.vhs-btn:hover .vhs-btn__label::before {
  opacity: 0.85;
  transform: translate(calc(var(--glitch-offset) * -1.5), 0);
}

.vhs-btn:hover .vhs-btn__label::after {
  opacity: 0.85;
  transform: translate(calc(var(--glitch-offset) * 1.5), 0);
}

.vhs-btn:active {
  transform: scale(0.97);
  border-color: rgba(255, 255, 255, 0.65);
  background: rgba(255, 255, 255, 0.09);
}

.vhs-btn:focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.45);
  outline-offset: calc(var(--text-size) * 0.35);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --rhythm: 0s;
    --scan-step: 0s;
  }

  .logo {
    animation: none;
  }

  .hero::before,
  .vhs__track,
  .vhs__track::before,
  .vhs__track::after,
  .vhs::before,
  .vhs::after {
    animation: none;
  }

  .vhs__track::before,
  .vhs__track::after {
    opacity: 0;
  }

  .vhs-btn::after {
    transition: none;
  }

  .vhs-btn:hover .vhs-btn__label::before,
  .vhs-btn:hover .vhs-btn__label::after {
    transform: none;
  }
}