/* Coming soon — dawn skyline
   Indigo to amber, flat silhouettes, condensed urban display caps. */

:root {
  --night: #04061a;
  --cream: #f4f0e8;
  --amber: #ffb066;
  --signal: #ff6a20;

  --shell: clamp(1.4rem, 5.5vw, 5.5rem);
  --display: "Big Shoulders Display", "Archivo Narrow", ui-sans-serif, system-ui,
    "Segoe UI", Helvetica, Arial, sans-serif;

  --eyex: 0;
  --eyey: 0;
}

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overflow: hidden;
  overscroll-behavior: none;
  background: var(--night);
}

body {
  color: var(--cream);
  font-family: var(--display);
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
}

canvas { display: block; }

::selection { background: var(--signal); color: #fff; }

.stage {
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  touch-action: none;
}

.stage__canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  background: var(--night);
}

/* ---------- the two words ---------- */

.title {
  position: absolute;
  left: var(--shell);
  right: var(--shell);
  top: 15%;
  margin: 0;
  font-weight: 800;
  font-size: clamp(3.6rem, 19vw, 9rem);
  line-height: 0.8;
  letter-spacing: 0.002em;
  text-transform: uppercase;
  pointer-events: none;
  will-change: transform;
  /* the type sits in the scene, so it answers the camera too */
  transform: translate3d(calc(var(--eyex) * -18px), calc(var(--eyey) * -10px), 0);
  filter: drop-shadow(0 4px 26px rgba(4, 6, 26, 0.75));
}

.title span {
  display: block;
  white-space: nowrap;
  opacity: 0;
  animation:
    lift 1.4s cubic-bezier(0.16, 1, 0.3, 1) forwards,
    sweep 9s 2.2s cubic-bezier(0.4, 0, 0.2, 1) infinite;
  /* repeat-x so the element is always covered — the bright band is one tile wide */
  background-repeat: repeat-x;
  background-size: 300% 100%;
  background-position: 150% 0;
}

.title__a {
  color: var(--cream);
  background-image: linear-gradient(101deg,
    var(--cream) 0%, var(--cream) 40%,
    #ffffff 47%, #ffe3bd 51%,
    var(--cream) 59%, var(--cream) 100%);
  animation-delay: 0s, 2.2s;
}

.title__b {
  color: var(--amber);
  background-image: linear-gradient(101deg,
    var(--amber) 0%, var(--amber) 40%,
    #ffe0b4 47%, #fff6e6 51%,
    var(--amber) 59%, var(--amber) 100%);
  animation-delay: 0.16s, 2.42s;
}

/* Only go transparent where the clip is actually supported. */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .title span {
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}

.title::after {
  content: "";
  display: block;
  width: 1.5em;
  max-width: 62%;
  height: 0.032em;
  margin-top: 0.3em;
  background: var(--signal);
  transform-origin: left center;
  transform: scaleX(0);
  animation: rule 1.5s 0.7s cubic-bezier(0.16, 1, 0.3, 1) forwards;
  box-shadow: 0 0 22px rgba(255, 106, 32, 0.55);
}

@keyframes lift {
  from { opacity: 0; transform: translateY(0.34em) scaleY(1.06); filter: blur(14px); }
  to   { opacity: 1; transform: none; filter: blur(0); }
}

@keyframes sweep {
  0%   { background-position: 150% 0; }
  42%  { background-position: -150% 0; }
  100% { background-position: -150% 0; }
}

@keyframes rule {
  to { transform: scaleX(1); }
}

@media (max-width: 46rem) {
  .title { top: 11%; }
}

@media (max-height: 30rem) and (orientation: landscape) {
  .title {
    top: 9%;
    font-size: clamp(3rem, 22vh, 6rem);
  }
}

@media (prefers-reduced-motion: reduce) {
  .title span {
    animation: none;
    opacity: 1;
    background-position: 150% 0;
  }
  .title::after { animation: none; transform: scaleX(1); }
}