/* OpenTenor · la pagina d'ingresso (/): una composizione a tutto schermo con il rigo in movimento
   (usa tokens.css, base.css e pagine.css). La grafica è decorativa (aria-hidden) e si ferma con
   prefers-reduced-motion. Tutto in CSS e SVG, senza librerie. */

.ingresso { display: grid; align-items: center; min-height: 0; overflow: clip; }
.pagina .ingresso::before, .pagina .ingresso::after { content: none; } /* qui l'alba e il rigo sono della scena, non di pagine.css */
.ingresso__in { position: relative; z-index: 1; width: 100%; padding-block: clamp(32px, 6vh, 72px) clamp(40px, 8vh, 96px); }
.ingresso__testo { max-width: 560px; }

/* ---------- Il marchio e i testi ---------------------------------------- */
.ingresso__marchio { width: 44px; height: 44px; margin-bottom: 28px; border-radius: 11px; box-shadow: var(--ot-ombra-1); }
.ingresso h1 { margin-top: 16px; font-size: clamp(2.5rem, 1.5rem + 3.6vw, 4.5rem); line-height: 1.0; letter-spacing: var(--ot-track-display); }
.ingresso .lead { margin-top: 20px; max-width: 26em; }
.ingresso__azioni { margin-top: 36px; }
.btn--grande { --h: 60px; padding: 0 30px; font-size: 1.125rem; gap: 12px; }
.btn--grande .ico { width: 20px; height: 20px; }
.btn--grande .btn__freccia { width: 18px; height: 18px; }
.btn--grande:hover { box-shadow: var(--ot-ombra-2); }
.btn--grande:focus-visible { box-shadow: var(--ot-fuoco), var(--ot-ombra-2); }
.ingresso .pagina__nota { margin-top: 30px; }

/* ---------- L'alba: aloni morbidi che respirano -------------------------- */
.ingresso__alba {
  position: absolute; z-index: -2; inset: -20% -10% -20% 25%; pointer-events: none;
  background:
    radial-gradient(38% 46% at 66% 30%, rgb(255 199 170 / 0.9) 0%, rgb(255 199 170 / 0) 70%),
    radial-gradient(36% 44% at 92% 64%, rgb(227 220 255 / 0.95) 0%, rgb(227 220 255 / 0) 72%),
    radial-gradient(28% 34% at 58% 84%, rgb(251 213 228 / 0.75) 0%, rgb(251 213 228 / 0) 70%),
    radial-gradient(26% 30% at 96% 10%, rgb(213 230 255 / 0.9) 0%, rgb(213 230 255 / 0) 70%);
  filter: blur(14px);
  transform-origin: 70% 50%;
  animation: alba-respira 20s ease-in-out infinite alternate;
}
@keyframes alba-respira {
  from { opacity: 0.78; transform: translate3d(0, 0, 0) scale(1); }
  to   { opacity: 1;    transform: translate3d(-1.5%, 1.5%, 0) scale(1.05); }
}

/* ---------- La scena: il rigo che attraversa la pagina ------------------- */
.ingresso__scena { position: absolute; z-index: -1; inset: 0; width: 100%; height: 100%; pointer-events: none; overflow: visible; }
.ingresso__scena--n { display: none; }

.ingresso .rigo { fill: none; stroke: var(--ot-inchiostro); stroke-opacity: 0.22; stroke-width: 1.3; }
.ingresso .rigo--tenore { stroke: var(--ot-vermiglio-500); stroke-opacity: 0.38; stroke-width: 1.8; }
.ingresso .stanghetta { stroke: var(--ot-inchiostro); stroke-opacity: 0.4; stroke-width: 1.5; }
.ingresso .voce { font: italic 400 19px var(--ot-font-serif); fill: var(--ot-inchiostro-2); fill-opacity: 0.8; }
.ingresso .battuta { font: 500 10px var(--ot-font-mono); letter-spacing: 0.08em; fill: var(--ot-inchiostro-3); }
.ingresso__scena--n .voce { font-size: 14px; }

/* la scia: il rigo del tenore si accende dietro la nota */
.ingresso .scia {
  fill: none; stroke: var(--ot-vermiglio-500); stroke-width: 2.4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: scia 16s infinite;
}
@keyframes scia {
  0%   { stroke-dashoffset: 1; opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  62%  { stroke-dashoffset: 0; opacity: 1; animation-timing-function: linear; }
  86%  { stroke-dashoffset: 0; opacity: 1; animation-timing-function: ease-in; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}

/* la nota del tenore: scivola lungo il rigo, si posa, poi riparte */
.ingresso .nota { fill: var(--ot-inchiostro); }
.ingresso .nota--tenore { fill: var(--ot-vermiglio-500); }
.ingresso .corsa { transform: translate(var(--arrivo), 0); animation: scivola 16s infinite; }
.ingresso__scena--w .corsa { --arrivo: 470px; }
.ingresso__scena--n .corsa { --arrivo: 248px; }
@keyframes scivola {
  0%   { transform: translate(0, 0); opacity: 0; animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  6%   { opacity: 1; animation-timing-function: cubic-bezier(0.5, 0, 0.2, 1); }
  62%  { transform: translate(var(--arrivo), 0); opacity: 1; animation-timing-function: linear; }
  86%  { transform: translate(var(--arrivo), 0); opacity: 1; animation-timing-function: ease-in; }
  100% { transform: translate(var(--arrivo), 0); opacity: 0; }
}
.ingresso .respiro-nota { animation: galleggia 5s ease-in-out infinite alternate; }

/* quando la nota si posa: l'onda che si allarga e l'alone che si accende */
.ingresso .onda { fill: none; stroke: var(--ot-vermiglio-500); stroke-width: 1.3; stroke-opacity: 0; transform-box: fill-box; transform-origin: center; animation: onda 16s cubic-bezier(0.2, 0.6, 0.3, 1) infinite; }
.ingresso .onda--2 { animation-delay: 1.4s; }
@keyframes onda {
  0%, 60% { transform: scale(0.45); stroke-opacity: 0; }
  63%     { transform: scale(0.6); stroke-opacity: 0.55; }
  100%    { transform: scale(5.2); stroke-opacity: 0; }
}
.ingresso .alone { opacity: 0.3; transform-box: fill-box; transform-origin: center; animation: alone 16s ease-in-out infinite; }
@keyframes alone {
  0%, 56% { opacity: 0.25; transform: scale(0.9); }
  66%     { opacity: 0.9;  transform: scale(1.15); }
  86%     { opacity: 0.55; transform: scale(1); }
  100%    { opacity: 0.25; transform: scale(0.9); }
}

/* le altre note: un accordo che galleggia piano */
.ingresso .deriva { animation: galleggia 14s ease-in-out infinite alternate; }
.ingresso .deriva--2 { animation-duration: 17s; animation-delay: -5s; }
.ingresso .deriva--3 { animation-duration: 19s; animation-delay: -9s; }
.ingresso .deriva--4 { animation-duration: 12s; animation-delay: -3s; }
@keyframes galleggia { from { transform: translateY(-4px); } to { transform: translateY(4px); } }

/* ---------- Computer: testo a sinistra, scena a destra e dietro ----------- */
@media (min-width: 900px) {
  .ingresso__in { display: grid; grid-template-columns: minmax(0, 11fr) minmax(0, 9fr); align-items: center; }
}

/* ---------- Telefoni e tablet stretti: la scena sopra, il testo sotto ------ */
@media (max-width: 899px) {
  .ingresso__in { padding-block: 0 56px; }
  .ingresso__alba { inset: -10% -30% auto -30%; height: 60vh; animation-duration: 24s; }
  .ingresso__scena--w { display: none; }
  .ingresso__scena--n { display: block; position: relative; inset: auto; z-index: 0; width: 100%; height: auto; aspect-ratio: 390 / 180; max-height: 30svh; margin-inline: calc(-1 * var(--ot-gutter)); width: calc(100% + 2 * var(--ot-gutter)); }
  .ingresso__marchio { width: 40px; height: 40px; margin-bottom: 20px; }
  .ingresso h1 { font-size: clamp(2.25rem, 1.4rem + 4.6vw, 3.25rem); }
  .ingresso .lead { margin-top: 14px; }
  .ingresso__azioni { margin-top: 28px; }
  .ingresso .pagina__nota { margin-top: 24px; }
}
@media (max-width: 899px) and (max-height: 700px) {
  .ingresso__scena--n { max-height: 26svh; }
  .ingresso__marchio { display: none; }
}

/* ---------- Movimento ridotto: la composizione ferma, con la nota già posata */
@media (prefers-reduced-motion: reduce) {
  .ingresso__alba, .ingresso .scia, .ingresso .corsa, .ingresso .respiro-nota, .ingresso .onda, .ingresso .alone, .ingresso .deriva { animation: none !important; }
  .ingresso .scia { stroke-dashoffset: 0; }
  .ingresso .onda { display: none; }
  .ingresso .alone { opacity: 0.55; }
}