:root {
  color-scheme: dark;
  font-family: Inter, "Segoe UI", Arial, sans-serif;
  background: #080808;
  color: #f4f2f1;
  font-synthesis: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

* { box-sizing: border-box; }

html, body { min-width: 320px; min-height: 100%; margin: 0; }

body {
  min-height: 100svh;
  display: grid;
  place-items: center;
  overflow: hidden;
  position: relative;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 38%, #171313 0%, #0d0c0c 32%, #080808 72%);
}

body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  background: url("assets/selfmedia-statue.png") center 48% / auto min(94vh, 1080px) no-repeat;
  opacity: .055;
  filter: grayscale(.45) brightness(.72);
  pointer-events: none;
}

.ambient-field {
  position: fixed;
  z-index: -1;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}

.ambient-glow {
  position: absolute;
  width: clamp(300px, 42vw, 620px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(190 0 24 / 18%) 0%, rgb(145 0 16 / 10%) 34%, transparent 72%);
  filter: blur(48px);
  opacity: .05;
  will-change: transform, opacity;
}

.glow-one { left: 5%; top: 8%; }
.glow-two { left: 63%; top: 28%; }
.glow-three { left: 30%; top: 63%; }

.coming-soon {
  width: min(92vw, 760px);
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 0 56px;
  position: relative;
  z-index: 1;
  transition: opacity .16s ease, filter .16s ease;
}

h1 {
  font-family: "Black Han Sans", sans-serif;
  position: relative;
  isolation: isolate;
  width: fit-content;
  margin: 0;
  font-size: clamp(2rem, 5vw, 3.45rem);
  line-height: 1.12;
  letter-spacing: -.055em;
  font-weight: 400;
  transition: color .2s ease;
}

.coming-soon.is-glitching h1,
.coming-soon.is-glitching .tagline,
.coming-soon.is-glitching .email {
  animation: text-glitch .18s steps(2, end) both;
}

.coming-soon.is-glitching h1::before,
.coming-soon.is-glitching h1::after,
.coming-soon.is-glitching .tagline::before,
.coming-soon.is-glitching .tagline::after,
.coming-soon.is-glitching .email::before,
.coming-soon.is-glitching .email::after {
  content: attr(data-text);
  position: absolute;
  inset: 0;
  overflow: hidden;
  visibility: visible;
  pointer-events: none;
}

.coming-soon.is-glitching h1::before,
.coming-soon.is-glitching .tagline::before,
.coming-soon.is-glitching .email::before {
  color: #ff2436;
  clip-path: inset(0 0 58% 0);
  transform: translateX(-2px);
}

.coming-soon.is-glitching h1::after,
.coming-soon.is-glitching .tagline::after,
.coming-soon.is-glitching .email::after {
  color: #8fefff;
  clip-path: inset(52% 0 0 0);
  transform: translateX(2px);
}

.coming-soon.is-red-flash h1,
.coming-soon.is-red-flash .tagline,
.coming-soon.is-red-flash .email {
  color: #ff2638;
  transition: none;
}

@keyframes text-glitch {
  0% { transform: translate(0); }
  25% { transform: translate(-2px, 1px) skewX(-2deg); }
  55% { transform: translate(2px, -1px) skewX(1deg); }
  78% { transform: translate(-1px, 0); }
  100% { transform: translate(0); }
}

/* Keep the text layers stable between the short glitch bursts. */
h1::before, h1::after, .tagline::before, .tagline::after, .email::before, .email::after {
  content: "";
  position: absolute;
  inset: 0;
  visibility: hidden;
  pointer-events: none;
}

.cursor { color: #e3212b; }

.tagline {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  position: relative;
  isolation: isolate;
  margin: 18px 0 0;
  color: #aaa4a4;
  font-size: clamp(.98rem, 2vw, 1.14rem);
  line-height: 1.65;
  letter-spacing: .005em;
  transition: color .2s ease;
}

.email {
  font-family: "Poppins", sans-serif;
  font-weight: 400;
  position: relative;
  isolation: isolate;
  display: inline-block;
  margin-top: 29px;
  color: #f0eeee;
  font-size: .96rem;
  text-decoration: none;
  transition: color .2s ease;
}

.email:hover, .email:focus-visible { color: #f0444c; }
.email:focus-visible { outline: 2px solid #e3212b; outline-offset: 5px; }

footer {
  position: absolute;
  inset: auto 0 23px;
  z-index: 1;
  color: #6f6969;
  text-align: center;
  font-size: .72rem;
  letter-spacing: .04em;
}

@media (max-width: 520px) {
  body::before { background-position: center 46%; background-size: auto 82vh; opacity: .045; }
  .coming-soon { padding-bottom: 44px; }
  .tagline { max-width: 330px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; }
}