/* =================================================================
   /agency — intro cinematografica "busta → lettera → pagina".

   HANDOFF = WINDOW REVEAL (niente scale rasterizzato): la hero REALE è
   renderizzata a piena grandezza dentro .env-frame (clone pixel-identico,
   partial agency/hero-inner) e viene svelata da un `clip-path: inset()` che
   cresce dal rettangolo-lettera al viewport intero. Il testo non è mai scalato
   → sempre nitido e combacia con la pagina; e il clip si apre in modo
   indipendente su X e Y → morph delle proporzioni (landscape → portrait mobile)
   senza crop, senza zoom mostruoso. La "carta" opaca (.env-page) fa solo il
   sollevamento fuori dalla tasca, poi dissolve nella cornice.

   Occlusione robusta cross-browser (bug di compositing Blink): tutti i fratelli
   sovrapposti alla carta/cornice compositi sono promossi con translateZ(0);
   `.env` resta transform-style: flat (vedi gotcha in CLAUDE.md).
   Regia temporale: assets/agency/intro.js
   ================================================================= */
.env-intro {
  position: fixed;
  inset: 0;
  z-index: 3000;
  display: grid;
  place-items: center;
  background: radial-gradient(135% 105% at 50% 42%, #100d0a 0%, #070609 70%);
  overflow: hidden;
}
html:not(.env-playing) .env-intro { display: none; }
html.env-playing { overflow: hidden; }

.env-intro {
  --ew: min(82vw, 470px);
  --eh: calc(var(--ew) * 0.66);
  --pw: calc(var(--ew) * 0.84);
  --ph: calc(var(--ew) * 0.56);
  --paper: #f2ede1;
  --paper-2: #e7e0d0;
  --paper-3: #dbd2be;
  --paper-in: #efe9dc;
  --seam: rgba(120, 104, 74, 0.26);
  --gold: #e0a24a;
  --gold-deep: #a9772b;
  --e-out: cubic-bezier(0.16, 1, 0.3, 1);        /* forte ease-out (arrivo morbido) */
  --e-spring: cubic-bezier(0.34, 1.28, 0.42, 1); /* overshoot (molla) */
  --e-inout: cubic-bezier(0.6, 0, 0.3, 1);
  --e-expand: cubic-bezier(0.22, 1, 0.32, 1);    /* apertura cornice */
  /* grana di carta (SVG turbulence statico, tiled — non animato) */
  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}

.env-scene { position: relative; width: var(--ew); height: var(--eh); }

/* contenitore busta — entra dal basso con anticipazione + settle (keyframe).
   Niente `perspective` qui (starebbe sul contesto e romperebbe lo stacking su
   Blink): la prospettiva è locale all'aletta, via funzione perspective(). */
.env {
  position: absolute;
  inset: 0;
  transform: translateY(96vh);
  transform-style: flat;
  will-change: transform;
}
.env-intro.is-appear .env { animation: env-enter 1.15s var(--e-out) both; }
@keyframes env-enter {
  0%   { transform: translateY(99vh) scale(0.984); }
  60%  { transform: translateY(-1.6%) scale(1.006); } /* leggero overshoot in salita */
  100% { transform: translateY(0) scale(1); }
}

/* grana riutilizzabile su un figlio statico della carta */
.env__grain {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background-image: var(--grain);
  background-size: 140px 140px;
  mix-blend-mode: overlay;
  opacity: 0.07;
}

.env__back,
.env__pocket,
.env__flap { position: absolute; left: 0; width: var(--ew); }

/* parete/interno posteriore (avorio pieno: niente fondo nero). Composito. */
.env__back {
  top: 0;
  height: var(--eh);
  z-index: 0;
  border-radius: 12px;
  overflow: hidden;
  background: radial-gradient(120% 80% at 50% 12%, var(--paper-in), var(--paper-3) 78%);
  box-shadow: 0 48px 80px rgba(0, 0, 0, 0.55), inset 0 2px 6px rgba(120, 104, 74, 0.18);
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* ===== CARTA opaca — SOLO il sollevamento (mai scalata → niente blur) ===== */
.env-page {
  position: absolute;
  left: 50%;
  top: 50%;
  width: var(--pw);
  height: var(--ph);
  z-index: 2;
  border-radius: 12px;
  background: linear-gradient(158deg, #1b1610 0%, #100c08 55%, #0b0906 100%);
  box-shadow:
    0 0 0 1px rgba(224, 162, 74, 0.4) inset,
    0 20px 44px rgba(0, 0, 0, 0.55);
  transform: perspective(1200px) translate(-50%, -46%) rotateX(0deg);
  transform-origin: 50% 50%;
  transition: transform 0.85s var(--e-spring), opacity 0.2s linear;
  will-change: transform;
  backface-visibility: hidden;
}
/* ombra di contatto: si allontana/ammorbidisce mentre la carta si solleva */
.env-page__shadow {
  position: absolute;
  left: 50%;
  bottom: -10%;
  width: 74%;
  height: 16%;
  transform: translateX(-50%) scale(1);
  background: radial-gradient(closest-side, rgba(0, 0, 0, 0.5), transparent);
  filter: blur(10px);
  opacity: 0;
  z-index: -1;
  transition: opacity 0.6s var(--e-out), transform 0.85s var(--e-out);
}
.env-page__face {
  position: absolute;
  inset: 0;
  padding: 8.5%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 0.55em;
  overflow: hidden;
  border-radius: inherit;
}
.env-page__face::before { /* soffusione dorata in alto, come il glow hero */
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(90% 70% at 18% 0%, rgba(224, 162, 74, 0.16), transparent 60%);
}
.epf-eyebrow {
  position: relative;
  font-family: var(--font-mono, monospace);
  font-size: calc(var(--ew) * 0.026);
  letter-spacing: 0.2em;
  text-transform: lowercase;
  color: var(--gold);
  opacity: 0.92;
}
.epf-title {
  position: relative;
  font-family: var(--font-display, sans-serif);
  font-weight: 800;
  font-size: calc(var(--ew) * 0.07);
  line-height: 1.03;
  letter-spacing: -0.02em;
  color: #f4f2ea;
  margin: 0.1em 0;
}
.epf-title em { font-style: normal; color: var(--gold); }
.epf-rule {
  position: relative;
  width: calc(var(--ew) * 0.17);
  height: 2px;
  /* ⚠️ La faccia è un flex column: senza questo il filetto è comprimibile e una
     riga di troppo nel titolo lo schiaccia a 0px — sparisce senza un errore,
     e il piede finisce fuori dal padding. È successo. */
  flex-shrink: 0;
  background: linear-gradient(90deg, var(--gold), transparent);
  margin-top: 0.35em;
}
.epf-foot {
  position: relative;
  font-family: var(--font-mono, monospace);
  font-size: calc(var(--ew) * 0.022);
  letter-spacing: 0.14em;
  color: rgba(244, 242, 234, 0.55);
}
/* luce di bordo calda quando la carta esce dalla tasca */
.env-page__rim {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: radial-gradient(120% 60% at 50% 0%, rgba(224, 162, 74, 0.2), transparent 62%);
  opacity: 0;
  transition: opacity 0.7s var(--e-spring);
}

/* ===== tasca frontale (V) — composita ===== */
.env__pocket {
  top: 0;
  height: var(--eh);
  z-index: 3;
  clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%);
  background: linear-gradient(180deg, var(--paper) 0%, var(--paper-2) 100%);
  border-radius: 12px;
  overflow: hidden;
  transform: translateZ(0);
  backface-visibility: hidden;
}
.env__pocket .env__grain { clip-path: polygon(0 0, 50% 46%, 100% 0, 100% 100%, 0 100%); }
.env__pocket::before,
.env__pocket::after { content: ""; position: absolute; inset: 0; }
.env__pocket::before {
  clip-path: polygon(0 0, 50% 46%, 50% 100%, 0 100%);
  background: linear-gradient(120deg, #f6f1e6, #e9e2d2);
  box-shadow: 1px 0 0 var(--seam);
}
.env__pocket::after {
  clip-path: polygon(100% 0, 50% 46%, 50% 100%, 100% 100%);
  background: linear-gradient(240deg, #ded5c1, #efe8d9);
}

/* ===== aletta — flip 3D (perspective locale), sempre visibile ===== */
.env__flap {
  top: 0;
  height: calc(var(--eh) * 0.6);
  z-index: 6;
  transform-origin: 50% 0;
  transform: perspective(1150px) rotateX(0deg);
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(180deg, #f4efe4 0%, #ece4d3 55%, #e2d9c6 100%);
  transition: transform 0.9s var(--e-inout);
  backface-visibility: visible;
  overflow: hidden;
}
/* riflesso speculare che attraversa l'aletta una volta all'apertura */
.env__sheen {
  position: absolute;
  inset: -10% 0;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  background: linear-gradient(115deg, transparent 42%, rgba(255, 255, 255, 0.3) 50%, transparent 58%);
  transform: translateX(-75%);
  opacity: 0;
  will-change: transform;
}

/* ===== sigillo di ceralacca + rottura (pop, schegge, flash) ===== */
.env__seal {
  position: absolute;
  left: 50%;
  top: calc(var(--eh) * 0.46);
  width: calc(var(--ew) * 0.13);
  height: calc(var(--ew) * 0.13);
  margin: calc(var(--ew) * -0.065) 0 0 calc(var(--ew) * -0.065);
  z-index: 7;
  border-radius: 50%;
  transform-origin: 50% 50%;
  background: radial-gradient(circle at 35% 30%, #f0c079, var(--gold) 45%, var(--gold-deep) 100%);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.35),
    inset 0 0 0 2px rgba(255, 255, 255, 0.18),
    inset 0 -4px 8px rgba(120, 70, 10, 0.5);
  transition: opacity 0.4s var(--e-inout), transform 0.5s var(--e-inout);
}
.env__seal b {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #6d4310;
  font-family: var(--font-display, serif);
  font-weight: 800;
  font-size: calc(var(--ew) * 0.07);
}
.env__seal .shard {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 42%;
  height: 42%;
  margin: -21% 0 0 -21%;
  background: linear-gradient(160deg, var(--gold), var(--gold-deep));
  clip-path: polygon(50% 0, 100% 75%, 12% 100%);
  opacity: 0;
}
.env__flash {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 340%;
  height: 340%;
  transform: translate(-50%, -50%);
  background: radial-gradient(circle, rgba(240, 200, 130, 0.85), transparent 55%);
  opacity: 0;
  pointer-events: none;
}

/* ===== WINDOW REVEAL — la hero reale rivelata da una cornice che si apre ===== */
.env-frame {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: var(--app-vh, 100dvh);
  z-index: 9;
  opacity: 0;
  overflow: hidden;
  background: var(--bg, #0c0b09);
  clip-path: inset(var(--fi-t, 40vh) var(--fi-r, 33vw) var(--fi-b, 40vh) var(--fi-l, 33vw) round 14px);
  transform: translateZ(0);
  will-change: clip-path, opacity;
  backface-visibility: hidden;
}
/* Il clone eredita .ag-hero (layout identico). Usiamo SOLO min-height (come
   l'hero reale): se il contenuto supera il viewport l'altezza la guida il
   contenuto, così il titolo cade alla STESSA Y dell'hero reale. Con height
   fisso = viewport, invece, justify-content:center centrava il contenuto più
   in alto → il titolo scattava in basso all'handoff. Il frame (overflow:hidden)
   ritaglia comunque l'eccedenza sotto la piega, come la pagina reale. */
.env-frame__hero {
  min-height: var(--app-vh, 100dvh);
}

/* ============================ STADI ============================ */
/* 1 · la busta entra dal basso — gestito da @keyframes env-enter su .is-appear */

/* 2 · si apre: pop del sigillo, schegge, flash, aletta che ruota, sheen */
.env-intro.is-open .env__seal {
  opacity: 0;
  transform: translateY(26px) scale(0.5) rotate(24deg);
  transition: opacity 0.4s var(--e-inout) 0.12s, transform 0.55s var(--e-inout) 0.09s;
}
.env-intro.is-open .env__seal b { animation: seal-pop 0.5s var(--e-inout) both; }
.env-intro.is-open .shard { animation: shard-fly 0.55s var(--e-out) 0.05s both; }
.env-intro.is-open .shard.s2 { animation-delay: 0.08s; }
.env-intro.is-open .shard.s3 { animation-delay: 0.11s; }
.env-intro.is-open .env__flash { animation: seal-flash 0.34s ease 0.04s both; }
.env-intro.is-open .env__flap { transform: perspective(1150px) rotateX(166deg); }
.env-intro.is-open .env__sheen { animation: flap-sheen 0.8s var(--e-inout) 0.12s both; }

/* 3 · la carta sale dall'imboccatura (fisica: overshoot + inclinazione) e
   l'aletta passa dietro (z1). Ombra che si allontana, luce di bordo. */
.env-intro.is-out .env__flap { z-index: 1; }
.env-intro.is-out .env-page { transform: perspective(1200px) translate(-50%, -138%) rotateX(9deg); }
.env-intro.is-out .env-page__shadow { opacity: 0.5; transform: translateX(-50%) scale(0.7); }
.env-intro.is-out .env-page__rim { opacity: 1; }

/* 4 · MORPH: la carta dissolve, la cornice appare esattamente sopra e apre il
   clip fino a riempire il viewport (nitido, morph di proporzioni). La busta sfuma. */
.env-intro.is-expand .env-page { opacity: 0; }
.env-intro.is-expand .env-frame {
  opacity: 1;
  clip-path: inset(0 0 0 0 round 0);
  transition: clip-path 0.95s var(--e-expand), opacity 0.2s linear;
}
.env-intro.is-expand .env__back,
.env-intro.is-expand .env__pocket,
.env-intro.is-expand .env__flap,
.env-intro.is-expand .env__seal { opacity: 0; transition: opacity 0.45s ease 0.15s; }

/* 5 · cross-fade finale sull'esterno (la pagina reale, già rivelata sotto) */
.env-intro.is-done { opacity: 0; transition: opacity 0.4s ease; }

/* ============================ KEYFRAMES ============================ */
@keyframes seal-pop {
  0%   { transform: scale(1); }
  40%  { transform: scale(1.12); }
  100% { transform: translateY(26px) scale(0.5) rotate(24deg); opacity: 0; }
}
@keyframes shard-fly {
  0%   { opacity: 1; transform: translate(0, 0) rotate(0deg) scale(0.8); }
  100% { opacity: 0; transform: translate(var(--sx, 0), var(--sy, 40px)) rotate(var(--sr, 40deg)) scale(1); }
}
@keyframes seal-flash {
  0%   { opacity: 0; }
  35%  { opacity: 0.85; }
  100% { opacity: 0; }
}
@keyframes flap-sheen {
  0%   { opacity: 0; transform: translateX(-75%); }
  15%  { opacity: 1; }
  100% { opacity: 0; transform: translateX(75%); }
}
.shard.s1 { --sx: -140%; --sy: 120%; --sr: -50deg; }
.shard.s2 { --sx: 130%;  --sy: 150%; --sr: 60deg; }
.shard.s3 { --sx: -20%;  --sy: 190%; --sr: 12deg; }

/* ============================ REDUCED MOTION ============================ */
@media (prefers-reduced-motion: reduce) {
  .env-intro { display: none !important; }
}