/* ═══════════════════════════════════════════════════════
   Laio - Patch 1
   Logo "LAIO" e menù mobile a schermo intero.
   ═══════════════════════════════════════════════════════ */

/* ─── Logo ───────────────────────────────────────────── */
/* Il tema stampa il nome del sito. Qui lo nascondiamo e mettiamo LAIO. */
.nav .brand{font-size:0;line-height:1}
.nav .brand::after{
  content:'LAIO';
  font-family:var(--display);
  font-variation-settings:'wdth' 120,'wght' 800;
  font-size:.9rem;
  letter-spacing:.02em;
}

/* ─── Hamburger ──────────────────────────────────────── */
.nav-toggle{
  display:none;
  width:2.4rem;height:2.4rem;flex:none;
  border:0;background:transparent;cursor:pointer;padding:0;
  position:relative;border-radius:999px;
  transition:background .25s ease;
}
.nav-toggle:hover{background:var(--paper-2)}
.nav-toggle span{
  position:absolute;left:50%;top:50%;width:18px;height:1.5px;background:var(--ink);
  transition:transform .35s var(--ease),background .25s ease;
}
.nav-toggle span:first-child{transform:translate(-50%,-4px)}
.nav-toggle span:last-child{transform:translate(-50%,4px)}

/* ─── Pannello a schermo intero ──────────────────────── */
/* Sta fuori dalla pill: transform e backdrop-filter renderebbero la pill
   il riferimento del position:fixed, ancorandoci il pannello dentro. */
.laio-menu{
  position:fixed;inset:0;z-index:150;
  display:flex;flex-direction:column;justify-content:center;align-items:center;
  text-align:center;
  gap:.25rem;
  padding:clamp(4rem,14vh,7rem) var(--pad);
  background:var(--ink);
  opacity:0;visibility:hidden;pointer-events:none;
  transition:opacity .35s ease,visibility .35s ease;
}
.laio-menu.is-open{opacity:1;visibility:visible;pointer-events:auto}
.laio-menu a{
  display:block;text-decoration:none;
  font-family:var(--display);
  font-variation-settings:'wdth' 108,'wght' 800;
  font-size:clamp(2.2rem,11vw,3.5rem);
  letter-spacing:-.03em;line-height:1.05;text-transform:none;
  color:var(--paper);background:transparent;
  padding:.35rem 0;border-radius:0;
  opacity:0;transform:translateY(14px);
  transition:opacity .4s var(--ease),transform .4s var(--ease),color .25s ease;
}
.laio-menu.is-open a{opacity:1;transform:none}
.laio-menu.is-open a:nth-child(1){transition-delay:.06s}
.laio-menu.is-open a:nth-child(2){transition-delay:.12s}
.laio-menu.is-open a:nth-child(3){transition-delay:.18s}
.laio-menu.is-open a:nth-child(4){transition-delay:.24s}
.laio-menu a:hover,.laio-menu a:active,.laio-menu .cta{color:var(--signal);background:transparent}

@media(min-width:900px){
  .laio-menu{display:none}
}

@media(max-width:899px){
  .nav{gap:.5rem;padding-right:.35rem}
  .nav-toggle{display:block;z-index:200}
  .nav > a:not(.brand){display:none}

  body.nav-lock{overflow:hidden}
  /* La pill crea un contesto di impilamento: il pulsante dentro non può
     superare il pannello da solo, va alzata l'intera pill. */
  body.nav-lock .nav{z-index:200}
  body.nav-lock .nav{
    background:transparent;border-color:transparent;box-shadow:none;
    backdrop-filter:none;-webkit-backdrop-filter:none;
  }
  body.nav-lock .nav .brand::after{color:var(--paper)}
  body.nav-lock .nav-toggle span{background:var(--paper)}
  body.nav-lock .nav-toggle:hover{background:rgba(255,255,255,.1)}
  body.nav-lock .nav-toggle span:first-child{transform:translate(-50%,0) rotate(45deg)}
  body.nav-lock .nav-toggle span:last-child{transform:translate(-50%,0) rotate(-45deg)}
  body.nav-lock .mailto{opacity:0;pointer-events:none}
}

/* ─── Frame live: stato di attesa e resa desktop ─────── */
.stage{position:relative;overflow:hidden}

/* Il sito viene disegnato a 1920x1200 e rimpicciolito in scala dal JS:
   così si vede il layout desktop, non quello tablet. */
.stage iframe.laio-frame-desktop{
  position:absolute;top:0;left:0;
  width:1920px;height:1200px;
  max-width:none;
  border:0;
  transform-origin:0 0;
}
.laio-wait{
  position:absolute;inset:0;z-index:2;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9rem;
  background:var(--paper-2);
  font-family:var(--util);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--mute);
  transition:opacity .4s ease;
}
.laio-wait.is-done{opacity:0;pointer-events:none}

/* Il frame è largo 1920 e viene ridotto con una scala: il sito dentro
   monta il layout desktop invece di quello tablet. */
.stage{overflow:hidden}
.stage iframe.laio-frame-desktop{
  position:absolute;top:0;left:0;
  border:0;
  transform-origin:top left;
  will-change:transform;
}
.laio-wait i{
  width:26px;height:26px;border-radius:50%;
  border:1.5px solid var(--line);border-top-color:var(--signal);
  animation:laio-spin .8s linear infinite;
}
@keyframes laio-spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .laio-wait i{animation:none;border-top-color:var(--line)}
  .laio-menu a{opacity:1;transform:none}
}


/* ─── Filtri: aggiornamento sul posto ─────────────────── */
#laio-main.is-caricamento{opacity:.45;transition:opacity .2s ease}
#laio-main{transition:opacity .3s ease}