*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: system-ui, sans-serif;
  line-height: 1.6;
  color: #ccc;
  min-height: 100vh;
  touch-action: none;
  overscroll-behavior: none;
  background-color: #0a0f1a;
  background-image:
    linear-gradient(rgba(0, 180, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 180, 255, 0.04) 1px, transparent 1px),
    radial-gradient(ellipse 120% 60% at 50% 100%, rgba(0, 120, 200, 0.25) 0%, transparent 70%),
    linear-gradient(to bottom, #000408 0%, #0a1628 50%, #0d2040 100%);
  background-size: 40px 40px, 40px 40px, auto, auto;
}

/* ── hidden reveal text ── */
header {
  width: 100%;
  padding: 2.5rem 2rem;
  text-align: center;
}

.hero-text {
  font-size: clamp(1rem, 5.5vw, 3.5rem);
  font-weight: 900;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: transparent;
  background: radial-gradient(
    circle 180px at var(--mx, -999px) var(--my, -999px),
    rgba(255, 255, 255, 0.95) 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  background-attachment: fixed;
  -webkit-background-clip: text;
  background-clip: text;
  user-select: none;
}

/* ── bunny + box glow ── */
main {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 200px);
}

@property --start {
  syntax: '<number>';
  inherits: true;
  initial-value: 0;
}

.bunny-wrap {
  --active: 0;
  --start: 0;
  --spread: 80;
  --blur: 20;
  --border-radius: 16px;
  --border-width: 2px;
  --gradient: conic-gradient(
    from 180deg at 50% 70%,
    hsla(0, 0%, 98%, 1) 0deg,
    #eec32d 72deg,
    #ec4b4b 144deg,
    #709ab9 216deg,
    #4dffbf 288deg,
    hsla(0, 0%, 98%, 1) 1turn
  );
  --border: hsl(280 10% 50% / 1);
  position: relative;
  border-radius: var(--border-radius);
  display: inline-flex;
}

.glows {
  pointer-events: none;
  position: absolute;
  inset: 0;
  filter: blur(calc(var(--blur) * 1px));
}

.glows::before,
.glows::after {
  content: "";
  background: var(--gradient);
  background-attachment: fixed;
  position: absolute;
  inset: -5px;
  border: 10px solid transparent;
  border-radius: var(--border-radius);
  mask:
    linear-gradient(#0000, #0000),
    conic-gradient(
      from calc((var(--start) - (var(--spread) * 0.5)) * 1deg),
      #000 0deg,
      #fff,
      #0000 calc(var(--spread) * 1deg)
    );
  mask-composite: intersect;
  mask-clip: padding-box, border-box;
  opacity: var(--active);
  transition: opacity 1s;
}

.bunny-wrap::before {
  position: absolute;
  inset: 0;
  border: var(--border-width) solid transparent;
  content: "";
  border-radius: var(--border-radius);
  pointer-events: none;
  background: var(--border);
  background-attachment: fixed;
  mask:
    linear-gradient(#0000, #0000),
    conic-gradient(
      from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 1.5)) * 1deg),
      hsl(0 0% 100% / 0.15) 0deg,
      white,
      hsl(0 0% 100% / 0.15) calc(var(--spread) * 2.5deg)
    );
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
  opacity: var(--active);
  transition: opacity 1s;
}

.bunny-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  background: var(--gradient);
  background-attachment: fixed;
  border-radius: var(--border-radius);
  opacity: var(--active);
  transition: opacity 1s;
  inset: 0;
  border: var(--border-width) solid transparent;
  mask:
    linear-gradient(#0000, #0000),
    conic-gradient(
      from calc(((var(--start) + (var(--spread) * 0.25)) - (var(--spread) * 0.5)) * 1deg),
      #0000 0deg,
      #fff,
      #0000 calc(var(--spread) * 0.5deg)
    );
  filter: brightness(1.5);
  mask-clip: padding-box, border-box;
  mask-composite: intersect;
}

#bunny {
  max-width: 320px;
  width: 40vw;
  border-radius: var(--border-radius);
  display: block;
  pointer-events: none;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  -webkit-user-drag: none;
}