/** * Cinema Experience — opt-in cinematic mode styles. * * Overlay layers live as direct children of (outside #page) so the * warm filter we apply to #page doesn't double-tint them. All overlays are * pointer-events: none — they decorate, never block. * * z-index plan (relative to other layers): * beam 9985 — softest, sits behind everything else * particles 9988 * grain 9990 * vignette 9992 * HUD 9995 — interactive, needs to receive clicks * trigger btn — inline in footer, normal flow */ /* ===== Trigger button (currently rendered in header, admin-only) ===== */ .cinesigns-cinema-trigger { display: inline-flex; align-items: center; } /* When sitting inside the header grid, give it its own slot between the logo and the navigation. :has() collapses the column gracefully if the trigger isn't rendered (non-admin visitors). */ .site-header__inner:has(.cinesigns-cinema-trigger) { grid-template-columns: var(--header-logo-area) auto 1fr auto; } @media (max-width: 47.99em) { /* Hide the long label on mobile — icon-only fits the tight header. */ .cinesigns-cinema-trigger__label { display: none; } } .cinesigns-cinema-trigger__btn { display: inline-flex; align-items: center; gap: var(--space-2, 0.5rem); background: transparent; border: 1px solid var(--color-border-subtle, rgba(255, 255, 255, 0.08)); color: var(--color-text-tertiary, #6e6e73); padding: var(--space-1, 0.25rem) var(--space-3, 0.75rem); border-radius: var(--radius-sm, 4px); font-size: var(--text-xs, 0.75rem); font-family: inherit; letter-spacing: var(--tracking-wider, 0.05em); text-transform: uppercase; cursor: pointer; transition: color 180ms ease, border-color 180ms ease, background-color 180ms ease; } .cinesigns-cinema-trigger__btn:hover { color: var(--color-accent-gold, #c9a962); border-color: var(--color-accent-gold, #c9a962); } .cinesigns-cinema-trigger__btn:focus-visible { outline: 2px solid var(--color-accent-gold, #c9a962); outline-offset: 2px; } .cinesigns-cinema-trigger__btn[aria-pressed="true"] { color: var(--color-accent-gold, #c9a962); border-color: var(--color-accent-gold, #c9a962); background: rgba(201, 169, 98, 0.08); } .cinesigns-cinema-trigger__icon { flex-shrink: 0; opacity: 0.85; } /* ===== Warm cinematic grade on page content ===== */ /* IMPORTANT: applied to .site-main (NOT #page or body) on purpose. `filter` on an ancestor creates a new containing block for any `position: fixed` descendants — applying it higher up would break the fixed header. .site-main has no fixed children, so it's safe. */ html.cinema-mode .site-main { filter: sepia(0.05) saturate(1.05) contrast(1.04) brightness(0.97); transition: filter 800ms ease; } .site-main { transition: filter 800ms ease; } /* ===== Overlay container ===== */ .cinesigns-cinema-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9985; opacity: 0; animation: cs-cinema-fade-in 1700ms cubic-bezier(0.33, 0, 0.4, 1) forwards; } .cinesigns-cinema-overlay.is-leaving { animation: cs-cinema-fade-out 500ms ease forwards; } @keyframes cs-cinema-fade-in { to { opacity: 1; } } @keyframes cs-cinema-fade-out { to { opacity: 0; } } /* Beam — soft warm glow from the top-right corner, simulating a back-room projector. Particles brighten when crossing this region (computed in JS). */ .cinesigns-cinema-overlay__beam { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 55% at 92% -5%, rgba(255, 218, 160, 0.085) 0%, rgba(255, 200, 130, 0.04) 35%, transparent 70%), radial-gradient(ellipse 40% 30% at 88% 0%, rgba(255, 230, 180, 0.07) 0%, transparent 60%); mix-blend-mode: screen; } /* Canvas — drifting dust motes. */ .cinesigns-cinema-overlay__particles { position: absolute; inset: 0; width: 100%; height: 100%; mix-blend-mode: screen; z-index: 3; } /* Animated film grain — SVG fractal noise tiled, translated in steps for a per-frame "jitter" that reads as 35mm grain. */ .cinesigns-cinema-overlay__grain { position: absolute; inset: -50%; width: 200%; height: 200%; pointer-events: none; opacity: 0.06; mix-blend-mode: overlay; z-index: 4; background-image: url("data:image/svg+xml;utf8,"); background-size: 300px 300px; animation: cs-cinema-grain 0.6s steps(8) infinite; will-change: transform; } /* Desktop has lower PPI than mobile + LCD/Mini-LED has less contrast → subpixel grain reads as fainter. Bump opacity so it stays as present as it feels on iPhone OLED. */ @media (pointer: fine) and (hover: hover) { .cinesigns-cinema-overlay__grain { opacity: 0.11; } } @keyframes cs-cinema-grain { 0% { transform: translate(0, 0); } 12.5%{ transform: translate(-8%, -10%); } 25% { transform: translate(-15%, 5%); } 37.5%{ transform: translate(7%, -20%); } 50% { transform: translate(-5%, 25%); } 62.5%{ transform: translate(-15%, 10%); } 75% { transform: translate(15%, -5%); } 87.5%{ transform: translate(8%, 15%); } 100% { transform: translate(0, 0); } } /* Vignette — radial darkening with a slow "breath" so it feels organic (mimics a hot projector bulb flickering ever so slightly). */ .cinesigns-cinema-overlay__vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 22%, rgba(0, 0, 0, 0.32) 60%, rgba(0, 0, 0, 0.72) 88%, rgba(0, 0, 0, 0.92) 100%); z-index: 5; animation: cs-cinema-vignette-breath 9s ease-in-out infinite; } @keyframes cs-cinema-vignette-breath { 0%, 100% { opacity: 1; } 50% { opacity: 0.85; } } /* ===== Now-Playing HUD ===== */ /* Sits in the same top-right slot as the FAB, slides in from the right as the FAB slides out → looks like one element morphs into the other. */ /* Dynamic-Island-style pill: shows reel + tracks + Beenden by default, expands on hover/focus-within to reveal title, play and volume. */ .cinesigns-cinema-hud { position: fixed; top: calc(var(--cs-header-h, 80px) + 48px); right: 1.5rem; z-index: 9995; display: flex; flex-direction: row; align-items: center; gap: 10px; padding: 6px 6px 6px 12px; background: rgba(15, 15, 17, 0.82); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border: 1px solid rgba(201, 169, 98, 0.28); border-radius: 999px; color: var(--color-text-primary, #f5f5f7); box-shadow: 0 14px 32px -8px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(0, 0, 0, 0.2) inset; opacity: 0; transform: translateX(32px) scale(0.95); pointer-events: none; transition: opacity 380ms ease, transform 420ms cubic-bezier(0.34, 1.56, 0.64, 1); font-family: var(--font-primary, sans-serif); } .cinesigns-cinema-hud.is-visible { opacity: 1; transform: translateX(0) scale(1); pointer-events: auto; } /* Rotating reel — always visible, spins while audio is playing. */ .cinesigns-cinema-hud__reel { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; flex-shrink: 0; color: var(--color-accent-gold, #c9a962); } .cinesigns-cinema-hud__reel svg { width: 100%; height: 100%; display: block; } .cinesigns-cinema-hud__reel.is-spinning { animation: cs-cinema-reel-spin 9s linear infinite; } @keyframes cs-cinema-reel-spin { to { transform: rotate(360deg); } } /* Title — hidden in the collapsed pill, slides open on hover. */ .cinesigns-cinema-hud__title { color: var(--color-accent-gold, #c9a962); font-size: 0.625rem; font-weight: var(--font-medium, 500); letter-spacing: 0.1em; text-transform: uppercase; white-space: nowrap; max-width: 0; overflow: hidden; opacity: 0; transition: max-width 360ms cubic-bezier(0.4, 0, 0.2, 1), opacity 240ms ease 60ms; } .cinesigns-cinema-hud:hover .cinesigns-cinema-hud__title, .cinesigns-cinema-hud:focus-within .cinesigns-cinema-hud__title { max-width: 180px; opacity: 1; } /* Track strokes — always visible in the collapsed pill. */ .cinesigns-cinema-hud__tracks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; width: 80px; flex-shrink: 0; } .cinesigns-cinema-hud__track-dot { display: block; width: 100%; height: 2px; padding: 0; border: none; border-radius: 1px; background: rgba(255, 255, 255, 0.22); cursor: pointer; transition: background-color 160ms ease, transform 160ms ease; /* iOS Safari renders