/* ═══════════════════════════════════════════════════════════════════════════
   Portfolio: schede cliccabili e pagina /portfolio/<slug> (components/VetrinaSito)
   Sta in public/ ed è caricato con un <link> dalle due pagine del portfolio:
   non pesa sul resto del sito e non passa da PostCSS (vedi app/portfolio/page.tsx). Prefisso .vw- per la pagina, .portfolio-card-- per le schede.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Scheda che si apre ───────────────────────────────────────────────────── */
.portfolio-card--apribile { position: relative; cursor: pointer; }
.portfolio-card-apri {
  position: absolute; inset: 0; z-index: 3;
  border-radius: inherit;
}
.portfolio-card-apri:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.portfolio-card--apribile:hover .portfolio-card-name h3 { color: var(--accent); }
.portfolio-card--apribile .portfolio-card-external { pointer-events: none; }
/* Toccata: risposta immediata mentre la pagina del progetto arriva. */
.portfolio-card-aprendo {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
  background: rgba(8, 8, 8, 0.72);
  font-family: var(--font-display); font-weight: 600; font-size: 1.05rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
  animation: vw-appare 0.15s ease-out;
}
.portfolio-card-aprendo::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: linear-gradient(90deg, transparent, var(--accent) 45%, #FFE9A8 50%, var(--accent) 55%, transparent);
  animation: vw-corsa-card 1.2s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
.portfolio-card.is-aprendo { border-top-color: var(--accent); }
@keyframes vw-appare { from { opacity: 0; } }
@keyframes vw-corsa-card { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── La pagina: Lead Forge non scorre, scorre il sito mostrato ────────────── */
html:has(.vw) { overflow: hidden; }
body:has(.vw) .lf-footer { display: none; }

.vw {
  --vw-nav: calc(89px + env(safe-area-inset-top));
  --vw-barra: 56px;
  position: fixed; inset: 0; z-index: 50;
  display: flex; flex-direction: column;
  padding-top: var(--vw-nav);
  background: var(--bg);
}

/* ── La barra ─────────────────────────────────────────────────────────────── */
.vw-barra {
  position: relative; flex: none;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px;
  height: var(--vw-barra);
  padding-inline: max(var(--container-px), env(safe-area-inset-left)) max(var(--container-px), env(safe-area-inset-right));
  background:
    repeating-linear-gradient(92deg, rgba(255,255,255,0.014) 0 1px, transparent 1px 4px),
    linear-gradient(180deg, #151515, #0C0C0C);
  border-bottom: 1px solid var(--border-light);
}

.vw-indietro {
  justify-self: start;
  display: inline-flex; align-items: center; gap: 9px;
  height: 36px; padding: 0 14px 0 11px;
  border: 1px solid var(--border-light); border-top-color: var(--border-top);
  border-radius: var(--r-md);
  background: var(--bg-elevated);
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0.05em; text-transform: uppercase; line-height: 1;
  color: var(--text); text-decoration: none;
  transition: border-color 0.15s ease-out, color 0.15s ease-out;
}
.vw-indietro svg { transition: transform 0.15s ease-out; }
.vw-indietro:hover { border-color: var(--border-accent); color: var(--accent); }
.vw-indietro:hover svg { transform: translateX(-3px); }

.vw-titolo {
  display: flex; align-items: baseline; gap: 12px; min-width: 0;
}
.vw-titolo h1 {
  margin: 0;
  font-family: var(--font-display); font-weight: 700; font-size: 1.5rem;
  letter-spacing: 0.035em; text-transform: uppercase; line-height: 1;
  color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.vw-titolo p {
  margin: 0; font-size: 0.8rem; color: var(--text-secondary);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* La spia: ferro spento finché il sito arriva, oro quando è pronto. */
.vw-spia {
  flex: none; align-self: center;
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--metal-mid);
  transition: background 0.4s ease-out, box-shadow 0.4s ease-out;
}
.vw-spia.is-pronta { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow-strong); }

.vw-azioni { justify-self: end; display: flex; align-items: center; gap: 14px; }

.vw-misura {
  display: inline-flex; padding: 3px; gap: 2px;
  border: 1px solid var(--border-light); border-radius: var(--r-md);
  background: var(--bg-elevated);
}
.vw-misura button {
  display: inline-flex; align-items: center; gap: 7px;
  height: 28px; padding: 0 11px;
  border: 0; border-radius: 2px; background: none; cursor: pointer;
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 500;
  color: var(--text-secondary);
  transition: background 0.15s ease-out, color 0.15s ease-out;
}
.vw-misura button:hover { color: var(--text); }
.vw-misura button.is-attivo { background: var(--accent); color: #0A0A0A; }

.vw-vicini { display: inline-flex; align-items: center; gap: 4px; }
.vw-vicini a {
  display: grid; place-items: center; width: 36px; height: 36px;
  border: 1px solid var(--border-light); border-radius: var(--r-md);
  background: var(--bg-elevated); color: var(--text);
  transition: border-color 0.15s ease-out, color 0.15s ease-out;
}
.vw-vicini a:hover { border-color: var(--border-accent); color: var(--accent); }
.vw-conta {
  min-width: 52px; text-align: center;
  font-family: var(--font-display); font-weight: 600; font-size: 1.02rem;
  letter-spacing: 0.06em; color: var(--text-secondary);
  font-variant-numeric: tabular-nums;
}

.vw-barra a:focus-visible,
.vw-barra button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Il filo d'oro sul bordo basso della barra: corre mentre il sito carica. */
.vw-filo {
  position: absolute; left: 0; right: 0; bottom: -1px; height: 2px;
  overflow: hidden; pointer-events: none;
  transition: opacity 0.5s ease-out 0.2s;
}
.vw-filo::before {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--accent) 45%, #FFE9A8 50%, var(--accent) 55%, transparent);
  transform: translateX(-100%);
  animation: vw-corsa 1.5s cubic-bezier(0.45, 0, 0.3, 1) infinite;
}
.vw-filo.is-fermo { opacity: 0; }
.vw-filo.is-fermo::before { animation-play-state: paused; }
@keyframes vw-corsa { to { transform: translateX(100%); } }

/* ── La scena ─────────────────────────────────────────────────────────────── */
.vw-scena { position: relative; flex: 1; min-height: 0; background: #000; }
.vw-cornice { position: absolute; inset: 0; background: #000; }
.vw-cornice iframe {
  position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
  background: #fff;
}
/* La cornice NON parte trasparente: in Safari un iframe di un altro sito a
   opacity 0 non viene animato, e il sito apriva lo scroll scrub "a metà"
   (motore assente, titolo fermo mentre la sezione dopo gli passava sopra)
   fino a un giro su e giù. Nasconderlo spetta alla copertina qui sotto. */

.vw-attesa { position: absolute; inset: 0; z-index: 1; overflow: hidden; background: var(--bg); pointer-events: none; }
.vw-attesa img { object-fit: cover; object-position: top; filter: blur(14px) brightness(0.35); transform: scale(1.06); }
.vw-attesa span {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  font-family: var(--font-display); font-weight: 600; font-size: 1.15rem;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text);
}

/* La sagoma: il sito gira alla misura vera del dispositivo (390×844 o
   1440×900) e il disegno è rimpicciolito con scale() per stare nella scena.
   La larghezza e l'altezza della sagoma le scrive il componente. */
.vw-scena--sagoma {
  display: grid; place-items: center;
  background:
    linear-gradient(rgba(255,255,255,0.028) 1px, transparent 1px) 0 0 / 44px 44px,
    linear-gradient(90deg, rgba(255,255,255,0.028) 1px, transparent 1px) 0 0 / 44px 44px,
    radial-gradient(60% 70% at 50% 40%, rgba(248,177,32,0.07), transparent 70%),
    var(--bg);
}
.vw-scena--sagoma .vw-cornice {
  position: relative; inset: auto; overflow: hidden;
  border: 1px solid var(--border-top); border-radius: 10px;
  box-shadow: 0 0 0 5px #0D0D0D, 0 0 0 6px var(--border-light), 0 30px 70px rgba(0,0,0,0.7);
}
.vw-scena--telefono .vw-cornice { border-radius: 26px; box-shadow: 0 0 0 7px #0D0D0D, 0 0 0 8px var(--border-light), 0 40px 90px rgba(0,0,0,0.7); }
.vw-scena--sagoma .vw-cornice iframe { inset: 0 auto auto 0; transform-origin: 0 0; }

/* Sito che non si può mostrare dentro la pagina */
.vw-fuori {
  position: absolute; inset: 0; overflow: auto;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 24px;
  padding: 32px var(--container-px); text-align: center; background: var(--bg);
}
.vw-fuori-foto {
  position: relative; width: min(760px, 100%); aspect-ratio: 3360 / 1940;
  border: 1px solid var(--border-light); border-top-color: var(--border-top);
  border-radius: var(--r-xl); overflow: hidden;
}
.vw-fuori-foto img { object-fit: cover; }
.vw-fuori p { margin: 0; max-width: 46ch; color: var(--text-secondary); line-height: 1.6; }

/* ── Telefono e tablet ────────────────────────────────────────────────────── */
@media (max-width: 900px) {
  .vw { --vw-barra: 52px; }
  .vw-barra { grid-template-columns: auto 1fr auto; gap: 12px; padding-inline: 14px; }
  .vw-indietro { width: 38px; padding: 0; justify-content: center; }
  .vw-indietro span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vw-titolo { gap: 9px; }
  .vw-titolo h1 { font-size: 1.25rem; }
  .vw-titolo p, .vw-conta { display: none; }
  /* Il selettore resta anche qui, con le sole icone. */
  .vw-misura button { padding: 0 9px; }
  .vw-misura button span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .vw-azioni { gap: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .vw-filo::before { animation: none; transform: none; opacity: 0.5; }
  .vw-indietro svg, .vw-spia { transition: none; }
}