:root{--bg:#07090c;--ink:#eef2f5;--muted:#9aa4ad;--fire:#ff6a00;--fire2:#ffb347;--ice:#19b8ff;--ice2:#7fe0ff;--line:rgba(255,255,255,.12);--disp:"Chakra Petch",system-ui,sans-serif;--sans:Inter,system-ui,sans-serif}
*{box-sizing:border-box}html,body{height:100%;margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);overflow:hidden;-webkit-tap-highlight-color:transparent}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}a{color:inherit;text-decoration:none}
[hidden]{display:none!important}

/* ---------- HOME: video a schermo intero ---------- */
.stage{position:fixed;inset:0;overflow:hidden;isolation:isolate}
.intro-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-3;transform:scale(1.001)}
.stage-shade{position:absolute;inset:0;z-index:-2;opacity:0;transition:opacity 1.4s ease;background:radial-gradient(ellipse at 50% 46%,rgba(7,9,12,.15) 0,rgba(7,9,12,.55) 48%,rgba(7,9,12,.88) 100%)}
.fx{position:absolute;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.shock{position:absolute;left:50%;top:44%;width:0;height:0;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;opacity:0;
  border:2px solid rgba(255,196,120,.95);box-shadow:0 0 24px 4px rgba(255,106,0,.55),inset 0 0 24px 2px rgba(25,184,255,.45)}
body.forged .stage-shade{opacity:1}
body.forged .shock{animation:shock 1.15s cubic-bezier(.12,.7,.2,1) forwards}
@keyframes shock{0%{opacity:1;width:0;height:0}70%{opacity:.6}100%{opacity:0;width:240vmax;height:240vmax;border-width:1px}}

/* logo che compare */
.crest{position:absolute;left:50%;top:44%;width:min(46vh,78vw);aspect-ratio:1;transform:translate(-50%,-50%) scale(.35);opacity:0;filter:blur(18px) brightness(3);pointer-events:none}
body.forged .crest{animation:crestIn 1.35s cubic-bezier(.16,1.3,.3,1) .12s forwards}
@keyframes crestIn{0%{opacity:0;transform:translate(-50%,-50%) scale(.35) rotate(-8deg);filter:blur(18px) brightness(3)}55%{opacity:1;filter:blur(0) brightness(1.6)}100%{opacity:1;transform:translate(-50%,-50%) scale(1) rotate(0);filter:blur(0) brightness(1)}}
.crest-logo{position:relative;width:100%;height:100%;object-fit:contain;filter:drop-shadow(0 0 26px rgba(255,106,0,.45)) drop-shadow(0 0 46px rgba(25,184,255,.28))}
body.forged .crest-logo{animation:float 6s ease-in-out 1.6s infinite}
@keyframes float{0%,100%{transform:translateY(0) rotateX(0) rotateY(0)}50%{transform:translateY(-1.6%) rotateX(4deg) rotateY(-5deg)}}
.crest-glow{position:absolute;inset:8%;border-radius:50%;background:radial-gradient(circle,rgba(255,120,30,.55),rgba(25,184,255,.18) 45%,transparent 70%);filter:blur(30px);opacity:0}
body.forged .crest-glow{animation:glow 3.2s ease-in-out 1.2s infinite alternate}
@keyframes glow{from{opacity:.35;transform:scale(.92)}to{opacity:.85;transform:scale(1.08)}}
/* riflesso che passa sul metallo */
.crest-shine{position:absolute;inset:0;-webkit-mask:url(assets/forge-logo-v4.webp) center/contain no-repeat;mask:url(assets/forge-logo-v4.webp) center/contain no-repeat;
  background:linear-gradient(115deg,transparent 35%,rgba(255,255,255,.75) 48%,rgba(255,220,180,.35) 52%,transparent 64%) -150% 0/250% 100% no-repeat;mix-blend-mode:screen;opacity:.9}
body.forged .crest-shine{animation:shine 4.6s ease-in-out 1.5s infinite}
@keyframes shine{0%,55%{background-position:-150% 0}100%{background-position:250% 0}}

/* menu a piastre di metallo */
.forge-menu{position:absolute;left:50%;bottom:clamp(78px,11vh,128px);transform:translateX(-50%);display:flex;gap:clamp(10px,1.6vw,22px);opacity:0;pointer-events:none}
body.forged .forge-menu{animation:menuIn .9s cubic-bezier(.2,.9,.2,1) 1.25s forwards;pointer-events:auto}
@keyframes menuIn{from{opacity:0;transform:translate(-50%,24px)}to{opacity:1;transform:translate(-50%,0)}}
.plate{position:relative;min-width:clamp(150px,15vw,220px);padding:16px 26px 15px;font:600 clamp(13px,1.05vw,16px)/1 var(--disp);letter-spacing:.2em;text-transform:uppercase;
  background:linear-gradient(180deg,rgba(40,46,54,.82),rgba(12,15,19,.9));border:1px solid rgba(255,255,255,.14);clip-path:polygon(12px 0,100% 0,100% calc(100% - 12px),calc(100% - 12px) 100%,0 100%,0 12px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 10px 30px rgba(0,0,0,.45);transition:transform .25s,color .25s,box-shadow .25s;overflow:hidden;backdrop-filter:blur(6px)}
.plate i{display:block;font:500 10px var(--disp);letter-spacing:.3em;color:var(--fire);margin-bottom:7px;font-style:normal}
.plate:before{content:"";position:absolute;inset:auto 0 0 0;height:2px;background:linear-gradient(90deg,var(--fire),var(--fire2) 45%,var(--ice) 55%,var(--ice2));transform:scaleX(.18);transform-origin:left;transition:transform .35s}
.plate:after{content:"";position:absolute;inset:0;background:linear-gradient(115deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%) -120% 0/220% 100% no-repeat;transition:background-position .6s}
.plate:hover,.plate:focus-visible{transform:translateY(-4px);color:#fff;box-shadow:inset 0 1px 0 rgba(255,255,255,.18),0 0 0 1px rgba(255,140,40,.35),0 16px 40px rgba(255,106,0,.25),0 0 46px rgba(25,184,255,.18);outline:none}
.plate:hover:before,.plate:focus-visible:before{transform:scaleX(1)}
.plate:hover:after{background-position:120% 0}

.stage-tools{position:absolute;right:clamp(14px,2vw,28px);top:clamp(14px,2vw,26px);display:flex;gap:8px}
.chip{padding:10px 14px;font:600 11px var(--disp);letter-spacing:.16em;text-transform:uppercase;background:rgba(8,10,13,.55);border:1px solid var(--line);backdrop-filter:blur(8px);transition:border-color .2s,background .2s}
.chip:hover{border-color:rgba(255,140,40,.6);background:rgba(20,14,10,.7)}.chip b{color:var(--fire)}.chip.icon{width:40px;padding:10px 0}
.hidden{display:none}

/* ---------- PANNELLI ---------- */
.panel{position:fixed;inset:0;z-index:50;display:flex;flex-direction:column;overflow:hidden auto;clip-path:circle(0 at var(--ox,50%) var(--oy,80%));transition:clip-path .9s cubic-bezier(.7,0,.2,1)}
.panel.open{clip-path:circle(150% at var(--ox,50%) var(--oy,80%))}
.panel-bg{position:fixed;inset:-4%;z-index:-2;background:linear-gradient(180deg,rgba(6,8,11,.82),rgba(6,8,11,.9)),url(assets/sfondo.webp) center/cover;filter:saturate(1.1);animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1) translate(0,0)}to{transform:scale(1.08) translate(-1.5%,-1%)}}
.embers{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none}
.panel-head{display:flex;align-items:center;gap:16px;padding:clamp(14px,2.2vw,26px) clamp(16px,4vw,56px)}
.panel-head img{width:54px;height:54px;object-fit:contain;filter:drop-shadow(0 0 12px rgba(255,106,0,.4))}
.kicker{font:600 11px var(--disp);letter-spacing:.3em;color:var(--fire2);text-transform:uppercase}
.close{margin-left:auto;width:48px;height:48px;font:400 30px/1 var(--sans);border:1px solid var(--line);background:rgba(8,10,13,.6);transition:transform .3s,border-color .3s}
.close:hover{transform:rotate(90deg);border-color:var(--fire)}
.panel-title{padding:0 clamp(16px,4vw,56px);display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:12px 40px}
.panel-title h2,.contact h2{margin:0;font:700 clamp(38px,6.4vw,96px)/.9 var(--disp);letter-spacing:-.01em;text-transform:uppercase;text-shadow:0 0 40px rgba(255,106,0,.18)}
.panel-title h2 span,.contact h2 span{background:linear-gradient(90deg,var(--fire),var(--fire2) 40%,var(--ice2) 70%,var(--ice));-webkit-background-clip:text;background-clip:text;color:transparent}
.panel-title p{max-width:440px;margin:0;color:var(--muted);line-height:1.6;font-size:14px}
.panel.open .panel-title,.panel.open .services,.panel.open .ring-wrap,.panel.open .contact{animation:rise .9s cubic-bezier(.2,.9,.2,1) .35s both}
@keyframes rise{from{opacity:0;transform:translateY(40px)}to{opacity:1;transform:none}}

/* carosello 3D dei prodotti */
.ring-wrap{position:relative;flex:1;min-height:420px;display:flex;align-items:center;justify-content:center;touch-action:pan-y;user-select:none}
.ring-scene{width:100%;height:100%;min-height:420px;perspective:1700px;display:flex;align-items:center;justify-content:center;cursor:grab}
.ring-scene:active{cursor:grabbing}
.ring{position:relative;width:var(--cw);height:calc(var(--cw) * 1.02);transform-style:preserve-3d;transform:translateZ(calc(var(--r) * -1)) rotateY(var(--a,0deg))}
.card{position:absolute;inset:0;transform-style:preserve-3d;transform:rotateY(var(--ca)) translateZ(var(--r));transition:filter .4s,opacity .4s}
.card-in{position:absolute;inset:0;backface-visibility:hidden;display:flex;flex-direction:column;border:1px solid rgba(255,255,255,.14);background:linear-gradient(180deg,rgba(26,30,36,.92),rgba(9,11,14,.96));overflow:hidden;
  box-shadow:0 30px 60px rgba(0,0,0,.5);transition:transform .45s cubic-bezier(.2,.9,.2,1),box-shadow .45s,border-color .45s}
.card img{width:100%;aspect-ratio:16/9;object-fit:cover;display:block}
.card-txt{padding:16px 18px 18px;display:flex;flex-direction:column;gap:8px;flex:1}
.card h3{margin:0;font:700 22px var(--disp);letter-spacing:.06em}
.card p{margin:0;color:var(--muted);font-size:13px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.card .more{margin-top:auto;font:600 11px var(--disp);letter-spacing:.22em;color:var(--fire2);text-transform:uppercase}
.card.front .card-in{transform:scale(1.06);border-color:rgba(255,150,60,.55);box-shadow:0 0 0 1px rgba(255,120,30,.3),0 30px 80px rgba(255,106,0,.28),0 0 70px rgba(25,184,255,.16)}
.card:not(.front){filter:brightness(.55) saturate(.8)}
.ring-arrow{position:absolute;top:50%;z-index:5;width:56px;height:56px;margin-top:-28px;font:400 34px/1 var(--sans);border:1px solid var(--line);background:rgba(8,10,13,.65);backdrop-filter:blur(6px);transition:border-color .2s,transform .2s}
.ring-arrow:hover{border-color:var(--fire);transform:scale(1.08)}.ring-arrow.prev{left:clamp(8px,3vw,48px)}.ring-arrow.next{right:clamp(8px,3vw,48px)}
.hint{margin:0 0 76px;text-align:center;font:500 11px var(--disp);letter-spacing:.24em;color:var(--muted);text-transform:uppercase}

/* servizi */
.services{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;padding:clamp(24px,5vh,56px) clamp(16px,4vw,56px) 96px;perspective:1000px}
.svc{position:relative;padding:26px 22px 28px;min-height:250px;border:1px solid rgba(255,255,255,.12);background:linear-gradient(160deg,rgba(30,34,40,.86),rgba(9,11,14,.92));transform-style:preserve-3d;transition:transform .2s ease-out,border-color .3s,box-shadow .3s}
.svc b{display:block;font-size:30px;color:var(--ice2);text-shadow:0 0 20px rgba(25,184,255,.6);transform:translateZ(30px)}
.svc h3{margin:44px 0 10px;font:700 24px var(--disp);letter-spacing:.04em;transform:translateZ(24px)}
.svc p{margin:0;color:var(--muted);font-size:14px;line-height:1.6;transform:translateZ(16px)}
.svc:hover{border-color:rgba(255,140,40,.5);box-shadow:0 24px 60px rgba(255,106,0,.18)}

/* contatti */
.contact{flex:1;display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:28px;padding:0 clamp(16px,6vw,96px) 110px}
.contact h2{font-size:clamp(52px,10vw,170px)}
.ticket{display:inline-flex;align-items:center;gap:18px;padding:20px 30px;font:700 clamp(15px,1.4vw,20px) var(--disp);letter-spacing:.14em;text-transform:uppercase;color:#120800;
  background:linear-gradient(90deg,var(--fire),var(--fire2));clip-path:polygon(14px 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 14px);box-shadow:0 0 40px rgba(255,106,0,.45);transition:transform .25s,box-shadow .25s}
.ticket:hover{transform:translateY(-3px);box-shadow:0 0 60px rgba(255,106,0,.7),0 0 30px rgba(25,184,255,.35)}
.ticket.small{padding:15px 22px;font-size:13px}

/* scheda prodotto */
.detail{position:fixed;inset:0;z-index:80;display:flex;align-items:center;justify-content:center;padding:clamp(12px,3vw,40px);background:rgba(4,5,7,.78);backdrop-filter:blur(10px);animation:fade .35s ease}
@keyframes fade{from{opacity:0}}
.detail-card{position:relative;width:min(1180px,100%);max-height:100%;overflow:auto;display:grid;grid-template-columns:1.25fr 1fr;border:1px solid rgba(255,150,60,.35);background:linear-gradient(160deg,#151a20,#07090c);box-shadow:0 0 80px rgba(255,106,0,.2);animation:pop .5s cubic-bezier(.2,1.2,.3,1)}
@keyframes pop{from{opacity:0;transform:scale(.92) translateY(20px)}}
.detail-card .close{position:absolute;right:12px;top:12px;z-index:2}
.detail-media img{width:100%;height:100%;object-fit:cover;display:block;min-height:280px}
.detail-body{padding:clamp(20px,3vw,40px);display:flex;flex-direction:column;gap:12px}
.detail-body h3{margin:0;font:700 clamp(28px,3vw,40px) var(--disp);letter-spacing:.04em}
.detail-tag{margin:0;color:#d7dde2;line-height:1.6}
.feat-title{font:600 11px var(--disp);letter-spacing:.3em;color:var(--ice2);margin-top:6px}
.detail-body ul{margin:0;padding-left:18px;color:var(--muted);font-size:14px;line-height:1.75}
.detail-note{margin:0;font-size:12px;color:#8b949c;font-style:italic}
.detail-meta{display:flex;flex-wrap:wrap;gap:8px 22px;font:500 12px var(--disp);letter-spacing:.1em;color:#c3cad0;padding-top:12px;border-top:1px solid var(--line);margin-top:auto}

/* bandiere */
.lang{position:fixed;left:50%;bottom:14px;transform:translateX(-50%);z-index:90;display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:7px 10px;max-width:calc(100vw - 32px);
  background:rgba(8,10,13,.62);border:1px solid var(--line);backdrop-filter:blur(10px)}
.lang button{width:30px;height:21px;padding:0;border:1px solid transparent;opacity:.62;transition:opacity .2s,transform .2s,border-color .2s}
.lang button img{width:100%;height:100%;object-fit:cover;display:block}
.lang button:hover{opacity:1;transform:translateY(-2px)}.lang button[aria-pressed=true]{opacity:1;border-color:var(--fire2);box-shadow:0 0 12px rgba(255,140,40,.6)}

@media (max-width:900px){
  .services{grid-template-columns:repeat(2,minmax(0,1fr))}
  .detail-card{grid-template-columns:1fr}
}
@media (max-width:640px){
  .crest{top:40%;width:min(70vw,40vh)}
  .forge-menu{flex-direction:column;align-items:stretch;width:min(320px,calc(100vw - 32px));bottom:88px;gap:8px}
  .plate{min-width:0;padding:13px 18px}
  .services{grid-template-columns:1fr}
  .svc{min-height:0}.svc h3{margin-top:18px}
  .ring-arrow{width:44px;height:44px;margin-top:-22px}
  .lang button{width:25px;height:17px}
  .stage-tools .chip span{display:none}
}
@media (prefers-reduced-motion:reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}}