.home-shell {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--f1-space-8);
  padding: var(--f1-space-8);
  text-align: center;
  position: relative;
  overflow: hidden;
}

/* Full-bleed looped, muted background video */
.home-bg-video {
  position: fixed;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Darkens the video so white text/QR stay readable on top of it —
   this is what keeps the QR panel scannable regardless of what's
   playing behind it (the QR itself also sits on its own solid white
   card further below, a second layer of scan-safety). */
.home-bg-overlay {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, rgba(10, 10, 13, 0.55) 0%, rgba(10, 10, 13, 0.75) 60%, rgba(10, 10, 13, 0.9) 100%);
  pointer-events: none;
}

.home-brand-logo {
  width: 120px;
  height: 120px;
  border-radius: var(--f1-radius-full);
  box-shadow: var(--f1-shadow-md);
}

/* F1 start-lights motif — ties into "Lights Out Events" branding */
.lights-rig {
  display: flex;
  gap: var(--f1-space-4);
  padding: var(--f1-space-4) var(--f1-space-6);
  background: #050505;
  border-radius: var(--f1-radius-md);
  border: 1px solid var(--f1-border);
}

.light {
  width: 22px;
  height: 22px;
  border-radius: var(--f1-radius-full);
  background: #2a0402;
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6);
  animation: light-sequence 3.5s ease-in-out infinite;
  animation-delay: var(--d);
}

@keyframes light-sequence {
  0%, 55% { background: var(--f1-red); box-shadow: 0 0 18px var(--f1-red-glow); }
  62%, 100% { background: #2a0402; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.6); }
}

.home-qr-panel {
  padding: var(--f1-space-6);
  animation: qr-glow 3.5s ease-in-out infinite;
}

@keyframes qr-glow {
  0%, 100% { box-shadow: var(--f1-shadow-lg); }
  50% { box-shadow: 0 8px 44px var(--f1-red-glow); }
}

.home-qr {
  width: 260px;
  height: 260px;
  display: block;
  border-radius: var(--f1-radius-sm);
  background: #fff;
  padding: var(--f1-space-3);
}

.home-headline {
  font-size: clamp(1.8rem, 5vw, var(--f1-text-3xl));
  font-weight: var(--f1-weight-black);
  line-height: 1.25;
  letter-spacing: 0.02em;
  max-width: 900px;
  text-shadow: 0 0 40px rgba(0, 0, 0, 0.6);
}

@media (max-width: 480px) {
  .home-qr {
    width: 200px;
    height: 200px;
  }
}

/* Shown when the QR image is missing or unservable (see home_view and the
   img's onerror). Deliberately large and high-contrast — a driver has to
   be able to type this from a few metres away, and it is the only path to
   /register/ when the QR is gone. */
.home-qr-fallback {
  width: 260px;
  min-height: 260px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--f1-space-3);
  padding: var(--f1-space-4);
  text-align: center;
}

.home-qr-fallback[hidden] {
  display: none;
}

.home-qr-fallback-label {
  font-size: var(--f1-text-sm);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--f1-text-dim);
}

.home-qr-fallback-url {
  font-family: var(--f1-mono);
  font-size: var(--f1-text-lg);
  font-weight: var(--f1-weight-bold);
  color: var(--f1-text);
  word-break: break-all;
  line-height: 1.35;
}

.home-qr-fallback-hint {
  font-size: var(--f1-text-sm);
  color: var(--f1-text-dim);
}

@media (max-width: 480px) {
  .home-qr-fallback {
    width: 200px;
    min-height: 200px;
  }
  .home-qr-fallback-url {
    font-size: var(--f1-text-md);
  }
}