#titleScene {
  display: grid;
  min-height: 100svh;
  padding: max(24px, env(safe-area-inset-top)) var(--scene-gutter) max(24px, env(safe-area-inset-bottom));
  place-items: center;
  align-content: center;
  overflow: hidden;
  text-align: center;
}

.title-content {
  z-index: 2;
  display: flex;
  width: min(100%, 680px);
  min-height: min(72svh, 650px);
  flex-direction: column;
  align-items: center;
  justify-content: center;
  animation: title-arrive 0.85s var(--ease-brick) both;
}

#titleScene .eyebrow {
  margin-bottom: clamp(13px, 2vh, 20px);
}

#titleScene h1 {
  display: flex;
  margin: 0 0 clamp(20px, 3vh, 34px);
  flex-direction: column;
  font-family: var(--display-font);
  font-size: clamp(76px, 11vw, 148px);
  font-weight: 1000;
  letter-spacing: -0.085em;
  line-height: 0.74;
  text-transform: uppercase;
}

#titleScene h1 span:first-child {
  color: var(--accent-hot);
  -webkit-text-stroke: 3px #d8efff;
  text-shadow: 0 6px var(--accent-dark), 0 15px 34px rgba(0, 0, 0, 0.58);
}

#titleScene h1 span:last-child {
  color: var(--violet);
  -webkit-text-stroke: 3px #ded8ff;
  text-shadow: 0 6px #3d2daa, 0 15px 34px rgba(0, 0, 0, 0.58);
}

.title-copy {
  margin: 0 0 clamp(34px, 5vh, 54px);
  color: #dceafa;
  font-size: clamp(16px, 1.5vw, 20px);
  font-weight: 800;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

#startButton {
  width: min(340px, 82vw);
  min-height: 76px;
  font-size: 24px;
  animation: start-pulse 2.4s 1.2s ease-in-out infinite;
}

.title-footer {
  position: absolute;
  bottom: max(18px, env(safe-area-inset-bottom));
  color: #b3bfd0;
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.22em;
  text-shadow: 0 2px 5px rgba(0, 0, 0, 0.7);
}
.title-footer { display:flex; align-items:center; gap:10px; }
.title-footer button { padding:5px 8px; border:1px solid rgba(143,202,255,.2); border-radius:7px; color:#8ca0b9; background:rgba(9,18,33,.62); font-size:8px; font-weight:900; letter-spacing:.12em; }
.title-footer button[aria-pressed="true"] { color:#a8e8ff; border-color:rgba(101,180,255,.5); }

.title-bricks {
  position: absolute;
  inset: 0;
  overflow: hidden;
  opacity: 0.6;
  filter: saturate(0.88);
  pointer-events: none;
}

.floating-brick {
  position: absolute;
  top: 0;
  left: 0;
  width: clamp(54px, 7vw, 94px);
  aspect-ratio: 1;
  border: 1px solid color-mix(in srgb, var(--brick-face), white 38%);
  border-radius: 20%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.66) 0 3%, rgba(255,255,255,.15) 10%, transparent 31%),
    linear-gradient(180deg, color-mix(in srgb,var(--brick-face),white 15%) 0 70%, var(--brick-face) 71% 82%, color-mix(in srgb,var(--brick-face),black 16%) 83% 100%);
  box-shadow:
    inset 3px 3px 2px rgba(255, 255, 255, 0.4),
    inset -3px 0 3px rgba(0, 0, 0, 0.12),
    inset 0 -8px 3px rgba(0, 0, 0, 0.15),
    0 7px var(--brick-rim),
    0 16px 25px rgba(0, 0, 0, 0.54);
  transform: translate(var(--x0),var(--y0)) rotate(var(--r0,-12deg)) scale(var(--scale,1));
  animation: flow-brick var(--duration, 13s) linear var(--delay, 0s) infinite;
}

.floating-brick::before {
  position: absolute;
  inset: 0;
  content: "";
  border-radius: inherit;
  background:
    radial-gradient(circle at 27% 27%, rgba(255,255,255,.8) 0 3%, color-mix(in srgb,var(--brick-face),white 25%) 4% 13%, var(--brick-face) 14% 16%, color-mix(in srgb,var(--brick-face),black 34%) 17% 20%, transparent 21%),
    radial-gradient(circle at 73% 27%, rgba(255,255,255,.69) 0 3%, color-mix(in srgb,var(--brick-face),white 22%) 4% 13%, var(--brick-face) 14% 16%, color-mix(in srgb,var(--brick-face),black 35%) 17% 20%, transparent 21%),
    radial-gradient(circle at 27% 73%, rgba(255,255,255,.58) 0 3%, color-mix(in srgb,var(--brick-face),white 18%) 4% 13%, var(--brick-face) 14% 16%, color-mix(in srgb,var(--brick-face),black 36%) 17% 20%, transparent 21%),
    radial-gradient(circle at 73% 73%, rgba(255,255,255,.5) 0 3%, color-mix(in srgb,var(--brick-face),white 16%) 4% 13%, var(--brick-face) 14% 16%, color-mix(in srgb,var(--brick-face),black 37%) 17% 20%, transparent 21%);
  filter: drop-shadow(0 2px 0 rgba(255,255,255,.14));
}

.floating-brick:nth-child(n+13) { display: none; }

@keyframes title-arrive { from { opacity: 0; transform: translateY(50px) scale(0.84); } }
@keyframes flow-brick {
  0% { transform:translate(var(--x0),var(--y0)) rotate(var(--r0)) scale(var(--scale)); }
  25% { transform:translate(var(--x25),var(--y25)) rotate(var(--r25)) scale(var(--scale)); }
  50% { transform:translate(var(--x50),var(--y50)) rotate(var(--r50)) scale(var(--scale)); }
  75% { transform:translate(var(--x75),var(--y75)) rotate(var(--r75)) scale(var(--scale)); }
  100% { transform:translate(var(--x100),var(--y100)) rotate(var(--r100)) scale(var(--scale)); }
}
@keyframes start-pulse {
  0%, 100% { box-shadow: inset 0 3px 1px rgba(255,255,255,.73), inset 0 -6px rgba(10,47,116,.46), 0 10px #123d91, 0 18px 34px rgba(52,124,242,.34); }
  50% { box-shadow: inset 0 3px 1px rgba(255,255,255,.81), inset 0 -6px rgba(10,47,116,.46), 0 10px #123d91, 0 20px 48px rgba(91,167,255,.52); }
}