:root {
  --ink: #e9fbf8;
  --teal: #0f3b3a;
  --cyan: #38e1ff;
  --mint: #9ff5d6;
  --bg: #040b0d;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; background: #000; overflow: hidden; }
body { font-family: "Segoe UI Variable Display", "Segoe UI", Inter, system-ui, sans-serif; color: var(--ink); }

/* 1920x1080 design canvas, scaled to fit */
#viewport { position: fixed; inset: 0; }
#frame {
  position: relative; width: 1920px; height: 1080px; overflow: hidden;
  background: radial-gradient(120% 90% at 50% 40%, #0a2326 0%, var(--bg) 60%, #010304 100%);
  position: absolute; left: 50%; top: 50%; transform-origin: center;
}
#bg { position: absolute; inset: 0; width: 100%; height: 100%; }

#aurora { position: absolute; inset: -20%; filter: blur(90px); opacity: .55; mix-blend-mode: screen; }
#aurora i { position: absolute; border-radius: 50%; }
#aurora i:nth-child(1) { width: 900px; height: 600px; left: 10%; top: 15%; background: #0e6b6a; animation: drift1 18s ease-in-out infinite alternate; }
#aurora i:nth-child(2) { width: 700px; height: 500px; right: 12%; top: 35%; background: #1f8fb3; animation: drift2 22s ease-in-out infinite alternate; }
#aurora i:nth-child(3) { width: 800px; height: 450px; left: 35%; bottom: 10%; background: #2b7a4b; animation: drift1 26s ease-in-out infinite alternate-reverse; }
@keyframes drift1 { to { transform: translate(240px, -120px) scale(1.25); } }
@keyframes drift2 { to { transform: translate(-260px, 140px) scale(.85); } }

#stage { position: absolute; inset: 0; perspective: 1700px; perspective-origin: 50% 45%; }
#world { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; }

/* floating app window */
.win {
  position: absolute; left: -480px; top: -315px; width: 960px; height: 630px;
  border-radius: 14px; overflow: hidden; background: #f4f6f2;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.14),
    0 40px 90px -20px rgba(0,0,0,.85),
    0 0 80px -10px rgba(56,225,255,.28);
  opacity: 0; will-change: transform, opacity, filter;
  backface-visibility: hidden;
}
.win .bar {
  height: 30px; display: flex; align-items: center; gap: 8px; padding: 0 14px;
  background: linear-gradient(#e8ece6, #dde3dc); border-bottom: 1px solid #c9d1c8;
  font: 600 12px "Segoe UI", sans-serif; color: #3d4b44;
}
.win .bar i { width: 11px; height: 11px; border-radius: 50%; background: #c4ccc4; }
.win .bar i:first-child { background: #ff6159; } .win .bar i:nth-child(2) { background: #ffbd2e; } .win .bar i:nth-child(3) { background: #28c941; }
.win .bar span { margin-left: 10px; }
.win img { display: block; width: 100%; height: calc(100% - 30px); object-fit: cover; object-position: top left; }
.win::after { /* glossy sheen that sweeps with --sheen */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.35) 45%, transparent 60%);
  transform: translateX(var(--sheen, -120%));
}

/* typography */
#overlay { position: absolute; inset: 0; pointer-events: none; }
.cap { position: absolute; opacity: 0; will-change: transform, opacity, filter; white-space: nowrap; }
.cap.center { left: 0; right: 0; text-align: center; }
.kicker { font: 600 22px/1 "Segoe UI", sans-serif; letter-spacing: .5em; text-transform: uppercase; color: var(--cyan); }
.title { font-weight: 300; font-size: 104px; letter-spacing: -.02em; line-height: 1.02; }
.title b { font-weight: 700; background: linear-gradient(90deg, #fff, var(--mint) 40%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sub { font-weight: 300; font-size: 36px; color: rgba(233,251,248,.72); }
.word { display: inline-block; }

#logo { position: absolute; left: 50%; top: 50%; width: 240px; height: 240px; margin: -170px 0 0 -120px; opacity: 0; }
#logo img { width: 100%; filter: drop-shadow(0 0 60px rgba(56,225,255,.5)); }
#logo::before { content: ""; position: absolute; inset: -60%; background: radial-gradient(circle, rgba(56,225,255,.35), transparent 60%); filter: blur(10px); }

#flash { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, #c9fbff, transparent 60%); opacity: 0; mix-blend-mode: screen; }

#vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.75) 100%); }
#grain {
  position: absolute; inset: -50%; pointer-events: none; opacity: .07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation: grain .8s steps(6) infinite;
}
@keyframes grain { 50% { transform: translate(-6%, 4%); } 100% { transform: translate(5%, -3%); } }
#bars span { position: absolute; left: 0; right: 0; height: 0; background: #000; z-index: 5; }
#bars span:first-child { top: 0; } #bars span:last-child { bottom: 0; }

/* UI chrome */
#start {
  position: fixed; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px;
  background: radial-gradient(circle, rgba(6,26,30,.85), rgba(0,0,0,.96)); z-index: 10; transition: opacity .8s;
}
#start img { width: 120px; filter: drop-shadow(0 0 30px rgba(56,225,255,.5)); }
#start button {
  font: 600 18px "Segoe UI", sans-serif; letter-spacing: .08em; color: #021012; cursor: pointer;
  padding: 16px 40px; border: 0; border-radius: 999px;
  background: linear-gradient(90deg, var(--mint), var(--cyan)); box-shadow: 0 0 40px rgba(56,225,255,.45);
  transition: transform .2s;
}
#start button:hover { transform: scale(1.06); }
#start small { color: rgba(233,251,248,.45); font-size: 13px; letter-spacing: .05em; }
#start.hide { opacity: 0; pointer-events: none; }
#progress { position: fixed; left: 0; right: 0; bottom: 0; height: 3px; z-index: 11; opacity: 0; transition: opacity .4s; }
body:hover #progress { opacity: 1; }
#progress b { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--mint), var(--cyan)); }
.title b .word { background: linear-gradient(90deg, #fff, var(--mint) 40%, var(--cyan)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.cap.scrim::before { content: ""; position: absolute; left: 50%; top: 50%; width: 1800px; height: 560px; transform: translate(-50%,-50%); background: radial-gradient(ellipse, rgba(2,10,12,.95) 25%, rgba(2,10,12,.7) 50%, transparent 75%); z-index: -1; }