/* M.G Laptop Hero — portatile approvato (immagine) con livelli animati sopra, loop 8 s.
   Tutto è scoperto sotto .mglh, quindi il blocco si può inserire in qualsiasi pagina. */

@font-face{font-family:"MGLH Display";src:url("../fonts/bricolage-grotesque-latin-400-normal.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"MGLH Display";src:url("../fonts/bricolage-grotesque-latin-600-normal.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"MGLH Mono";src:url("../fonts/jetbrains-mono-latin-500-normal.woff2") format("woff2");font-weight:500;font-display:swap}

.mglh{
  --night:#0A1222; --night-deep:#060B16;
  --win:#8AAAE4; --gold:#E4B867; --amber:#EEA955; --bronze:#B9864F; --cream:#F1E8D8; --ram:#4FA3FF;
  --display:"MGLH Display","Bricolage Grotesque","Segoe UI",system-ui,sans-serif;
  --mono:"MGLH Mono","JetBrains Mono","Cascadia Mono",Consolas,ui-monospace,monospace;
  --ease:cubic-bezier(.45,0,.2,1);
  --loop:8s;
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;background:var(--night-deep);color:var(--cream);contain:layout paint;
}
.mglh *,.mglh *::before,.mglh *::after{box-sizing:border-box}

/* ---------- scena 1920×1080, scalata dal JS ---------- */
.mglh-scene{position:absolute;left:0;top:0;width:1920px;height:1080px;transform-origin:0 0;
  background:
    radial-gradient(ellipse 60% 30% at 50% 96%, rgba(238,169,85,.15), transparent 70%),
    radial-gradient(ellipse 65% 60% at 50% 36%, #172744 0%, var(--night) 55%, var(--night-deep) 100%)}
.mglh-vignette{position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse 85% 80% at 50% 45%, transparent 55%, rgba(3,6,12,.55) 100%)}
.mglh-bokeh{position:absolute;border-radius:50%;pointer-events:none;will-change:opacity;animation:mglh-twinkle var(--loop) ease-in-out infinite}
.mglh-bokeh.w{background:radial-gradient(closest-side, rgba(238,169,85,.16), rgba(238,169,85,0))}
.mglh-bokeh.b{background:radial-gradient(closest-side, rgba(138,170,228,.12), rgba(138,170,228,0))}
.mglh-halo{position:absolute;left:430px;top:-40px;width:1060px;height:760px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(138,170,228,.10), rgba(228,184,103,.05) 55%, transparent 80%);
  will-change:opacity;animation:mglh-wash var(--loop) var(--ease) infinite}
.mglh-floor{position:absolute;left:160px;top:975px;width:1600px;height:120px;border-radius:50%;background:radial-gradient(closest-side, rgba(2,4,9,.9), transparent 80%)}
.mglh-floor-warm{position:absolute;left:480px;top:990px;width:960px;height:80px;border-radius:50%;
  background:radial-gradient(closest-side, rgba(238,169,85,.22), transparent 80%);will-change:opacity;animation:mglh-on var(--loop) var(--ease) infinite}

/* ---------- portatile: tutti i livelli usano le coordinate dell'immagine (2112×1392) ---------- */
.mglh-laptop{position:absolute;inset:0;will-change:transform;animation:mglh-breath var(--loop) ease-in-out infinite}
.mglh-rig{position:absolute;left:0;top:0;width:2112px;height:1392px;transform-origin:0 0;transform:translate(157px,26px) scale(.76)}
.mglh-photo{position:absolute;left:0;top:0;width:2112px;height:1392px;max-width:none;user-select:none;pointer-events:none}
.mglh-veil{filter:brightness(.4) saturate(.65);
  -webkit-mask-image:linear-gradient(180deg,transparent 59%,#000 64%);mask-image:linear-gradient(180deg,transparent 59%,#000 64%);
  will-change:opacity;animation:mglh-veil var(--loop) var(--ease) infinite}

.mglh-fan{position:absolute;left:1542px;top:884px;width:282px;height:282px;transform:scaleY(.5887)}
.mglh-fan img{display:block;width:100%;height:100%;will-change:transform;animation:mglh-spin 4s linear infinite}

.mglh-glow{position:absolute;opacity:0;mix-blend-mode:screen;pointer-events:none;will-change:opacity}
.mglh-glow.gold{border-radius:50%;background:radial-gradient(closest-side, rgba(255,196,110,.55), rgba(238,169,85,.18) 55%, rgba(238,169,85,0))}
.mglh-glow.blue{border-radius:40%;background:radial-gradient(closest-side, rgba(90,170,255,.55), rgba(79,163,255,.15) 60%, rgba(79,163,255,0))}
.mglh-glow.ring{border-radius:50%;border:3px solid rgba(255,206,130,.55);box-shadow:0 0 36px 6px rgba(238,169,85,.45), inset 0 0 26px rgba(238,169,85,.35)}
.mglh-glow.ram{animation:mglh-litRam var(--loop) var(--ease) infinite}
.mglh-glow.cpu{animation:mglh-litCpu var(--loop) var(--ease) infinite}
.mglh-glow.gpu{animation:mglh-litGpu var(--loop) var(--ease) infinite}
.mglh-glow.fan{animation:mglh-litFan var(--loop) var(--ease) infinite}

.mglh-leds{position:absolute;inset:0;will-change:opacity;animation:mglh-on var(--loop) var(--ease) infinite}
.mglh-led{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;mix-blend-mode:screen;will-change:opacity;animation:mglh-led 4s ease-in-out infinite}
.mglh-led.w{background:radial-gradient(closest-side, rgba(255,214,150,.95), rgba(255,190,100,.25) 45%, rgba(255,190,100,0))}
.mglh-led.b{background:radial-gradient(closest-side, rgba(150,200,255,.95), rgba(79,163,255,.25) 45%, rgba(79,163,255,0))}

.mglh-pulses{position:absolute;left:0;top:0;width:2112px;height:1392px;overflow:visible;mix-blend-mode:screen;animation:mglh-pulses var(--loop) linear infinite}
.mglh-pulses path{fill:none;stroke-linecap:round;animation:mglh-travel 2s linear infinite}
.mglh-pulses .heat{stroke:rgba(255,190,105,.95);stroke-width:9;stroke-dasharray:8 92}
.mglh-pulses .heat-soft{stroke:rgba(238,169,85,.35);stroke-width:24;stroke-dasharray:12 88}
.mglh-pulses .data{stroke:rgba(140,195,255,.95);stroke-width:5;stroke-dasharray:10 90}
.mglh-pulses .data-soft{stroke:rgba(79,163,255,.35);stroke-width:16;stroke-dasharray:14 86}

.mglh-spill{position:absolute;left:300px;top:812px;width:1520px;height:170px;mix-blend-mode:screen;opacity:0;will-change:opacity;
  background:radial-gradient(ellipse 50% 70% at 50% 0, rgba(150,175,230,.22), rgba(228,184,103,.06) 60%, transparent 75%);animation:mglh-wash var(--loop) var(--ease) infinite}

/* ---------- schermo: 1491×702 nell'immagine, contenuto progettato su 1060×500 ---------- */
.mglh-screen{position:absolute;left:312px;top:78px;width:1491px;height:702px;overflow:hidden;border-radius:3px;background:#03060D}
.mglh-screen::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(118deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 30%, transparent 46%)}
.mglh-scr{position:absolute;left:0;top:0;width:1060px;height:500px;transform-origin:0 0;transform:scale(1.4066)}
.mglh-scr-lit{position:absolute;inset:0;opacity:0;will-change:opacity;animation:mglh-wash var(--loop) var(--ease) infinite;
  background:
    repeating-linear-gradient(90deg, rgba(138,170,228,.045) 0 1px, transparent 1px 40px),
    repeating-linear-gradient(0deg, rgba(138,170,228,.045) 0 1px, transparent 1px 40px),
    radial-gradient(ellipse 70% 75% at 50% 32%, #1B2D4E, #0C1730 60%, #070D1A)}
.mglh-idle{position:absolute;left:0;right:0;top:230px;text-align:center;font:500 30px/1 var(--mono);color:rgba(241,232,216,.45);animation:mglh-idle var(--loop) linear infinite}
.mglh-idle span{animation:mglh-blink 1s steps(1,end) infinite}

.mglh-win{position:absolute;left:290px;top:16px;width:480px;height:272px;border-radius:16px;
  border:1.5px solid rgba(138,170,228,.85);background:rgba(138,170,228,.07);
  opacity:0;will-change:transform,opacity;animation:mglh-winIn var(--loop) var(--ease) infinite}
.mglh-warm,.mglh-ring{position:absolute;border:2.5px solid transparent;
  background:linear-gradient(90deg,var(--win),var(--gold)) border-box;
  -webkit-mask:linear-gradient(#000 0 0) padding-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) padding-box exclude,linear-gradient(#000 0 0)}
.mglh-warm{inset:-1.5px;border-radius:16px;opacity:0;will-change:opacity;animation:mglh-warm var(--loop) var(--ease) infinite}
.mglh-tabs{position:absolute;left:16px;top:12px;display:flex;gap:8px;font:500 18px/1 var(--mono)}
.mglh-tab{padding:8px 13px;border-radius:8px}
.mglh-tab.ps{background:rgba(138,170,228,.20);color:var(--win)}
.mglh-tab.ub{background:rgba(228,184,103,.20);color:var(--gold);opacity:0;animation:mglh-tab2 var(--loop) var(--ease) infinite}
.mglh-ctl{position:absolute;right:20px;top:23px;display:flex;gap:16px;align-items:center}
.mglh-ctl i{display:block;width:12px;height:12px;border:1.5px solid rgba(241,232,216,.55)}
.mglh-ctl i:first-child{height:0;border-width:1.5px 0 0}
.mglh-ctl i:last-child{border:0;position:relative}
.mglh-ctl i:last-child::before,.mglh-ctl i:last-child::after{content:"";position:absolute;left:-2px;top:5px;width:16px;border-top:1.5px solid rgba(241,232,216,.55);transform:rotate(45deg)}
.mglh-ctl i:last-child::after{transform:rotate(-45deg)}
.mglh-sep{position:absolute;left:0;right:0;top:56px;border-top:1px solid rgba(138,170,228,.30)}
.mglh-line{position:absolute;left:34px;font:500 30px/1 var(--mono);white-space:pre}
.mglh-line.l1{top:88px;color:var(--win);clip-path:inset(0 100% 0 0);animation:mglh-type var(--loop) infinite}
.mglh-line.l2{top:142px;color:var(--gold);opacity:0;animation:mglh-line2 var(--loop) var(--ease) infinite}
.mglh-line.l2 b{display:inline-block;width:.55em;height:1em;margin-left:.3em;vertical-align:-.12em;background:var(--gold);animation:mglh-blink 1s steps(1,end) infinite}
.mglh-ghost{position:absolute;left:34px;height:11px;border-radius:5px;background:rgba(241,232,216,.10)}

.mglh-glyph{position:absolute;left:850px;top:160px;font:500 100px/1 var(--mono);color:var(--gold);white-space:pre;
  transform-origin:0 0;opacity:0;will-change:transform,opacity;animation:mglh-glyph var(--loop) var(--ease) infinite;text-shadow:0 0 26px rgba(238,169,85,.35)}
.mglh-ring{left:370px;top:-8px;width:320px;height:320px;border-radius:50%;opacity:0;will-change:transform,opacity;animation:mglh-ring var(--loop) var(--ease) infinite}

.mglh-claim{position:absolute;left:0;right:0;text-align:center;font-family:var(--display);font-size:70px;line-height:1.05;letter-spacing:-.015em;opacity:0;will-change:transform,opacity}
.mglh-claim.c1{top:312px;font-weight:600;color:var(--cream);animation:mglh-c1 var(--loop) var(--ease) infinite}
.mglh-claim.c2{top:392px;font-weight:400;color:var(--gold);animation:mglh-c2 var(--loop) var(--ease) infinite}
.mglh-rule{position:absolute;left:430px;width:200px;top:484px;height:1.5px;background:linear-gradient(90deg,transparent,var(--gold),transparent);
  transform:scaleX(0);will-change:transform;animation:mglh-rule var(--loop) var(--ease) infinite}

/* ---------- loop 8 s (1 s = 12,5%) ---------- */
@keyframes mglh-breath{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
@keyframes mglh-twinkle{0%,100%{opacity:.55}50%{opacity:1}}
@keyframes mglh-wash{0%,25%{opacity:0}33%,85%{opacity:1}95%,100%{opacity:0}}
@keyframes mglh-veil{0%,4%{opacity:1}18%,86%{opacity:0}97%,100%{opacity:1}}
@keyframes mglh-on{0%,6%{opacity:0}20%,86%{opacity:1}97%,100%{opacity:0}}
@keyframes mglh-litRam{0%,5%{opacity:0}17%,86%{opacity:.8}97%,100%{opacity:0}}
@keyframes mglh-litCpu{0%,8%{opacity:0}20%,86%{opacity:.85}97%,100%{opacity:0}}
@keyframes mglh-litGpu{0%,11%{opacity:0}23%,86%{opacity:.85}97%,100%{opacity:0}}
@keyframes mglh-litFan{0%,14%{opacity:0}26%,86%{opacity:.8}97%,100%{opacity:0}}
@keyframes mglh-led{0%,100%{opacity:.15}50%{opacity:1}}
@keyframes mglh-pulses{0%,15%{opacity:0}21%,84%{opacity:1}91%,100%{opacity:0}}
@keyframes mglh-travel{from{stroke-dashoffset:100}to{stroke-dashoffset:0}}
@keyframes mglh-spin{to{transform:rotate(360deg)}}
@keyframes mglh-idle{0%,26%{opacity:1}30%,94%{opacity:0}98%,100%{opacity:1}}
@keyframes mglh-blink{0%{opacity:1}50%{opacity:0}}
@keyframes mglh-winIn{0%,30%{opacity:0;transform:translateX(-160px)}37.5%{opacity:1;transform:translateX(-100px)}43%,85%{opacity:1;transform:translateX(0)}93%,100%{opacity:0;transform:translateX(0)}}
@keyframes mglh-type{0%,37.5%{clip-path:inset(0 100% 0 0);animation-timing-function:steps(11,end)}44%,100%{clip-path:inset(0 0 0 0)}}
@keyframes mglh-glyph{0%,34%{opacity:0;transform:translate(30px,0) scale(1)}38.5%,45%{opacity:1;transform:translate(0,0) scale(1)}52.5%{opacity:1;transform:translate(-526px,-2px) scale(.3)}54.5%,100%{opacity:0;transform:translate(-526px,-2px) scale(.3)}}
@keyframes mglh-line2{0%,52%{opacity:0}55.5%,100%{opacity:1}}
@keyframes mglh-tab2{0%,53%{opacity:0;transform:translateY(4px)}58%,100%{opacity:1;transform:translateY(0)}}
@keyframes mglh-warm{0%,53%{opacity:0}61%,100%{opacity:1}}
@keyframes mglh-ring{0%,52%{opacity:0;transform:scale(.3)}54.5%{opacity:.7}65%,100%{opacity:0;transform:scale(1.6)}}
@keyframes mglh-c1{0%,57%{opacity:0;transform:translateY(16px)}65%,85%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes mglh-c2{0%,62%{opacity:0;transform:translateY(16px)}70%,85%{opacity:1;transform:translateY(0)}94%,100%{opacity:0;transform:translateY(-6px)}}
@keyframes mglh-rule{0%,68%{transform:scaleX(0)}77%,85%{transform:scaleX(1)}94%,100%{transform:scaleX(0)}}

.mglh.is-paused,.mglh.is-paused *{animation-play-state:paused!important}
@media (prefers-reduced-motion: reduce){
  .mglh,.mglh *{animation-play-state:paused!important;animation-delay:-5.8s!important}
}