.start-overlay {
  display: block;
  overflow: hidden;
  isolation: isolate;
  padding: 0;
  color: #fff1cc;
  background: radial-gradient(circle at 18% 15%, #6672aa55 0 1px, transparent 2px), radial-gradient(circle at 78% 45%, #f8cf9b44 0 1px, transparent 2px), #101630;
  background-size: 89px 103px, 131px 157px, auto;
  animation: cover-night-shift 22s linear infinite;
  backdrop-filter: none;
}
.start-overlay[hidden] { display: none; }
.cover-scene, .cover-shade { position: absolute; inset: 0; pointer-events: none; }
.cover-scene { overflow: hidden; }
.cover-scene::before {
  content: '';
  position: absolute;
  inset: -8%;
  background: url('./assets/uncasted-cover-v2.png') center / cover no-repeat;
  filter: blur(20px) brightness(.84) saturate(1.12);
  animation: cover-pan 15s ease-in-out infinite alternate;
}
.cover-art {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
  image-rendering: pixelated;
  animation: cover-art-breathe 6s ease-in-out infinite alternate;
}
.cover-shade {
  z-index: 1;
  background: linear-gradient(90deg, #080e27e8 0%, #0b1238ba 26%, #12143936 65%, #080e2699 100%),
              linear-gradient(0deg, #080c21c9, transparent 42%, #080c2170);
}
.cover-beam {
  position: absolute;
  inset: -25% -70%;
  background: linear-gradient(105deg, transparent 41%, #fff1bd00 46%, #fff1bd3d 50%, #fff1bd00 54%, transparent 60%);
  mix-blend-mode: screen;
  animation: cover-beam-sweep 8s ease-in-out infinite;
}
.cover-grain {
  position: absolute;
  inset: 0;
  opacity: .5;
  background-image: radial-gradient(circle at 13% 13%, #fff0c5 0 1px, transparent 2px),
    radial-gradient(circle at 31% 8%, #f9cc96 0 1px, transparent 2px),
    radial-gradient(circle at 72% 18%, #fff9d9 0 1px, transparent 2px),
    radial-gradient(circle at 89% 11%, #ffdeb2 0 1px, transparent 2px);
  background-size: 270px 180px, 370px 220px, 410px 260px, 310px 240px;
  animation: cover-stars 3s steps(2, end) infinite alternate;
}
.cover-spark { position: absolute; width: 13px; height: 13px; filter: drop-shadow(0 0 9px #ffc78e); animation: cover-sparkle 2.6s ease-in-out infinite; }
.cover-spark::before, .cover-spark::after { content: ''; position: absolute; background: #fff2c5; }
.cover-spark::before { width: 3px; height: 13px; left: 5px; }
.cover-spark::after { width: 13px; height: 3px; top: 5px; }
.cover-spark-a { left: 17%; top: 14%; animation-delay: -.4s; }
.cover-spark-b { left: 78%; top: 11%; animation-delay: -1.7s; }
.cover-spark-c { left: 87%; top: 38%; animation-delay: -.9s; }
.cover-spark-d { left: 41%; top: 28%; animation-delay: -2.2s; }
.cover-headlight { position: absolute; bottom: 12%; left: -25%; width: 18%; height: 3px; background: #ffe5a5; box-shadow: 0 0 8px 3px #ff9568, 0 0 30px 10px #ff956855; transform: skewX(-25deg); animation: cover-drive 9s linear infinite; }
.cover-headlight-b { bottom: 16%; animation-delay: -4s; animation-duration: 11s; opacity: .55; }
.cover-topline {
  position: absolute;
  z-index: 3;
  left: clamp(18px, 4vw, 55px);
  right: clamp(18px, 4vw, 55px);
  top: clamp(14px, 3.5vh, 32px);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: #ffdfa4;
  font: 900 clamp(8px, .9vw, 11px) Consolas, monospace;
  letter-spacing: 2px;
  text-shadow: 2px 2px #182147;
  animation: cover-top-in .8s ease-out both;
}
.cover-menu {
  position: absolute;
  z-index: 3;
  bottom: clamp(54px, 9vh, 104px);
  left: clamp(22px, 5vw, 78px);
  width: min(510px, 44vw);
  padding: clamp(18px, 2vw, 30px);
  border-left: 5px solid #f5ba7b;
  background: linear-gradient(90deg, #0d1737ec, #172243bb 78%, #17224355);
  box-shadow: 12px 12px 0 #080d20a3, inset 0 0 0 1px #f5ca8b73;
  animation: cover-menu-in .9s ease-out both;
}
.cover-kicker { display: flex; align-items: center; gap: 8px; color: #ffbd93; font: 900 clamp(8px, .95vw, 12px) Consolas, monospace; letter-spacing: 2px; }
.cover-kicker-dot { width: 7px; height: 7px; background: #ff7f82; box-shadow: 0 0 12px #ff7f82; animation: cover-blink 1.2s steps(2, end) infinite; }
.cover-kicker > span:last-child { color: #fff4c4; animation: cover-sparkle 1.5s infinite; }
.cover-title-entrance { animation: cover-title-land 1.15s cubic-bezier(.2,.85,.2,1) .15s both; }
.cover-title {
  margin: 12px 0 10px;
  color: #fff0b8;
  font: 900 clamp(49px, 6.7vw, 96px)/.84 Impact, 'Arial Black', sans-serif;
  letter-spacing: -.035em;
  text-transform: uppercase;
  filter: drop-shadow(0 0 10px #f5a86768);
}
.cover-title span { display: block; width: max-content; max-width: 100%; text-shadow: 4px 4px 0 #8c465c, 8px 8px 0 #171f42; }
.cover-title span:first-child { animation: cover-title-bob 3.2s ease-in-out 1.3s infinite; }
.cover-title span:last-child { color: #ffbc86; animation: cover-title-bob 2.8s ease-in-out 1.5s infinite reverse; }
#start-description { max-width: 450px; margin: 14px 0 18px; font: 600 clamp(11px, 1.13vw, 15px)/1.5 Consolas, monospace; color: #f2d9bf; text-shadow: 2px 2px #151a38; }
.cover-primary-entrance { animation: cover-button-land 1s cubic-bezier(.18,.9,.23,1) .55s both; }
.cover-primary, .cover-resume {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 13px 16px;
  text-align: left;
  cursor: pointer;
  font: 900 19px Consolas, monospace;
  letter-spacing: 1px;
}
.cover-primary span, .cover-resume span { display: flex; flex-direction: column; gap: 4px; }
.cover-primary small, .cover-resume small { font: 800 9px Consolas, monospace; letter-spacing: 1px; }
.cover-primary { color: #26304d; background: #f5c36f; border: 3px solid #ffeab3; box-shadow: 6px 6px 0 #843e56; animation: cover-button-bob 2.7s ease-in-out 1.6s infinite; }
.cover-primary:hover, .cover-primary:focus-visible { filter: brightness(1.16); box-shadow: 8px 8px 0 #ad4c63, 0 0 22px #ffd37e; }
.cover-primary b { font-size: 22px; animation: cover-arrow 1.1s ease-in-out infinite alternate; }
.cover-resume { margin-top: 10px; color: #ffe5bd; background: #283757e8; border: 2px solid #9ba4b1; box-shadow: 4px 4px 0 #111a32; font-size: 13px; animation: cover-resume-in .7s ease-out 1.3s both; }
.cover-resume[hidden] { display: none; }
.cover-resume:hover, .cover-resume:focus-visible { border-color: #ffd097; background: #384d70; }
.cover-resume small { color: #bccbd0; letter-spacing: .3px; }
.cover-controls { margin-top: 17px; color: #e1cbac; font: 800 9px Consolas, monospace; letter-spacing: .5px; }
.cover-controls span { color: #ffb36e; }
.cover-marquee {
  position: absolute;
  z-index: 3;
  bottom: 0;
  left: 0;
  right: 0;
  overflow: hidden;
  padding: 10px 0 9px;
  white-space: nowrap;
  border-top: 2px solid #f7bd7c;
  background: #111b3bef;
  color: #f5d19d;
  font: 900 10px Consolas, monospace;
  letter-spacing: 2px;
}
.cover-marquee span { display: block; width: max-content; animation: cover-ticker 22s linear infinite; }
@keyframes cover-pan { from { transform: scale(1.02) translate(-1%, 0); } to { transform: scale(1.12) translate(2%, -2%); } }
@keyframes cover-art-breathe { from { filter: brightness(.94) saturate(1); } to { filter: brightness(1.08) saturate(1.14); } }
@keyframes cover-beam-sweep { from { transform: translateX(-40%) rotate(-8deg); } to { transform: translateX(40%) rotate(8deg); } }
@keyframes cover-stars { from { opacity: .22; } to { opacity: .7; } }
@keyframes cover-sparkle { 0%, 100% { opacity: .25; transform: scale(.65) rotate(0); } 50% { opacity: 1; transform: scale(1.3) rotate(45deg); } }
@keyframes cover-drive { from { transform: translateX(0) skewX(-25deg); opacity: 0; } 16%, 85% { opacity: .7; } to { transform: translateX(900%) skewX(-25deg); opacity: 0; } }
@keyframes cover-top-in { from { opacity: 0; transform: translateY(-28px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cover-menu-in { from { opacity: 0; transform: translateX(-55px); } to { opacity: 1; transform: translateX(0); } }
@keyframes cover-title-land { 0% { opacity: 0; transform: translateY(-75vh) rotate(-8deg); } 60% { opacity: 1; transform: translateY(18px) rotate(3deg); } 78% { transform: translateY(-12px) rotate(-1deg); } 100% { transform: translateY(0) rotate(0); } }
@keyframes cover-title-bob { 0%, 100% { transform: translateY(0) rotate(-1deg); } 50% { transform: translateY(-8px) rotate(1deg); } }
@keyframes cover-button-land { 0% { opacity: 0; transform: translateY(65vh) rotate(5deg); } 60% { opacity: 1; transform: translateY(-12px) rotate(-2deg); } 80% { transform: translateY(7px) rotate(1deg); } 100% { transform: translateY(0); } }
@keyframes cover-button-bob { 0%, 100% { transform: translateY(0) rotate(-.5deg); } 50% { transform: translateY(-6px) rotate(.5deg); } }
@keyframes cover-arrow { from { transform: translateX(-3px); } to { transform: translateX(3px); } }
@keyframes cover-resume-in { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
@keyframes cover-ticker { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes cover-blink { from { opacity: .35; } to { opacity: 1; } }
@keyframes cover-night-shift { from { background-position: 0 0, 0 0, center; } to { background-position: 89px 103px, -131px 157px, center; } }
@media (min-width: 701px) and (min-aspect-ratio: 8/5) {
  .cover-art {
    inset: 0 auto 0 50%;
    width: min(100%, 150vh);
    transform: translateX(-50%);
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
    mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
  }
}
@media (max-width: 700px), (max-aspect-ratio: 4/5) {
  .start-overlay { overflow-y: auto; display: flex; flex-direction: column; justify-content: flex-start; align-items: stretch; }
  .cover-scene { position: absolute; inset: 0; width: 100%; height: 100%; aspect-ratio: auto; }
  .cover-art { inset: 34px 0 auto; width: 100%; height: auto; aspect-ratio: 736 / 480; object-fit: contain; object-position: center; filter: drop-shadow(0 10px 18px #070b22); }
  .cover-shade { display: none; }
  .cover-topline { top: 11px; left: 12px; right: 12px; font-size: clamp(7px, 1vw, 10px); letter-spacing: .7px; }
  .cover-topline span:last-child { text-align: right; }
  .cover-menu { position: relative; bottom: auto; left: auto; width: calc(100% - 28px); max-width: 510px; box-sizing: border-box; margin: calc(26px + 65.22vw) auto 55px; padding: 19px 17px 17px; background: #121b3bf4; border-left-width: 4px; }
  .cover-kicker { font-size: 8px; letter-spacing: 1px; }
  .cover-title { font-size: clamp(45px, 13vw, 75px); margin: 11px 0 8px; }
  .cover-title span { text-shadow: 3px 3px 0 #8c465c, 6px 6px 0 #171f42; }
  #start-description { font-size: 11px; margin: 13px 0 16px; }
  .cover-primary, .cover-resume { padding: 11px 12px; }
  .cover-primary { font-size: 16px; }
  .cover-controls { font-size: 8px; line-height: 1.6; }
  .cover-marquee { position: fixed; font-size: 8px; padding: 7px 0; }
  .cover-headlight { bottom: 10%; }
}
@media (max-width: 360px) { .cover-title { font-size: 42px; } .cover-topline span:last-child { max-width: 95px; } }
@media (prefers-reduced-motion: reduce) { .start-overlay *, .start-overlay *::before, .start-overlay *::after { animation: none !important; } }