/* =================================================================
   overlay-page.css — pagina full-screen riutilizzabile (overlay).
   Componente estratto dalla pagina-progetto di /portraits. Palette scura
   calda di default, sovrascrivibile per-istanza via --ov-* (inline dal
   partial overlay-page.html). Le classi sono generiche (.ov-*): niente
   dipendenze dalla pagina che la monta, solo le --tb-* condivise (font,
   ease, padding) con fallback.

   Richiede il reset per-pagina `a { color: inherit; text-decoration: none; }`
   già presente nei CSS delle sezioni che montano la top bar.
   ================================================================= */
.ov {
  --ov-bg: #0c0a09;
  --ov-ink: #ece6dd;
  --ov-mut: rgba(236, 230, 221, 0.62);
  --ov-accent: #d0673a;
  --ov-line: rgba(236, 230, 221, 0.16);
  --ov-panel: rgba(236, 230, 221, 0.04);
  --ov-gradient: radial-gradient(115% 90% at 100% 100%,
    rgba(208, 103, 58, 0.26), rgba(208, 103, 58, 0) 55%);
  position: fixed; inset: 0;
  z-index: 90;
  background: var(--ov-bg);
  color: var(--ov-ink);
  opacity: 0; visibility: hidden; pointer-events: none;
}
.ov.is-open { opacity: 1; visibility: visible; pointer-events: auto; }
/* bagliore caldo (o gradiente custom) */
.ov::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: var(--ov-gradient);
}

/* ---- track a scorrimento: intro → colonne ---- */
.ov-scroll {
  position: absolute; inset: 0;
  display: flex; align-items: stretch;
  gap: clamp(16px, 1.8vw, 30px);
  overflow-x: auto; overflow-y: hidden;
  padding: clamp(92px, 13vh, 132px) var(--tb-pad, 2rem) clamp(28px, 5vh, 52px);
  scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
}
.ov-scroll::-webkit-scrollbar { display: none; }

/* ---- blocco intro (lead | meta) ---- */
.ov-intro {
  flex: 0 0 auto;
  width: min(58vw, 780px); height: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(148px, 220px);
  align-content: center; align-items: start;
  gap: clamp(28px, 4vw, 72px);
}
.ov-lead { display: flex; flex-direction: column; align-items: flex-start; }
.ov-title {
  margin: 0 0 clamp(18px, 2.4vw, 30px);
  font-family: var(--tb-sans, sans-serif); font-weight: 600;
  font-size: clamp(42px, 5.6vw, 88px); line-height: 0.97; letter-spacing: -0.03em;
  color: var(--ov-ink);
}
.ov-desc {
  margin: 0; max-width: 44ch;
  font-family: var(--tb-body, system-ui, sans-serif);
  font-size: clamp(15px, 1.15vw, 18px); line-height: 1.62; color: var(--ov-mut);
}
/* Pulsante CTA della prima colonna — stesso pattern di "Il mio approccio" (/dev):
   il pallino (colore --ov-accent del pulsante) si espande a riempire, entra la
   freccia da sinistra, la label si inverte. */
.ov-launch {
  position: relative; overflow: hidden; isolation: isolate;
  display: inline-flex; align-items: center;
  margin-top: clamp(28px, 4vh, 46px);
  height: 52px; padding: 0 26px 0 47px; border-radius: 100px;
  background: #ffffff; color: #141414;
  font-family: var(--tb-mono, monospace); font-size: 12.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  transition: transform 0.35s var(--tb-ease, ease);
}
.ov-launch:hover { transform: translateY(-2px); }
.ov-launch__label { position: relative; z-index: 1; transition: color 0.3s var(--tb-ease, ease); }
.ov-launch__dot {
  position: absolute; z-index: 0; top: 50%; left: 26px;
  width: 9px; height: 9px; margin-top: -4.5px; border-radius: 50%; background: var(--ov-accent);
  transform: scale(1); transform-origin: center; transition: transform 0.7s var(--tb-ease, ease);
}
.ov-launch__arrow {
  position: absolute; z-index: 2; top: 50%; left: 22px;
  width: 16px; height: 16px; margin-top: -8px; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; opacity: 0; transform: translateX(-42px);
  transition: transform 0.45s var(--tb-ease, ease), opacity 0.3s var(--tb-ease, ease);
}
.ov-launch__arrow svg { display: block; }
.ov-launch:hover .ov-launch__dot { transform: scale(70); }
.ov-launch:hover .ov-launch__label { color: #fff; }
.ov-launch:hover .ov-launch__arrow { opacity: 1; transform: translateX(0); }

.ov-meta { display: flex; flex-direction: column; gap: clamp(26px, 4vh, 44px); }
.ov-label {
  margin: 0 0 14px;
  font-family: var(--tb-mono, monospace); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ov-accent);
}
.ov-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ov-list li {
  font-family: var(--tb-sans, sans-serif); font-weight: 500;
  font-size: clamp(16px, 1.25vw, 20px); line-height: 1.25; color: var(--ov-ink);
}
.ov-links a { color: var(--ov-ink); transition: color 0.25s var(--tb-ease, ease); }
.ov-links a:hover { color: var(--ov-accent); }

/* ---- tilt 3D all'hover (colonne testo/immagine, gestito da overlay-page.js) ----
   Transizione lenta di ritorno a piatto; durante il movimento (.is-tilting)
   niente transition, per seguire il cursore senza ritardo. */
.ov-col--text, .ov-col--image {
  --ov-tilt-x: 0deg; --ov-tilt-y: 0deg;
  transform: perspective(1000px) rotateX(var(--ov-tilt-x)) rotateY(var(--ov-tilt-y));
  transition: transform .5s var(--tb-ease, ease);
  will-change: transform;
}
.ov-col--text.is-tilting, .ov-col--image.is-tilting { transition: transform .1s linear; }

/* ---- colonna IMMAGINE: rapporto nativo, piena altezza, nessun crop ---- */
.ov-col--image {
  flex: 0 0 auto; margin: 0; height: 100%;
  border-radius: 14px; overflow: hidden; background: var(--ov-panel);
}
.ov-col--image img {
  display: block; width: auto; height: 100%; max-width: none; object-fit: contain;
}

/* ---- colonna TESTO: box 2:3 rigido (rimpiazza un'immagine) ---- */
.ov-col--text {
  --ov-card-h: min(70vh, 640px);
  flex: 0 0 auto; align-self: center;
  height: var(--ov-card-h); aspect-ratio: 2 / 3; box-sizing: border-box;
  display: flex; flex-direction: column;
  padding: clamp(22px, 2.4vw, 40px);
  border-radius: 16px; border: 1px solid var(--ov-line); background: var(--ov-panel);
  overflow: hidden;   /* box rigido: testo che eccede viene troncato */
}
.ov-col-kicker {
  margin: 0;
  font-family: var(--tb-mono, monospace); font-size: 12px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.08em; color: var(--ov-accent);
}
.ov-col-heading {
  margin: auto 0 clamp(14px, 1.4vw, 20px);   /* spinto in basso: kicker su, titolo giù */
  font-family: var(--tb-sans, sans-serif); font-weight: 600;
  font-size: clamp(24px, 2.4vw, 40px); line-height: 1.02; letter-spacing: -0.02em;
  color: var(--ov-ink);
}
.ov-col-body {
  font-family: var(--tb-body, system-ui, sans-serif);
  font-size: clamp(14px, 1.05vw, 17px); line-height: 1.55; color: var(--ov-mut);
}
.ov-col-body p { margin: 0 0 0.8em; }
.ov-col-body p:last-child { margin-bottom: 0; }

/* ---- colonna TESTO con immagine full-bleed + vetro frosted sotto il testo ----
   NB: NON si usa backdrop-filter. Su Chromium `backdrop-filter` + `mask` lampeggia
   quando l'elemento entra/esce da una transizione (la mask "cade" per un frame).
   Essendo lo sfondo un'immagine STATICA, il vetro è una COPIA sfocata dell'immagine
   (filter: blur, non buggato) + una tinta, sfumata verso l'alto con una mask a
   gradiente (come /portraits .pt2-intro-blur, ma senza backdrop-filter). */
.ov-col--text.has-image {
  position: relative;
  padding: 0;                                /* full-bleed: il padding va sul veil */
  background: var(--ov-panel);               /* fallback dietro l'immagine */
}
.ov-col-img {
  position: absolute; inset: 0; z-index: 0;
  width: 100%; height: 100%; object-fit: cover;
}
/* wrapper che scorre (testo + vetro come UN blocco): non ha né mask né filter,
   quindi la sua transizione non tocca mai l'elemento mascherato → niente flicker. */
.ov-col-veil {
  position: absolute; inset: 0; z-index: 1;
  display: flex; flex-direction: column; justify-content: flex-end;
  box-sizing: border-box; padding: clamp(22px, 2.4vw, 40px);
}
/* vetro: immagine sfocata (filter) + tinta, mascherate col gradiente (statico) */
.ov-col-frost {
  position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(to top, #000 0%, #000 46%, transparent 80%);
          mask-image: linear-gradient(to top, #000 0%, #000 46%, transparent 80%);
}
.ov-col-frost__img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  transform: scale(1.14);                    /* nasconde il fringe del blur oltre il bordo */
  filter: blur(22px);
}
.ov-col-frost::after {                        /* tinta per il contrasto del testo */
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top,
    rgba(var(--ov-frost-rgb, 10, 8, 24), 0.66) 0%,
    rgba(var(--ov-frost-rgb, 10, 8, 24), 0.34) 45%,
    rgba(var(--ov-frost-rgb, 10, 8, 24), 0) 78%);
}
.ov-col-veil > .ov-col-kicker,
.ov-col-veil > .ov-col-heading,
.ov-col-veil > .ov-col-body { position: relative; z-index: 1; }
.ov-col-veil > .ov-col-kicker { margin: 0 0 8px; }
.ov-col-veil > .ov-col-heading { margin-top: 0; }   /* niente push: testo tutto in basso */

/* all'hover (oltre al tilt): il veil (testo + vetro insieme) SCORRE verso il basso
   e sparisce oltre il bordo inferiore (la card, overflow:hidden, fa da maschera);
   al termine dell'hover risale riapparendo dal basso. Un solo elemento animato
   (il veil, senza mask/filter) → nessun flicker. Solo device con mouse. */
@media (hover: hover) and (pointer: fine) {
  .ov-col-veil { transition: transform 0.55s var(--tb-ease, ease); will-change: transform; }
  .ov-col--text.has-image:hover .ov-col-veil { transform: translateY(var(--ov-card-h)); }
}
@media (hover: none), (pointer: coarse) {
  .ov-col-veil { transition: transform 0.55s var(--tb-ease, ease); will-change: transform; }
  .ov-col--text.has-image.is-veiled .ov-col-veil { transform: translateY(var(--ov-card-h)); }
}

/* ---- indicatore "scorri" ---- */
.ov-hint {
  position: absolute; right: clamp(22px, 4vw, 40px); bottom: clamp(18px, 4vh, 32px); z-index: 93;
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--tb-mono, monospace); font-size: 11px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.12em; color: rgba(236, 230, 221, 0.6);
  pointer-events: none;
  transition: opacity 0.45s var(--tb-ease, ease), transform 0.45s var(--tb-ease, ease);
}
.ov-hint.is-hidden { opacity: 0; transform: translateX(8px); }
.ov-hint__arrow { font-family: system-ui, sans-serif; font-size: 14px; animation: ovHintNudge 1.6s var(--tb-ease, ease) infinite; }
@keyframes ovHintNudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(4px); } }

/* ---- pulsante Indietro (centrato nella fascia della top bar) ---- */
.ov-back {
  position: fixed; top: clamp(14px, 2vw, 24px); left: 50%; z-index: 105;
  display: inline-flex; align-items: center; gap: 9px;
  height: 44px; padding: 0 20px; border: 0; cursor: pointer; border-radius: 100px;
  background: #ffffff; color: #141414;
  font-family: var(--tb-mono, monospace); font-size: 12.5px; font-weight: 500;
  text-transform: uppercase; letter-spacing: 0.06em;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateX(-50%) translateY(-10px);
  transition: opacity 0.45s var(--tb-ease, ease), transform 0.45s var(--tb-ease, ease), visibility 0.45s, background 0.3s;
}
.ov-back.is-on { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); }
.ov-back:hover { background: #f0ece6; }
.ov-back:hover .ov-back__arrow { transform: translateX(-3px); }
.ov-back__arrow { display: inline-flex; transition: transform 0.35s var(--tb-ease, ease); }

/* mobile: pulsante Indietro circolare (solo freccia), allineato alla top bar;
   la posizione orizzontale (punto medio tra intestazione e menu) è messa da JS. */
@media (max-width: 600px) {
  .ov-back {
    top: 12px; width: 40px; height: 40px; padding: 0; gap: 0;
    border-radius: 50%; justify-content: center;
  }
  .ov-back__label { display: none; }
}

/* ---- cerchio morph (creato dal JS: il trigger si espande a coprire il viewport) ---- */
.ov-morph { position: fixed; z-index: 210; border-radius: 50%; transform-origin: center center; will-change: transform; pointer-events: none; }

/* ---- blocco scroll pagina sotto l'overlay ---- */
body.ov-noscroll { overflow: hidden; }

/* ---- top bar leggibile sopra l'overlay scuro (vince su .nav--light) ---- */
html.ov-open .nav,
html.ov-open .nav.nav--light {
  --tb-pill: rgba(255, 255, 255, 0.10);
  --tb-pill-hover: rgba(255, 255, 255, 0.16);
  --tb-fg: #f2f2f2;
  --tb-fg-dim: rgba(255, 255, 255, 0.5);
  --tb-cta-bg: #f2f2f2;
  --tb-cta-fg: #0a0a0a;
  --tb-card: #191512;
  --tb-card-fg: #f2f2f2;
  --tb-card-muted: rgba(255, 255, 255, 0.5);
  --tb-link-hover: #e0854f;
}

/* ---- mobile: overlay verticale (colonne impilate) ---- */
@media (max-width: 820px) {
  .ov-scroll {
    flex-direction: column; align-items: stretch;
    overflow-x: hidden; overflow-y: auto;
    gap: 18px; padding-top: clamp(84px, 14vh, 112px);
  }
  .ov-intro { width: 100%; height: auto; grid-template-columns: 1fr; gap: 30px; margin-bottom: 8px; }
  .ov-col--image { width: 100%; height: auto; }
  .ov-col--image img { width: 100%; height: auto; max-width: 100%; }
  .ov-col--text { width: 100%; height: auto; align-self: stretch; }
  .ov-hint { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ov-hint__arrow { animation: none; }
}