/* "Rotate your phone" curtain — shown only on phones held in landscape. The JS decides when (phone-sized screen, coarse pointer, landscape, no fullscreen video) and toggles `is-visible` on the curtain itself. Nothing here touches or , so the pages' own scroll mechanics (the home page's continuous scroll, the intro locks, the menu locks) stay exactly as they are. */ .rotate-notice { position: fixed; inset: 0; z-index: 2147483000; display: none; place-items: center; padding: 24px 40px; background: #ffffff; color: #101010; font-family: "DM Sans", "Helvetica Neue", Arial, sans-serif; font-weight: 400; text-align: center; -webkit-font-smoothing: antialiased; touch-action: none; overscroll-behavior: contain; -webkit-user-select: none; user-select: none; } .rotate-notice.is-visible { display: grid; } .rotate-notice-inner { display: grid; justify-items: center; gap: 14px; } .rotate-notice-icon { width: 52px; height: 52px; transform-origin: 50% 50%; animation: rotateNoticeBack 2.6s cubic-bezier(0.16, 1, 0.3, 1) infinite; } .rotate-notice-icon rect { fill: none; stroke: currentColor; stroke-width: 1.6; } .rotate-notice-icon circle { fill: currentColor; } @keyframes rotateNoticeBack { 0%, 18% { transform: rotate(-90deg); } 50%, 82% { transform: rotate(0deg); } 100% { transform: rotate(-90deg); } } .rotate-notice-title { margin: 0; color: #050505; font-size: 19px; font-weight: 600; line-height: 1.1; letter-spacing: 0.22em; text-transform: uppercase; } .rotate-notice-copy { margin: 0; max-width: 32ch; color: rgba(16, 16, 16, 0.55); font-size: 13.5px; font-weight: 400; line-height: 1.5; text-wrap: balance; }