:root {
  color-scheme: dark;
  --white: #f7fbff;
  --muted: rgba(247, 251, 255, 0.86);
  --char-dim: 0.8;
  --cold: #a8dbff;
  --black: #030106;
}

* {
  box-sizing: border-box;
}

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

body {
  min-height: 100vh;
  overflow: hidden;
  background:
    radial-gradient(ellipse 62vw 48vh at 20% 16%, rgba(86, 32, 138, 0.34), transparent 66%),
    radial-gradient(ellipse 54vw 42vh at 82% 74%, rgba(64, 24, 116, 0.32), transparent 64%),
    radial-gradient(ellipse 46vw 38vh at 68% 20%, rgba(44, 18, 92, 0.26), transparent 68%),
    radial-gradient(ellipse 74vw 58vh at 44% 58%, rgba(38, 14, 78, 0.3), transparent 70%),
    radial-gradient(circle at 50% 42%, rgba(214, 190, 255, 0.05), transparent 31vh),
    linear-gradient(180deg, #0a0512 0%, var(--black) 54%, #010003 100%);
  color: var(--white);
  cursor: none;
  font-family: Arial, Helvetica, system-ui, sans-serif;
}

body::before {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  content: "";
  background-image:
    linear-gradient(rgba(226, 208, 255, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226, 208, 255, 0.022) 1px, transparent 1px);
  background-size: 7vw 7vw;
  mask-image: radial-gradient(circle at center, black, transparent 72%);
}

.stage {
  position: relative;
  z-index: 1;
  width: 100vw;
  min-height: 100vh;
  display: grid;
  place-items: center;
  isolation: isolate;
}

#lightning-canvas {
  position: fixed;
  inset: 0;
  z-index: 6;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  mix-blend-mode: screen;
}

.cursor-orb {
  position: fixed;
  z-index: 7;
  width: 20px;
  height: 20px;
  pointer-events: none;
  opacity: 0;
  transform:
    translate(-50%, -50%)
    scale(var(--orb-scale-x, 1), var(--orb-scale-y, 1))
    rotate(var(--orb-rotation, 0deg));
  border-radius: var(--orb-radius, 50%);
  background: radial-gradient(
    circle at 38% 33%,
    #ffffff 0%,
    #f2faff 20%,
    rgba(178, 226, 255, 0.95) 42%,
    rgba(134, 78, 206, 0.6) 70%,
    rgba(62, 22, 112, 0) 100%
  );
  box-shadow:
    0 0 10px rgba(255, 255, 255, 0.95),
    0 0 26px rgba(168, 219, 255, 0.85),
    0 0 60px rgba(126, 62, 196, 0.55);
  transition: opacity 140ms ease;
}

.cursor-orb::before {
  position: absolute;
  inset: -150%;
  content: "";
  border-radius: 50%;
  background: radial-gradient(
    circle,
    rgba(168, 219, 255, 0.4) 0%,
    rgba(112, 48, 178, 0.24) 38%,
    transparent 70%
  );
  opacity: var(--orb-glow, 0.6);
}

.cursor-orb::after {
  position: absolute;
  inset: 28%;
  content: "";
  border-radius: 50%;
  background: #fff;
  filter: blur(1px);
  opacity: var(--orb-core, 0.9);
}

.cursor-orb.is-visible {
  opacity: 1;
}

.image-panel {
  position: fixed;
  z-index: 2;
  width: min(25vw, 430px);
  height: 40vh;
  min-width: 260px;
  min-height: 320px;
  margin: 0;
  overflow: hidden;
  background:
    linear-gradient(150deg, #241a30 0%, #16101f 48%, #0c0713 100%);
  filter: grayscale(1) contrast(1.22) brightness(0.78);
  box-shadow:
    0 0 0 1px rgba(255, 255, 255, 0.12),
    0 0 64px rgba(178, 138, 255, 0.07);
}

.image-panel::after {
  position: absolute;
  inset: 0;
  pointer-events: none;
  content: "";
  background:
    linear-gradient(90deg, rgba(255, 255, 255, 0.2), transparent 17%, transparent 84%, rgba(255, 255, 255, 0.18)),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.05) 0 1px, transparent 1px 5px);
  mix-blend-mode: screen;
  opacity: 0.32;
}

.image-panel img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

.image-panel-left {
  top: 12vh;
  left: 0;
}

.image-panel-right {
  right: 0;
  bottom: 13vh;
}

.copy-block {
  position: relative;
  z-index: 3;
  width: 40vw;
  min-width: 420px;
  max-width: 700px;
  height: 70vh;
  min-height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 4.6vw, 74px);
  text-align: center;
  text-wrap: balance;
}

.char {
  opacity: var(--char-dim);
}

.kicker {
  margin: 0 0 22px;
  color: rgba(168, 219, 255, 0.78);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  line-height: 1.4;
  text-transform: uppercase;
}

h1,
h2,
p {
  margin: 0;
}

h1 {
  font-family: Georgia, "Times New Roman", serif;
  font-size: 7.25rem;
  font-weight: 400;
  line-height: 0.85;
  letter-spacing: 0;
  text-shadow:
    0 0 20px rgba(255, 255, 255, 0.18),
    0 0 52px rgba(168, 219, 255, 0.1);
}

h2 {
  max-width: 17ch;
  margin: 24px auto 34px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.08;
  color: rgba(247, 251, 255, 0.9);
}

.copy-block p:not(.kicker) {
  max-width: 58ch;
  margin: 0 auto;
  color: var(--muted);
  font-size: 1.02rem;
  line-height: 1.78;
}

.copy-block p + p {
  margin-top: 18px;
}

@media (max-width: 1180px) {
  h1 {
    font-size: 5.45rem;
  }

  h2 {
    font-size: 1.62rem;
  }

  .copy-block p:not(.kicker) {
    font-size: 0.96rem;
  }
}

@media (max-width: 900px) {
  body {
    overflow: auto;
    cursor: auto;
  }

  .stage {
    min-height: 100svh;
    padding: 30vh 0 32vh;
  }

  .cursor-orb {
    display: none;
  }

  .copy-block {
    width: min(82vw, 560px);
    min-width: 0;
    height: auto;
    min-height: 58vh;
    padding: 40px 12px;
  }

  .image-panel {
    width: 38vw;
    min-width: 170px;
    height: 28vh;
    min-height: 190px;
  }

  .image-panel-left {
    top: 4vh;
  }

  .image-panel-right {
    bottom: 4vh;
  }

  h1 {
    font-size: 4rem;
  }

  h2 {
    font-size: 1.42rem;
  }
}