/* ========================================================================= BopDen — cinematic overlay Layered on top of styles.css. Purely additive: no existing rules are redeclared. The body gets a film-grain + vignette pair, the hero gets a warm spotlight, sections fade-up on scroll, vinyls spin on hover, a tape-style marquee scrolls under the hero, and live-feed dots pulse. Respects prefers-reduced-motion across the board. ========================================================================= */ /* ---------- 1. Atmosphere: grain + vignette ---------- */ /* Both layers are pinned to the viewport, sit above content visually but ignore pointer events so they can't intercept clicks. Injected by cinematic.js as fixed siblings of children so they survive route changes within the same document. */ .cine-grain, .cine-vignette { position: fixed; inset: 0; pointer-events: none; /* Sits above page content (default stack) but below sticky nav (z=50), modals (z=100), and toasts (z=1000). */ z-index: 5; } .cine-grain { /* Tiny SVG turbulence — generates a noise pattern in-browser without a bitmap asset. baseFrequency picks the grain size; 0.85 ≈ 35mm film. */ background-image: url("data:image/svg+xml;utf8,"); opacity: 0.06; mix-blend-mode: overlay; /* Animate the grain so it shimmers like a film projector. */ animation: cine-grain-shift 1.4s steps(6) infinite; } [data-theme="dark"] .cine-grain, :root:not([data-theme="light"]) .cine-grain { opacity: 0.085; mix-blend-mode: screen; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cine-grain { opacity: 0.085; mix-blend-mode: screen; } } @keyframes cine-grain-shift { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(4%, -1%); } 60% { transform: translate(-2%, -3%); } 80% { transform: translate(2%, 3%); } 100% { transform: translate(0, 0); } } .cine-vignette { /* Soft inset shadow drawn as a radial gradient. Light mode = warm sepia edges; dark mode = deep ink. */ background: radial-gradient(ellipse at center, transparent 55%, rgba(33, 31, 28, 0.18) 100%); z-index: 4; } [data-theme="dark"] .cine-vignette, :root:not([data-theme="light"]) .cine-vignette { background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.55) 100%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cine-vignette { background: radial-gradient(ellipse at center, transparent 50%, rgba(0, 0, 0, 0.55) 100%); } } /* ---------- 2. Hero spotlight ---------- */ .hero { position: relative; overflow: hidden; isolation: isolate; } /* Glow disc behind the hero headline — warm brand red, very soft. Uses the same accent color so dark/light themes both feel branded. */ .hero::before { content: ""; position: absolute; left: 50%; top: 40%; width: 110vw; height: 110vw; max-width: 1400px; max-height: 1400px; transform: translate(-50%, -50%); background: radial-gradient(circle at center, rgba(208, 75, 47, 0.22) 0%, rgba(208, 75, 47, 0.10) 25%, transparent 55%); filter: blur(30px); z-index: -1; pointer-events: none; animation: cine-glow-pulse 9s ease-in-out infinite; } [data-theme="dark"] .hero::before, :root:not([data-theme="light"]) .hero::before { background: radial-gradient(circle at center, rgba(229, 90, 60, 0.32) 0%, rgba(229, 90, 60, 0.14) 25%, transparent 55%); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero::before { background: radial-gradient(circle at center, rgba(229, 90, 60, 0.32) 0%, rgba(229, 90, 60, 0.14) 25%, transparent 55%); } } @keyframes cine-glow-pulse { 0%, 100% { opacity: 0.9; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.06); } } /* Light scan lines that drift across the hero — TV/projector feel. */ .hero::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, rgba(255, 255, 255, 0.0) 0, rgba(255, 255, 255, 0.0) 2px, rgba(255, 255, 255, 0.025) 3px, rgba(255, 255, 255, 0.0) 4px ); z-index: 0; pointer-events: none; mix-blend-mode: overlay; } .hero > .container { position: relative; z-index: 1; } /* Hero headline: subtle entrance + animated accent underline. */ .hero-display { opacity: 0; transform: translateY(18px); animation: cine-rise 1.1s cubic-bezier(.2,.7,.2,1) 0.15s forwards; text-shadow: 0 1px 0 rgba(0,0,0,0.04); } .hero-display .accent { position: relative; display: inline-block; } .hero-display .accent::after { content: ""; position: absolute; left: 0; bottom: 0.06em; height: 0.08em; width: 0; background: var(--accent); border-radius: 2px; animation: cine-underline 1.6s cubic-bezier(.2,.7,.2,1) 1s forwards; } .hero-sub { opacity: 0; transform: translateY(12px); animation: cine-rise 1.1s cubic-bezier(.2,.7,.2,1) 0.4s forwards; } .hero-ctas { opacity: 0; transform: translateY(8px); animation: cine-rise 1.1s cubic-bezier(.2,.7,.2,1) 0.65s forwards; } @keyframes cine-rise { to { opacity: 1; transform: translateY(0); } } @keyframes cine-underline { to { width: 100%; } } /* ---------- 3. Scroll-reveal sections ---------- */ /* Anything tagged .cine-reveal starts hidden + offset; cinematic.js adds .cine-in once the element enters the viewport, triggering the transition. */ .cine-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.9s cubic-bezier(.2,.7,.2,1), transform 0.9s cubic-bezier(.2,.7,.2,1); will-change: opacity, transform; } .cine-reveal.cine-in { opacity: 1; transform: translateY(0); } /* Stagger grid children. The JS adds nth-child via inline custom property, but a static fallback covers the common 3-col case for SSR. */ .cine-reveal.cine-stagger > * { opacity: 0; transform: translateY(20px); transition: opacity 0.7s cubic-bezier(.2,.7,.2,1), transform 0.7s cubic-bezier(.2,.7,.2,1); } .cine-reveal.cine-stagger.cine-in > *:nth-child(1) { transition-delay: 0.05s; opacity: 1; transform: translateY(0); } .cine-reveal.cine-stagger.cine-in > *:nth-child(2) { transition-delay: 0.18s; opacity: 1; transform: translateY(0); } .cine-reveal.cine-stagger.cine-in > *:nth-child(3) { transition-delay: 0.31s; opacity: 1; transform: translateY(0); } .cine-reveal.cine-stagger.cine-in > *:nth-child(4) { transition-delay: 0.44s; opacity: 1; transform: translateY(0); } .cine-reveal.cine-stagger.cine-in > *:nth-child(5) { transition-delay: 0.57s; opacity: 1; transform: translateY(0); } .cine-reveal.cine-stagger.cine-in > *:nth-child(6) { transition-delay: 0.70s; opacity: 1; transform: translateY(0); } /* ---------- 4. Cards & vinyls ---------- */ /* Lift cards on hover with a richer shadow. styles.css already declares a transform on .track-card hover; we only enrich the shadow side. */ .card, .track-card, .license-card, .feed-item { transition: transform 0.35s cubic-bezier(.2,.7,.2,1), box-shadow 0.35s cubic-bezier(.2,.7,.2,1), border-color 0.35s cubic-bezier(.2,.7,.2,1); } .card:hover, .license-card:hover, .feed-item:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -20px rgba(33, 31, 28, 0.35); border-color: var(--border-strong); } .track-card:hover { box-shadow: 0 22px 50px -22px rgba(33, 31, 28, 0.45); } [data-theme="dark"] .card:hover, [data-theme="dark"] .license-card:hover, [data-theme="dark"] .feed-item:hover, [data-theme="dark"] .track-card:hover, :root:not([data-theme="light"]) .card:hover, :root:not([data-theme="light"]) .license-card:hover, :root:not([data-theme="light"]) .feed-item:hover, :root:not([data-theme="light"]) .track-card:hover { box-shadow: 0 22px 50px -22px rgba(0, 0, 0, 0.6); } /* Spin the vinyl thumb when any ancestor card is hovered. */ .track-thumb-vinyl { transition: transform 0.6s ease; } .track-card:hover .track-thumb-vinyl, .feed-item:hover .track-thumb-vinyl { animation: cine-vinyl-spin 4s linear infinite; } @keyframes cine-vinyl-spin { to { transform: rotate(360deg); } } /* Soft sweep highlight as the cursor moves over a track card. */ .track-card { position: relative; overflow: hidden; } .track-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 115deg, transparent 30%, rgba(255, 255, 255, 0.08) 50%, transparent 70% ); transform: translateX(-100%); transition: transform 0.6s cubic-bezier(.2,.7,.2,1); pointer-events: none; } .track-card:hover::after { transform: translateX(100%); } /* ---------- 5. Live feed: pulse on the dot ---------- */ /* The Live feed sections use a span with class text-accent rendering the bullet '●'. Tag those with .cine-pulse via JS to drive a soft pulse. */ .cine-pulse { display: inline-block; animation: cine-pulse 2.2s ease-in-out infinite; text-shadow: 0 0 8px currentColor; } @keyframes cine-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.85); } } /* ---------- 6. Marquee strip ---------- */ /* Injected by cinematic.js under the hero. Looks like reel-tape labels sliding past. Two copies for a seamless loop. */ .cine-marquee { position: relative; overflow: hidden; border-block: 1px solid var(--border); background: var(--bg-warm); padding: 14px 0; margin-top: -20px; mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, #000 12%, #000 88%, transparent); } .cine-marquee-track { display: flex; gap: 48px; white-space: nowrap; width: max-content; animation: cine-marquee-slide 38s linear infinite; font-family: var(--font-display); font-weight: 900; font-size: 22px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.55; } .cine-marquee-track span { display: inline-flex; align-items: center; gap: 18px; } .cine-marquee-track span::after { content: "·"; color: var(--accent); font-size: 32px; line-height: 0.6; } .cine-marquee:hover .cine-marquee-track { animation-play-state: paused; } @keyframes cine-marquee-slide { from { transform: translateX(0); } to { transform: translateX(-50%); } } /* ---------- 7. Section divider — sharpen as accent bar with sheen ---------- */ .section-divider { position: relative; overflow: hidden; } .section-divider::after { content: ""; position: absolute; inset: 0; background: linear-gradient( 90deg, transparent 0%, rgba(255, 255, 255, 0.6) 50%, transparent 100%); transform: translateX(-100%); animation: cine-divider-sheen 4.5s ease-in-out 1.2s infinite; } @keyframes cine-divider-sheen { 0% { transform: translateX(-100%); } 40% { transform: translateX(100%); } 100% { transform: translateX(100%); } } /* ---------- 8. Buttons — cinematic press feel ---------- */ .btn { position: relative; transition: transform 0.18s cubic-bezier(.2,.7,.2,1), box-shadow 0.18s cubic-bezier(.2,.7,.2,1), background-color 0.18s ease, color 0.18s ease; } .btn:hover { transform: translateY(-1px); } .btn-primary:hover { box-shadow: 0 12px 24px -10px rgba(208, 75, 47, 0.65); } .btn:active { transform: translateY(0); } /* ---------- 9. Nav — subtle shrink-on-scroll ---------- */ .nav { transition: padding 0.25s ease, background-color 0.25s ease, box-shadow 0.25s ease; } .nav.cine-nav-condensed .nav-inner { padding-top: 8px; padding-bottom: 8px; } .nav.cine-nav-condensed { box-shadow: 0 8px 24px -16px rgba(33, 31, 28, 0.25); background: color-mix(in srgb, var(--bg) 88%, transparent); } /* ---------- 10. Footer — film-strip accent ---------- */ .footer { position: relative; } .footer::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 6px; background: repeating-linear-gradient( 90deg, var(--brand-red) 0 14px, transparent 14px 28px); opacity: 0.85; } /* ---------- 11. Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .cine-grain, .hero::before, .hero::after, .hero-display, .hero-display .accent::after, .hero-sub, .hero-ctas, .cine-reveal, .cine-reveal.cine-stagger > *, .track-card:hover .track-thumb-vinyl, .feed-item:hover .track-thumb-vinyl, .cine-pulse, .cine-marquee-track, .section-divider::after, .nav, .btn { animation: none !important; transition: none !important; } .hero-display, .hero-sub, .hero-ctas, .cine-reveal, .cine-reveal.cine-stagger > * { opacity: 1 !important; transform: none !important; } .hero-display .accent::after { width: 100% !important; } }