:root {
  color-scheme: dark;
  --night: #001719;
  --mint: #40e8d1;
  --white: #e2f7f3;
}

* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
  background: var(--night);
  color: var(--white);
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

.atmosphere { position: fixed; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 25% 75%, #08655b 0, transparent 60%), radial-gradient(ellipse at 85% 20%, #075053, #001719 70%); }
#liquid-film { width: 100%; height: 100%; display: block; opacity: .73; animation: atmosphere-in 2.8s ease both; }
.vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 44%, rgba(0, 17, 20, .7) 0%, rgba(0, 17, 20, .35) 35%, transparent 70%), linear-gradient(180deg, rgba(0, 12, 15, .15), transparent 60%, rgba(0, 12, 15, .6)); }
.grain { position: absolute; inset: 0; opacity: .035; 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='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23n)' opacity='.8' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }

main { position: relative; display: grid; place-items: center; min-height: 100svh; padding: 60px 24px 100px; }
.identity { width: min(100%, 500px); text-align: center; }
.logo-reveal { width: 100%; animation: logo-in 2s cubic-bezier(.16, 1, .3, 1) both; }
.logo-filter { position: absolute; pointer-events: none; }
.logo { display: block; width: 100%; height: auto; filter: url(#logo-transparency); clip-path: url(#logo-outline); }
.announcement { display: flex; flex-direction: column; align-items: center; gap: 25px; margin-top: -12px; }
.divider { width: 30px; height: 1px; background: var(--mint); box-shadow: 0 0 15px #40e8d166; }
h1 { margin: 0; font-size: clamp(24px, 3.2vw, 40px); font-weight: 300; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; padding-left: .12em; color: #cff0e9; white-space: nowrap; }
.character { display: inline-block; animation: character-in .65s cubic-bezier(.16, 1, .3, 1) both; animation-delay: calc(1.2s + var(--i) * .105s); }
.space { width: .38em; }

footer { position: absolute; left: 40px; right: 40px; bottom: 30px; display: flex; justify-content: space-between; gap: 20px; color: #91bdb5; font-size: 9px; letter-spacing: .18em; line-height: 1.8; animation: text-in 1.5s 1.5s ease both; }
.status { display: flex; align-items: center; gap: 10px; }
.status i { width: 4px; height: 4px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 10px #40e8d180; }

@keyframes logo-in { from { opacity: 0; transform: translateY(28px) scale(.93); filter: blur(16px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } }
@keyframes text-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes character-in { from { opacity: 0; transform: translateY(20px); filter: blur(7px); } to { opacity: 1; transform: translateY(0); filter: blur(0); } }
@keyframes atmosphere-in { from { opacity: 0; } to { opacity: .73; } }
@keyframes breathe { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }

@media (max-width: 600px) {
  main { padding: 40px 20px 90px; }
  .identity { width: min(100%, 390px); }
  .announcement { gap: 23px; margin-top: 0; }
  h1 { font-size: clamp(20px, 5.4vw, 30px); letter-spacing: .1em; }
  footer { left: 24px; right: 24px; bottom: 22px; font-size: 8px; letter-spacing: .1em; }
}
@media (max-width: 370px) { footer { justify-content: center; } .status { display: none; } }
@media (max-height: 650px) and (min-width: 601px) { .identity { width: 350px; } main { padding-top: 20px; padding-bottom: 70px; } .announcement { gap: 16px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } }