:root {
  --bg:      #070914;
  --ink:     #eef0ff;
  --ink-2:   rgba(214, 220, 255, .66);
  --ink-3:   rgba(214, 220, 255, .38);
  --cyan:    #8ee6ff;
  --lav:     #aaa2ff;
  --navy:    #0c1024;
  --display: "Quicksand", "Nunito", ui-rounded, "Segoe UI", system-ui, sans-serif;
  --text:    "Nunito", ui-rounded, "Segoe UI", system-ui, -apple-system, sans-serif;
}
* { box-sizing: border-box; }
html { height: 100%; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100%;
  /* what shows before (or without) the canvas */
  background:
    radial-gradient(60vmax 30vmax at 40% 30%, rgba(150, 156, 255, .10), transparent 60%),
    linear-gradient(180deg, #04050c 0%, #090c1d 55%, #10132e 100%),
    var(--bg);
  color: var(--ink);
  font-family: var(--text);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* ---------- the scene ---------- */
#scene { position: fixed; inset: 0; width: 100%; height: 100%; display: block; z-index: 0; }
.vignette {
  position: fixed; inset: 0; z-index: 1; pointer-events: none;
  background: radial-gradient(ellipse 120% 100% at 50% 42%, transparent 55%, rgba(3, 4, 10, .7) 100%);
}

/* ---------- centre ---------- */
main {
  position: relative; z-index: 2;
  min-height: 100vh; min-height: 100svh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  /* the lower third is the laser stage */
  padding: 24px 16px calc(34vh + env(safe-area-inset-bottom));
  text-align: center;
}
.brand {
  margin: 0;
  display: inline-flex; align-items: center; gap: .06em;
  font-family: var(--display); font-weight: 700; line-height: 1; letter-spacing: -.02em;
  font-size: clamp(64px, 11vw, 132px);
  color: var(--ink); text-decoration: none;
  text-shadow: 0 0 42px rgba(160, 170, 255, .38);
}
.brand .oh {
  padding: .1em .2em .12em; border-radius: .34em;
  background: linear-gradient(135deg, var(--cyan), var(--lav));
  color: var(--navy); text-shadow: none; letter-spacing: 0;
  box-shadow:
    inset 0 0 0 1px rgba(255, 255, 255, .22),
    0 12px 60px -12px rgba(142, 230, 255, .6),
    0 0 90px rgba(170, 162, 255, .32);
}
.brand.small { font-size: clamp(36px, 6vw, 52px); }
.brand.small:focus-visible { outline: 2px solid var(--cyan); outline-offset: 6px; border-radius: 10px; }

.lost {
  margin: 30px 0 0;
  font-family: var(--display); font-weight: 700; letter-spacing: -.02em; line-height: 1.1;
  font-size: clamp(36px, 6vw, 64px);
  text-shadow: 0 0 36px rgba(160, 170, 255, .35);
}
.tag {
  margin: 26px 0 0;
  display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: .35em .95em;
  font-family: var(--display); font-weight: 600; text-transform: uppercase;
  font-size: clamp(12px, 1.45vw, 15px); letter-spacing: .3em;
  color: var(--ink-2);
  text-shadow: 0 0 10px rgba(5, 6, 14, .95), 0 0 22px rgba(5, 6, 14, .8);
}
.tag span { margin-right: -.3em; }     /* cancel the trailing letter-space */
.tag .x { color: var(--cyan); letter-spacing: 0; margin: 0; font-weight: 700; }

/* three phases, 120 degrees apart, flowing */
.phase {
  margin-top: 18px; width: min(240px, 64vw); line-height: 0;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
          mask-image: linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent);
  filter: drop-shadow(0 0 4px rgba(142, 230, 255, .45));
}
.phase svg { display: block; width: 100%; height: 28px; overflow: hidden; }
.phase path { fill: none; stroke-width: 1.6; stroke-linecap: round; vector-effect: non-scaling-stroke; opacity: .9; }
.phase .a { stroke: var(--cyan); }
.phase .b { stroke: var(--lav); }
.phase .c { stroke: #ffc6aa; }
.phase g { animation: flow 2.4s linear infinite; }
@keyframes flow { to { transform: translateX(-80px); } }

.mail {
  margin-top: 28px;
  display: inline-flex; align-items: center; gap: .65em;
  padding: 12px 22px; border-radius: 999px;
  font-weight: 600; font-size: 16px; line-height: 1.2; letter-spacing: .01em;
  color: var(--ink); text-decoration: none;
  background: rgba(255, 255, 255, .06);
  border: 1px solid rgba(190, 200, 255, .24);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: background .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.mail::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%;
  background: var(--cyan); box-shadow: 0 0 10px var(--cyan);
}
.mail:hover, .mail:focus-visible {
  background: rgba(255, 255, 255, .1);
  border-color: rgba(190, 200, 255, .5);
  box-shadow: 0 0 32px -6px rgba(142, 230, 255, .5);
  outline: none;
}

/* the kind of building the laser is drawing */
.project {
  position: fixed; left: 0; right: 0; z-index: 2;
  bottom: calc(46px + env(safe-area-inset-bottom));
  display: flex; justify-content: center; align-items: center; gap: 14px;
  font-family: var(--display); font-weight: 600; font-size: 12px;
  letter-spacing: .42em; text-transform: uppercase; padding-left: .42em;
  color: rgba(214, 220, 255, .74);
  opacity: 0; transform: translateY(4px);
  transition: opacity .2s ease, transform .2s ease;
  pointer-events: none;
}
.project::before, .project::after {
  content: ""; width: 28px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(142, 230, 255, .75));
}
.project::after { transform: scaleX(-1); }
.project.on { opacity: 1; transform: none; transition-duration: .7s; }

@media (max-height: 560px) {
  main { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
  .project { display: none; }
}

footer {
  position: fixed; left: 0; right: 0; z-index: 2;
  bottom: calc(18px + env(safe-area-inset-bottom));
  text-align: center; font-size: 12.5px; letter-spacing: .08em;
  color: var(--ink-3);
}

@media (prefers-reduced-motion: reduce) { .mail { transition: none; } .phase g { animation: none; } }