/* ---- KORTEX CUBE WIDGET ----
   This file is loaded on top of the real site's styles.css, so nothing
   in here may use bare/global selectors — a bare `body{}` rule here
   was overriding the whole site's body (display:grid + height:100vh +
   overflow:hidden), which crushed the entire page into one
   non-scrolling viewport. Every rule below is scoped under `.scene`
   so it can only ever affect the cube widget itself, never leak into
   the rest of the site (this also protects against future collisions,
   since names like .top/.left/.right/.front/.platform are common
   utility-style class names elsewhere on a site). */
.scene{
  position:absolute;
  top:50%;
  left:50%;
  width:520px;
  height:520px;
  transform:translate(-50%,-50%) scale(.72);
  perspective:1200px;
  perspective-origin:center center;
}
.scene .glow{
  position:absolute;
  width:360px;
  height:360px;
  left:80px;
  top:100px;
  background:radial-gradient(circle,#7c3aed66 0%,#5b21b622 45%,transparent 75%);
  filter:blur(30px);
}
.scene .platform{
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  border-radius:34px;
  background:linear-gradient(180deg,#282244,#171526);
  border:1px solid rgba(180,120,255,.15);
  box-shadow:
    0 0 40px rgba(116,54,255,.25),
    inset 0 2px 0 rgba(255,255,255,.06),
    inset 0 -12px 30px rgba(0,0,0,.5);
}
.scene .p1{ width:320px; height:110px; top:245px; }
.scene .p2{ width:360px; height:120px; top:275px; opacity:.9; }
.scene .p3{ width:400px; height:130px; top:305px; opacity:.8; }
.scene .platform::before{
  content:"";
  position:absolute;
  inset:8px;
  border-radius:28px;
  border:2px solid rgba(129,82,255,.5);
  box-shadow:0 0 18px rgba(120,70,255,.45);
}

/* ---- CUBE ----
   IMPORTANT: `filter` (e.g. drop-shadow) must never be applied to the
   .cube element or any of its ancestors. In Chromium, `filter` forces
   a flattened rendering context, which silently breaks
   transform-style:preserve-3d on descendants — every face collapses
   onto the front face. That was the real cause of the "flat" look.
   Grounding shadow is done instead with a separate, non-3D element
   (.cube-shadow) that sits next to (not around) the cube. */
.scene .cube-shadow{
  position:absolute;
  left:50%;
  top:255px;
  width:170px;
  height:40px;
  transform:translateX(-50%);
  background:radial-gradient(ellipse,rgba(0,0,0,.55) 0%,transparent 70%);
  filter:blur(10px);
}
.scene .cube{
  position:absolute;
  left:50%;
  top:130px;
  width:160px;
  height:160px;
  transform-style:preserve-3d;
  animation:float 6s ease-in-out infinite;
}
.scene .face{
  position:absolute;
  width:160px;
  height:160px;
  border-radius:26px;
  backface-visibility:hidden;
}
.scene .face::before{
  content:"";
  position:absolute;
  inset:0;
  border-radius:26px;
  box-shadow:
    inset 0 2px 2px rgba(255,255,255,.08),
    inset 0 -8px 12px rgba(0,0,0,.4),
    0 0 16px rgba(124,58,237,.25);
  pointer-events:none;
}
.scene .top{
  background:linear-gradient(180deg,#403c6c,#242143);
  transform:rotateX(90deg) translateZ(80px);
}
.scene .right{
  background:linear-gradient(180deg,#221f3c,#0a0912);
  transform:rotateY(90deg) translateZ(80px);
}
.scene .left{
  background:linear-gradient(180deg,#211d38,#11111c);
  transform:rotateY(-90deg) translateZ(80px);
}
.scene .front{
  display:flex;
  justify-content:center;
  align-items:center;
  background:linear-gradient(180deg,#242142,#141425);
  transform:translateZ(80px);
}
.scene .front img{
  /* was 200x200 — larger than the 160px face itself, so the logo
     bled past the rounded corners */
  width:200px;
  height:200px;
  object-fit:contain;
  transform:translateZ(2px);
  filter:drop-shadow(0 0 12px rgba(138,92,246,.45));
}

@keyframes float{
  0%,100%{
    transform:
      translateX(-50%)
      translateY(0)
      rotateX(-20deg)
      rotateY(-35deg);
  }
  50%{
    transform:
      translateX(-50%)
      translateY(-10px)
      rotateX(-20deg)
      rotateY(-35deg);
  }
}