:root {
  color-scheme: dark;
  --black: #080909;
  --gold: #c5a269;
  --light-gold: #d0bb97;
}
* { box-sizing: border-box; }
html, body { margin: 0; width: 100%; min-height: 100%; background: var(--black); }
body { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; }
::selection { background: #a38751; color: #080909; }
.stage { position: relative; min-height: 540px; height: 100svh; overflow: hidden; isolation: isolate; }
.ambient {
  position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 42%, #1c1a141c 0, transparent 55%),
    radial-gradient(ellipse at 50% 105%, #987a3820 0, #3631230a 40%, transparent 65%);
}
.soundscape { position: absolute; inset: 0; width: 100%; height: 100%; padding: 0; border: 0; border-radius: 0; background: transparent; cursor: crosshair; -webkit-tap-highlight-color: transparent; }
.soundscape:focus { outline: none; }
.soundscape:focus-visible { outline: 1px solid #c5a26988; outline-offset: -14px; }
#sound-field { display: block; width: 100%; height: 100%; pointer-events: none; opacity: 0; animation: reveal 2.8s ease .1s forwards; }
.grain { position: absolute; inset: 0; opacity: .035; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 180 180' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.92' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Cpath fill='%23fff' filter='url(%23g)' opacity='.7' d='M0 0h180v180H0z'/%3E%3C/svg%3E"); }
.identity { position: absolute; top: 39%; left: 50%; width: min(70vw, 860px); transform: translateX(-50%); pointer-events: none; text-align: center; }
.brand { position: relative; width: 100%; aspect-ratio: 1360 / 146; margin: 0; overflow: hidden; opacity: 0; animation: arrival 1.8s cubic-bezier(.2,.65,.2,1) .15s forwards; }
.brand img { position: absolute; left: -2.132353%; top: -165.068493%; width: 105.588235%; max-width: none; height: auto; }
.announcement { margin-top: clamp(42px, 6.5vh, 76px); opacity: 0; animation: arrival 1.8s ease .65s forwards; }
.hairline { display: block; width: 1px; height: 37px; margin: 0 auto 26px; background: linear-gradient(transparent, #ad905968); }
.announcement p { margin: 0; padding-left: .48em; color: var(--light-gold); font-size: .875rem; font-weight: 400; line-height: 1.6; letter-spacing: .48em; }
.edge-light { position: absolute; width: 40%; height: 1px; left: 30%; bottom: 0; background: linear-gradient(90deg, transparent, #ad905959, transparent); pointer-events: none; }
@keyframes reveal { to { opacity: 1; } }
@keyframes arrival { from { opacity: 0; translate: 0 10px; filter: blur(4px); } to { opacity: 1; translate: 0 0; filter: blur(0); } }
@media (max-width: 640px) {
  .stage { min-height: 420px; }
  .identity { top: 40%; width: 84vw; }
  .announcement { margin-top: 43px; }
  .hairline { height: 29px; margin-bottom: 23px; }
  .announcement p { font-size: .8125rem; letter-spacing: .36em; padding-left: .36em; }
}
@media (max-height: 500px) and (min-width: 641px) {
  .stage { min-height: 320px; }
  .identity { top: 28%; width: min(60vw, 650px); }
  .announcement { margin-top: 24px; }
  .hairline { height: 20px; margin-bottom: 15px; }
}
@media (prefers-reduced-motion: reduce) {
  #sound-field, .brand, .announcement { opacity: 1; animation: none; }
}