:root {
  color-scheme: dark;
  --bg: #070709;
  --fg: #f7f6f2;
  --muted: #97949f;
  --line: rgba(255,255,255,.16);
  --pink: #ff4fd8;
  --cyan: #42e8ff;
}

* { box-sizing: border-box; }
html { background: var(--bg); }
body {
  min-height: 100vh;
  margin: 0;
  overflow-x: hidden;
  background:
    radial-gradient(circle at 72% 16%, rgba(66,232,255,.08), transparent 32rem),
    radial-gradient(circle at 18% 76%, rgba(255,79,216,.09), transparent 28rem),
    var(--bg);
  color: var(--fg);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  -webkit-font-smoothing: antialiased;
}
button { font: inherit; }

.noise {
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: .025;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.9'/%3E%3C/svg%3E");
}

.flag-rain {
  position: fixed;
  inset: 0;
  z-index: 20;
  overflow: hidden;
  pointer-events: none;
}

.falling-flag {
  position: absolute;
  top: -12vh;
  left: var(--left);
  font-size: var(--size);
  line-height: 1;
  filter: drop-shadow(0 7px 8px rgba(0,0,0,.32));
  animation: flag-fall var(--duration) linear var(--delay) infinite;
  will-change: transform;
  opacity: .92;
}

@keyframes flag-fall {
  0% { transform: translate3d(0,-12vh,0) rotate(var(--r0)); }
  45% { transform: translate3d(var(--drift),52vh,0) rotate(var(--r1)); }
  100% { transform: translate3d(calc(var(--drift) * -0.35),118vh,0) rotate(var(--r2)); }
}

.hud {
  position: fixed;
  right: 18px;
  top: 18px;
  z-index: 30;
  display: grid;
  gap: 4px;
  padding: 11px 13px;
  border: 1px solid var(--line);
  background: rgba(7,7,9,.55);
  backdrop-filter: blur(14px);
  color: rgba(255,255,255,.58);
  font: 10px/1.35 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .08em;
}

.reveal-page {
  position: relative;
  z-index: 10;
  width: min(100% - 40px, 1460px);
  min-height: 100svh;
  margin-inline: auto;
  display: grid;
  align-items: center;
  padding: 54px 0;
}
.reveal-card { width: 100%; }
.kicker-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 24px;
}
.eyebrow, .build {
  margin: 0;
  font: 11px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .13em;
  text-transform: uppercase;
}
.eyebrow { color: var(--cyan); }
.build { color: var(--muted); }

h1 {
  margin: 0 0 52px;
  max-width: 1120px;
  font-size: clamp(72px, 13vw, 205px);
  line-height: .77;
  letter-spacing: -.075em;
  font-weight: 800;
  text-transform: uppercase;
  text-wrap: balance;
}

.reveal-stage {
  position: relative;
  border-top: 1px solid var(--line);
  padding-top: 28px;
}
.reveal-button {
  width: min(100%, 600px);
  min-height: 78px;
  padding: 0 22px;
  border: 1px solid rgba(255,255,255,.78);
  background: rgba(7,7,9,.58);
  backdrop-filter: blur(18px);
  color: var(--fg);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  font: 12px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .13em;
  transition: transform 180ms ease, background 180ms ease, box-shadow 180ms ease;
  box-shadow: 0 16px 50px rgba(0,0,0,.25);
}
.reveal-button:hover {
  transform: translateY(-2px);
  background: rgba(255,255,255,.08);
  box-shadow: 0 20px 70px rgba(66,232,255,.08);
}
.reveal-button:active { transform: scale(.99); }
.button-orb {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: conic-gradient(#ff4fd8,#fff35a,#42e8ff,#ff4fd8);
  box-shadow: 0 0 20px rgba(255,79,216,.5);
  animation: spinTiny 1.7s linear infinite;
}

.loader {
  width: min(100%, 800px);
  padding: 20px;
  border: 1px solid var(--line);
  background: rgba(7,7,9,.72);
  backdrop-filter: blur(20px);
}
.loader-heading {
  display: flex;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 14px;
  font-size: clamp(14px, 2vw, 20px);
}
.loader-track {
  width: 100%;
  height: 18px;
  overflow: hidden;
  background: #141419;
  border: 1px solid rgba(255,255,255,.12);
}
.loader-progress {
  width: 0;
  height: 100%;
  background: linear-gradient(90deg,#e40303,#ff8c00,#ffed00,#008026,#24408e,#732982,#f7a8b8,#55cdfc);
  box-shadow: 0 0 30px rgba(255,79,216,.32);
}
.loader-console {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  margin-top: 12px;
  color: var(--muted);
  font: 10px/1.3 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .05em;
  text-transform: uppercase;
}

.photo-wrap {
  width: min(100%, 768px);
  margin: 0 auto;
  border: 1px solid var(--line);
  background: #0d0d10;
  box-shadow: 0 40px 120px rgba(0,0,0,.52);
  animation: reveal 650ms cubic-bezier(.2,.8,.2,1) both;
}
.photo-chrome {
  min-height: 38px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font: 9px/1 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: .1em;
}
.photo-frame {
  position: relative;
  width: 100%;
  overflow: hidden;
  background: #111;
}
.reveal-photo {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  max-width: 768px;
  height: auto;
  aspect-ratio: 768 / 697;
  object-fit: contain;
  image-rendering: auto;
  filter: none;
  transform: none;
  opacity: 1;
  visibility: visible;
}
.scanline {
  display: none;
}
[hidden] { display: none !important; }

@keyframes spinTiny { to { transform: rotate(360deg); } }
@keyframes reveal {
  from { opacity: 0; transform: translateY(20px) scale(.98); filter: blur(10px); }
  to { opacity: 1; transform: none; filter: blur(0); }
}

@media (max-width: 760px) {
  .reveal-page {
    width: min(100% - 28px, 1460px);
    padding: 28px 0 40px;
    align-items: start;
  }
  .kicker-row { align-items: flex-start; }
  .build { text-align: right; }
  h1 {
    margin-bottom: 40px;
    font-size: clamp(62px, 22vw, 120px);
    line-height: .8;
  }
  .hud { display: none; }
  .loader-console { flex-direction: column; }
  .falling-flag { opacity: .82; }
}

@media (prefers-reduced-motion: reduce) {
  .falling-flag { display: none; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
  }
}

@media (pointer: fine) {
  html,
  body,
  button,
  a,
  [role="button"] {
    cursor: none !important;
  }

  .emoji-cursor {
    position: fixed;
    left: 0;
    top: 0;
    z-index: 9999;
    pointer-events: none;
    user-select: none;
    font-size: 34px;
    line-height: 1;
    transform: translate(-7px, -5px);
    filter: drop-shadow(0 4px 5px rgba(0,0,0,.28));
    will-change: left, top, transform;
  }

  .emoji-cursor.is-clicking {
    transform: translate(-7px, -5px) scale(.82) rotate(-10deg);
  }
}