/* Janna Lab · showreel e modalità cinema (stile Cyber-HUD) */

/* ---------- showreel nella hero ---------- */
.hero-in>*{min-width:0}
@media (max-width:980px){.hero-in{grid-template-columns:minmax(0,1fr)}}
.reel{position:relative;margin-top:26px;width:100%;max-width:470px;aspect-ratio:16/9;border-radius:14px;cursor:pointer;isolation:isolate;background:#020712}
.rl-schermo{position:absolute;inset:0;border-radius:14px;overflow:hidden}
.rl-schermo video{width:100%;height:100%;object-fit:cover;display:block}
.rl-slide{position:absolute;inset:0;margin:0;opacity:0;transition:opacity 1s ease}
.rl-slide.on{opacity:1}
.rl-slide img{width:100%;height:100%;object-fit:cover;object-position:0 0;display:block;transform:scale(1.02)}
.rl-slide.on img{animation:rl-kb 3.4s ease-out forwards}
@keyframes rl-kb{from{transform:scale(1.02) translate(0,0)}to{transform:scale(1.12) translate(-2%,-2%)}}
.rl-velo{position:absolute;inset:0;border-radius:14px;pointer-events:none;
  background:linear-gradient(180deg,rgba(2,7,18,.55),transparent 30%,transparent 55%,rgba(2,7,18,.92)),repeating-linear-gradient(0deg,rgba(76,195,255,.05) 0 1px,transparent 1px 3px)}
.rl-testa{position:absolute;left:14px;top:12px;display:flex;align-items:center;gap:10px;font:600 11.5px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--luce)}
.rl-live{display:inline-flex;align-items:center;gap:6px;padding:2px 8px;border-radius:999px;background:rgba(255,90,79,.18);border:1px solid rgba(255,90,79,.6);color:#ffb3ad}
.rl-live::before{content:"";width:7px;height:7px;border-radius:50%;background:#ff5a4f;box-shadow:0 0 8px #ff5a4f;animation:rl-pulsa 1.4s ease-in-out infinite}
@keyframes rl-pulsa{50%{opacity:.35}}
.rl-piede{position:absolute;left:14px;right:14px;bottom:12px;display:flex;align-items:end;justify-content:space-between;gap:12px}
.rl-piede b{font:600 17px var(--display);color:#fff;text-shadow:0 0 12px rgba(76,195,255,.6)}
.rl-play{display:inline-flex;align-items:center;gap:7px;flex:0 0 auto;font:600 13px var(--display);padding:7px 13px;border-radius:999px;background:var(--ciano);color:#03203a;transition:transform .2s,box-shadow .2s}
.rl-play svg{width:14px;height:14px;fill:currentColor}
.reel:hover .rl-play,.reel:focus-visible .rl-play{transform:scale(1.05);box-shadow:0 0 18px rgba(76,195,255,.7)}
.reel:focus-visible{outline:3px solid var(--ciano);outline-offset:4px}

/* ---------- pulsante Anteprima nelle schede ---------- */
.foot .prev{position:relative;z-index:2;display:inline-flex;align-items:center;gap:6px;font:600 12.5px var(--display);letter-spacing:.04em;padding:5px 11px;border-radius:999px;cursor:pointer;
  color:var(--luce);background:rgba(76,195,255,.1);border:1px solid var(--linea-forte);transition:background .2s,border-color .2s,box-shadow .2s}
.foot .prev svg{width:11px;height:11px;fill:currentColor}
.foot .prev:hover,.foot .prev:focus-visible{background:rgba(76,195,255,.22);border-color:var(--ciano);box-shadow:0 0 14px rgba(76,195,255,.35)}
.btn.prev-d{display:inline-flex;align-items:center;gap:8px}
.btn.prev-d svg{width:13px;height:13px;fill:currentColor}

/* ---------- cinema ---------- */
.cinema{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:22px;border:0;background:transparent;color:var(--luce);overflow:hidden;
  display:grid;grid-template-columns:280px minmax(0,1fr);gap:22px}
.cinema:not([open]){display:none}
.cinema::backdrop{background:rgba(2,6,14,.72);backdrop-filter:blur(10px) saturate(1.2)}
.cinema[open]{animation:cn-entra .45s ease both}
.cinema.esce{animation:cn-esce .38s ease both}
@keyframes cn-entra{from{opacity:0}to{opacity:1}}
@keyframes cn-esce{to{opacity:0;transform:scale(.985)}}

/* forme luminose sullo sfondo */
.cn-fondo{position:absolute;inset:0;z-index:-1;overflow:hidden;pointer-events:none}
.cn-fondo i{position:absolute;border-radius:50%;filter:blur(60px);opacity:.55;mix-blend-mode:screen}
.cn-f1{width:46vw;height:46vw;left:-10vw;top:-16vw;background:radial-gradient(circle,rgba(76,195,255,.55),transparent 65%);animation:cn-deriva 18s ease-in-out infinite alternate}
.cn-f2{width:40vw;height:40vw;right:-12vw;bottom:-14vw;background:radial-gradient(circle,rgba(139,123,255,.45),transparent 65%);animation:cn-deriva 22s ease-in-out infinite alternate-reverse}
.cn-f3{width:26vw;height:26vw;left:42%;top:36%;background:radial-gradient(circle,rgba(34,211,238,.28),transparent 70%);animation:cn-deriva 15s ease-in-out infinite alternate}
@keyframes cn-deriva{to{transform:translate(6vw,4vw) scale(1.15)}}

/* colonna delle schede */
.cn-rail{display:flex;flex-direction:column;gap:9px;overflow-y:auto;padding:4px 6px 4px 2px;scrollbar-width:thin;scrollbar-color:rgba(76,195,255,.35) transparent}
.cn-item{display:flex;align-items:center;gap:11px;width:100%;text-align:left;padding:8px;border-radius:12px;cursor:pointer;color:var(--luce);font:inherit;
  background:rgba(7,26,48,.55);border:1px solid var(--linea);backdrop-filter:blur(8px);transition:background .25s,border-color .25s,box-shadow .25s,transform .25s}
.cn-item:hover{border-color:var(--linea-forte);transform:translateX(3px)}
.cn-item.on{background:rgba(76,195,255,.14);border-color:var(--ciano);box-shadow:0 0 22px rgba(76,195,255,.28),inset 3px 0 0 var(--ciano)}
.cn-item:focus-visible{outline:2px solid var(--ciano);outline-offset:2px}
.cn-item.entra{animation:cn-item-entra .6s cubic-bezier(.2,.85,.25,1) both}
@keyframes cn-item-entra{from{opacity:0;transform:translateX(-24px)}}
.cn-th{flex:0 0 auto;width:78px;aspect-ratio:16/10;border-radius:7px;overflow:hidden;background:var(--pannello2);display:grid;place-items:center;border:1px solid var(--linea)}
.cn-th img{width:100%;height:100%;object-fit:cover;object-position:0 0;display:block}
.cn-th svg{width:26px;height:26px;fill:none;stroke:var(--luce);stroke-width:1.5}
.cn-it{min-width:0;display:flex;flex-direction:column;gap:2px}
.cn-it b{font:600 14px/1.25 var(--display);color:#fff}
.cn-it small{font-size:12px;color:var(--muted)}

/* riquadro grande */
.cn-stage{position:relative;min-height:0;display:flex;flex-direction:column;gap:12px;padding:16px 18px 18px;border-radius:18px;
  background:linear-gradient(180deg,rgba(8,33,61,.72),rgba(4,16,31,.82));border:1px solid var(--linea-forte);backdrop-filter:blur(14px);
  box-shadow:0 0 60px rgba(76,195,255,.18),inset 0 1px 0 rgba(191,230,255,.08)}
.cn-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.cn-conta{white-space:nowrap;font:600 12px var(--display);letter-spacing:.2em;color:var(--muted);font-variant-numeric:tabular-nums}
.cn-btn{white-space:nowrap;display:inline-flex;align-items:center;gap:8px;font:600 14px var(--display);padding:8px 14px;border-radius:999px;cursor:pointer;color:var(--luce);background:rgba(76,195,255,.08);border:1px solid var(--linea-forte);transition:background .2s,border-color .2s}
.cn-btn:hover{background:rgba(76,195,255,.18);border-color:var(--ciano)}
.cn-btn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.cn-auto i{width:28px;height:16px;border-radius:999px;background:rgba(143,179,207,.3);position:relative;transition:background .2s}
.cn-auto i::after{content:"";position:absolute;left:2px;top:2px;width:12px;height:12px;border-radius:50%;background:#fff;transition:transform .2s}
.cn-auto[aria-pressed="true"] i{background:var(--ciano)}
.cn-auto[aria-pressed="true"] i::after{transform:translateX(12px)}

.cn-schermo{position:relative;flex:1 1 auto;min-height:0;border-radius:12px;overflow:hidden;background:#01050b;border:1px solid var(--linea)}
.cn-liv{position:absolute;inset:0;opacity:0;transform:scale(1.035);filter:blur(10px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.8,.2,1),filter .7s ease}
.cn-liv.on{opacity:1;transform:none;filter:none}
.cn-liv.via{opacity:0;transform:scale(.98);filter:blur(6px)}
.cn-liv video{width:100%;height:100%;object-fit:contain;background:#000;display:block}
.cn-sh{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;opacity:0;transition:opacity .9s ease}
.cn-sh.on{opacity:1;animation:cn-kb 3.8s ease-out forwards}
@keyframes cn-kb{from{transform:scale(1)}to{transform:scale(1.06)}}
.cn-icona{position:absolute;inset:0;display:grid;place-items:center}
.cn-icona svg{width:120px;height:120px;fill:none;stroke:var(--luce);stroke-width:1.2;filter:drop-shadow(0 0 12px rgba(76,195,255,.7))}
.cn-bollino{position:absolute;left:12px;bottom:12px;z-index:2;font:600 11.5px var(--display);letter-spacing:.12em;text-transform:uppercase;padding:4px 10px;border-radius:999px;
  background:rgba(2,7,18,.75);border:1px solid var(--linea-forte);color:var(--muted);backdrop-filter:blur(6px)}
.cn-scan{position:absolute;left:0;right:0;top:0;height:30%;z-index:3;pointer-events:none;opacity:0;
  background:linear-gradient(180deg,transparent,rgba(76,195,255,.18) 70%,rgba(160,230,255,.7) 99%,transparent)}
.cn-scan.va{animation:cn-scan .9s cubic-bezier(.4,0,.2,1)}
@keyframes cn-scan{0%{opacity:1;transform:translateY(-100%)}100%{opacity:0;transform:translateY(340%)}}

.cn-prog{height:3px;border-radius:3px;background:rgba(76,195,255,.15);overflow:hidden}
.cn-prog i{display:block;height:100%;background:linear-gradient(90deg,var(--ciano),#8b7bff);transform-origin:0 50%;transform:scaleX(0);box-shadow:0 0 10px rgba(76,195,255,.8)}

.cn-basso{display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:12px 24px}
.cn-info{min-width:0;flex:1 1 320px}
.cn-info.cambia>*{animation:cn-testo .6s cubic-bezier(.2,.8,.2,1) both}
.cn-info.cambia>*:nth-child(2){animation-delay:.05s}
.cn-info.cambia>*:nth-child(3){animation-delay:.1s}
.cn-info.cambia>*:nth-child(4){animation-delay:.15s}
@keyframes cn-testo{from{opacity:0;transform:translateY(8px)}}
.cn-area{margin:0 0 4px;font:600 12px var(--display);letter-spacing:.2em;text-transform:uppercase;color:var(--ciano)}
.cn-info h2{font-size:clamp(22px,2.6vw,32px);color:#fff;margin:0 0 6px;text-shadow:0 0 18px rgba(76,195,255,.35)}
.cn-riga{margin:0 0 8px;color:#c3d8ec;max-width:60ch}
.cn-comandi{display:flex;flex-wrap:wrap;gap:8px;align-items:center}

@media (max-width:900px){
  .cinema{grid-template-columns:1fr;grid-template-rows:minmax(0,1fr) auto;padding:12px;gap:10px}
  .cn-stage{order:1;padding:12px}
  .cn-rail{order:2;flex-direction:row;overflow-x:auto;overflow-y:hidden;padding:2px 2px 6px}
  .cn-item{flex:0 0 auto;width:auto;padding:6px}
  .cn-it{display:none}
  .cn-th{width:88px}
  .cn-schermo{flex:0 0 auto;aspect-ratio:16/10;min-height:0}
  .cn-stage{overflow-y:auto}
}
@media (max-width:560px){
  .reel{margin-top:18px}
  .rl-piede b{font-size:15px}
  .cn-comandi{width:100%}
  .cn-comandi .btn{flex:1 1 auto;text-align:center;padding-inline:12px}
  .cn-btn span{display:none}
  #cnHome span{display:inline}
  .cn-auto{padding:8px 10px;font-size:12.5px}
}
@media (prefers-reduced-motion:reduce){
  .rl-live::before,.cn-fondo i,.mon::after,.ai-testo{animation:none}
  .rl-slide.on img,.cn-sh.on{animation:none}
  .cn-liv,.cn-sh,.rl-slide{transition:opacity .2s linear;transform:none;filter:none}
  .cinema[open],.cinema.esce,.cn-info.cambia>*{animation:none}
}

/* ---------- monitor incassati (pannello di Atlas e riquadro LIVE) ---------- */
.mon{border:1px solid rgba(0,0,0,.85);
  box-shadow:
    inset 0 5px 12px -2px rgba(0,0,0,.9),       /* ombra dell'incasso sul bordo alto dello schermo */
    inset 0 -1px 0 rgba(191,230,255,.07),       /* luce che rimbalza sul bordo basso */
    inset 0 0 40px rgba(76,195,255,.07),        /* luce propria dello schermo */
    inset -1px 0 0 rgba(191,230,255,.05),       /* luce che rimbalza sul bordo destro */
    0 -3px 0 rgba(0,0,0,.6),                    /* spigolo alto del taglio, in ombra */
    -3px 0 0 rgba(0,0,0,.5),                    /* spigolo sinistro del taglio, in ombra */
    0 3px 0 rgba(191,230,255,.2),               /* spigolo basso del taglio, illuminato */
    3px 0 0 rgba(191,230,255,.18),              /* spigolo destro del taglio, illuminato */
    0 0 0 2px #03080f,                          /* cornice sottile */
    0 0 0 3px rgba(76,195,255,.08),
    0 26px 60px -28px rgba(76,195,255,.4)}      /* luce dello schermo riflessa sulla pagina */
.mon::before,.mon::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:6}
/* vetro: riflesso diagonale fisso, righe di scansione e vignettatura ai bordi */
.mon::before{background:
    linear-gradient(118deg,rgba(255,255,255,.075) 0,rgba(255,255,255,.02) 20%,transparent 38%),
    repeating-linear-gradient(0deg,rgba(76,195,255,.035) 0 1px,transparent 1px 3px),
    radial-gradient(120% 90% at 50% 45%,transparent 62%,rgba(0,0,0,.38) 100%)}
/* lampo di luce che attraversa il vetro ogni tanto */
/* lampo di luce a staffetta: attraversa il riquadro LIVE (a sinistra) e, nell'istante in cui esce dal suo
   bordo destro, entra dal bordo sinistro del pannello di Atlas. Velocità costante, ciclo di 16 s.
   Con background-size 260% la striscia è visibile da background-position 94% (entra a sinistra) a 6% (esce a destra). */
.mon::after{background:linear-gradient(100deg,transparent 42%,rgba(170,230,255,.035) 47%,rgba(185,235,255,.07) 50%,rgba(170,230,255,.035) 53%,transparent 58%) no-repeat;
  background-size:260% 100%;background-position:94% 0;animation:mon-lampo-1 16s linear infinite}
.atlas.mon::after{animation-name:mon-lampo-2}
@keyframes mon-lampo-1{0%,50%{background-position:94% 0}72%,100%{background-position:6% 0}}
@keyframes mon-lampo-2{0%,72%{background-position:94% 0}94%,100%{background-position:6% 0}}
.mon-led{position:absolute;left:50%;bottom:4px;width:5px;height:5px;margin-left:-2.5px;border-radius:50%;z-index:7;pointer-events:none;
  background:#3ee6a0;box-shadow:0 0 6px #3ee6a0,0 0 12px rgba(62,230,160,.6);animation:rl-pulsa 3.2s ease-in-out infinite}

/* ---------- scritte "AI tech": testo sfumato che brilla e si decodifica ---------- */
.ai-testo{background:linear-gradient(90deg,#e8f6ff 0%,#7fd3ff 30%,#a99bff 50%,#7fd3ff 70%,#e8f6ff 100%);background-size:300% 100%;
  -webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 0 8px rgba(76,195,255,.45));text-shadow:none!important;animation:ai-brilla 7s linear infinite}
@keyframes ai-brilla{to{background-position:-300% 0}}
.ai-testo.decod::after{content:"▍";margin-left:2px;-webkit-text-fill-color:#4cc3ff;color:#4cc3ff;animation:ai-cursore .8s steps(1) infinite}
@keyframes ai-cursore{50%{opacity:0}}
.ai-testo .gl{-webkit-text-fill-color:#7fe7c1;color:#7fe7c1;font-family:ui-monospace,Consolas,monospace;opacity:.85}

/* =====================================================================
   RIFINITURE (29/09/2026)
   ===================================================================== */
:root{--accento2:#ffb547;--accento2-rgb:255,181,71}      /* secondo accento: ambra, solo per le azioni di contatto */

/* --- anteprima nel cinema: più contrasto e leggibilità --- */
.cn-stage{background:linear-gradient(180deg,rgba(6,24,46,.9),rgba(3,11,22,.95))}
.cn-basso{padding:12px 14px;border-radius:12px;background:rgba(2,8,16,.55);border:1px solid rgba(76,195,255,.14)}
.cn-area{color:#7fd3ff}
.cn-info h2{color:#fff}
.cn-riga{color:#e2effa;font-size:16.5px}
.cn-info .tag{color:#e8f6ff;border-color:rgba(127,211,255,.5);background:rgba(76,195,255,.08)}
.cn-bollino{color:#cfe6f7;background:rgba(2,7,18,.85)}
.cn-item small{color:#a9c6de}

/* --- schede: si ingrandiscono dolcemente al passaggio del mouse (--zoom per regolare) --- */
/* esce in avanti sopra le schede vicine (stile catalogo streaming): ~+60%.
   Prima colonna cresce verso destra, ultima verso sinistra, così resta nello schermo. */
.grid{--zoom:1.6}
.card{transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .2s,box-shadow .35s;transform-origin:50% 50%}
@media (hover:hover) and (min-width:761px){
  .grid .card:hover{z-index:20;transform:scale(var(--zoom));transition-delay:.18s;
    background:linear-gradient(180deg,#0b2746,#061426);box-shadow:0 40px 90px -20px rgba(0,0,0,.92),0 0 0 1px rgba(var(--acc-rgb,76,195,255),.6),0 0 44px rgba(var(--acc-rgb,76,195,255),.3)}
  .fx-luce .grid .card:hover{transform:scale(var(--zoom)) rotateX(calc(var(--rx,0deg) * .4)) rotateY(calc(var(--ry,0deg) * .4))}
  .card:hover .riga{color:#e2effa}
}
@media (hover:hover) and (min-width:981px){
  .grid .card:nth-child(3n+1){transform-origin:0 50%}
  .grid .card:nth-child(3n){transform-origin:100% 50%}
}
@media (hover:hover) and (min-width:761px) and (max-width:980px){
  .grid{--zoom:1.35}
  .grid .card:nth-child(odd){transform-origin:0 50%}
  .grid .card:nth-child(even){transform-origin:100% 50%}
}
.card:focus-within{z-index:5}

/* --- vetro più deciso: più profondità e separazione dallo sfondo --- */
.atlas.mon{background:linear-gradient(180deg,rgba(14,46,80,.62),rgba(4,16,31,.84));backdrop-filter:blur(16px) saturate(1.35);-webkit-backdrop-filter:blur(16px) saturate(1.35)}
.mon{outline:1px solid rgba(191,230,255,.05);outline-offset:6px}
.atlas.mon,.reel.mon{filter:drop-shadow(0 36px 44px rgba(0,0,0,.55)) drop-shadow(0 0 26px rgba(76,195,255,.12))}
.atlas.mon::before{background:
    linear-gradient(180deg,rgba(191,230,255,.09),transparent 14%),
    linear-gradient(118deg,rgba(255,255,255,.075) 0,rgba(255,255,255,.02) 20%,transparent 38%),
    repeating-linear-gradient(0deg,rgba(76,195,255,.035) 0 1px,transparent 1px 3px),
    radial-gradient(120% 90% at 50% 45%,transparent 62%,rgba(0,0,0,.38) 100%)}

/* --- bottoni coerenti --- */
.lock{background:linear-gradient(180deg,rgba(76,195,255,.24),rgba(76,195,255,.1));border-color:rgba(76,195,255,.65);color:#fff;box-shadow:inset 0 1px 0 rgba(191,230,255,.2),0 0 16px rgba(76,195,255,.18);transition:background .2s,box-shadow .2s,color .2s}
.lock:hover{background:var(--ciano);color:#03203a;box-shadow:0 0 22px rgba(76,195,255,.5)}
.atlas-sugg button{position:relative;color:#d6ecfb;border-color:rgba(76,195,255,.45);background:rgba(76,195,255,.06);padding-left:22px;transition:transform .2s,background .2s,border-color .2s,box-shadow .2s,color .2s}
.atlas-sugg button::before{content:"›";position:absolute;left:10px;top:50%;transform:translateY(-52%);color:var(--ciano);font-weight:700}
.atlas-sugg button:hover,.atlas-sugg button:focus-visible{color:#fff;background:rgba(76,195,255,.16);border-color:var(--ciano);transform:translateY(-2px);box-shadow:0 6px 18px -8px rgba(76,195,255,.6)}

/* --- secondo accento (ambra) sulle azioni di contatto: "Richiedi una demo", "Scrivi a …" --- */
a.btn[href^="mailto:"],.atlas-azioni a[href^="mailto:"]{background:linear-gradient(180deg,#ffc56b,var(--accento2));color:#2a1700;border-color:transparent;box-shadow:0 0 18px rgba(var(--accento2-rgb),.28)}
a.btn[href^="mailto:"]:hover,.atlas-azioni a[href^="mailto:"]:hover{background:#ffd08a;box-shadow:0 0 26px rgba(var(--accento2-rgb),.5)}
.contatti .kicker{color:var(--accento2)}
@media (prefers-reduced-motion:reduce){.card:hover,.card:focus-within{transform:none}}