/* ============================================================
   APERTURA — il marchio vettoriale, animato
   Un unico SVG inline: marchio, logotipo e filetto sono tre
   gruppi con id, animati separatamente.
   Sequenza: rotolamento → assestamento → filetto dal centro
             → +0.3s logotipo → triade → freccia
   ============================================================ */

.intro{
  /* occupa esattamente il primo schermo, testata esclusa */
  min-height:calc(100vh - 66px);
  min-height:calc(100svh - 66px);
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  position:relative; text-align:center; padding:3rem 1.5rem 6rem;
}

/* il lockup: il viewBox contiene marchio + logotipo + filetto */
.lockup{
  width:min(560px,78vw,56vh); height:auto; display:block; overflow:visible;
}
#lk-mark,#lk-word{ transform-box:fill-box; }

/* --- il marchio rotola in campo e si assesta -------------- */
#lk-mark{
  transform-origin:center;
  opacity:0;
  animation: roll-in 2400ms linear 250ms forwards;
}
/* Entra da destra e rotola verso sinistra: la rotazione decresce.
   Un solo sorpasso del centro, poi un rientro lungo e smorzato —
   inerzia di un corpo pesante, non ritorno elastico. */
@keyframes roll-in{
  0%   { opacity:0; transform:translateX(560%) rotate(760deg);
         animation-timing-function:cubic-bezier(.18,.58,.28,.97) }   /* decelera arrivando */
  40%  { opacity:1 }
  68%  { transform:translateX(-5%) rotate(-4deg);
         animation-timing-function:cubic-bezier(.45,0,.22,1) }       /* punto morto, poi deriva */
  100% { opacity:1; transform:translateX(0) rotate(0) }
}

/* --- filetto e triade: stesso blocco, stessa larghezza ---- */
.intro-foot{
  display:flex; flex-direction:column; align-items:stretch;
  width:max-content; max-width:92vw; margin:1.5rem auto 0;
}
/* il filetto prende la larghezza della triade, che è l'elemento più largo */
.intro-rule{
  width:100%; height:1.5px; margin:0 0 1.15rem;
  background:#C18947;
  transform:scaleX(0); transform-origin:center;
  animation: rule-open 700ms cubic-bezier(.26,.82,.28,1) 2750ms forwards;
}
@keyframes rule-open{ to{ transform:scaleX(1) } }

/* --- il logotipo, 0,3s dopo il filetto -------------------- */
#lk-word{
  opacity:0; transform:translateY(2.2%);
  animation: rise-svg 800ms cubic-bezier(.22,.82,.3,1) 3750ms forwards;
}
@keyframes rise-svg{ to{ opacity:1; transform:translateY(0) } }

/* --- la triade, subito dopo ------------------------------- */
.intro-triad{
  margin:0; opacity:0; transform:translateY(8px);
  font-size:clamp(1.02rem,2.8vw,1.72rem);
  /* spaziatura ampia: resta grande ma cede la precedenza al logotipo */
  letter-spacing:.17em; text-indent:.17em;   /* l'indent compensa lo spazio finale */
  white-space:nowrap; color:#C18947;
  animation: rise 760ms cubic-bezier(.22,.8,.3,1) 4120ms forwards;
}
.intro-triad .sep{ margin:0 .55em; }
@media(max-width:430px){
  .intro-triad{ font-size:.82rem; letter-spacing:.13em; text-indent:.13em }
  .intro-triad .sep{ margin:0 .42em }
}
@keyframes rise{ to{ opacity:1; transform:translateY(0) } }

/* --- invito a scorrere ------------------------------------ */
.intro-scroll{
  /* niente translateX qui: l'animazione sovrascriverebbe la centratura */
  position:absolute; left:0; right:0; margin:0 auto; width:max-content;
  bottom:clamp(1.8rem,4.5vh,3rem);
  display:flex; flex-direction:column; align-items:center; gap:.5rem;
  text-decoration:none;
  opacity:0; animation: rise 800ms ease 4600ms forwards; transition:opacity .4s;
}
.intro-scroll span{
  font-size:.64rem; letter-spacing:.3em; text-transform:uppercase; color:var(--faint);
}
.intro-scroll svg{width:16px;height:25px;display:block;animation:nudge 2.6s ease-in-out 5.7s infinite}
@keyframes nudge{0%,100%{transform:translateY(0)}50%{transform:translateY(6px)}}
body.scrolled .intro-scroll{opacity:0;pointer-events:none}

/* --- già vista in questa sessione: nessuna attesa ---------- */
body.seen #lk-mark,
body.seen #lk-word,
body.seen .intro-rule,
body.seen .intro-triad,
body.seen .intro-scroll{animation:none;opacity:1;transform:none}

/* --- chi ha chiesto meno movimento ------------------------- */
@media (prefers-reduced-motion: reduce){
  #lk-mark,#lk-word,.intro-rule,.intro-triad,.intro-scroll{
    animation:none !important; opacity:1 !important; transform:none !important;
  }
  .intro-scroll svg{animation:none !important}
}

/* ============================================================
   VARIANTE SU FONDO NERO
   L'apertura cita il biglietto da visita: nero opaco e rame.
   Il resto del sito resta bianco: lo stacco è voluto.
   ============================================================ */

.intro{
  background:#0D0D0F;
  color:#f3f1ee;
  margin-top:-66px;          /* passa sotto la testata trasparente */
  padding-top:calc(3rem + 66px);
  min-height:100vh; min-height:100svh;
}

/* il rame si schiarisce: su nero una tinta calda media va in bruno */
/* rame pieno: il valore della stampa, CMYK 24/46/72/0 */
.intro #cu stop{stop-color:#C18947}
.intro #cg stop{stop-color:#C18947}

.intro .intro-triad{color:#C18947}
.intro .intro-rule{background:#C18947}
.intro-scroll span{color:#8d8a86}

/* un alone caldo appena percettibile dietro al marchio */
.intro::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:radial-gradient(58% 48% at 50% 42%, rgba(217,164,105,.11), transparent 70%);
}
/* .intro-scroll resta absolute: non va mai messo position:relative */
.lockup,.intro-foot{z-index:1;position:relative}
.intro-scroll{z-index:1}

/* --- testata trasparente finché si è sull'apertura -------- */
body.has-hero .site-head{
  background:transparent; border-bottom-color:transparent;
  transition:background .35s ease, border-color .35s ease;
}
body.has-hero .site-head .brand{color:#f3f1ee}
body.has-hero .site-head .nav a{color:#9b9893}
body.has-hero .site-head .nav a:hover{color:#fff}
body.has-hero .site-head .lang a[aria-current]{color:#fff}

body.has-hero.scrolled .site-head{
  background:rgba(255,254,252,.94); border-bottom-color:var(--line);
}
body.has-hero.scrolled .site-head .brand{color:var(--ink)}
body.has-hero.scrolled .site-head .nav a{color:var(--mute)}
body.has-hero.scrolled .site-head .nav a:hover{color:var(--ink)}
body.has-hero.scrolled .site-head .lang a[aria-current]{color:var(--ink)}