/* Splash Valcom's — Figma ZKUSqTjqspO6zQ3EjccawT, frame "1" (101:86), riferimento 1920×1080 */

@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Regular.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Medium.woff2") format("woff2");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "PP Neue Montreal";
  src: url("../fonts/PPNeueMontreal-Semibold.woff2") format("woff2");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:root {
  --black: #000;
  --white: #fff;
  --cyan: #00c6ff;
  --glass: rgb(255 255 255 / 0.2);

  --font: "PP Neue Montreal", "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Margine laterale: 80px a 1920 = 4.17vw */
  --gutter: clamp(1.25rem, 4.17vw, 5rem);
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
}

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

html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { display: block; max-width: 100%; height: auto; }

button { font: inherit; }

a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* --- Impianto --- */

.splash {
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  padding:
    max(clamp(1.5rem, 5.1vh, 3.5rem), env(safe-area-inset-top))
    max(var(--gutter), env(safe-area-inset-right))
    max(clamp(1.5rem, 4.6vh, 3rem), env(safe-area-inset-bottom))
    max(var(--gutter), env(safe-area-inset-left));
  overflow: hidden;
}

/* --- Sfondo: foto/video, velo nero da sinistra, V del marchio --- */

.splash__background {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.splash__poster,
.splash__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.splash__video {
  opacity: 0;
  transition: opacity 600ms var(--ease-out);
}

.splash__video.is-ready { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .splash__video { display: none; }
}

/* Figma: nero pieno sul 16% sinistro, sfuma a trasparente a 1481/1920 della larghezza */
.splash__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(to right, var(--black) 12.5%, rgb(0 0 0 / 0) 77%);
}

/* Figma: 1828×1266, bordo sinistro a 589/1920, alto a −130/1080 */
.splash__v {
  position: absolute;
  left: 30.68vw;
  top: calc(50% - 34.9vw); /* centro a −37px dal mezzo; altezza 1266/1828 della larghezza */
  width: 95.21vw;
  max-width: none;
  height: auto;
}

/* --- Testata --- */

.splash__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.splash__logo {
  width: clamp(9.5rem, 13.28vw, 16rem);
  height: auto;
}

/* --- Selettore lingua: IT / EN in alto a destra --- */

.lang-switch {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
}

/* Il link è largo quanto la sigla, così la distanza dalla barra la decide solo il gap;
   lingua non attiva al 70%: peggior caso 8.8:1 sui 14 s del video, misurato senza velo */
.lang-switch__link {
  position: relative;
  color: rgb(255 255 255 / 0.7);
  text-decoration: none;
  transition: color 160ms var(--ease-out);
}

/* Area cliccabile da 1.5rem (WCAG 2.5.8) senza allargare il box visibile */
.lang-switch__link::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: max(100%, 1.5rem);
  height: max(100%, 1.5rem);
  transform: translate(-50%, -50%);
}

.lang-switch__link[aria-current="page"] { color: var(--white); }

@media (hover: hover) {
  .lang-switch__link:hover { color: var(--white); }
}

.lang-switch__separator { color: rgb(255 255 255 / 0.4); }

/* --- Corpo --- */

.splash__body {
  align-self: center;
  padding-block: clamp(2.5rem, 6vh, 4rem);
  max-width: 62rem;
}

.splash__title {
  margin: 0;
  font-size: clamp(2.75rem, 1.2rem + 5.6vw, 7.5rem);
  font-weight: 400;
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}

.splash__text {
  margin: clamp(1.75rem, 3.4vw, 4rem) 0 0;
  max-width: 35rem;
  font-size: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem);
  line-height: 1.5;
  text-wrap: pretty;
}

/* --- CTA: capsula in vetro con bottone bianco a destra --- */

.cta {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0;
  margin-top: clamp(1.75rem, 2.1vw, 2.5rem);
  padding: 5px;
  border-radius: 10px;
  background: var(--glass);
  -webkit-backdrop-filter: blur(50px);
  backdrop-filter: blur(50px);
}

.cta__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 46px;
  padding-inline: 1.5rem;
  border-radius: 5px;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.04em;
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color 160ms var(--ease-out),
    color 160ms var(--ease-out),
    transform 160ms var(--ease-out),
    opacity 160ms var(--ease-out);
}

/* Su touch l'hover non esiste: senza questo il tocco non conferma niente, e il PDF si apre altrove */
.cta__link:active { transform: scale(0.97); }

.cta__link:not(.cta__link--primary) { min-width: 7.75rem; }

.cta__link--primary {
  min-width: 14rem;
  background: var(--white);
  color: var(--black);
}

@media (hover: hover) {
  .cta__link:not(.cta__link--primary):hover { background: rgb(255 255 255 / 0.12); }
  .cta__link--primary:hover { background: var(--cyan); }
}

/* --- Piede --- */

.splash__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1.25rem 2rem;
  font-size: 0.8125rem;
  line-height: 1.46;
}

.company-info { font-style: normal; }
.company-info strong { font-weight: 600; }
.company-info a { text-decoration: none; padding-block: 0.35em; white-space: nowrap; }
.company-info a:hover { text-decoration: underline; }

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.footer__start {
  display: grid;
  justify-items: start;
  gap: 0.75rem;
}

.pause {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.4);
  border-radius: 50%;
  background: transparent;
  color: var(--white);
  cursor: pointer;
  transition: border-color 160ms var(--ease-out);
}

.pause[hidden] { display: none; }

@media (hover: hover) {
  .pause:hover { border-color: var(--white); }
}

.pause__icon--play,
.pause[aria-pressed="true"] .pause__icon--pause { display: none; }
.pause[aria-pressed="true"] .pause__icon--play { display: block; }

/* Figma 193:2: etichetta → LinkedIn 13px, LinkedIn → YouTube 16.6px (fra i glifi).
   Box da 24px per il target WCAG: gli spazi sotto compensano il padding interno dei box */
.social {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.social__label {
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.social__list {
  display: flex;
  gap: 0.4375rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.social__link {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 4px;
}

/* Figma: il glifo LinkedIn poggia sulla linea di base delle maiuscole, YouTube è centrato */
.social__icon--linkedin { transform: translateY(-2.5px); }

/* --- Tablet e mobile verticale: V spostata in alto a destra, velo dal basso --- */

@media (max-aspect-ratio: 1/1) {
  .splash__scrim {
    background:
      linear-gradient(to bottom, rgb(0 0 0 / 0.8), rgb(0 0 0 / 0) 30%),
      linear-gradient(to top, var(--black) 30%, rgb(0 0 0 / 0.55) 60%, rgb(0 0 0 / 0) 100%);
  }

  .splash__v {
    left: 18vw;
    top: -12vh;
    width: max(150vw, 95vh);
  }

  .splash__body { align-self: end; }
}

@media (max-width: 40rem) {
  .splash__title br { display: none; }

  .cta { display: flex; }
  .cta__link { flex: 1 1 auto; padding-inline: 1rem; }
  .cta__link--primary { min-width: 0; }

  .splash__footer { flex-wrap: nowrap; }
}

/* Movimento ridotto: la pressione si conferma senza spostare nulla */
@media (prefers-reduced-motion: reduce) {
  .cta__link:active { transform: none; opacity: 0.85; }
}