:root {
  --bg: #03060c;
  --ice: #9fdcff;
  --ice2: #d9f2ff;
  --deep: #38a8ff;
}
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0; overflow: hidden; background: var(--bg); color: var(--ice2);
  font-family: "Segoe UI", system-ui, -apple-system, sans-serif;
  cursor: none;
}
@media (hover: none) { body { cursor: auto; } .dot { display: none; } }

#fx { position: fixed; inset: 0; width: 100%; height: 100%; }

/* Soft light that follows the mouse */
.glow {
  position: fixed; top: 0; left: 0; width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax;
  background: radial-gradient(circle, rgba(90,190,255,.22), transparent 62%);
  pointer-events: none; will-change: transform; mix-blend-mode: screen;
}

/* Film grain */
.grain {
  position: fixed; inset: -50%; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  animation: grain 1s steps(6) infinite;
}
@keyframes grain {
  0% { transform: translate(0,0); } 20% { transform: translate(-4%,3%); } 40% { transform: translate(3%,-5%); }
  60% { transform: translate(-5%,-2%); } 80% { transform: translate(4%,4%); } 100% { transform: translate(0,0); }
}

.dot {
  position: fixed; top: 0; left: 0; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%;
  background: var(--ice2); box-shadow: 0 0 20px 4px var(--deep); pointer-events: none; z-index: 10;
  transition: width .25s, height .25s, margin .25s;
}
.dot.big { width: 56px; height: 56px; margin: -28px 0 0 -28px; background: transparent; border: 1px solid var(--ice); box-shadow: 0 0 30px var(--deep); }

.stage {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2.2rem;
  padding: 1rem; pointer-events: none;
}

/* Letter-by-letter title */
#title {
  margin: 0; display: flex; flex-wrap: wrap; justify-content: center;
  font-size: clamp(2.8rem, 12vw, 10.5rem); font-weight: 200; line-height: 1; letter-spacing: .02em;
  text-transform: uppercase; perspective: 900px;
}
#title .w { display: inline-flex; margin: 0 .18em; }
#title .l {
  display: inline-block; will-change: transform, filter, opacity;
  color: var(--ice2);
  text-shadow: 0 0 24px rgba(90,190,255,.55);
  opacity: 0;
  animation: rise 1.3s cubic-bezier(.16,1,.3,1) forwards;
  animation-delay: calc(var(--i) * 70ms + 300ms);
}
@keyframes rise {
  from { opacity: 0; transform: translateY(70%) rotateX(-80deg) scale(.6); filter: blur(18px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

/* Line that draws itself and shimmers */
.line { width: min(420px, 60vw); height: 1px; background: rgba(159,220,255,.18); position: relative; overflow: hidden;
  transform: scaleX(0); animation: draw 1.6s 1.4s cubic-bezier(.16,1,.3,1) forwards; }
.line span { position: absolute; top: 0; bottom: 0; width: 40%; background: linear-gradient(90deg, transparent, var(--ice2), transparent);
  animation: shimmer 2.6s 2.5s ease-in-out infinite; }
@keyframes draw { to { transform: scaleX(1); } }
@keyframes shimmer { from { left: -40%; } to { left: 100%; } }

.name {
  margin: 0; font-size: clamp(.8rem, 2vw, 1.05rem); font-weight: 400; letter-spacing: .7em; padding-left: .7em;
  color: var(--ice); opacity: 0; animation: fade 2s 2.2s ease forwards, breathe 4s 4.2s ease-in-out infinite;
}
@keyframes fade { to { opacity: .85; } }
@keyframes breathe { 50% { opacity: .35; letter-spacing: .85em; } }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001s !important; animation-delay: 0s !important; animation-iteration-count: 1 !important; }
}