/* alleanza.ai — strato effetti (wow.css). Attivo anche con "Riduci movimento". */
@property --ang{syntax:"<angle>";inherits:false;initial-value:0deg}
@view-transition{navigation:auto}
.top{view-transition-name:alz-top}
::view-transition-old(root){animation:vtOut .35s ease both}
::view-transition-new(root){animation:vtIn .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes vtOut{to{opacity:0;transform:translateY(-8px)}}
@keyframes vtIn{from{opacity:0;transform:translateY(10px)}}

/* barra di avanzamento a sei colori sotto l'header */
.top::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;transform-origin:0 50%;transform:scaleX(var(--sp,0));background:linear-gradient(90deg,var(--f1),var(--f2),var(--f3),var(--f4),var(--f5),var(--f6));pointer-events:none}

/* marchio: sei punti che respirano; durante il 5/6 il terzo si spegne */
.brand .six i{animation:alzDot 5.4s ease-in-out infinite;transition:background .25s,opacity .25s}
.brand .six i:nth-child(2){animation-delay:.12s}.brand .six i:nth-child(3){animation-delay:.24s}
.brand .six i:nth-child(4){animation-delay:.36s}.brand .six i:nth-child(5){animation-delay:.48s}.brand .six i:nth-child(6){animation-delay:.6s}
@keyframes alzDot{0%,16%,100%{transform:scale(1)}8%{transform:scale(1.45)}}
html.egg .brand .six i:nth-child(3){background:#3a4160!important;animation:none;opacity:.5}

/* hero */
.hero.dark{isolation:isolate}
.hero.dark::after{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;background-image:radial-gradient(rgba(185,192,220,.09) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:radial-gradient(ellipse 90% 80% at 60% 35%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 90% 80% at 60% 35%,#000 30%,transparent 80%)}
.hero-fx{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;display:block}
.hero .wrap{z-index:1}
.hero h1 span{animation:alzRise 1.05s cubic-bezier(.2,.7,.2,1) both}
.hero h1 span:nth-child(1){animation-delay:.05s}.hero h1 span:nth-child(2){animation-delay:.22s}
.hero .lead{animation:alzRise 1s .55s cubic-bezier(.2,.7,.2,1) both}
.hero .cta{animation:alzRise 1s .7s cubic-bezier(.2,.7,.2,1) both}
.hero #chat{animation:alzRise 1.1s .35s cubic-bezier(.2,.7,.2,1) both}
.hero .numbers{animation:alzFade 1.2s .9s ease both}
@keyframes alzRise{from{opacity:0;transform:translateY(.5em);filter:blur(10px)}to{opacity:1;transform:none;filter:none}}
@keyframes alzFade{from{opacity:0}to{opacity:1}}
.hero.dark h1 span:nth-child(3){background:linear-gradient(100deg,var(--lime) 0%,var(--lime) 38%,#f4ffd6 50%,var(--lime) 62%,var(--lime) 100%);background-size:260% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:alzRise 1.05s .39s cubic-bezier(.2,.7,.2,1) both,alzShine 7s 2s ease-in-out infinite;padding-bottom:.06em}
@keyframes alzShine{0%,55%{background-position:100% 0}85%,100%{background-position:0 0}}

/* pannello chat: bordo conico a sei colori che gira */
.hero.dark .chat{border:1.5px solid transparent;background:linear-gradient(var(--panel),var(--panel)) padding-box,conic-gradient(from var(--ang),var(--f1),var(--f2),var(--f3),var(--f4),var(--f5),var(--f6),var(--f1)) border-box;animation:alzAng 10s linear infinite;box-shadow:0 34px 80px -34px rgba(0,0,0,.85),0 0 80px -20px rgba(110,130,255,.35)}
@keyframes alzAng{to{--ang:360deg}}
.hero.dark .chat .head{background:linear-gradient(180deg,#fff,#fafbff)}
.voices i.on{box-shadow:0 0 10px -1px currentColor}
.voices i:nth-child(1){color:var(--f1)}.voices i:nth-child(2){color:var(--f2)}.voices i:nth-child(3){color:var(--f3)}
.voices i:nth-child(4){color:var(--f4)}.voices i:nth-child(5){color:var(--f5)}.voices i:nth-child(6){color:var(--f6)}
.msg{animation:alzMsg .45s cubic-bezier(.2,.7,.2,1) both}
@keyframes alzMsg{from{opacity:0;transform:translateY(8px)}}

/* numeri */
.numbers b,.big3 b{font-variant-numeric:tabular-nums}

/* bottoni: lampo al passaggio */
.btn.solid{position:relative;overflow:hidden;isolation:isolate}
.btn.solid::after{content:"";position:absolute;inset:-2px;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.6) 50%,transparent 70%);transform:translateX(-130%);transition:transform .75s cubic-bezier(.2,.7,.2,1)}
.btn.solid:hover::after{transform:translateX(130%)}

/* comparsa allo scorrimento (solo se il JS è attivo) */
.wow .rv{opacity:0;transform:translateY(24px);transition:opacity .85s cubic-bezier(.2,.7,.2,1),transform .85s cubic-bezier(.2,.7,.2,1);transition-delay:var(--d,0s)}
.wow .rv.shown{opacity:1;transform:none}

/* schede laboratorio: luce che segue il cursore */
.lab,.labcard{background-image:radial-gradient(260px circle at var(--mx,-400px) var(--my,-400px),color-mix(in srgb,var(--c) 18%,transparent),transparent 70%);transition:background-color .3s}
.lab::before,.labcard::before{transition:width .45s cubic-bezier(.2,.7,.2,1)}
.lab:hover::before{width:calc(100% - 16px)}
.lab:first-child:hover::before{width:calc(100% - 14px)}
.labcard:hover::before{width:calc(100% - 48px)}
.lab .ck,.labcard .ck{transition:color .3s}
.lab:hover .ck,.labcard:hover .ck{color:color-mix(in srgb,var(--c) 70%,var(--ink))}

/* scatola Continuity: inclinazione 3D */
.box{animation:alzHum 6s ease-in-out infinite;transform:perspective(800px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .5s cubic-bezier(.2,.7,.2,1);will-change:transform}
@keyframes alzHum{0%,100%{translate:0 0}50%{translate:0 -5px}}
.box .sheen{position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(320px circle at var(--lx,30%) var(--ly,20%),rgba(255,255,255,.28),transparent 60%);mix-blend-mode:soft-light}

/* registro: la riga che non torna sfarfalla */
table.reg tr.egg td{animation:alzFlick 8s infinite}
@keyframes alzFlick{0%,91%,95%,100%{opacity:1}92%,94%{opacity:.35}93%{opacity:.85}}

/* mappa del mondo: sei sedi, giorno e notte */
.worldmap{position:relative;margin-top:40px;border-radius:16px;overflow:hidden;background:radial-gradient(120% 90% at 50% 0%,#18214a 0%,#0b1230 55%,#070b1f 100%);box-shadow:0 30px 60px -36px rgba(11,18,48,.6),inset 0 0 0 1px rgba(255,255,255,.05)}
.worldmap canvas{display:block;width:100%;height:auto;aspect-ratio:var(--ar,2.26);cursor:default}
.worldmap .wm-cap{display:flex;flex-wrap:wrap;gap:6px 22px;align-items:center;padding:12px 18px 14px;font-size:.8rem;color:#8b92b0;border-top:1px solid rgba(255,255,255,.06);max-width:none}
.worldmap .wm-cap span{display:inline-flex;align-items:center;gap:7px}
.worldmap .wm-cap i{width:8px;height:8px;border-radius:50%;display:inline-block}
.worldmap .wm-cap .d{background:#c9d4ff}.worldmap .wm-cap .n{background:#3a4475}.worldmap .wm-cap .h{background:var(--lime);box-shadow:0 0 8px var(--lime)}
.worldmap .wm-cap .live{margin-left:auto;font-family:var(--mono);font-size:.72rem;color:#b9c0dc}
.worldmap .wm-tip{position:absolute;pointer-events:none;transform:translate(-50%,calc(-100% - 14px));background:rgba(7,11,31,.92);border:1px solid rgba(255,255,255,.12);color:#fff;font-size:.8rem;padding:6px 10px;border-radius:8px;white-space:nowrap;opacity:0;transition:opacity .15s}
.worldmap .wm-tip.on{opacity:1}
.worldmap .wm-tip b{font-weight:600}
.worldmap .wm-tip span{color:#b9c0dc;font-family:var(--mono);font-size:.72rem;margin-left:6px}

/* piè di pagina: il romanzo */
footer .book a,footer .cols .book a{display:inline;padding:0;color:var(--ink);border-bottom:1px solid var(--rule)}
footer .book a:hover{border-bottom-color:var(--ink)}

@media (max-width:640px){
  .worldmap{margin-top:28px;border-radius:12px}
  .worldmap .wm-cap{padding:10px 14px 12px}
}
