/* Halloway app-load intro — boot-owned studio ident + lantern title card.
 *
 * Shell-only, title page only. splash.js handles timing and audio; this file
 * keeps the visuals fixed-format and mobile-first. The overlay can be advanced
 * by tapping through its beats, but there is no skip UI. */

.hw-splash {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: grid;
  place-items: center;
  overflow: hidden;
  background:
    radial-gradient(72% 58% at 50% 44%, rgba(97, 73, 123, 0.24), transparent 72%),
    linear-gradient(180deg, rgba(5, 5, 9, 0.98), rgba(8, 7, 14, 0.9));
  opacity: 1;
  transition: opacity 650ms ease;
  -webkit-tap-highlight-color: transparent;
  touch-action: none;
}
.hw-splash.is-leaving {
  opacity: 0;
}
.hw-splash::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background: repeating-linear-gradient(
    to bottom,
    rgba(255, 255, 255, 0.035),
    rgba(255, 255, 255, 0.035) 1px,
    transparent 1px,
    transparent 5px
  );
  opacity: 0.32;
  mix-blend-mode: screen;
}
.hw-splash::after {
  position: absolute;
  inset: auto -10% 0;
  height: 38%;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(45% 72% at 48% 100%, rgba(232, 179, 76, 0.14), transparent 72%),
    linear-gradient(180deg, transparent, rgba(0, 0, 0, 0.52));
}

.hw-splash__beat {
  position: relative;
  z-index: 1;
  grid-area: 1 / 1;
  display: grid;
  place-items: center;
  width: min(92vw, 48rem);
  opacity: 0;
  transition: opacity 520ms ease;
}
.hw-splash__beat.is-in {
  opacity: 1;
}

/* ── Beat 1: No Evil Star terminal ident ────────────────────────────────── */
.hw-splash__studio-card {
  position: relative;
  width: min(74vw, 18rem);
  aspect-ratio: 1;
  animation: hw-splash-studio-card 3.05s ease both;
}
.hw-splash__studio-screen {
  position: absolute;
  inset: 0;
  display: grid;
  align-content: space-between;
  padding: 1.45rem;
  overflow: hidden;
  border: 1px solid rgba(132, 255, 180, 0.25);
  border-radius: 8px;
  background:
    repeating-linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0.06),
      rgba(255, 255, 255, 0.06) 1px,
      transparent 1px,
      transparent 5px
    ),
    radial-gradient(circle at 34% 28%, rgba(132, 255, 180, 0.18), transparent 24%),
    rgba(6, 11, 16, 0.94);
  box-shadow:
    0 18px 60px rgba(0, 0, 0, 0.48),
    inset 0 0 48px rgba(132, 255, 180, 0.08);
}
.hw-splash__studio-screen::before {
  position: absolute;
  inset: 0;
  content: "";
  pointer-events: none;
  background:
    radial-gradient(circle at 30% 24%, rgba(255, 255, 255, 0.16), transparent 13%),
    linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent);
  opacity: 0.7;
  transform: translateX(-18%);
  animation: hw-splash-studio-glass 2.5s ease-in-out both;
}
.hw-splash__studio-bars {
  position: relative;
  z-index: 1;
  align-self: end;
  display: grid;
  gap: 0.38rem;
}
.hw-splash__studio-bars span {
  display: block;
  height: 0.78rem;
  border-radius: 999px;
  box-shadow: 0 0 22px currentColor;
  transform-origin: left center;
  animation: hw-splash-rainbow-ripple 1.85s ease-in-out infinite;
  animation-delay: var(--bar-delay, 0s);
  clip-path: polygon(0 11%, 21% 4%, 43% 12%, 64% 5%, 84% 13%, 100% 8%, 100% 89%, 79% 96%, 57% 88%, 36% 95%, 15% 87%, 0 94%);
}
.hw-splash__studio-bars span:nth-child(1) {
  width: 58%;
  color: #ff5c93;
  background: currentColor;
  --bar-delay: 0s;
}
.hw-splash__studio-bars span:nth-child(2) {
  width: 72%;
  color: #ffd166;
  background: currentColor;
  --bar-delay: 0.08s;
}
.hw-splash__studio-bars span:nth-child(3) {
  width: 86%;
  color: #84ffb4;
  background: currentColor;
  --bar-delay: 0.16s;
}
.hw-splash__studio-bars span:nth-child(4) {
  width: 100%;
  color: #62e7ff;
  background: currentColor;
  --bar-delay: 0.24s;
}
.hw-splash__studio-bars span:nth-child(5) {
  width: 82%;
  color: #b99cff;
  background: currentColor;
  --bar-delay: 0.32s;
}
.hw-splash__studio-bars span:nth-child(6) {
  width: 64%;
  color: #f6ead2;
  background: currentColor;
  --bar-delay: 0.4s;
}
.hw-splash__studio-name {
  position: relative;
  z-index: 1;
  align-self: start;
  color: #f6ead2;
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.22;
  text-shadow:
    0 0 18px rgba(246, 234, 210, 0.34),
    1px 0 0 rgba(255, 92, 147, 0.2),
    -1px 0 0 rgba(98, 231, 255, 0.2);
}

/* ── Beat 2: lantern title card ─────────────────────────────────────────── */
.hw-splash__card {
  display: grid;
  justify-items: center;
  gap: 1rem;
  color: #efe9ff;
  transform: perspective(900px) rotateX(10deg) translateY(0.8rem) scale(0.94);
  transform-origin: center;
  transition: transform 650ms ease;
}
.hw-splash__beat--card.is-in .hw-splash__card {
  transform: perspective(900px) rotateX(0deg) translateY(0) scale(1);
}
.hw-splash__banner {
  position: relative;
  width: min(92vw, 48rem);
  aspect-ratio: 3 / 1;
  min-height: 8.5rem;
  max-height: 20rem;
  overflow: hidden;
  border: 1px solid rgba(232, 179, 76, 0.18);
  border-radius: 8px;
  background: #05050a;
  box-shadow:
    0 26px 80px rgba(0, 0, 0, 0.55),
    0 0 40px rgba(232, 179, 76, 0.08);
}
.hw-splash__banner img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.045);
  transition: transform 3.1s ease-in-out;
}
.hw-splash__beat--card.is-in .hw-splash__banner img {
  transform: scale(1.03);
}
.hw-splash__banner::before {
  position: absolute;
  inset: 0;
  z-index: 1;
  content: "";
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.34), transparent 42%, rgba(0, 0, 0, 0.16)),
    radial-gradient(44% 100% at 52% 82%, rgba(232, 179, 76, 0.12), transparent 70%);
}
.hw-splash__stars {
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
}
.hw-splash__stars span {
  position: absolute;
  width: 0.12rem;
  height: 0.12rem;
  border-radius: 50%;
  background: rgba(238, 231, 255, 0.74);
  box-shadow: 0 0 0.34rem rgba(238, 231, 255, 0.34);
  opacity: 0.14;
  animation: hw-splash-star-sparkle 2.8s ease-in-out infinite;
  animation-delay: var(--star-delay, 0s);
}
.hw-splash__stars span:nth-child(1) {
  left: 18%;
  top: 18%;
  --star-delay: 0s;
}
.hw-splash__stars span:nth-child(2) {
  left: 31%;
  top: 30%;
  --star-delay: 1.2s;
}
.hw-splash__stars span:nth-child(3) {
  left: 47%;
  top: 22%;
  --star-delay: 0.6s;
}
.hw-splash__stars span:nth-child(4) {
  left: 58%;
  top: 15%;
  --star-delay: 1.7s;
}
.hw-splash__stars span:nth-child(5) {
  left: 73%;
  top: 28%;
  --star-delay: 0.9s;
}

.hw-splash__procession {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
}
.hw-splash__figure,
.hw-splash__old-wrap {
  position: absolute;
  left: var(--figure-left);
  top: var(--figure-top);
  width: var(--figure-width);
  height: var(--figure-height);
}
.hw-splash__beat--card.is-in .hw-splash__figure--small {
  animation: hw-splash-procession-walk 5.4s ease-in-out both;
  animation-delay: var(--walk-delay, 0s);
}
.hw-splash__figure--one {
  --figure-left: 18.2%;
  --figure-top: 55%;
  --figure-width: 4.6%;
  --figure-height: 25%;
  --walk-distance: 2.8rem;
  --walk-delay: 0.18s;
}
.hw-splash__figure--two {
  --figure-left: 25%;
  --figure-top: 52%;
  --figure-width: 5%;
  --figure-height: 29%;
  --walk-distance: 3rem;
  --walk-delay: 0s;
}
.hw-splash__old-wrap {
  --figure-left: 35.8%;
  --figure-top: 47%;
  --figure-width: 6.8%;
  --figure-height: 38%;
  --walk-distance: 3.25rem;
}
.hw-splash__beat--card.is-in .hw-splash__old-wrap {
  animation: hw-splash-procession-walk 5.8s ease-in-out both;
}
.hw-splash__figure--old {
  inset: 0;
  width: 100%;
  height: 100%;
  animation: hw-splash-old-hobble 1.35s ease-in-out infinite;
  transform-origin: 48% 88%;
}
.hw-splash__figure-head,
.hw-splash__figure-body,
.hw-splash__figure-arm,
.hw-splash__figure-brim,
.hw-splash__figure-hat,
.hw-splash__figure-cane,
.hw-splash__figure-lantern {
  position: absolute;
  display: block;
  background: rgba(4, 3, 9, 0.96);
}
.hw-splash__figure-head {
  left: 23%;
  top: 0;
  width: 52%;
  aspect-ratio: 1;
  border-radius: 50%;
}
.hw-splash__figure-body {
  left: 22%;
  bottom: 0;
  width: 54%;
  height: 72%;
  border-radius: 0.15rem 0.15rem 0.05rem 0.05rem;
}
.hw-splash__figure-arm {
  left: 55%;
  top: 22%;
  width: 58%;
  height: 0.18rem;
  border-radius: 999px;
  transform: rotate(-18deg);
  transform-origin: left center;
}
.hw-splash__figure--old .hw-splash__figure-head {
  display: none;
}
.hw-splash__figure--old .hw-splash__figure-hat {
  left: 34%;
  top: 1%;
  width: 38%;
  height: 18%;
  border-radius: 0.55rem 0.55rem 0.12rem 0.12rem;
}
.hw-splash__figure--old .hw-splash__figure-brim {
  left: 12%;
  top: 15%;
  width: 74%;
  height: 0.22rem;
  border-radius: 999px;
}
.hw-splash__figure--old .hw-splash__figure-body {
  left: 28%;
  bottom: 2%;
  width: 44%;
  height: 72%;
  border-radius: 45% 45% 0.12rem 0.12rem;
}
.hw-splash__figure--old .hw-splash__figure-arm {
  left: 59%;
  top: 45%;
  width: 64%;
  height: 0.16rem;
  transform: rotate(7deg);
}
.hw-splash__figure-cane {
  left: 79%;
  top: 44%;
  width: 0.11rem;
  height: 48%;
  border-radius: 999px;
  transform: rotate(-5deg);
  transform-origin: top center;
  animation: hw-splash-cane-tap 1.35s ease-in-out infinite;
}
.hw-splash__figure-lantern {
  left: 106%;
  top: 41%;
  width: 0.46rem;
  height: 0.58rem;
  border: 1px solid rgba(4, 3, 9, 0.95);
  border-radius: 0.08rem;
  background:
    radial-gradient(circle at 50% 52%, rgba(255, 218, 116, 0.9), rgba(232, 179, 76, 0.5) 39%, rgba(4, 3, 9, 0.98) 42%);
  box-shadow:
    0 0 0.62rem rgba(232, 179, 76, 0.4),
    0 0 1.4rem rgba(232, 179, 76, 0.18);
  animation: hw-splash-lantern-carried 680ms steps(4, end) infinite;
}
.hw-splash__lantern {
  position: absolute;
  z-index: 4;
  left: 51%;
  top: 82%;
  width: 22%;
  min-width: 5.5rem;
  aspect-ratio: 1;
  pointer-events: none;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(255, 224, 143, 0.82) 0 8%, rgba(232, 179, 76, 0.34) 18%, rgba(232, 179, 76, 0.12) 42%, transparent 72%);
  filter: blur(4px);
  mix-blend-mode: screen;
  transform: translate(-50%, -50%) scale(0.92);
  animation: hw-splash-lantern-flicker 620ms steps(4, end) infinite;
}
.hw-splash__beat--card.is-in .hw-splash__lantern {
  animation:
    hw-splash-lantern-light-travel 5.8s ease-in-out both,
    hw-splash-lantern-flicker 620ms steps(4, end) infinite;
}
.hw-splash__wordmark {
  display: inline-block;
  color: #f8f2ff;
  font-size: clamp(1.6rem, 8vw, 2.8rem);
  filter: drop-shadow(0 10px 26px rgba(0, 0, 0, 0.5));
}

@keyframes hw-splash-studio-card {
  0% { opacity: 0; }
  14%, 78% { opacity: 1; }
  100% { opacity: 0; }
}
@keyframes hw-splash-studio-glass {
  0% { transform: translateX(-24%); opacity: 0; }
  42% { opacity: 0.7; }
  100% { transform: translateX(22%); opacity: 0.14; }
}
@keyframes hw-splash-rainbow-ripple {
  0%, 100% {
    clip-path: polygon(0 11%, 21% 4%, 43% 12%, 64% 5%, 84% 13%, 100% 8%, 100% 89%, 79% 96%, 57% 88%, 36% 95%, 15% 87%, 0 94%);
    transform: translateX(0) skewY(0deg);
  }
  33% {
    clip-path: polygon(0 5%, 20% 14%, 42% 6%, 63% 15%, 84% 7%, 100% 13%, 100% 94%, 79% 86%, 58% 95%, 36% 87%, 16% 96%, 0 89%);
    transform: translateX(0.08rem) skewY(-1.4deg);
  }
  66% {
    clip-path: polygon(0 14%, 22% 6%, 43% 15%, 65% 7%, 85% 16%, 100% 9%, 100% 87%, 78% 95%, 57% 86%, 35% 94%, 14% 85%, 0 92%);
    transform: translateX(-0.05rem) skewY(1.2deg);
  }
}
@keyframes hw-splash-star-sparkle {
  0%, 100% { opacity: 0.1; transform: scale(0.72); }
  48% { opacity: 0.48; transform: scale(1.18); }
}
@keyframes hw-splash-procession-walk {
  from { transform: translateX(0); }
  to { transform: translateX(var(--walk-distance)); }
}
@keyframes hw-splash-old-hobble {
  0%, 100% { transform: translateY(0) rotate(-1.4deg); }
  26% { transform: translateY(0.08rem) rotate(1.1deg); }
  50% { transform: translateY(-0.03rem) rotate(-0.6deg); }
  76% { transform: translateY(0.11rem) rotate(1.6deg); }
}
@keyframes hw-splash-cane-tap {
  0%, 100% { transform: rotate(-8deg) translateY(0); }
  48% { transform: rotate(5deg) translateY(0.08rem); }
}
@keyframes hw-splash-lantern-carried {
  0%, 100% { opacity: 0.78; transform: translateY(0); }
  50% { opacity: 1; transform: translateY(0.04rem); }
}
@keyframes hw-splash-lantern-light-travel {
  from { left: 51%; top: 82%; }
  to { left: 56%; top: 81%; }
}
@keyframes hw-splash-lantern-flicker {
  0%, 100% { opacity: 0.72; transform: translate(-50%, -50%) scale(0.88); }
  28% { opacity: 1; transform: translate(-50%, -50%) scale(1.02); }
  52% { opacity: 0.62; transform: translate(-50%, -50%) scale(0.94); }
  76% { opacity: 0.9; transform: translate(-50%, -50%) scale(0.99); }
}

@media (min-width: 640px) {
  .hw-splash__studio-card {
    width: 20rem;
  }
  .hw-splash__studio-name {
    font-size: 1.16rem;
  }
}

@media (min-width: 960px) {
  .hw-splash__studio-card {
    width: 22rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hw-splash,
  .hw-splash__beat,
  .hw-splash__card,
  .hw-splash__banner img {
    transition: none !important;
  }
  .hw-splash__studio-card,
  .hw-splash__studio-screen::before,
  .hw-splash__studio-bars span,
  .hw-splash__stars span,
  .hw-splash__figure--small,
  .hw-splash__old-wrap,
  .hw-splash__figure--old,
  .hw-splash__figure-cane,
  .hw-splash__figure-lantern,
  .hw-splash__lantern {
    animation: none !important;
  }
  .hw-splash__card,
  .hw-splash__beat--card.is-in .hw-splash__card {
    transform: none !important;
  }
  .hw-splash__lantern {
    opacity: 0.7;
  }
}