/* Temporary homepage test: cinematic footage behind the existing cards. */
@media (min-width: 768px) {
  html.motion-ready body.video-test { animation: none !important; transform: none !important; }
  body.video-test { position: relative; isolation: isolate; }
  .video-test-background {
    position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
    background: #102039 url('/assets/waystone-bg-test-poster.webp') center / cover no-repeat;
  }
  .video-test-background video { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; opacity: 0; transition: opacity .4s ease; }
  .video-test-background video.ready { opacity: 1; }
  .video-test-background::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgb(5 17 33 / 26%), rgb(5 17 33 / 16%)); }
  body.video-test > .alpha-bar, body.video-test > main, body.video-test > footer { position: relative; z-index: 1; }
  body.video-test .header { background: rgb(255 255 255 / 87%) !important; backdrop-filter: blur(14px); }
  body.video-test .hero-copy { align-self: center; padding: 25px 28px; border: 1px solid rgb(213 226 239 / 80%); border-radius: 18px; background: rgb(247 250 255 / 89%); backdrop-filter: blur(12px); }
  body.video-test .quick-section { background: rgb(255 255 255 / 82%) !important; backdrop-filter: blur(12px); }
  body.video-test .realm-section { margin-block: 24px; padding: 30px; border: 1px solid rgb(213 226 239 / 65%); border-radius: 18px; background: rgb(247 250 255 / 73%) !important; backdrop-filter: blur(9px); }
  body.video-test .realm-card, body.video-test .join-box, body.video-test .faq-box { background: rgb(255 255 255 / 91%) !important; }
  body.video-test .community-section { background: rgb(229 239 250 / 80%) !important; backdrop-filter: blur(12px); }
  body.video-test footer { background: rgb(255 255 255 / 90%) !important; backdrop-filter: blur(12px); }
  html[data-theme="dark"] body.video-test .header { background: rgb(8 17 31 / 87%) !important; }
  html[data-theme="dark"] body.video-test .hero-copy,
  html[data-theme="dark"] body.video-test .quick-section,
  html[data-theme="dark"] body.video-test .realm-section,
  html[data-theme="dark"] body.video-test .community-section { background: rgb(8 17 31 / 80%) !important; border-color: rgb(79 113 150 / 65%); }
  html[data-theme="dark"] body.video-test .realm-card,
  html[data-theme="dark"] body.video-test .join-box,
  html[data-theme="dark"] body.video-test .faq-box { background: rgb(15 29 47 / 91%) !important; }
  html[data-theme="dark"] body.video-test footer { background: rgb(8 17 31 / 90%) !important; }
  .video-test-toggle { position: fixed; left: 16px; bottom: 16px; z-index: 40; display: none; padding: 8px 12px; border: 1px solid rgb(255 255 255 / 40%); border-radius: 8px; background: rgb(8 17 31 / 85%); color: white; font: 700 12px Inter, 'Segoe UI', sans-serif; cursor: pointer; }
  .video-test-toggle.visible { display: block; }
  .video-viewing-room { position: relative; z-index: 1; min-height: 100svh; display: grid; place-items: center; padding: 90px 24px; background: transparent; }
  .video-viewing-room img { width: min(72vw, 760px); height: auto; max-height: 65svh; object-fit: contain; filter: drop-shadow(0 12px 28px rgb(0 0 0 / 65%)); }
  body.video-test .header { transition: transform .25s ease, opacity .25s ease; }
  body.video-test.video-room-active .header { transform: translateY(-110%); opacity: 0; pointer-events: none; }
  body.video-test.video-room-active .video-test-toggle { display: none; }
}
@media (max-width: 767px) {
  .video-test-background, .video-test-toggle { display: none; }
  .video-viewing-room { min-height: 82svh; display: grid; place-items: center; padding: 70px 20px; background: #102039 url('/assets/waystone-bg-test-poster.webp') center / cover no-repeat; }
  .video-viewing-room img { width: min(86vw, 480px); height: auto; max-height: 56svh; object-fit: contain; filter: drop-shadow(0 10px 22px rgb(0 0 0 / 65%)); }
  body.video-test .header { transition: transform .25s ease, opacity .25s ease; }
  body.video-test.video-room-active .header { transform: translateY(-110%); opacity: 0; pointer-events: none; }
}
@media (prefers-reduced-motion: reduce) { body.video-test .header { transition: none; } }