/* pagina "come nasce" — sequenza a 7 atti: ingresso 3D, componenti, chiusura contenitore,
   esterno, terminale, periferiche del cliente. Nessun video/audio, solo CSS/SVG. */

.modulo-hero{padding:56px 0 10px}
.modulo-hero .back{display:inline-flex;align-items:center;gap:6px;font-size:13.5px;font-weight:700;color:var(--muted);text-decoration:none;margin-bottom:18px}
.modulo-hero .back:hover{color:var(--navy)}
.modulo-hero .god{font-family:"Cormorant Garamond",serif;font-size:14px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold2);font-weight:700}
.modulo-hero h1{font-size:clamp(32px,4.6vw,50px);margin:.2em 0 14px;color:var(--navy)}
.modulo-hero p{max-width:640px;color:var(--muted)}

/* ===== palco 3D ===== */
.stage3d-wrap{position:relative;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.stage3d{position:relative;height:520px;perspective:1400px;overflow:hidden;
  background:
    radial-gradient(700px 380px at 50% 38%, #16233b 0%, #0d1626 62%, #070d17 100%);
}

/* stelline decorative sullo sfondo, per dare senso di profondita' */
.stardust{position:absolute;inset:0;background-image:
    radial-gradient(1px 1px at 12% 20%, rgba(255,255,255,.25), transparent),
    radial-gradient(1px 1px at 82% 15%, rgba(255,255,255,.2), transparent),
    radial-gradient(1px 1px at 30% 78%, rgba(255,255,255,.18), transparent),
    radial-gradient(1px 1px at 70% 68%, rgba(255,255,255,.22), transparent),
    radial-gradient(1px 1px at 52% 40%, rgba(255,255,255,.15), transparent),
    radial-gradient(1px 1px at 90% 85%, rgba(255,255,255,.2), transparent);
  opacity:.7}

/* didascalia in alto: nome del modello, poi (più avanti) il messaggio sulle altre periferiche */
.model-caption{position:absolute;top:0;left:0;right:0;height:112px;
  background:linear-gradient(to bottom, rgba(7,13,23,.9), rgba(7,13,23,0))}
.model-caption .tag{position:absolute;left:0;right:0;text-align:center;padding:0 24px;
  font-family:"Cormorant Garamond",serif;letter-spacing:.03em;opacity:0}
.model-caption .tag b{color:var(--gold)}
.model-caption .t1{top:16px;font-size:19px;color:#f3e6cf;animation:capIn 1.2s ease forwards;animation-delay:14.5s}
.model-caption .t2{top:46px;font-size:18px;font-weight:600;line-height:1.3;color:var(--gold);text-shadow:0 0 18px rgba(184,146,90,.5);
  transform:scale(.8);animation:tagPop .7s cubic-bezier(.2,1.4,.4,1) forwards;animation-delay:69.4s}
.model-caption .t2 b{color:#f8ecd6}
@keyframes capIn{to{opacity:1}}
@keyframes tagPop{to{opacity:1;transform:scale(1)}}

/* box 3D della scheda */
.board-anchor{position:absolute;left:50%;top:52%;width:0;height:0}
.board3d{
  position:absolute;left:0;top:0;width:340px;height:200px;margin:-100px 0 0 -170px;
  transform-style:preserve-3d;
  transform:translateZ(-900px) scale(.4) rotateX(15deg) rotateY(-40deg) rotateZ(8deg);
  opacity:0;
  animation:
    boardSpin 14s cubic-bezier(.37,0,.16,1) forwards,
    boardFadeIn 1.6s ease forwards;
}
.face{position:absolute;border:1px solid rgba(184,146,90,.5);backface-visibility:hidden}
.face.front{inset:0;background:#0d1626;border-radius:10px}
.face.back{inset:0;background:#0a1220;border-radius:10px;transform:rotateY(180deg) translateZ(7px)}
.face.top{width:340px;height:14px;left:0;top:0;background:#122036;transform:rotateX(90deg) translateZ(100px)}
.face.bottom{width:340px;height:14px;left:0;top:186px;background:#0a1220;transform:rotateX(-90deg) translateZ(14px)}
.face.left{width:14px;height:200px;left:0;top:0;background:#122036;transform:rotateY(-90deg) translateZ(0px)}
.face.right{width:14px;height:200px;left:326px;top:0;background:#0a1220;transform:rotateY(90deg) translateZ(14px)}
.face.front,.face.back{transform:translateZ(7px)}
.face.back{transform:rotateY(180deg) translateZ(7px)}

/* un solo tratto, un'unica curva di rallentamento: niente "scatti" a metà percorso */
@keyframes boardSpin{
  0%{transform:translateZ(-900px) scale(.4) rotateX(15deg) rotateY(-40deg) rotateZ(8deg)}
  100%{transform:translateZ(0px) scale(1) rotateX(352deg) rotateY(378deg) rotateZ(-4deg)}
}
@keyframes boardFadeIn{
  0%{opacity:0}
  12%{opacity:1}
  100%{opacity:1}
}

/* contenuto della faccia frontale (la PCB illustrata) */
.pcb{position:absolute;inset:0;border-radius:10px;overflow:hidden}
.pcb svg{position:absolute;inset:0;width:100%;height:100%}

/* fumetti/callout */
.callout{position:absolute;opacity:0;transform:translateY(6px);pointer-events:none}
.callout .bubble{background:rgba(255,255,255,.98);border:1px solid var(--line);border-radius:10px;padding:9px 12px;
  box-shadow:0 10px 24px rgba(0,0,0,.28);max-width:210px}
.callout .bubble b{display:block;color:var(--navy);font-size:13px;margin-bottom:2px}
.callout .bubble span{display:block;color:var(--muted);font-size:12px;line-height:1.35}
.callout .dot{position:absolute;width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(184,146,90,.25)}
.callout .leader{position:absolute;background:var(--gold);height:2px;transform-origin:0 50%}

.callout{animation:calloutFade 4.6s ease forwards}
@keyframes calloutFade{
  0%{opacity:0;transform:translateY(6px)}
  8%{opacity:1;transform:translateY(0)}
  82%{opacity:1}
  100%{opacity:0}
}
.c1{animation-delay:15.8s}
.c2{animation-delay:20.4s}
.c3{animation-delay:25.0s}
.c4{animation-delay:29.6s}
.c5{animation-delay:34.2s}
.c6{animation-delay:38.8s}
.cc1{animation-delay:49s}
.cc2{animation-delay:54.2s}

/* ===== Atto 2 — le due meta' del contenitore si chiudono ===== */
.shell{position:absolute;left:-182px;width:364px;border:1px solid rgba(184,146,90,.55);
  background:linear-gradient(180deg,#20334f,#101d33 55%,#0a1220);
  box-shadow:0 14px 34px rgba(0,0,0,.45);opacity:0}
.shell.top{top:-114px;height:114px;border-radius:16px 16px 0 0;
  animation:shellFade .4s ease forwards, shellTopIn 3s cubic-bezier(.3,.86,.24,1) forwards;
  animation-delay:44s,44s}
.shell.bottom{top:0;height:114px;border-radius:0 0 16px 16px;
  animation:shellFade .4s ease forwards, shellBottomIn 3s cubic-bezier(.3,.86,.24,1) forwards;
  animation-delay:44s,44s}
.shell::after{content:"";position:absolute;left:16px;right:16px;height:2px;background:rgba(184,146,90,.4)}
.shell.top::after{bottom:0}
.shell.bottom::after{top:0}
.shell .vents{position:absolute;top:50%;right:40px;display:flex;gap:5px;transform:translateY(-50%)}
.shell.top .vents{transform:translateY(-50%) translateY(28px)}
.shell.bottom .vents{transform:translateY(-50%) translateY(-28px)}
.shell .vents i{display:block;width:3px;height:34px;background:rgba(184,146,90,.3);border-radius:2px}
@keyframes shellFade{to{opacity:1}}
@keyframes shellTopIn{0%{transform:translateY(-480px)}100%{transform:translateY(0)}}
@keyframes shellBottomIn{0%{transform:translateY(480px)}100%{transform:translateY(0)}}

.board-anchor{animation:groupFadeOut .8s ease forwards;animation-delay:47.6s}
@keyframes groupFadeOut{to{opacity:0}}

/* ===== Atto 3 — il case chiuso, dall'esterno ===== */
.case-anchor{position:absolute;left:50%;top:52%;width:0;height:0;opacity:0;
  animation:groupFadeIn .8s ease forwards;animation-delay:47.6s}
@keyframes groupFadeIn{to{opacity:1}}
.closed-case{position:absolute;left:-180px;top:-110px;width:360px;height:220px}
.closed-case svg{position:absolute;inset:0;width:100%;height:100%}

/* ===== Atto 4 — il PC si collega e installa/configura da terminale ===== */
.term-anchor{position:absolute;left:50%;top:52%;width:0;height:0;opacity:0;
  animation:groupFadeIn .7s ease forwards, groupFadeOut .8s ease forwards;
  animation-delay:59.5s,69s}
.laptop{position:absolute;left:-270px;top:-35px;width:100px;opacity:0;
  animation:capIn .8s ease forwards;animation-delay:59.5s}
.laptop svg{display:block;width:100%}
.link-line{position:absolute;left:-165px;top:8px;height:2px;background:linear-gradient(90deg,#b8925a,rgba(184,146,90,0));
  width:0;animation:linkGrow 1s ease forwards;animation-delay:60.2s}
@keyframes linkGrow{to{width:165px}}
.terminal{position:absolute;left:-160px;top:-100px;width:320px;height:196px;border-radius:10px;
  background:rgba(6,10,18,.97);border:1px solid rgba(184,146,90,.4);box-shadow:0 20px 50px rgba(0,0,0,.5);
  padding:16px 18px;font-family:Menlo,Consolas,"SFMono-Regular",monospace;font-size:11.5px;line-height:1.95;color:#cfe8d2;
  opacity:0;animation:capIn .6s ease forwards;animation-delay:61s}
.terminal .dots{position:absolute;top:10px;left:14px;display:flex;gap:6px}
.terminal .dots i{width:8px;height:8px;border-radius:50%;background:#40485a;display:block}
.terminal .lines{margin-top:18px;white-space:nowrap}
.terminal .lines div{opacity:0;transform:translateY(4px);animation:lineIn .5s ease forwards}
.terminal .lines div:nth-child(1){animation-delay:61.3s}
.terminal .lines div:nth-child(2){animation-delay:62.1s}
.terminal .lines div:nth-child(3){animation-delay:62.9s}
.terminal .lines div:nth-child(4){animation-delay:63.7s}
.terminal .lines div:nth-child(5){animation-delay:64.5s}
.terminal .lines div:nth-child(6){animation-delay:65.3s}
.terminal .lines div:nth-child(7){animation-delay:66.1s}
.terminal .lines div:nth-child(8){animation-delay:66.9s}
@keyframes lineIn{to{opacity:1;transform:translateY(0)}}
.terminal .prompt{color:#b8925a}
.terminal .ok{color:#8fd16f}

/* ===== Atto 5 — periferiche del cliente ===== */
.devices-anchor{position:absolute;left:50%;top:52%;width:0;height:0;opacity:0;
  animation:groupFadeIn .8s ease forwards;animation-delay:70.5s}
.device{position:absolute;width:58px;text-align:center;opacity:0;animation:devicePop .6s cubic-bezier(.3,1.3,.4,1) forwards}
.device svg{display:block;width:100%}
.device .label{margin-top:8px;white-space:nowrap}
.device .label b{display:block;font-family:Inter,sans-serif;font-size:12px;font-weight:700;color:#e7eaf0}
.device .label span{display:block;font-family:Inter,sans-serif;font-size:10.5px;color:var(--gold);margin-top:1px}
.device.d1{left:-345px;top:100px;animation-delay:70.8s}
.device.d2{left:-205px;top:135px;animation-delay:71.3s}
.device.d3{left:-70px;top:143px;animation-delay:71.8s}
.device.d4{left:70px;top:143px;animation-delay:72.3s}
.device.d5{left:205px;top:135px;animation-delay:72.8s}
.device.d6{left:300px;top:100px;animation-delay:73.3s}
@keyframes devicePop{0%{opacity:0;transform:scale(.5)}100%{opacity:1;transform:scale(1)}}

.stage-controls{display:flex;justify-content:flex-end;padding:14px 18px;background:#fff;border-top:1px solid var(--line)}
#replay{cursor:pointer}

.other-modules{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.other-modules a{font-size:13.5px;font-weight:700;color:var(--navy);text-decoration:none;border:1px solid var(--line);border-radius:8px;padding:9px 14px}
.other-modules a:hover{border-color:var(--gold)}

@media(max-width:900px){.stage3d{height:620px}}
@media(max-width:560px){.stage3d{height:720px}}

/* pagina Atena — griglia categorie impianti (niente animazione, solo contenuto) */
.page-cats{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media(max-width:900px){.page-cats{grid-template-columns:1fr 1fr}}
@media(max-width:560px){.page-cats{grid-template-columns:1fr}}

/* === Esempi da scaricare (Efesto) === */
.doc-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:24px}
.doc-card{background:#fff;color:var(--ink);border-radius:14px;padding:24px;border-top:4px solid var(--gold);display:flex;flex-direction:column;align-items:flex-start}
.doc-card h3{margin:0 0 4px;font-size:22px;color:var(--navy)}
.doc-card .doc-meta{margin:0 0 10px;font-size:12.5px;font-weight:700;letter-spacing:.04em;color:var(--gold2)}
.doc-card p{margin:0 0 16px;color:var(--muted);font-size:15px}
.doc-card .doc-btns{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px}
.section.dark .doc-note{margin-top:18px;color:#aab3c4}
@media(max-width:760px){.doc-grid{grid-template-columns:1fr}}