:root {
  --bg-1: #050814;
  --bg-2: #0b1634;
  --bg-3: #101d45;

  --ai-color-a: #1a1a1a;
  --ai-color-b: #2c3e50;

  --text: rgba(241, 246, 255, 0.92);
  --muted: rgba(221, 233, 255, 0.56);

  --line: rgba(205, 222, 255, 0.08);
  --line-strong: rgba(205, 222, 255, 0.18);

  --shadow: rgba(0, 0, 0, 0.22);
  --glow-soft: rgba(130, 180, 255, 0.08);
  --glow-strong: rgba(170, 214, 255, 0.18);
}

* {
  box-sizing: border-box;
}

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

body {
  overflow: hidden;
  color: var(--text);
  font-family: Inter, Arial, Helvetica, sans-serif;
  background:
    radial-gradient(circle at 15% 18%, rgba(74, 110, 255, 0.09), transparent 26%),
    radial-gradient(circle at 82% 28%, rgba(113, 192, 255, 0.06), transparent 24%),
    radial-gradient(circle at 58% 80%, rgba(105, 125, 255, 0.05), transparent 32%),
    linear-gradient(160deg, var(--bg-1), var(--bg-2) 50%, var(--bg-3));
}

.scene {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  perspective: 1400px;
  transform-style: preserve-3d;
  isolation: isolate;
}

.halos,
.ribbons,
.contours,
.text-fragments,
.echo-layer,
.fragments-layer,
.grain,
.vignette {
  position: absolute;
  inset: 0;
}

.state-label,
.shift-btn,
.caption {
  position: absolute;
}

/* Background halos */
.halos {
  z-index: 1;
  pointer-events: none;
}

.halo {
  position: absolute;
  width: min(60vw, 820px);
  height: min(60vw, 820px);
  border-radius: 50%;
  filter: blur(46px);
  opacity: 0.16;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  background:
    radial-gradient(
      circle at 50% 50%,
      color-mix(in srgb, var(--ai-color-b) 70%, white 5%) 0%,
      transparent 62%
    );
}

/* Background ribbons */
.ribbons {
  z-index: 2;
  pointer-events: none;
}

.ribbon {
  position: absolute;
  left: 50%;
  top: 50%;
  width: min(82vw, 980px);
  height: min(16vw, 190px);
  border-radius: 999px;
  filter: blur(34px);
  opacity: 0.12;
  mix-blend-mode: screen;
  will-change: transform, opacity;
  background:
    linear-gradient(
      90deg,
      transparent 0%,
      color-mix(in srgb, var(--ai-color-b) 74%, white 8%) 50%,
      transparent 100%
    );
}

/* Contours */
.contours {
  z-index: 3;
  pointer-events: none;
  opacity: 0.10;
  mix-blend-mode: screen;
  background:
    radial-gradient(circle at 50% 50%, transparent 0 39%, rgba(255,255,255,0.05) 39.5%, transparent 40%),
    radial-gradient(circle at 50% 50%, transparent 0 51%, rgba(255,255,255,0.04) 51.5%, transparent 52%),
    radial-gradient(circle at 50% 50%, transparent 0 63%, rgba(255,255,255,0.03) 63.5%, transparent 64%);
  transform: scale(1.08);
  will-change: transform, opacity;
}

/* Text fragments */
.text-fragments {
  z-index: 8;
  pointer-events: none;
}

.text-fragment {
  position: absolute;
  color: rgba(235, 242, 255, 0.16);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(8px);
  transition:
    opacity 700ms ease,
    transform 700ms ease,
    letter-spacing 500ms ease;
  text-shadow: 0 0 12px rgba(160, 212, 255, 0.08);
}

.text-fragment.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Echoes */
.echo-layer {
  pointer-events: none;
  z-index: 9;
}

.fragment-echo {
  position: absolute;
  border-radius: 28px;
  border: 1px solid rgba(255,255,255,0.08);
  opacity: 0.25;
  filter: blur(1px);
  animation: echoFade 1.6s ease-out forwards;
}

@keyframes echoFade {
  0% {
    opacity: 0.3;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(1.08) translateY(-20px);
  }
}

/* Foreground fragments */
.fragments-layer {
  z-index: 10;
}

.fragment {
  position: absolute;
  width: 290px;
  height: 178px;
  border-radius: 18px;
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0.015)),
    radial-gradient(circle at 50% 50%, color-mix(in srgb, var(--ai-color-b) 35%, transparent), transparent 72%),
    radial-gradient(circle at 18% 18%, rgba(255,255,255,0.04), transparent 34%);
  box-shadow:
    0 14px 34px var(--shadow),
    0 0 18px var(--glow-soft);
  overflow: hidden;
  will-change: transform, opacity, filter;
  mix-blend-mode: lighten;
  transition:
    width 820ms cubic-bezier(.22,1,.36,1),
    height 820ms cubic-bezier(.22,1,.36,1),
    opacity 650ms ease,
    border-color 280ms ease,
    box-shadow 420ms ease,
    transform 620ms ease,
    filter 500ms ease;
}

.fragment::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.08), transparent 36%),
    radial-gradient(circle at 70% 38%, rgba(170, 210, 255, 0.08), transparent 24%),
    repeating-linear-gradient(
      180deg,
      rgba(255,255,255,0.02) 0px,
      rgba(255,255,255,0.02) 1px,
      transparent 1px,
      transparent 11px
    );
  opacity: 0.9;
  pointer-events: none;
}

.fragment::after {
  content: "";
  position: absolute;
  inset: 1px;
  border-radius: inherit;
  border: 1px solid rgba(255,255,255,0.03);
  pointer-events: none;
}

.fragment:hover {
  border-color: var(--line-strong);
  box-shadow:
    0 20px 48px rgba(0, 0, 0, 0.30),
    0 0 32px var(--glow-strong);
}

.fragment-a {
  border-top-left-radius: 28px;
  border-bottom-right-radius: 12px;
}

.fragment-b {
  border-radius: 20px;
}

.fragment-c {
  border-bottom-left-radius: 28px;
  border-top-right-radius: 12px;
}

/* UI */
.state-label {
  top: 18px;
  left: 18px;
  z-index: 20;
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(221, 233, 255, 0.42);
}

.shift-btn {
  right: 18px;
  bottom: 18px;
  z-index: 20;
  border: 1px solid rgba(255,255,255,0.08);
  background: rgba(255,255,255,0.03);
  color: rgba(241, 246, 255, 0.82);
  border-radius: 999px;
  padding: 8px 12px;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition:
    transform 180ms ease,
    background 180ms ease,
    border-color 180ms ease,
    box-shadow 180ms ease;
}

.shift-btn:hover {
  transform: translateY(-1px);
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.18);
  box-shadow: 0 0 16px rgba(160, 212, 255, 0.10);
}

.caption {
  left: 24px;
  bottom: 24px;
  z-index: 20;
  max-width: 360px;
  opacity: 0.42;
}

.caption h1 {
  margin: 0 0 8px;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.caption p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.55;
}

.grain,
.vignette {
  pointer-events: none;
}

.grain {
  z-index: 30;
  opacity: 0.06;
  mix-blend-mode: soft-light;
  background-image:
    linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 3px 3px;
}

.vignette {
  z-index: 25;
  background:
    radial-gradient(circle at center, transparent 52%, rgba(0,0,0,0.22) 100%);
}

@media (max-width: 768px) {
  .halo {
    width: 84vw;
    height: 84vw;
  }

  .ribbon {
    width: 90vw;
    height: 24vw;
  }

  .caption {
    max-width: 280px;
    bottom: 56px;
  }

  .fragment {
    width: 220px;
    height: 140px;
  }
}