/* =========================================================
   hero.css — 01 HERO

   Tre righe, centrate, un solo blocco:
     videobydan
     Danilo Ceruso
     crea contenuti professionali per il tuo brand.

   Più due cose che vivono nello spazio vuoto attorno:
   le emoji che galleggiano e il cursore liquido.
   ========================================================= */

.hero {
  position: relative;
  z-index: 1;
  width: 100%;
  min-height: 100svh;              /* svh: la barra di Safari non taglia niente */
  overflow: hidden;                /* SOLO per le emoji decorative: qui dentro
                                      niente deve poter sporgere dallo schermo.
                                      Fuori dalla Hero non c'è nessun overflow
                                      nascosto: le sezioni stanno nel container. */
  display: grid;
  place-items: center;             /* centrato in orizzontale e in verticale */

  /* env(safe-area-...): sui telefoni con la tacca e la barra in basso
     il testo non finisce sotto i bordi arrotondati */
  padding: var(--pad);
  padding-left:  max(var(--pad), env(safe-area-inset-left));
  padding-right: max(var(--pad), env(safe-area-inset-right));

  /* CENTRATURA OTTICA: il blocco al 50% esatto sembra basso.
     Un po' di padding in più sotto lo alza di circa il 2% dell'altezza. */
  padding-bottom: calc(max(var(--pad), env(safe-area-inset-bottom)) + 2vh);
}

.hero__block {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 100%;
}

.rev { display: inline-block; }

/* ---------------------------------------------------------
   1. videobydan — il marchio, l'elemento più importante
   11vw è misurato: è la misura massima che tiene la parola
   su UNA riga con un margine laterale di sicurezza.
   --------------------------------------------------------- */

.brand {
  font-size: clamp(52px, min(11vw, 26svh), 190px);
  font-weight: 600;
  line-height: .9;
  letter-spacing: -.05em;
  color: var(--text);
  white-space: nowrap;             /* mai "video / bydan" su due righe */
}

/* ---------------------------------------------------------
   2. il nome della persona dietro il marchio
   --------------------------------------------------------- */

.name {
  /* il margine tiene conto della coda della "y" di videobydan:
     misurato sul rendering, non sulla scatola del testo */
  margin-top: clamp(18px, 2vw, 34px);
  font-size: clamp(15px, 1.35vw, 21px);
  font-weight: 500;
  letter-spacing: -.01em;
  color: var(--text);
}

/* ---------------------------------------------------------
   3. la frase
   --------------------------------------------------------- */

.tagline {
  margin-top: clamp(10px, 1.05vw, 16px);
  max-width: 32ch;
  font-size: clamp(15px, 1.15vw, 18px);
  font-weight: 400;
  line-height: 1.45;
  letter-spacing: -.005em;
  color: #A8A8A1;                  /* più leggibile del muted su monitor non calibrati */
  text-wrap: balance;              /* le due righe restano di lunghezza simile */
}

/* l'unico tocco di colore fisso della schermata: il punto finale.
   Se non ti piace, cancella queste tre righe. */
.tagline__dot { color: var(--yellow); }

/* ---------------------------------------------------------
   4. il pulsante
   Un filo di bordo, niente pillola, niente ombra.
   Al passaggio del mouse diventa giallo pieno.
   --------------------------------------------------------- */

.hero__cta { margin-top: clamp(26px, 3vw, 44px); }

.btn {
  display: inline-flex;
  align-items: center;
  gap: .65em;
  padding: .85em 1.5em;
  border: 1px solid rgba(242, 241, 236, .26);
  color: var(--text);
  font-size: clamp(14px, 1.05vw, 16px);
  font-weight: 500;
  letter-spacing: -.005em;
  line-height: 1;
  transition: background var(--t-fast) ease, color var(--t-fast) ease,
              border-color var(--t-fast) ease;
}

.btn:hover,
.btn:focus-visible {
  background: var(--yellow);
  border-color: var(--yellow);
  color: var(--bg);
}

.btn__arrow { transition: transform .3s var(--ease); }
.btn:hover .btn__arrow { transform: translateY(3px); }

/* =========================================================
   LA LENTE CHE TI GUARDA
   Un obiettivo disegnato in SVG: si inclina in 3D verso il
   mouse (perspective + rotateX/rotateY) e la pupilla lo segue.
   Il movimento lo scrive js/lens.js in due variabili CSS,
   le transizioni lo rendono morbido: nessun ciclo di disegno.

   Sta a z-index 1 come il testo, cioè SOTTO il cursore liquido:
   quando la massa gialla ci passa sopra si inverte anche lui.
   È tutto bianco e nero, quindi l'inversione funziona bene.
   ========================================================= */

.lens {
  position: absolute;
  left: var(--lx, 11%);
  top: var(--ly, 49%);
  z-index: 1;
  width: clamp(74px, 8.5vw, 140px);
  aspect-ratio: 1;
  transform: translate(-50%, -50%);
  pointer-events: none;
}

.lens__float {
  width: 100%;
  height: 100%;
  animation: lensFloat 17s ease-in-out infinite;
}

.lens__tilt {
  width: 100%;
  height: 100%;
  transform: perspective(520px)
             rotateY(var(--ry, 0deg))
             rotateX(var(--rx, 0deg));
  transition: transform .45s cubic-bezier(.22, 1, .36, 1);
}

.lens svg { width: 100%; height: 100%; overflow: visible; }

.lens__ring,
.lens__ring2 {
  fill: none;
  stroke: var(--text);
  vector-effect: non-scaling-stroke;
}
.lens__ring  { stroke-width: 1.4; opacity: .38; }
.lens__ring2 { stroke-width: .9;  opacity: .2; }

.lens__eye {
  transform: translate(var(--ex, 0px), var(--ey, 0px));
  transition: transform .4s cubic-bezier(.22, 1, .36, 1);
}

.lens__iris  { fill: #0E0E0E; stroke: var(--text); stroke-width: 1; opacity: .95; }
.lens__pupil { fill: var(--text); }
.lens__spec  { fill: var(--yellow); }

@keyframes lensFloat {
  0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
  35%  { transform: translate3d(6px, -11px, 0) rotate(2deg); }
  70%  { transform: translate3d(-5px, 7px, 0) rotate(-1.5deg); }
  100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

/* =========================================================
   EMOJI CHE GALLEGGIANO
   Decorative, mai sopra il testo, movimento lentissimo.
   Il div esterno riceve il parallasse del mouse (JS),
   quello interno l'animazione lenta (CSS): così non si
   pestano i piedi sulla stessa proprietà transform.
   ========================================================= */

.emoji-field {
  position: absolute;
  inset: 0;
  z-index: 5;                      /* sopra il cursore liquido: non si invertono */
  pointer-events: none;
  overflow: hidden;
}

.emoji {
  position: absolute;
  left: var(--x);
  top: var(--y);
  font-size: var(--s);
  line-height: 1;
  opacity: var(--o);
  filter: grayscale(.12);          /* le smorza appena: meno "adesivo" */
  transform: translate(-50%, -50%) translate3d(var(--dx, 0px), var(--dy, 0px), 0);
  transition: transform .9s cubic-bezier(.22, 1, .36, 1);
  will-change: transform;          /* solo qui: sono gli unici elementi che si muovono sempre */
}

.emoji > span {
  display: block;
  animation: floatA var(--dur, 12s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
}

.emoji:nth-child(2) > span { animation-name: floatB; }
.emoji:nth-child(3) > span { animation-name: floatC; }
.emoji:nth-child(5) > span { animation-name: floatB; }
.emoji:nth-child(6) > span { animation-name: floatC; }

@keyframes floatA {
  0%   { transform: translate3d(0, 0, 0)          rotate(0deg)   scale(1); }
  33%  { transform: translate3d(9px, -16px, 0)    rotate(3.5deg) scale(1.03); }
  66%  { transform: translate3d(-7px, -8px, 0)    rotate(-2deg)  scale(.98); }
  100% { transform: translate3d(0, 0, 0)          rotate(0deg)   scale(1); }
}

@keyframes floatB {
  0%   { transform: translate3d(0, 0, 0)          rotate(0deg)   scale(1); }
  40%  { transform: translate3d(-12px, 14px, 0)   rotate(-4deg)  scale(1.02); }
  75%  { transform: translate3d(6px, 20px, 0)     rotate(2deg)   scale(.97); }
  100% { transform: translate3d(0, 0, 0)          rotate(0deg)   scale(1); }
}

@keyframes floatC {
  0%   { transform: translate3d(0, 0, 0)          rotate(0deg)   scale(1); }
  30%  { transform: translate3d(14px, 10px, 0)    rotate(5deg)   scale(1.04); }
  70%  { transform: translate3d(-9px, -13px, 0)   rotate(-3deg)  scale(.99); }
  100% { transform: translate3d(0, 0, 0)          rotate(0deg)   scale(1); }
}

/* =========================================================
   CURSORE LIQUIDO — i canvas

   Due livelli sovrapposti, stessa dimensione:
   - .fx--mask  (WebGL)    disegna la massa in bianco e, con
                           mix-blend-mode: difference, inverte
                           i colori sotto: fondo nero -> chiaro,
                           testo chiaro -> nero.
   - .fx--tint  (canvas 2D) ricopia quei pixel e li moltiplica
                           per il giallo.
   Risultato: dentro la massa la Hero è gialla con testo nero,
   e il testo resta vero testo HTML.

   .fx--solid è la versione di ripiego (?fx=solid o browser
   senza fusione dei colori): massa gialla, nessuna inversione,
   disegnata SOTTO il testo per non coprirlo.

   z-index: vedi la mappa dei livelli in base.css.
   pointer-events: none -> non bloccano nessun click.
   ========================================================= */

.fx {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.fx--mask  { z-index: 3; mix-blend-mode: difference; }
.fx--tint  { z-index: 4; mix-blend-mode: multiply; }
.fx--solid { z-index: 0; mix-blend-mode: normal; }   /* sotto il testo */

/* pannello dei numeri veri: solo con ?fx=debug */
.fx-debug {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 9;
  margin: 0;
  padding: 10px 12px;
  max-width: 320px;
  background: rgba(0, 0, 0, .72);
  color: #FFD600;
  font: 11px/1.5 ui-monospace, Menlo, Consolas, monospace;
  white-space: pre;
  pointer-events: none;
}

/* Con "riduci animazioni" attivo il cursore liquido RESTA: si muove solo
   quando muovi tu il mouse, non si anima da solo. Quello che si spegne è
   il movimento autonomo: galleggiamento delle emoji, parallasse, entrate,
   e il lento respiro del bordo della massa. */
@media (prefers-reduced-motion: reduce) {
  .emoji { transition: none; }
  /* la lente continua a guardarti (si muove solo se muovi tu),
     ma smette di galleggiare da sola */
  .lens__float { animation: none; }
}

/* messaggio visibile solo aprendo il sito da un file del disco o con
   ?fx=debug: dice perché il cursore liquido non è partito. Online non
   compare mai. */
.fx-note {
  position: absolute;
  left: var(--pad);
  bottom: var(--pad);
  z-index: 9;
  max-width: 34em;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
  pointer-events: none;
}
.fx-note b { color: var(--yellow); font-weight: 500; }