:root {
  --bg-0: #050711;
  --bg-1: #0b1024;
  --bg-2: #141b38;

  --cyan: #00aeef;
  --cyan-light: #70dcff;
  --violet: #725cff;
  --cursor-x: 50%;
  --cursor-y: 50%;

  --rx: 0deg;
  --ry: 0deg;
  --tx: 0px;
  --ty: 0px;
  --depth: 0px;
  --glow: 0;
}

* {
  box-sizing: border-box;
}

html,
body {
  min-height: 100%;
  margin: 0;
}

body {
  overflow: hidden;
  color: #fff;
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background:
    radial-gradient(circle at var(--cursor-x) var(--cursor-y), rgba(114, 92, 255, 0.28), transparent 30vmax),
    radial-gradient(circle at 50% 45%, rgba(0, 174, 239, 0.08), transparent 26rem),
    linear-gradient(145deg, var(--bg-2), var(--bg-1) 42%, var(--bg-0));
}

.hero {
  position: relative;
  min-height: 100svh;
  display: grid;
  place-items: center;
  isolation: isolate;
}

.ambient {
  position: absolute;
  inset: -20%;
  z-index: -1;
  pointer-events: none;
  background:
    conic-gradient(
      from 210deg at var(--cursor-x) var(--cursor-y),
      transparent 0deg,
      rgba(0, 174, 239, 0.08) 55deg,
      rgba(114, 92, 255, 0.16) 110deg,
      transparent 175deg
    );
  filter: blur(clamp(40px, 8vw, 110px));
  opacity: calc(0.35 + var(--glow) * 0.65);
  transition: opacity 420ms ease;
}

.logo-stage {
  width: min(72vw, 620px);
  aspect-ratio: 360.94 / 322.45;
  display: grid;
  place-items: center;
  perspective: 1100px;
  perspective-origin: var(--cursor-x) var(--cursor-y);
  touch-action: none;
}

.logo-object {
  position: relative;
  width: min(58vw, 430px);
  aspect-ratio: 360.94 / 322.45;
  transform-style: preserve-3d;
  transform:
    translate3d(var(--tx), var(--ty), 0)
    rotateX(var(--rx))
    rotateY(var(--ry));
  transition:
    transform 650ms cubic-bezier(.2,.8,.2,1),
    filter 650ms ease;
  will-change: transform, filter;
  filter:
    drop-shadow(0 14px 24px rgba(0, 0, 0, 0.28))
    drop-shadow(0 0 calc(10px + 22px * var(--glow)) rgba(0, 174, 239, calc(0.16 + 0.32 * var(--glow))));
}

.logo-stage.is-active .logo-object {
  transition: transform 70ms linear, filter 120ms linear;
}

.logo-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.logo-layer--back {
  transform: translateZ(calc(var(--depth) * -1));
  filter: brightness(0.22) saturate(1.5) hue-rotate(12deg);
  opacity: var(--glow);
}

.logo-layer--middle {
  transform: translateZ(calc(var(--depth) * -0.48));
  filter: brightness(0.52) saturate(1.35);
  opacity: calc(var(--glow) * 0.9);
}

.logo-layer--front {
  transform: translateZ(calc(var(--depth) * 0.35));
  filter:
    hue-rotate(calc((var(--pointer-x, .5) - .5) * 55deg))
    saturate(calc(1 + var(--glow) * .55))
    brightness(calc(1 + var(--glow) * .12));
}

.specular {
  position: absolute;
  inset: 7%;
  transform: translateZ(calc(var(--depth) * 0.55));
  pointer-events: none;
  opacity: calc(var(--glow) * 0.65);
  mix-blend-mode: screen;
  mask: url("assets/logo-webkron.svg") center / contain no-repeat;
  -webkit-mask: url("assets/logo-webkron.svg") center / contain no-repeat;
  background:
    radial-gradient(
      circle at var(--cursor-x) var(--cursor-y),
      rgba(255,255,255,0.96) 0,
      rgba(112,220,255,0.62) 8%,
      rgba(0,174,239,0.16) 24%,
      transparent 42%
    );
}

.hint {
  position: absolute;
  left: 50%;
  bottom: max(28px, 5vh);
  margin: 0;
  transform: translateX(-50%);
  color: rgba(255,255,255,.58);
  font-size: clamp(.72rem, 1vw, .88rem);
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: opacity 250ms ease;
}

.logo-stage.is-active + .hint {
  opacity: .28;
}

@media (max-width: 700px) {
  .logo-stage {
    width: 88vw;
  }

  .logo-object {
    width: 68vw;
  }
}

@media (hover: none), (pointer: coarse) {
  .hint {
    content: "Atinge si misca";
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo-object,
  .logo-stage.is-active .logo-object,
  .ambient,
  .hint {
    transition: none;
  }

  .logo-object {
    transform: none !important;
  }
}