/* Preference-based hooks */ @media (orientation: portrait) {} @media (orientation: landscape) {} @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } @media (prefers-color-scheme: dark) {} @media (prefers-color-scheme: light) {} @media (prefers-contrast: more) {} /* Device-driven overrides (set by script.js on ) */ /* On mobile devices, avoid fixed backgrounds to prevent jank/white gaps */ .is-mobile .landing, .is-mobile .plot, .is-mobile .trailer, .is-mobile .team, .is-mobile .reviews, .is-mobile .contact { background-attachment: scroll !important; } /* Force hamburger menu UX for all mobile devices (phone/tablet) */ .is-mobile .menu { position: absolute; top: 16px; left: 0; right: 0; display: flex; justify-content: flex-end; align-items: center; padding: 0 16px; z-index: 1001; } .is-mobile .menu-button { display: inline-flex !important; /* override desktop breakpoints */ align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 32px; color: rgba(255, 255, 255, 0.6); background: rgba(0, 0, 0, 0.4); border: none; border-radius: 8px; cursor: pointer; position: relative; z-index: 1002; /* above overlay */ } .is-mobile .menu-links { display: none; /* hidden until opened */ position: fixed; inset: 0; /* full-screen overlay */ background: rgba(0, 0, 0, 0.9); backdrop-filter: blur(2px); z-index: 1000; padding: 32px; flex-direction: column; justify-content: center; align-items: center; gap: 24px; } .is-mobile .menu.open .menu-links { display: flex !important; } .is-mobile .menu-item { display: block; text-align: center; padding: 14px 18px; font-size: 20px; } .is-mobile body.menu-open { overflow: hidden; height: 100vh; }