/* Informed Context — placeholder.
   One quiet moment: 1981-style chrome-gold friendly letters crawling in
   over a deep starfield. 4K-clean render, film-soft grade on top. */

* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  height: 100%;
  overflow: hidden;
  background: #020308;
}

body {
  font-family: 'Montserrat', system-ui, sans-serif;
  color: #d9b76a;
}

/* ---------- deep space: photo base + tilt-shift blur band ---------- */

.bg, .bg-blur {
  position: fixed;
  inset: -4%;
  background: url("assets/bg.webp") center / cover no-repeat;
  transform: scale(1.06);
  will-change: transform;
}

/* blurred copy masked to top+bottom = tilt-shift: the logo's focal
   plane stays sharp, the nearest/deepest stars fall out of focus */
.bg-blur {
  filter: blur(7px) brightness(.92);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, transparent 32%, transparent 62%, #000 100%);
          mask-image: linear-gradient(180deg, #000 0%, transparent 32%, transparent 62%, #000 100%);
}

#stars {
  position: fixed;
  inset: 0;
  z-index: 1;
}

/* ---------- the moment: crawl-in lockup ---------- */

.viewport {
  position: fixed;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  perspective: 420px;
  overflow: hidden;
}

.stage { will-change: transform; }

.lockup {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(.6rem, 2.5vmin, 1.4rem);
  transform-origin: 50% 100%;
  animation: crawl-in 5.8s linear .8s both;
}

/* three beats: satellite glide (constant pace), abrupt brake just past the
   spot, then a U-turn descent that lands on the subtitle */
@keyframes crawl-in {
  0% {
    transform: rotateX(24deg) translate3d(0, 58vh, -820px);
    opacity: 0;
    animation-timing-function: cubic-bezier(.1, .1, .9, 1);
  }
  8% { opacity: 1; }
  72% {
    transform: rotateX(-.9deg) translate3d(0, -2vh, 0);
    animation-timing-function: cubic-bezier(.1, .7, .4, 1);
  }
  /* apogee: a tenth-of-a-second beat, still coasting upward on momentum */
  74% {
    transform: rotateX(-.95deg) translate3d(0, -2.15vh, 0);
    animation-timing-function: cubic-bezier(.5, 0, .3, 1);
  }
  100% {
    transform: rotateX(0deg) translate3d(0, 0, 0);
    opacity: 1;
  }
}

.mark {
  width: clamp(10rem, 40vmin, 28rem);
  height: auto;
  overflow: visible;
  filter:
    drop-shadow(0 0 14px rgba(255, 230, 170, .26))
    drop-shadow(0 0 40px rgba(255, 200, 110, .10))
    drop-shadow(0 3px 1px rgba(46, 30, 6, .55));
}

/* SVG paints fill + stroke natively — no background-clip misregistration.
   paint-order keeps the rim behind the gold so the fill is never eaten.
   The c only leans (rotate), matching the reference mark. */
.mark text {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 0;
  font-size: 58px;
  fill: url(#goldgrad);
  stroke: rgba(193, 150, 66, .95);
  stroke-width: .25px;
  paint-order: stroke;
  stroke-linejoin: round;
}

.subtitle {
  font-weight: 600;
  font-size: clamp(.85rem, 3.1vmin, 1.55rem);
  text-transform: uppercase;
  letter-spacing: .58em;
  margin-left: .58em; /* optically recenters tracked-out caps */
  color: #dcba6e;
  text-shadow: 0 0 14px rgba(230, 201, 130, .35);
  opacity: 0;
  animation: settle-in 1.5s ease-out 5.1s forwards;
}

@keyframes settle-in {
  from { opacity: 0; letter-spacing: .72em; }
  to   { opacity: 1; letter-spacing: .58em; }
}

.towel-day {
  font-size: clamp(.6rem, 1.7vmin, .8rem);
  letter-spacing: .3em;
  margin-left: .3em;
  text-transform: uppercase;
  color: rgba(217, 183, 106, .65);
  opacity: 0;
  animation: settle-in 1s ease-out 7.2s forwards;
}

/* ---------- film grade ---------- */

.vignette {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  background: radial-gradient(ellipse at 50% 44%, transparent 52%, rgba(0, 0, 5, .58) 100%);
}

.grain {
  position: fixed;
  inset: -60%;
  z-index: 3;
  pointer-events: none;
  opacity: .05;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='.6'/%3E%3C/svg%3E");
  animation: grain .9s steps(6) infinite;
}

@keyframes grain {
  0%   { transform: translate3d(0, 0, 0); }
  20%  { transform: translate3d(-3%, 2%, 0); }
  40%  { transform: translate3d(2%, -3%, 0); }
  60%  { transform: translate3d(-2%, -2%, 0); }
  80%  { transform: translate3d(3%, 3%, 0); }
  100% { transform: translate3d(0, 0, 0); }
}

/* ---------- eggs ---------- */

/* one faint star remains after the crawl ends */
.milliways {
  position: fixed;
  right: 11vw;
  bottom: 13vh;
  z-index: 4;
  width: 28px;
  height: 28px;
  background: none;
  border: 0;
  cursor: pointer;
  opacity: 0;
  transition: opacity 2.5s ease;
}

.milliways.on { opacity: 1; }

.milliways::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  width: 3px; height: 3px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  background: rgba(255, 244, 214, .65);
  box-shadow: 0 0 6px 1px rgba(255, 244, 214, .35);
}

.milliways .tip {
  position: absolute;
  right: 18px;
  bottom: 18px;
  width: max-content;
  max-width: 46vw;
  padding: 9px 12px;
  font-size: 11.5px;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: right;
  color: #d9b76a;
  background: rgba(2, 3, 8, .72);
  border: 1px solid rgba(217, 183, 106, .28);
  opacity: 0;
  pointer-events: none;
  transition: opacity .5s ease;
}

.milliways:hover .tip,
.milliways:focus-visible .tip { opacity: 1; }

/* abacabb */
.dont-panic {
  position: fixed;
  inset: 0;
  z-index: 5;
  display: grid;
  place-items: center;
  background: rgba(2, 3, 8, .55);
  opacity: 0;
  transition: opacity .9s ease;
  pointer-events: none;
}

.dont-panic.show { opacity: 1; }

.dont-panic span {
  font-family: 'Fraunces', Georgia, serif;
  font-weight: 900;
  font-variation-settings: 'opsz' 144, 'SOFT' 100, 'WONK' 0;
  font-size: min(24vh, 17vw);
  line-height: 1.04;
  text-align: center;
  background: linear-gradient(180deg,
    #fffdf4 0%, #f7e9c2 26%, #ecd28f 54%, #cfa452 84%, #b3873d 100%);
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-stroke: 1px rgba(193, 150, 66, .95);
  paint-order: stroke;
  filter:
    drop-shadow(0 0 16px rgba(255, 230, 170, .30))
    drop-shadow(0 3px 1px rgba(46, 30, 6, .55));
}

/* music: grey, transparent, waiting in the lower left */
.audio-toggle {
  position: fixed;
  left: 22px;
  bottom: 20px;
  z-index: 4;
  width: 46px;
  height: 46px;
  padding: 9px;
  background: none;
  border: 0;
  color: rgba(205, 205, 212, .45); /* >=3:1 non-text contrast (WCAG 1.4.11) */
  cursor: pointer;
  transition: color .4s ease;
}

.audio-toggle:focus-visible,
.milliways:focus-visible {
  outline: 2px solid rgba(217, 183, 106, .75);
  outline-offset: 2px;
}

.audio-toggle:hover,
.audio-toggle:focus-visible { color: rgba(218, 218, 226, .62); }

.audio-toggle svg { width: 100%; height: 100%; display: block; }
.audio-toggle .ico-on { display: none; }
.audio-toggle.playing .ico-on { display: block; }
.audio-toggle.playing .ico-off { display: none; }

/* rare visitor; padding = generous hitbox, line painted in content box only */
.shooting-star {
  position: fixed;
  z-index: 4;
  padding: 16px;
  width: 130px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 250, 235, .9));
  background-clip: content-box;
  cursor: pointer;
  animation: streak 3.4s linear forwards;
}

@keyframes streak {
  0%   { transform: translate3d(0, 0, 0) rotate(-16deg); opacity: 0; }
  8%   { opacity: 1; }
  100% { transform: translate3d(-44vw, 13vh, 0) rotate(-16deg); opacity: 0; }
}

.petunias {
  position: fixed;
  z-index: 4;
  font-size: 13px;
  font-style: italic;
  letter-spacing: .05em;
  color: #a9d8b0;
  text-shadow: 0 0 10px rgba(140, 220, 160, .5);
  animation: fall 4.2s ease-in forwards;
  pointer-events: none;
}

@keyframes fall {
  from { transform: translateY(0); opacity: 1; }
  to   { transform: translateY(36vh); opacity: 0; }
}

/* ---------- reduced motion: a deep, still, silent starfield ---------- */

@media (prefers-reduced-motion: reduce) {
  .lockup, .subtitle, .towel-day, .grain { animation: none; }
  .subtitle, .towel-day { opacity: 1; }
  .milliways { transition: none; }
}