/* Secret Sedux — pagina d'ingresso e 404 */

.page-landing {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.hero {
  position: relative;
  z-index: 1;
  flex: 1;
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  padding: max(56px, env(safe-area-inset-top)) 20px 40px;
  /* la lama (240vw, 160vw nella 404) e l'alone non allargano né allungano la pagina (telefoni, schermi larghi e bassi) */
  overflow: hidden; /* Safari < 16 */
  overflow: clip;
}

.hero-secret {
  margin: 0;
  font: 700 clamp(12px, 2.4vw, 15px)/1 var(--sans);
  letter-spacing: 0.65em;
  text-indent: 0.65em;
  text-transform: uppercase;
  color: var(--text-2);
}

/* Il logo SEDUX si disegna (vedi .logo-draw in base.css), poi si accende e resta a respirare */
.hero-title {
  position: relative;
  margin: 0.32em 0 0;
  font-size: clamp(62px, 16.5vw, 148px);
  line-height: 1;
}
.hero-title .logo {
  --draw: 1.6s;
  --draw-delay: 0.35s;
  --draw-step: 0.13s;
  --trace: 1.1;
  position: relative;
  z-index: 1; /* sopra alone e lama */
  filter: drop-shadow(0 0 0.16em rgba(182, 0, 0, 0.55));
}
/* l'alone rosso dietro il marchio */
.hero-title::before {
  content: '';
  position: absolute;
  inset: -70% -18%;
  pointer-events: none;
  background: radial-gradient(closest-side, rgba(182, 0, 0, 0.36), rgba(122, 0, 0, 0.12) 55%, transparent);
  opacity: 0.9;
  animation:
    halo-in 1.8s 1.3s ease-out backwards,
    halo 7s 3.1s ease-in-out infinite;
}
/* la lama di luce che attraversa lo schermo, dietro il logo */
.hero-title::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 52%;
  width: 240vw;
  height: 1px;
  pointer-events: none;
  background: linear-gradient(
    90deg,
    transparent 18%,
    rgba(182, 0, 0, 0.2) 38%,
    rgba(255, 56, 56, 0.65) 50%,
    rgba(182, 0, 0, 0.2) 62%,
    transparent 82%
  );
  box-shadow: 0 0 22px 1px rgba(182, 0, 0, 0.5);
  transform: translateX(-50%) rotate(-17deg);
  animation: blade 1.1s 0.1s var(--ease) both;
}
@keyframes blade {
  from {
    transform: translateX(-50%) rotate(-17deg) scaleX(0);
    opacity: 0;
  }
}
@keyframes halo-in {
  from {
    opacity: 0;
    transform: scale(0.8);
  }
}
@keyframes halo {
  50% {
    opacity: 0.5;
    transform: scale(0.94);
  }
}

/* il resto della pagina sale dopo il marchio */
.hero-secret,
.hero-title ~ * {
  animation: rise 0.8s var(--ease) both;
}
.hero-secret {
  animation-delay: 0.15s;
}
.hero-title ~ .hero-line {
  animation-delay: 1.25s;
}
.hero-title ~ .hero-meta {
  animation-delay: 1.4s;
}
.hero-title ~ .hero-note,
.hero-title ~ .hero-join,
.hero-title ~ .hero-join-note {
  animation-delay: 1.55s;
}
.hero-title ~ .hero-collab {
  animation-delay: 1.7s;
}
@keyframes rise {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
}

/* 404: il logo come un'insegna al neon che si accende a fatica e ogni tanto sfarfalla */
.hero-neon {
  width: clamp(200px, 56vw, 292px);
  height: auto;
  filter: drop-shadow(0 0 14px rgba(182, 0, 0, 0.6));
  animation:
    neon-on 1.4s 0.2s linear both,
    neon-buzz 8s 3s linear infinite;
}
/* la lama (base.css, .cut) taglia l'insegna */
.hero > .cut {
  margin-bottom: 34px;
}
@keyframes neon-on {
  0% {
    opacity: 0.06;
  }
  10% {
    opacity: 0.8;
  }
  14% {
    opacity: 0.1;
  }
  30% {
    opacity: 0.9;
  }
  34% {
    opacity: 0.25;
  }
  52%,
  100% {
    opacity: 1;
  }
}
@keyframes neon-buzz {
  0%,
  80%,
  82%,
  85%,
  100% {
    opacity: 1;
  }
  81%,
  84% {
    opacity: 0.3;
  }
}

.hero-line {
  margin: 30px 0 0;
  font: italic 400 clamp(19px, 3.4vw, 26px)/1.35 var(--serif);
  color: var(--text);
}

.hero-rule {
  width: 72px;
  height: 1px;
  margin: 30px auto;
  background: var(--red);
  box-shadow: 0 0 14px rgba(182, 0, 0, 0.9);
  transform: rotate(-17deg);
}

.hero-meta {
  margin: 34px 0 0;
  font: 700 11px/1 var(--sans);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--red-hi);
}

/* 404: «Torna all'ingresso» si tocca su 40px senza spostare la riga */
.hero-meta a {
  display: inline-block;
  padding: 15px 8px;
  margin: -15px -8px;
}

.hero-note {
  margin: 18px 0 0;
  text-wrap: balance;
  max-width: 34ch;
  color: var(--muted);
  font-size: 14px;
}
/* una frase per riga, in italiano e in inglese: si va a capo tra le due frasi, non a metà */
.hero-note > span {
  display: inline-block;
}

.land-foot {
  position: relative;
  z-index: 1;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  padding: 18px clamp(16px, 4vw, 40px) max(18px, env(safe-area-inset-bottom));
  padding-left: max(clamp(16px, 4vw, 40px), env(safe-area-inset-left));
  padding-right: max(clamp(16px, 4vw, 40px), env(safe-area-inset-right));
  border-top: 1px solid var(--line);
  font: 700 10px/1.4 var(--sans);
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--muted);
}
.land-links {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 20px;
}
.land-foot a {
  color: var(--text-2);
  text-decoration: none;
}
.land-foot a:hover {
  color: var(--red-hi);
}
/* al dito: link del piede alti 40px, righe staccate */
@media (pointer: coarse) {
  .land-foot {
    row-gap: 0;
    padding-top: 8px;
    /* 12px: i pulsanti IT · EN (margine -12px, in fondo) restano dentro la pagina, che così non scorre */
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    align-items: center;
  }
  .land-foot > span {
    padding: 10px 0;
  }
  .land-links {
    gap: 0 22px;
  }
  .land-links a {
    display: inline-block;
    padding: 13px 0;
  }
}
.hero-rule + .hero-meta {
  margin-top: 0;
}

.hero-join {
  margin-top: 30px;
  border-color: rgba(255, 56, 56, 0.55);
}
.hero-join-note {
  margin: 12px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}
.hero-collab {
  margin: 26px 0 0;
  color: var(--muted);
  font-size: 12.5px;
}
.hero-collab a {
  padding-block: 12px; /* area da toccare più alta, la riga non si sposta */
  color: var(--text-2);
  text-decoration: underline;
  text-decoration-color: rgba(255, 56, 56, 0.55);
  text-underline-offset: 0.25em;
}
/* telefono in orizzontale: logo più piccolo, «Richiedi di partecipare» nel primo schermo */
@media (orientation: landscape) and (max-height: 500px) {
  .hero {
    padding-top: max(24px, env(safe-area-inset-top));
    padding-bottom: 24px;
  }
  .hero-title {
    font-size: clamp(52px, 19vh, 148px);
  }
  .hero-line {
    margin-top: 16px;
    font-size: 20px;
  }
  .hero-meta {
    margin-top: 18px;
  }
  .hero-note {
    margin-top: 10px;
  }
  .hero-join {
    margin-top: 18px;
  }
}
/* computer e tablet in orizzontale: marchio e spazi seguono anche l'altezza della finestra, così sui portatili
   (finestre alte 600-800px) frase, «Richiedi di partecipare» e piede (privacy, area staff, lingua) stanno nel primo
   schermo. Sopra gli 800px circa tutto resta com'è. */
@media (orientation: landscape) and (min-height: 501px) {
  .hero {
    padding-top: max(clamp(24px, 6vh, 56px), env(safe-area-inset-top));
    padding-bottom: clamp(20px, 4vh, 40px);
  }
  .hero-title {
    font-size: clamp(62px, min(16.5vw, 19vh), 148px);
  }
  .hero-line {
    margin-top: clamp(14px, 3.5vh, 30px);
  }
  .hero-meta {
    margin-top: clamp(16px, 4vh, 34px);
  }
  .hero-note {
    margin-top: clamp(10px, 2.2vh, 18px);
  }
  .hero-join {
    margin-top: clamp(16px, 3.5vh, 30px);
  }
  .hero-collab {
    margin-top: clamp(14px, 3vh, 26px);
  }
}
.hero-collab a:hover {
  color: var(--red-hi);
}

/* La frase prende fiato; il pulsante per partecipare arde piano e, al passaggio, ha un riflesso di seta. */
.hero-title ~ .hero-line {
  animation: exhale 1.8s 1.2s var(--silk) backwards;
}
.hero-join {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.hero-title ~ .hero-join {
  animation:
    rise 0.8s 1.55s var(--ease) both,
    ember-glow 5s 2.6s var(--silk) infinite alternate;
}
@keyframes ember-glow {
  from {
    border-color: rgba(255, 56, 56, 0.5);
    box-shadow: 0 0 0 0 rgba(255, 56, 56, 0);
  }
  to {
    border-color: rgba(255, 56, 56, 0.95);
    box-shadow:
      0 0 28px -4px rgba(255, 56, 56, 0.55),
      inset 0 0 18px -8px rgba(255, 56, 56, 0.6);
  }
}
.hero-join::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  z-index: -1;
  width: 45%;
  background: linear-gradient(90deg, transparent, rgba(255, 90, 90, 0.3), transparent);
  transform: translateX(-140%) skewX(-20deg);
  pointer-events: none;
}
.hero-join:hover::after {
  animation: sheen 1s var(--silk);
}

/* sui telefoni il bagliore del pulsante si accende due volte e poi resta fermo */
@media (hover: none) {
  .hero-title ~ .hero-join {
    animation:
      rise 0.8s 1.55s var(--ease) both,
      ember-glow 5s 2.6s var(--silk) 2 alternate;
  }
}

/* La musica dell'ingresso (music.js): in alto a destra, discreta; mentre suona, le onde respirano. */
.hero-sound {
  position: absolute;
  top: max(6px, env(safe-area-inset-top));
  right: max(6px, env(safe-area-inset-right));
  z-index: 2;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--muted);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  animation: rise 0.8s 1.7s var(--ease) both;
}
.hero-sound[hidden] {
  display: none;
}
.hero-sound .i {
  width: 22px;
  height: 22px;
}
.hero-sound:focus-visible {
  outline: 2px solid var(--red-hi);
  outline-offset: -2px;
}
@media (hover: hover) {
  .hero-sound:hover {
    color: var(--text);
  }
}
.hero-sound.is-playing {
  color: var(--red-hi);
}
.hero-sound.is-playing .wave {
  animation: sound-wave 0.52s var(--silk) infinite alternate;
}
.hero-sound.is-playing .wave + .wave {
  animation-delay: 0.26s;
}
@keyframes sound-wave {
  from {
    opacity: 0.2;
  }
}
/* La porta (gate.js): alla prima visita della sessione, nero, la lama e «Entra». Dietro, l'ingresso aspetta fermo
   all'inizio; quando la porta si apre (music.js) svanisce e l'ingresso parte con la musica. Sopra restano la grana e
   l'avviso dei cookie. */
.gate {
  display: none;
}
html.gated .gate,
html.gate-opening .gate {
  position: fixed;
  inset: 0;
  z-index: 90;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 26px;
  padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
  background: var(--ink);
  text-align: center;
}
html.gated body {
  overflow: hidden;
}
html.gated .hero *,
html.gated .hero *::before,
html.gated .hero *::after,
html.gated .hero-sound {
  animation-play-state: paused !important;
}
.gate-secret {
  margin: 0;
  font: 700 clamp(12px, 2.4vw, 15px)/1 var(--sans);
  letter-spacing: 0.65em;
  text-indent: 0.65em;
  text-transform: uppercase;
  color: var(--text-2);
}
.gate-blade {
  display: block;
  width: min(72vw, 420px);
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    rgba(182, 0, 0, 0.35) 30%,
    rgba(255, 56, 56, 0.8) 50%,
    rgba(182, 0, 0, 0.35) 70%,
    transparent
  );
  box-shadow: 0 0 22px 1px rgba(182, 0, 0, 0.45);
  transform: rotate(-17deg);
  animation: gate-breathe 3.6s var(--silk) infinite alternate;
}
@keyframes gate-breathe {
  from {
    opacity: 0.45;
    transform: rotate(-17deg) scaleX(0.82);
  }
}
.gate-enter {
  min-width: 180px;
  border-color: rgba(255, 56, 56, 0.55);
  animation: ember-glow 5s var(--silk) infinite alternate;
}
.gate-note {
  margin: 0;
  color: var(--muted);
  font-size: 12.5px;
}
html.gate-opening .gate {
  pointer-events: none;
  animation: gate-out 0.8s var(--silk) forwards;
}
@keyframes gate-out {
  to {
    opacity: 0;
    visibility: hidden;
  }
}
/* per ripartire dall'inizio insieme alla musica, l'ingresso resta un attimo senza animazioni (music.js) */
.hero.is-rewind *,
.hero.is-rewind *::before,
.hero.is-rewind *::after {
  animation: none !important;
}

/* Chi torna sulla home nella stessa scheda (gate.js, html.returning, es. da «← Torna all'ingresso») l'ingresso lo ha
   già visto: il marchio si disegna subito e frase, pulsanti e piede salgono in mezzo secondo invece che in due.
   La lama e il disegno restano. Il pulsante della musica toglie la classe e rifà l'ingresso intero, a tempo con la
   sigla (music.js). */
html.returning .hero-title .logo {
  --draw-delay: 0s;
}
html.returning .hero-title::before {
  animation-delay: 0.3s, 2.1s;
}
html.returning .hero-title ~ .hero-line {
  animation-duration: 1.2s;
  animation-delay: 0.2s;
}
html.returning .hero-title ~ .hero-meta {
  animation-delay: 0.35s;
}
html.returning .hero-title ~ .hero-note,
html.returning .hero-title ~ .hero-join-note {
  animation-delay: 0.45s;
}
html.returning .hero-title ~ .hero-join {
  animation-delay: 0.45s, 1.5s;
}
html.returning .hero-title ~ .hero-collab,
html.returning .hero-sound {
  animation-delay: 0.55s;
}

/* In inglese, finché i18n.js non ha cambiato i testi (gate.js, html.i18n-wait: al massimo un secondo e mezzo), quelli
   italiani non si vedono: niente lampo di «Entra» o «Richiedi di partecipare» prima di «Enter» e «Request to attend». */
html.i18n-wait [data-en] {
  visibility: hidden;
}

@media (prefers-reduced-motion: reduce) {
  .hero-secret,
  .hero-title ~ *,
  .hero-title::before,
  .hero-title::after,
  .hero-neon,
  .hero-sound {
    animation: none;
  }
}

/* IT · EN nel piede (i18n.js): pulsanti di 40×40px che non allungano il piede. Quando va a capo da solo (telefoni),
   «IT» comincia al bordo come «Riservato ai maggiorenni» e «Privacy»; il margine in più dei link tiene la stessa
   distanza quando stanno sulla stessa riga. */
.land-foot .lang-switch {
  margin: -12px 0;
  align-self: center;
}
.land-foot > .land-links {
  margin-right: 14px;
}
.land-links + .lang-switch {
  margin-left: -14px;
}