/*
Theme Name: Realine Waiting List
Description: Realine launch page with a video and private waiting-list signups.
Template: hello-elementor
Version: 1.0.1
Text Domain: realine-waitlist
*/

@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap');

:root { color-scheme: dark; --realine-ink: #fff; --realine-paper: #000; }
* { box-sizing: border-box; }
html, body { margin: 0; }
body { background: var(--realine-paper); color: var(--realine-ink); font-family: Arial, Helvetica, sans-serif; }
.realine-ticker { overflow: hidden; white-space: nowrap; background: #000; color: #fff; padding: 13px 0; font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif; font-size: clamp(16px, 2.2vw, 21px); font-weight: 400; letter-spacing: .03em; text-transform: uppercase; }
.realine-ticker-track { display: flex; width: max-content; animation: realine-marquee 120s linear infinite; }
.realine-ticker-track span { display: block; flex: none; }
@keyframes realine-marquee { to { transform: translateX(-50%); } }
.realine-video-wrap { display: flex; justify-content: center; align-items: center; background: #000; min-height: 300px; }
.realine-video-frame { position: relative; width: fit-content; max-width: 100%; }
.realine-video-wrap video { display: block; width: auto; max-width: 100%; height: min(72vh, 780px); object-fit: contain; }
.realine-video-frame .realine-sound-toggle { position: absolute; right: 12px; bottom: 12px; z-index: 1; border: 1px solid #fff !important; border-radius: 0 !important; background: #000 !important; color: #fff !important; padding: 9px 13px; font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif; font-size: 19px; letter-spacing: .06em; cursor: pointer; }
.realine-video-frame .realine-sound-toggle:hover, .realine-video-frame .realine-sound-toggle:focus-visible { background: #fff !important; color: #000 !important; }
.realine-waitlist { padding: clamp(30px, 5vw, 70px) 20px 54px; text-align: center; background: #000; color: #fff; }
.realine-waitlist h1 { margin: 0 0 22px; color: #fff; font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif; font-size: clamp(32px, 5.5vw, 56px); font-weight: 400; letter-spacing: .035em; text-transform: uppercase; }
.realine-waitlist form { display: flex; gap: 10px; max-width: 540px; margin: auto; }
.realine-waitlist input[type=email] { min-width: 0; flex: 1; border: 1px solid #fff; border-radius: 0; background: #000; color: #fff; padding: 16px; font: inherit; font-size: 16px; }
.realine-waitlist input[type=email]::placeholder { color: #bbb; text-transform: uppercase; }
.realine-waitlist button { border: 1px solid #fff; border-radius: 0; background: #000; color: #fff; padding: 14px 21px; font-family: 'Bebas Neue', 'Arial Narrow', Arial, sans-serif; font-size: 22px; font-weight: 400; letter-spacing: .08em; text-transform: uppercase; cursor: pointer; }
.realine-waitlist button:hover, .realine-waitlist button:focus-visible { background: #fff; color: #000; }
.realine-waitlist-message { max-width: 540px; margin: 0 auto 18px; font-size: 15px; }
.realine-waitlist-note { max-width: 540px; margin: 16px auto 0; color: #aaa; font-size: 12px; line-height: 1.4; }
.realine-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.realine-footer { padding: 0 20px 24px; background: #000; color: #aaa; text-align: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; }
.realine-page { max-width: 800px; margin: 60px auto; padding: 0 20px; line-height: 1.6; }
.realine-page a { color: #fff; }
@media (max-width: 480px) { .realine-waitlist form { flex-direction: column; } .realine-waitlist button { width: 100%; } .realine-ticker { padding: 11px 0; } .realine-video-wrap video { height: auto; max-height: 69vh; } }
@media (prefers-reduced-motion: reduce) { .realine-ticker-track { animation: none; } }