/* SAMU AI Agency — v2 cinematografica
   Palette oro-su-scuro dal logo. Un solo accento. */

@import url('https://api.fontshare.com/v2/css?f[]=clash-display@500,600,700&f[]=general-sans@400,500&display=swap');

:root{
  --bg:        #070604;
  --surface:   #14110C;
  --ink:       #F4EFE6;
  --muted:     #A79C86;
  --gold:      #C9A24B;
  --gold-soft: #E6C878;
  --line:      #2A2419;
  --display:   'Clash Display', sans-serif;
  --text:      'General Sans', sans-serif;
}

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:auto; background:var(--bg); }   /* mai bianco in overscroll/notch, anche sulle pagine demo */
html.lenis, html.lenis body{ height:auto; }
.lenis.lenis-smooth{ scroll-behavior:auto !important; }

body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--text);
  overflow-x:hidden;
}

/* ---------- sfondo ---------- */
#fx{ position:fixed; inset:0; width:100%; height:100%; z-index:0; }
body.no-fx #fx{ display:none; }
body.no-fx{ background:radial-gradient(ellipse 90% 70% at 70% 40%, #14110C 0%, #070604 70%); }

.vignette{ position:fixed; inset:0; pointer-events:none; z-index:1;
  background:radial-gradient(ellipse 120% 90% at 50% 45%, transparent 55%, rgba(0,0,0,.55) 100%); }
.grain{ position:fixed; inset:0; pointer-events:none; opacity:.05; z-index:2;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); }

/* ---------- topbar ---------- */
.topbar{
  position:fixed; top:0; left:0; right:0; z-index:20;
  display:flex; justify-content:space-between; align-items:center;
  padding:1.6rem 4vw;
}
.wordmark{ font-family:var(--display); font-weight:600; letter-spacing:.35em; font-size:.85rem; }
.wordmark span{ color:var(--gold); }
.pill{
  font-size:.85rem; letter-spacing:.06em; color:var(--gold-soft); text-decoration:none;
  border:1px solid rgba(201,162,75,.4); border-radius:100px; padding:.55rem 1.3rem;
  transition:border-color .3s, background .3s;
}
.pill:hover{ border-color:var(--gold-soft); background:rgba(201,162,75,.08); }

/* ---------- capitoli ---------- */
.chapter{
  position:relative; z-index:5;
  min-height:100dvh;
  display:flex; align-items:center;
  padding:14dvh 0;
}
.wrap{ width:100%; max-width:1400px; margin:0 auto; padding:0 4vw; }
.wrap.narrow{ max-width:900px; }

.eyebrow{
  font-size:.75rem; letter-spacing:.32em; text-transform:uppercase;
  color:var(--muted); margin-bottom:1.4rem;
}
h1, h2{
  font-family:var(--display); font-weight:600;
  font-size:clamp(2.6rem, 6.5vw, 6rem);
  line-height:1.03; letter-spacing:-.02em;
}
h1 em, h2 em{ font-style:normal; color:var(--gold-soft); }
h2.big{ font-size:clamp(3rem, 8vw, 7.5rem); }
.sub{
  margin-top:1.6rem; font-size:clamp(1rem, 1.3vw, 1.15rem);
  color:var(--muted); line-height:1.6; max-width:44ch;
}
.cta{
  margin-top:2.6rem; display:inline-flex; align-items:center; width:fit-content;
  font-family:var(--display); font-weight:500; font-size:1rem; letter-spacing:.04em;
  color:#0B0A08; background:linear-gradient(135deg, var(--gold-soft), var(--gold));
  padding:1.05rem 2.2rem; border-radius:100px; text-decoration:none;
  transition:transform .35s cubic-bezier(.16,1,.3,1), box-shadow .35s;
}
.cta:hover{ transform:translateY(-2px); box-shadow:0 12px 40px -8px rgba(201,162,75,.45); }

/* ---------- hero: la copy a sinistra, il vuoto coi link a destra ---------- */
.hero-grid{ display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr); align-items:center; gap:2rem; }
.hero-copy{ position:relative; z-index:6; }

.hero-nav{ display:flex; flex-direction:column; gap:1.4rem; align-items:center; justify-self:center; margin-top:30vh; }
/* i link riposano quasi invisibili dentro i vuoti: si accendono al passaggio */
.void-card{
  position:relative;
  font-family:var(--display); font-weight:500; font-size:.82rem; letter-spacing:.2em;
  text-transform:uppercase; color:rgba(230,200,120,.42); text-decoration:none;
  padding:.75rem 1.6rem; border-radius:100px;
  border:1px solid transparent; background:transparent;
  transition:border-color .45s, color .45s, background .45s;
  white-space:nowrap;
}
.void-card:hover{ border-color:rgba(201,162,75,.55); color:var(--ink); background:rgba(7,6,4,.45); }
.void-card span{
  position:absolute; left:50%; top:50%; width:6px; height:6px; border-radius:50%;
  transform:translate(-50%,-50%) scale(0); background:var(--gold-soft); opacity:0;
}

/* ---------- capitoli centrali ---------- */
.mid .wrap{ text-align:left; }

/* ---------- demo frames ---------- */
.demo .wrap{ display:flex; flex-direction:column; }
.frame-laptop{
  margin-top:3rem; width:min(860px, 92%);
  border:1px solid var(--line); border-radius:16px;
  background:#0E0C09; padding:.7rem .7rem 1rem;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 80px -40px rgba(201,162,75,.25);
}
.frame-laptop figcaption{ display:flex; gap:6px; padding:0 .3rem .6rem; }
.frame-laptop figcaption i{ width:8px; height:8px; border-radius:50%; background:var(--line); }
.frame-laptop video{ width:100%; aspect-ratio:16/9; object-fit:cover; display:block; border-radius:8px; background:#000; }
.frame-phone{
  width:min(240px, 60%);
  border:1px solid var(--line); border-radius:36px;
  background:#0E0C09; padding:.55rem;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.8), 0 0 80px -40px rgba(201,162,75,.25);
}
.frame-phone video{ width:100%; aspect-ratio:402/812; object-fit:cover; display:block; border-radius:28px; background:#000; }
.duo{ display:flex; align-items:flex-end; gap:2.4rem; margin-top:3rem; }
.duo .frame-laptop{ margin-top:0; flex:1; }

/* tastino "schermo intero" sulle cornici video */
.frame-laptop, .frame-phone{ position:relative; }
.fs-btn{
  position:absolute; right:.9rem; bottom:1.2rem; z-index:3;
  display:flex; align-items:center; gap:.45rem;
  padding:.45rem .8rem; border-radius:999px; cursor:pointer;
  /* colori FISSI, non tematici: il tastino vive sempre sulla cornice scura del video
     (coi temi chiari --gold-soft diventa bronzo scuro su nero → spariva) */
  border:1px solid rgba(230,200,120,.55); background:rgba(7,6,4,.85);
  color:#E6C878; backdrop-filter:blur(6px);
  font-family:var(--text); font-size:.72rem; font-weight:500; letter-spacing:.04em;
  transition:border-color .3s, background .3s;
}
.fs-btn svg{ width:14px; height:14px; }
.fs-btn:hover{ border-color:#E6C878; background:rgba(7,6,4,.95); }
.frame-phone .fs-btn{ right:50%; transform:translateX(50%); bottom:1rem; }
.frame-phone .fs-btn span{ display:none; }   /* sul telefono basta l'icona */
/* fullscreen NATIVO (desktop): il video va SEMPRE contenuto, mai tagliato.
   Senza, un video verticale (telefono, 402×812) veniva "coverato" e zoomato oltre lo schermo.
   Regole separate: se il browser non conosce un selettore scarta l'intera regola. */
video:fullscreen{ object-fit:contain; background:#000; }
video:-webkit-full-screen{ object-fit:contain; background:#000; }
/* piano B: overlay a tutto schermo quando il fullscreen vero è bloccato */
.fs-overlay{ position:fixed; inset:0; z-index:200; background:#000;
  display:flex; align-items:center; justify-content:center; }
.fs-overlay video{ width:100%; height:100%; object-fit:contain; }
.fs-overlay-close{ position:absolute; top:1rem; right:1rem; width:44px; height:44px; z-index:2;
  border-radius:50%; border:1px solid rgba(201,162,75,.5); background:rgba(7,6,4,.7);
  color:#E6C878; font-size:1.5rem; line-height:1; cursor:pointer; }   /* fisso: overlay sempre nero */
/* invito a girare il telefono: solo mobile in verticale, sparisce appena si ruota */
.fs-overlay-hint{ display:none; position:absolute; left:50%; bottom:12%; transform:translateX(-50%);
  align-items:center; gap:.5rem; padding:.6rem 1.1rem; border-radius:999px;
  background:rgba(7,6,4,.82); border:1px solid rgba(201,162,75,.4); color:#E6C878;
  font-family:var(--text); font-size:.85rem; letter-spacing:.03em; white-space:nowrap;
  animation:fsHintPulse 2.4s ease-in-out infinite; }
.fs-overlay-hint svg{ width:18px; height:18px; }
@keyframes fsHintPulse{ 0%,100%{ opacity:.65; } 50%{ opacity:1; } }
@media (max-width:1024px) and (orientation:portrait){ .fs-overlay-hint{ display:flex; } }

/* ---------- i neuroni: i link vivono sul cervello ---------- */
#neurons{
  position:fixed; inset:0; z-index:6; pointer-events:none;
  opacity:0; visibility:hidden;
}
.neuron{
  position:absolute; left:0; top:0;
  display:flex; align-items:center; gap:.6rem;
  pointer-events:auto; text-decoration:none; cursor:pointer;
  transform:translate(-5px, -50%);
}
.neuron.flip{ flex-direction:row-reverse; transform:translate(calc(-100% + 5px), -50%); }
.neuron i{
  width:12px; height:12px; border-radius:50%; flex:none;
  background:radial-gradient(circle at 40% 40%, #fff6e0, var(--gold-soft));
  box-shadow:0 0 16px 4px rgba(230,200,120,.6), 0 0 0 4px rgba(230,200,120,.12);
  animation:npulse 3.6s ease-in-out infinite;
}
.neuron b{
  font-family:var(--text); font-weight:400; font-size:.88rem; letter-spacing:.02em;
  color:var(--muted); white-space:nowrap;
  background:rgba(7,6,4,.55); padding:.28rem .65rem; border-radius:7px;
  backdrop-filter:blur(2px);
  transition:color .3s, background .3s;
}
.neuron:hover b{ color:var(--ink); background:rgba(20,17,12,.75); }
.neuron:hover i{ box-shadow:0 0 22px 6px rgba(230,200,120,.85); }
.neuron.dim{ opacity:.25; pointer-events:none; }
@keyframes npulse{
  0%,100%{ box-shadow:0 0 16px 4px rgba(230,200,120,.6), 0 0 0 4px rgba(230,200,120,.12); }
  50%{ box-shadow:0 0 24px 6px rgba(230,200,120,.9), 0 0 0 6px rgba(230,200,120,.18); }
}

/* ---------- atto 2: il capitolo del cervello ---------- */
/* il cervello è il protagonista: la copy si fa piccola e si sposta in alto */
.cervello{ position:relative; align-items:flex-start; }
.cervello .wrap{ padding-top:6dvh; }
.cervello .hero-copy h2{ font-size:clamp(1.7rem, 2.6vw, 2.6rem); }
.cervello .hero-copy .sub{ margin-top:.7rem; font-size:.92rem; }
.cervello .eyebrow{ margin-bottom:.9rem; }
.cervello-footer{
  position:absolute; left:4vw; right:4vw; bottom:1.6rem;
  display:flex; justify-content:space-between; align-items:baseline; gap:1rem;
  color:var(--muted); font-size:.8rem;
}
.cervello-footer .credit{ opacity:.55; font-size:.72rem; }

/* pill degli strumenti (solo mobile) */
.tool-links{ display:none; }

/* ---------- scheda strumento ---------- */
.tool-panel{ position:fixed; inset:0; z-index:40; display:flex; align-items:center; justify-content:center;
  padding:6vw; background:rgba(4,3,2,.6); backdrop-filter:blur(10px);
  opacity:0; pointer-events:none; transition:opacity .35s; }
.tool-panel.open{ opacity:1; pointer-events:auto; }
.tp-box{ position:relative; width:100%; max-width:520px;
  background:#0E0C09; border:1px solid rgba(201,162,75,.35); border-radius:22px;
  padding:3rem; box-shadow:0 40px 90px -30px rgba(0,0,0,.9), 0 0 90px -40px rgba(201,162,75,.3);
  transform:translateY(16px); transition:transform .4s cubic-bezier(.16,1,.3,1); }
.tool-panel.open .tp-box{ transform:none; }
.tp-box h3{ font-family:var(--display); font-weight:600; font-size:clamp(1.6rem,3vw,2.2rem); line-height:1.1; }
.tp-desc{ margin-top:1rem; color:var(--muted); line-height:1.6; }
.tp-box .cta{ margin-top:2.2rem; }
.tp-close{ position:absolute; top:1.1rem; right:1.1rem; width:40px; height:40px; border-radius:50%;
  background:none; border:1px solid var(--line); color:var(--muted);
  font-size:1.3rem; line-height:1; cursor:pointer; transition:border-color .3s, color .3s; }
.tp-close:hover{ border-color:var(--gold-soft); color:var(--ink); }
.tp-photo{ width:92px; height:92px; border-radius:50%; object-fit:cover;
  border:1px solid rgba(201,162,75,.55); margin-bottom:1.4rem;
  box-shadow:0 0 40px -10px rgba(201,162,75,.4); }
.tp-actions{ display:flex; gap:.9rem; flex-wrap:wrap; margin-top:2.2rem; }
.tp-actions .cta{ margin-top:0; }
.cta.ghost{ background:none; color:var(--gold-soft); border:1px solid rgba(201,162,75,.5); }
.cta.ghost:hover{ box-shadow:none; border-color:var(--gold-soft); background:rgba(201,162,75,.08); }
.tp-mail{ margin-top:1.4rem; color:var(--muted); font-size:.85rem; letter-spacing:.02em; }

/* ---------- scheda-persona lunga ("Chi c'è dietro") ---------- */
.bio-box{ max-width:640px; max-height:86vh; overflow-y:auto; padding:2.6rem 2.8rem; }
.bio-head{ display:flex; align-items:center; gap:1.4rem; }
.bio-head .tp-photo{ width:76px; height:76px; margin-bottom:0; flex:none; }
.bio-head h3{ margin-top:.15rem; }
.bio-role{ margin-top:.5rem; color:var(--muted); font-size:.82rem; letter-spacing:.09em; text-transform:uppercase; }
.bio-lead{ margin-top:1.8rem; line-height:1.7; font-size:1.02rem; }
.bio-sec{ margin-top:2rem; padding-top:1.6rem; border-top:1px solid var(--line); }
.bio-kicker{ color:var(--gold-soft); font-size:.74rem; letter-spacing:.16em; text-transform:uppercase; }
.bio-txt{ margin-top:.9rem; color:var(--muted); line-height:1.7; }
.bio-list{ list-style:none; margin-top:1.1rem; display:grid; gap:1rem; }
.bio-list li{ color:var(--muted); line-height:1.65; padding-left:1.1rem; position:relative; }
.bio-list li::before{ content:''; position:absolute; left:0; top:.62em; width:5px; height:5px;
  border-radius:50%; background:var(--gold-soft); }
.bio-list b{ color:var(--ink); font-weight:600; }
@media (max-width:640px){
  .bio-box{ padding:2rem 1.5rem; max-height:88vh; }
  .bio-head{ gap:1rem; }
  .bio-head .tp-photo{ width:60px; height:60px; }
}
@media (prefers-reduced-motion: reduce){
  .n-glow{ animation:none; }
}

/* ---------- pagine demo ---------- */
.demo-page{ background:radial-gradient(ellipse 90% 70% at 70% 30%, #14110C 0%, #070604 70%) fixed; min-height:100dvh; }
.demo-page main{ max-width:1100px; margin:0 auto; padding:9rem 4vw 5rem; }
.demo-page .wordmark{ color:var(--ink); text-decoration:none; }
.back{
  display:inline-block; margin-bottom:2.4rem;
  color:var(--muted); text-decoration:none; font-size:.9rem; letter-spacing:.04em;
  transition:color .3s;
}
.back:hover{ color:var(--gold-soft); }
.demo-page h1{ font-size:clamp(2.4rem, 5.5vw, 4.5rem); }

/* ---------- pagine demo: eredita il tema scelto sull'index (nero/avorio/oro) ----------
   Il tema arriva da localStorage['dive3-theme'], normalizzato a dark/light2/gold2 da uno
   script inline in <head>. Frame video e tastino restano scuri: stanno SOPRA il video. */
html[data-demo-theme="light2"]{
  --bg:#F4EEE0; --surface:#EAE1CC; --ink:#14100A; --muted:#655741;
  --gold:#8A6420; --gold-soft:#6B4D1F; --line:#DCCFB2;
}
html[data-demo-theme="light2"] .demo-page{
  background:radial-gradient(ellipse 90% 70% at 70% 30%, #EAE1CC 0%, #F4EEE0 70%);
  background-attachment:fixed;
}
html[data-demo-theme="light2"] .demo-page h1 em{
  background:linear-gradient(105deg,#8A6420,#C89B3C 30%,#6B4D1F 55%,#B08A35 80%,#8A6420);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
html[data-demo-theme="light2"] .demo-page .wordmark span{ color:#8A6420; }
html[data-demo-theme="light2"] .cta{ background:linear-gradient(120deg,#9A6E1C,#C89B3C 45%,#6B4D1F); color:#FBF6EA; }
html[data-demo-theme="light2"] .cta.ghost{ background:none; color:#6B4D1F; border-color:rgba(138,100,32,.5); }

html[data-demo-theme="gold"]{
  --bg:#C29A43; --surface:#B58E39; --ink:#171106; --muted:#4E3D14;
  --gold:#171106; --gold-soft:#2E2408; --line:#A5843B;
}
html[data-demo-theme="gold"] .demo-page{
  background:radial-gradient(ellipse 90% 70% at 65% 35%, #D3AC55 0%, #B08A35 75%);
  background-attachment:fixed;
}
html[data-demo-theme="gold"] .demo-page h1 em{ color:#FCF6E6; text-shadow:0 1px 0 rgba(0,0,0,.2); }
html[data-demo-theme="gold"] .demo-page .wordmark span{ color:#171106; }
html[data-demo-theme="gold"] .cta{ background:linear-gradient(135deg,#241B08,#0E0A03); color:#E8CE8F; }
html[data-demo-theme="gold"] .cta.ghost{ background:none; color:#171106; border-color:rgba(23,17,6,.5); }

/* ---------- riga legale a fondo pagina (pagine demo) ---------- */
.site-legal{ margin-top:4rem; padding-top:1.4rem; border-top:1px solid var(--line);
  color:var(--muted); font-size:.68rem; letter-spacing:.04em; line-height:1.7; opacity:.85; }
.site-legal p{ margin:0; }

/* ---------- freccia prossimo capitolo ---------- */
.arrow{
  position:fixed; right:4vw; bottom:2.2rem; z-index:20;
  width:52px; height:52px; border-radius:50%;
  border:1px solid rgba(201,162,75,.4); background:rgba(7,6,4,.5);
  color:var(--gold-soft); cursor:pointer; backdrop-filter:blur(3px);
  display:flex; align-items:center; justify-content:center;
  transition:border-color .3s, transform .3s, opacity .4s;
}
.arrow svg{ width:20px; height:20px; }
.arrow:hover{ border-color:var(--gold-soft); transform:translateY(2px); }
.arrow.up svg{ transform:rotate(180deg); }
.arrow.hidden{ opacity:0; pointer-events:none; }

/* ---------- reveal (gsap parte da qui) ---------- */
.reveal{ opacity:0; transform:translateY(36px); }
@media (prefers-reduced-motion: reduce){
  .reveal{ opacity:1; transform:none; }
}

/* ---------- mobile: progettato, non adattato ---------- */
@media (max-width: 1024px){
  .hero-grid{ grid-template-columns:1fr; }
  .hero-nav{ flex-direction:row; flex-wrap:wrap; justify-content:flex-start; margin-top:3rem; gap:.8rem; }
  /* niente hover al tocco: le card restano visibili */
  .void-card{ font-size:.8rem; padding:.8rem 1.4rem;
    color:var(--gold-soft); border-color:rgba(201,162,75,.35); background:rgba(7,6,4,.35); }
  .duo{ flex-direction:column; align-items:flex-start; }
  .frame-laptop{ width:100%; }
  /* niente freccia al tocco: si scorre col dito */
  .arrow{ display:none; }
  /* su mobile i neuroni diventano pill sotto la copy */
  #neurons{ display:none; }
  .tool-links{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:38dvh; }
  .tool-links a{
    font-family:var(--display); font-weight:500; font-size:.78rem; letter-spacing:.1em;
    text-transform:uppercase; color:var(--gold-soft); text-decoration:none;
    padding:.7rem 1.2rem; border-radius:100px;
    border:1px solid rgba(201,162,75,.35); background:rgba(7,6,4,.45);
  }
  /* il footer torna nel flusso: mai sopra le pill */
  .cervello{ flex-direction:column; align-items:stretch; justify-content:flex-start; }
  .cervello-footer{ position:static; margin:3.5rem 4vw 0; flex-direction:column; gap:.3rem; }
  /* pagine demo: contenuto vicino al topbar, via lo spazio morto in cima */
  .demo-page main{ padding-top:4.4rem; }
  .back{ margin-bottom:1.6rem; }
  /* la barra "SAMU · AI AGENCY" resta ben leggibile in cima anche scorrendo:
     su mobile le do uno sfondo pieno del tema, così non si confonde col video sotto */
  .demo-page .topbar{ background:var(--bg); border-bottom:1px solid var(--line); }
}
@media (max-width: 700px){
  .tp-box{ padding:2.2rem 1.6rem; }
}
@media (max-width: 600px){
  .topbar{ padding:1.2rem 5vw; }
  .wordmark{ font-size:.72rem; }
  .chapter{ padding:12dvh 0; }
  .arrow{ right:5vw; bottom:1.6rem; width:46px; height:46px; }
  .sub br{ display:none; }
}