/* EURONICS_TECH_DEMO_CLOUD_V1_R1 */
:root{
  --cyan:#73e7ff;
  --blue:#2678ff;
  --violet:#7b55ff;
  --yellow:#ffd400;
  --fg:#fff;
  --muted:rgba(255,255,255,.64);
  --stage-w:100vw;
  --stage-h:100vh;
}
*{box-sizing:border-box}
html,body{
  margin:0!important;
  padding:0!important;
  width:100%;
  height:100%;
  overflow:hidden!important;
  background:#01040a;
}
body{
  color:var(--fg);
  font-family:"Segoe UI Variable","Segoe UI",Arial,sans-serif;
  cursor:none;
  user-select:none;
}
.stage{
  position:fixed;
  inset:0;
  width:var(--stage-w);
  height:var(--stage-h);
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%,rgba(0,170,255,.14),transparent 30%),
    radial-gradient(circle at 82% 74%,rgba(105,57,255,.15),transparent 33%),
    linear-gradient(135deg,#020711 0%,#071329 48%,#01040b 100%);
  isolation:isolate;
}
.network-canvas{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  z-index:1;
  opacity:.88;
}
.tech-grid{
  position:absolute;
  inset:0;
  z-index:2;
  background-image:
    linear-gradient(rgba(255,255,255,.027) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.027) 1px,transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom,rgba(0,0,0,.72),transparent 96%);
}
.scanline{
  position:absolute;
  z-index:3;
  left:0;right:0;
  top:-20vh;
  height:18vh;
  background:linear-gradient(to bottom,transparent,rgba(54,211,255,.07),transparent);
  animation:scan 7.8s linear infinite;
}
@keyframes scan{to{transform:translateY(145vh)}}
.ambient{
  position:absolute;
  z-index:0;
  width:58vw;
  height:58vw;
  border-radius:50%;
  filter:blur(80px);
  opacity:.18;
  animation:drift 13s ease-in-out infinite alternate;
}
.ambient-a{left:-24vw;top:-20vw;background:#007dff}
.ambient-b{right:-25vw;bottom:-28vw;background:#6c43ff;animation-duration:17s}
@keyframes drift{to{transform:translate(7vw,5vh) scale(1.12)}}

.brand{
  position:absolute;
  left:3vw;
  top:3vh;
  z-index:20;
  display:flex;
  align-items:center;
  gap:1vw;
  opacity:.92;
}
.brand img{
  display:block;
  width:auto;
  height:clamp(28px,3.2vw,58px);
  object-fit:contain;
  filter:drop-shadow(0 5px 20px rgba(0,0,0,.28));
}
.brand span{
  font-size:clamp(9px,.72vw,14px);
  font-weight:800;
  letter-spacing:.18em;
  color:rgba(255,255,255,.56);
}
.clock{
  position:absolute;
  right:3vw;
  top:3.4vh;
  z-index:20;
  font-size:clamp(11px,.85vw,16px);
  font-weight:700;
  letter-spacing:.11em;
  color:rgba(255,255,255,.44);
}
.scene-host{
  position:absolute;
  inset:0;
  z-index:10;
}
.scene{
  position:absolute;
  inset:0;
  opacity:0;
  transform:scale(1.018);
  transition:opacity 900ms ease,transform 1300ms ease;
  pointer-events:none;
}
.scene.active{
  opacity:1;
  transform:scale(1);
}
.scene-layout{
  position:absolute;
  inset:11vh 6vw 9vh;
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(360px,.85fr);
  gap:5vw;
  align-items:center;
}
.scene-copy{max-width:58vw}
.eyebrow{
  margin-bottom:1.8vh;
  color:var(--cyan);
  font-size:clamp(12px,1vw,19px);
  font-weight:900;
  letter-spacing:.23em;
  text-transform:uppercase;
}
.scene h1{
  margin:0;
  white-space:pre-line;
  color:#fff;
  font-size:clamp(54px,7.2vw,138px);
  line-height:.88;
  letter-spacing:-.058em;
  font-weight:950;
  text-shadow:0 18px 55px rgba(0,0,0,.32);
}
.scene p{
  max-width:48vw;
  margin:2.7vh 0 0;
  color:rgba(255,255,255,.68);
  font-size:clamp(15px,1.28vw,25px);
  line-height:1.48;
  font-weight:500;
}
.chips{
  display:flex;
  flex-wrap:wrap;
  gap:.8vw;
  margin-top:3.4vh;
}
.chips span{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:.68em 1em;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(255,255,255,.045);
  color:rgba(255,255,255,.77);
  font-size:clamp(9px,.72vw,14px);
  font-weight:800;
  letter-spacing:.09em;
}
.visual{
  position:relative;
  aspect-ratio:1/1;
  width:min(38vw,560px);
  justify-self:end;
  display:grid;
  place-items:center;
}
.ring{
  position:absolute;
  width:72%;
  height:72%;
  border:1px solid rgba(115,231,255,.23);
  border-radius:50%;
  box-shadow:
    0 0 0 2.2vw rgba(38,120,255,.026),
    0 0 7vw rgba(26,149,255,.18);
  animation:ringSpin 18s linear infinite;
}
.ring:before,.ring:after{
  content:"";
  position:absolute;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.09);
}
.ring:before{inset:12%}
.ring:after{inset:27%}
@keyframes ringSpin{to{transform:rotate(360deg)}}
.core{
  position:relative;
  width:45%;
  aspect-ratio:1/1;
  border-radius:28%;
  display:grid;
  place-items:center;
  background:
    linear-gradient(145deg,rgba(115,231,255,.18),rgba(76,58,255,.16)),
    rgba(2,9,22,.86);
  border:1px solid rgba(129,230,255,.32);
  box-shadow:
    inset 0 0 3vw rgba(100,220,255,.08),
    0 2vw 6vw rgba(0,0,0,.36),
    0 0 5vw rgba(43,142,255,.22);
  transform:rotate(-8deg);
}
.core strong{
  transform:rotate(8deg);
  text-align:center;
  font-size:clamp(18px,2vw,36px);
  line-height:1.05;
  letter-spacing:-.03em;
}
.core small{
  display:block;
  margin-top:.5em;
  color:var(--cyan);
  font-size:.35em;
  letter-spacing:.18em;
}
.scene[data-scene="gaming"] .core{
  border-radius:50%;
  background:radial-gradient(circle at 40% 35%,rgba(145,81,255,.46),rgba(16,8,45,.94) 68%);
  box-shadow:0 0 8vw rgba(113,50,255,.28);
}
.scene[data-scene="hardware"] .core{
  border-radius:14%;
  background:
    linear-gradient(90deg,rgba(115,231,255,.10) 1px,transparent 1px),
    linear-gradient(rgba(115,231,255,.10) 1px,transparent 1px),
    linear-gradient(145deg,#07162c,#080b1c);
  background-size:18px 18px,18px 18px,auto;
}
.scene[data-scene="spotlight"] .scene-layout{
  grid-template-columns:minmax(0,.9fr) minmax(440px,1.1fr);
}
.product-card{
  position:relative;
  width:min(44vw,680px);
  min-height:min(56vh,600px);
  justify-self:end;
  padding:3vw;
  border:1px solid rgba(255,255,255,.14);
  border-radius:2.1vw;
  background:linear-gradient(145deg,rgba(255,255,255,.085),rgba(255,255,255,.025));
  box-shadow:0 2.5vw 8vw rgba(0,0,0,.34);
  backdrop-filter:blur(18px);
  overflow:hidden;
}
.product-card:before{
  content:"";
  position:absolute;
  inset:-30% 35% 20% -30%;
  background:radial-gradient(circle,rgba(43,169,255,.22),transparent 65%);
  pointer-events:none;
}
.product-brand{
  color:var(--yellow);
  font-size:clamp(12px,.9vw,17px);
  font-weight:950;
  letter-spacing:.16em;
}
.product-model{
  margin-top:1.4vh;
  font-size:clamp(32px,3.5vw,65px);
  line-height:.94;
  letter-spacing:-.045em;
  font-weight:950;
}
.product-headline{
  margin-top:2vh;
  color:var(--muted);
  font-size:clamp(13px,1.05vw,20px);
  line-height:1.4;
}
.spec-grid{
  margin-top:3vh;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:.8vw;
}
.spec{
  min-height:78px;
  display:flex;
  align-items:center;
  padding:1vw 1.15vw;
  border:1px solid rgba(255,255,255,.09);
  border-radius:.8vw;
  background:rgba(0,0,0,.15);
  font-size:clamp(11px,.85vw,16px);
  font-weight:800;
  letter-spacing:.04em;
}

.scene-dots{
  position:absolute;
  z-index:30;
  left:50%;
  bottom:3.4vh;
  transform:translateX(-50%);
  display:flex;
  gap:9px;
}
.scene-dots i{
  width:6px;
  height:6px;
  border-radius:999px;
  background:rgba(255,255,255,.19);
  transition:width .35s ease,background .35s ease;
}
.scene-dots i.active{
  width:28px;
  background:rgba(115,231,255,.9);
}
.progress{
  position:absolute;
  z-index:31;
  left:0;
  bottom:0;
  width:100%;
  height:2px;
  background:linear-gradient(90deg,var(--cyan),var(--blue),var(--violet));
  transform-origin:left center;
  transform:scaleX(0);
}
.boot-state{
  position:absolute;
  z-index:50;
  inset:0;
  display:grid;
  place-items:center;
  background:#01040a;
  color:rgba(255,255,255,.72);
  font-size:clamp(14px,1.3vw,24px);
  letter-spacing:.08em;
  transition:opacity .6s ease;
}
.boot-state.hide{opacity:0;pointer-events:none}
.fullscreen-hint{
  position:absolute;
  z-index:60;
  right:2vw;
  bottom:2.5vh;
  padding:.7em 1em;
  border:1px solid rgba(255,255,255,.10);
  border-radius:999px;
  background:rgba(0,0,0,.22);
  color:rgba(255,255,255,.38);
  font-size:clamp(8px,.62vw,12px);
  font-weight:800;
  letter-spacing:.08em;
  opacity:0;
  animation:hint 8s ease forwards 2s;
}
@keyframes hint{
  0%{opacity:0}
  12%,62%{opacity:1}
  100%{opacity:0}
}

/* Fullscreen Samsung / TV: stesso principio collaudato su Promo TV */
.stage:fullscreen,
.stage:-webkit-full-screen{
  position:fixed!important;
  inset:0!important;
  left:0!important;
  top:0!important;
  right:auto!important;
  bottom:auto!important;
  width:var(--stage-w,100%)!important;
  height:var(--stage-h,100%)!important;
  min-width:0!important;
  min-height:0!important;
  max-width:none!important;
  max-height:none!important;
  margin:0!important;
  padding:0!important;
  overflow:hidden!important;
  transform:none!important;
}

@media(max-aspect-ratio:4/3){
  .scene-layout{grid-template-columns:1fr;inset:12vh 7vw 10vh}
  .visual{position:absolute;right:-12vw;bottom:-16vh;width:62vw;opacity:.38}
  .scene-copy{max-width:82vw}
  .scene p{max-width:72vw}
  .scene[data-scene="spotlight"] .scene-layout{grid-template-columns:1fr}
  .product-card{position:absolute;right:-8vw;bottom:-12vh;width:58vw;opacity:.42}
}