/* =========================================================
   BROLAB — Landing "porta"
   Un solo fotogramma a tutto schermo. Nessuna divisione:
   la scelta Wedding / Corporate e' tipografica, e l'immagine
   di fondo dice sempre di quale mondo si sta parlando.
   L'ingresso e' CSS puro: senza JS la pagina resta completa.
   ========================================================= */

.bl-door-html,
.bl-door {
  height: 100%;
  overflow: hidden;
  overscroll-behavior: none;
}

.bl-door {
  /* Tema bloccato su cinema: la pagina e' scura da bordo a bordo. */
  position: relative;
  margin: 0;
  background: var(--cinema);
  color: var(--paper);

  /* Testo secondario piu' chiaro di --silver: qui poggia su fotografia
     imprevedibile, e --silver non garantisce AA su ogni still. */
  --door-fg-2: #CFC9C0;

  /* Quanto arretra la voce del mondo non a schermo. 0.55 e' il punto piu'
     basso che tiene ancora AA sul lede a 13px: la voce in secondo piano
     resta leggibile e non sembra disattivata. */
  --door-dim: 0.55;
}


/* ---------------------------------------------------------
   MATTE — bande nere che si ritirano, come un proiettore
   che apre l'inquadratura.
   --------------------------------------------------------- */
.bl-door__matte {
  position: fixed;
  left: 0;
  right: 0;
  height: 51vh;
  background: var(--cinema);
  z-index: 60;
  pointer-events: none;
  animation: bl-door-matte var(--dur-cine) var(--ease-in-out-cine) forwards;
}
.bl-door__matte--top    { top: 0;    transform-origin: top; }
.bl-door__matte--bottom { bottom: 0; transform-origin: bottom; }

@keyframes bl-door-matte {
  from { transform: scaleY(1); }
  to   { transform: scaleY(0); }
}


/* ---------------------------------------------------------
   PALCO — i due mondi impilati sullo stesso fotogramma.
   Solo quello attivo e' opaco: la dissolvenza e' l'unica
   transizione fra i due, non c'e' nessuna linea di taglio.
   --------------------------------------------------------- */
.bl-door__stage {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

.bl-door__layer {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity var(--dur-cine) var(--ease-in-out-cine);
}

.bl-door[data-world="wedding"]   .bl-door__layer--wedding,
.bl-door[data-world="corporate"] .bl-door__layer--corporate {
  opacity: 1;
}

.bl-door__img,
.bl-door__video {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Assestamento lento all'ingresso, come un carrello che si ferma. */
  animation: bl-door-settle var(--dur-epic) var(--ease-out-soft) 200ms backwards;
  will-change: transform;
}

.bl-door__video {
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-slow) var(--ease-out-soft);
}
.bl-door__video.is-playing { opacity: 1; }

@keyframes bl-door-settle {
  from { transform: scale(1.07); }
  to   { transform: scale(1); }
}

/* Scrim direzionale: pesa in basso e a sinistra, dove vive il testo,
   e lascia pulita la parte di fotografia che deve leggersi. */
.bl-door__scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(
      to top,
      rgba(0, 0, 0, 0.90) 0%,
      rgba(0, 0, 0, 0.58) 26%,
      rgba(0, 0, 0, 0.10) 58%,
      rgba(0, 0, 0, 0.34) 100%
    ),
    linear-gradient(
      to right,
      rgba(0, 0, 0, 0.58) 0%,
      rgba(0, 0, 0, 0.20) 34%,
      rgba(0, 0, 0, 0) 58%
    );
}

.bl-door__grain {
  position: absolute;
  inset: 0;
  background-image: var(--grain-url, url("../assets/grain.svg"));
  background-size: 220px 220px;
  opacity: 0.22;
  mix-blend-mode: overlay;
  pointer-events: none;
}


/* ---------------------------------------------------------
   SCELTE — due voci tipografiche in basso a sinistra.
   Il resto dello schermo resta fotografia.
   --------------------------------------------------------- */
.bl-door__choices {
  position: fixed;
  left: calc(clamp(24px, 5vw, 88px) + env(safe-area-inset-left));
  bottom: calc(clamp(34px, 7vh, 84px) + env(safe-area-inset-bottom));
  z-index: 20;
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3.6vh, 52px);
  max-width: min(46rem, 74vw);
}

.bl-door__choice {
  display: block;
  color: var(--paper);
  text-decoration: none;
  /* Annulla il sottolineato animato globale di <a>. */
  background-image: none;

  /* Di default segue la dissolvenza fra i mondi: stessa durata e stessa
     curva, cosi' testo e fotogramma cambiano come un gesto solo. */
  transition: opacity var(--dur-cine) var(--ease-in-out-cine),
              transform var(--dur-cine) var(--ease-in-out-cine);

  animation: bl-door-rise 900ms var(--ease-out-expo) backwards;
  animation-delay: calc(780ms + var(--i, 0) * 130ms);
}

@keyframes bl-door-rise {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}


/* ---------------------------------------------------------
   SINCRONIA — la voce del mondo a schermo e' quella accesa.
   Vale per ogni tipo di input: su desktop il JS aggancia
   data-world al puntatore, quindi l'hover passa di qui senza
   bisogno di regole dedicate, e a riposo la rotazione accende
   a turno le due voci. Su touch, dove l'hover non esiste, e'
   l'unico modo per legare l'immagine alla scelta.
   --------------------------------------------------------- */

/* Voce del mondo NON a schermo: arretra. */
.bl-door[data-world="wedding"]   .bl-door__choice[data-world="corporate"],
.bl-door[data-world="corporate"] .bl-door__choice[data-world="wedding"] {
  opacity: var(--door-dim);
}

/* Voce del mondo a schermo: avanza. */
.bl-door[data-world="wedding"]   .bl-door__choice[data-world="wedding"],
.bl-door[data-world="corporate"] .bl-door__choice[data-world="corporate"] {
  transform: translateX(8px);
}

/* ...e si porta dietro la propria CTA. */
.bl-door[data-world="wedding"]   .bl-door__choice[data-world="wedding"]   .bl-door__cta,
.bl-door[data-world="corporate"] .bl-door__choice[data-world="corporate"] .bl-door__cta {
  opacity: 1;
  transform: none;
}

/* Rete di sicurezza per il caso senza JS: li' data-world resta fermo su
   "wedding", quindi puntare o tabulare l'altra voce deve comunque
   accenderla. Stessa specificita' delle regole qui sopra (0,4,0) e
   dichiarata dopo, quindi vince. */
.bl-door[data-world] .bl-door__choice:hover,
.bl-door[data-world] .bl-door__choice:focus-visible {
  opacity: 1;
}
.bl-door[data-world] .bl-door__choice:hover        .bl-door__cta,
.bl-door[data-world] .bl-door__choice:focus-visible .bl-door__cta {
  opacity: 1;
  transform: none;
}

/* Quando e' il puntatore a comandare, la risposta dev'essere immediata,
   non lenta come una dissolvenza. Al rilascio si torna al ritmo lento. */
.bl-door.is-pinned .bl-door__choice,
.bl-door.is-pinned .bl-door__cta {
  transition-duration: var(--dur-base);
  transition-timing-function: var(--ease-out-expo);
}

.bl-door__choice:focus-visible {
  outline: 2px solid var(--paper);
  outline-offset: 12px;
}

.bl-door__title {
  display: block;
  margin: 0;
  padding-bottom: 2px;   /* riserva per la discendente di "g" */
  font-family: var(--font-display);
  font-size: clamp(46px, 6.6vw, 112px);
  font-weight: 300;
  line-height: 1.02;
  letter-spacing: -0.03em;
  font-variation-settings: 'opsz' 144, 'SOFT' 0, 'WONK' 0;
  color: var(--paper);
}

.bl-door__lede {
  display: block;
  margin-top: var(--s-2);
  max-width: 36ch;
  font-family: var(--font-sans);
  font-size: var(--t-body-sm);
  line-height: var(--lh-body);
  font-weight: 300;
  color: var(--door-fg-2);
  text-wrap: pretty;
}


/* ---------------------------------------------------------
   CTA — visibile solo sulla voce accesa.
   --------------------------------------------------------- */
.bl-door__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--paper);
  white-space: nowrap;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity var(--dur-cine) var(--ease-in-out-cine),
              transform var(--dur-cine) var(--ease-in-out-cine);
}

.bl-door__cta svg {
  flex: none;
  transition: transform var(--dur-base) var(--ease-out-expo);
}
.bl-door__choice:hover .bl-door__cta svg { transform: translateX(5px); }


/* ---------------------------------------------------------
   TESTATA — marchio e riga di presentazione
   --------------------------------------------------------- */
.bl-door__masthead {
  position: fixed;
  top: calc(clamp(20px, 3.4vh, 42px) + env(safe-area-inset-top));
  left: 0;
  right: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--s-4);
  /* Non deve mai finire sotto il selettore di lingua. */
  padding: 0 92px;
  pointer-events: none;
}

.bl-door__brand {
  margin: 0;
  line-height: 0;
  max-width: 100%;
  animation: bl-door-rise 900ms var(--ease-out-expo) 620ms backwards;
}

/* Il marchio ha un rapporto di circa 1.6:1, non e' un wordmark largo:
   per pesare in una pagina a schermo pieno gli serve altezza vera.
   max-width + contain sono la garanzia che su schermi stretti si
   rimpicciolisca invece di sbordare sotto il selettore di lingua. */
.bl-door__brand img {
  display: block;
  height: clamp(52px, 9vh, 108px);
  width: auto;
  max-width: 100%;
  object-fit: contain;
}

.bl-door__intro {
  margin: 0;
  max-width: none;
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 400;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--door-fg-2);
  text-align: center;
  animation: bl-door-rise 900ms var(--ease-out-expo) 720ms backwards;
}


/* ---------------------------------------------------------
   LINGUA
   --------------------------------------------------------- */
.bl-door__lang {
  position: fixed;
  top: calc(clamp(20px, 3.4vh, 42px) + env(safe-area-inset-top));
  right: calc(clamp(20px, 3vw, 44px) + env(safe-area-inset-right));
  z-index: 31;
  display: flex;
  align-items: center;
  gap: var(--s-3);
  animation: bl-door-rise 900ms var(--ease-out-expo) 820ms backwards;
}

.bl-door__lang form { display: inline; }

.bl-door__lang-current,
.bl-door__lang-btn {
  font-family: var(--font-mono);
  font-size: var(--t-eyebrow);
  font-weight: 500;
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  line-height: 1;
}

.bl-door__lang-current { color: var(--paper); }

.bl-door__lang-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--door-fg-2);
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-out-soft);
}
.bl-door__lang-btn:hover { color: var(--paper); }
.bl-door__lang-btn:focus-visible {
  outline: 1px solid var(--paper);
  outline-offset: 4px;
}


/* ---------------------------------------------------------
   MOBILE — verticale
   --------------------------------------------------------- */
@media (max-width: 860px) {
  .bl-door__choices {
    left: calc(clamp(20px, 6vw, 32px) + env(safe-area-inset-left));
    right: calc(clamp(20px, 6vw, 32px) + env(safe-area-inset-right));
    bottom: calc(clamp(28px, 5vh, 48px) + env(safe-area-inset-bottom));
    gap: clamp(20px, 3vh, 34px);
    max-width: none;
  }

  .bl-door__title { font-size: clamp(40px, 11vw, 68px); }
  .bl-door__lede  { max-width: 32ch; font-size: var(--t-meta); }
  .bl-door__cta   { margin-top: var(--s-3); }

  .bl-door__masthead { padding: 0 72px; gap: var(--s-3); }

  .bl-door__scrim {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.92) 0%,
      rgba(0, 0, 0, 0.66) 34%,
      rgba(0, 0, 0, 0.22) 66%,
      rgba(0, 0, 0, 0.42) 100%
    );
  }
}

@media (max-width: 400px) {
  .bl-door__intro { display: none; }
}


/* ---------------------------------------------------------
   SCHERMO BASSO — telefono in orizzontale, o finestra desktop
   schiacciata. Qui il vincolo e' l'altezza, non la larghezza:
   la tipografia passa a vh e cade tutto cio' che non serve a
   scegliere. Non e' gated su touch apposta: una finestra
   desktop bassa ha lo stesso identico problema.
   --------------------------------------------------------- */
@media (orientation: landscape) and (max-height: 560px) {
  .bl-door__masthead {
    top: calc(12px + env(safe-area-inset-top));
    gap: var(--s-2);
    padding: 0 84px;
  }
  .bl-door__brand img { height: clamp(32px, 9.5vh, 58px); }
  .bl-door__intro { display: none; }

  .bl-door__lang { top: calc(12px + env(safe-area-inset-top)); }

  .bl-door__choices {
    bottom: calc(16px + env(safe-area-inset-bottom));
    gap: clamp(14px, 3vh, 26px);
  }

  /* Il titolo si misura in vh, non in vw: qui il vincolo e' l'altezza. */
  .bl-door__title { font-size: clamp(30px, 14vh, 64px); }

  /* Il lede resta ma su una riga sola: la colonna e' larga, non serve
     limitarla a 32ch come in verticale. */
  .bl-door__lede { max-width: 54ch; }

  .bl-door__cta { margin-top: var(--s-2); }

  .bl-door__scrim {
    background: linear-gradient(
      to top,
      rgba(0, 0, 0, 0.90) 0%,
      rgba(0, 0, 0, 0.52) 40%,
      rgba(0, 0, 0, 0.16) 72%,
      rgba(0, 0, 0, 0.44) 100%
    );
  }
}

/* Sotto i 430px di altezza (praticamente ogni telefono in orizzontale)
   il lede non ci sta piu' senza schiacciare i titoli. Cade: "Wedding" e
   "Corporate" si spiegano da soli, e la CTA resta. */
@media (orientation: landscape) and (max-height: 430px) {
  .bl-door__lede { display: none; }
  .bl-door__choices { gap: clamp(12px, 4vh, 20px); }
}


/* ---------------------------------------------------------
   MOVIMENTO RIDOTTO — la pagina arriva gia' aperta e ferma.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .bl-door__matte {
    animation: none;
    transform: scaleY(0);
  }

  .bl-door__img,
  .bl-door__video,
  .bl-door__choice,
  .bl-door__brand,
  .bl-door__intro,
  .bl-door__lang {
    animation: none;
  }

  .bl-door__layer,
  .bl-door__choice,
  .bl-door__cta,
  .bl-door__cta svg,
  .bl-door__video {
    transition: none;
  }

  /* Qui il JS non fa ruotare i mondi, quindi data-world resta fermo:
     senza questo, una delle due voci resterebbe spenta per sempre e la
     sua CTA invisibile. Stessa specificita' della sincronia, dopo di
     essa, quindi vince. */
  .bl-door[data-world] .bl-door__choice[data-world] {
    opacity: 1;
    transform: none;
  }
  .bl-door[data-world] .bl-door__choice[data-world] .bl-door__cta {
    opacity: 1;
    transform: none;
  }
}