/* Motion layer. Everything decorative-but-animated lives here so the design tokens stay pure. Loaded after tokens.css + base.css + components.css on every page. Respects prefers-reduced-motion (base.css already collapses durations); a few effects also self-disable below for clarity. */ /* ------------------------------------------------------------------ Aurora mesh — three drifting radial gradients behind the page. Pure CSS, GPU-cheap. ------------------------------------------------------------------ */ .aurora { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: linear-gradient(180deg, var(--aurora-base-from) 0%, var(--aurora-base-to) 100%); transition: background var(--dur-med) var(--ease-out-soft); } .aurora::before, .aurora::after, .aurora-3 { content: ''; position: absolute; width: 70vmax; height: 70vmax; border-radius: 50%; filter: blur(120px); opacity: 0.92; will-change: transform; } .aurora::before { top: -22vmax; right: -18vmax; background: radial-gradient(circle at center, var(--aurora-1), transparent 62%); animation: aurora-drift-a 46s ease-in-out infinite alternate; } .aurora::after { bottom: -30vmax; left: -22vmax; background: radial-gradient(circle at center, var(--aurora-2), transparent 62%); animation: aurora-drift-b 52s ease-in-out infinite alternate; } .aurora-3 { bottom: -10vmax; left: 22vmax; width: 50vmax; height: 50vmax; background: radial-gradient(circle at center, var(--aurora-3), transparent 65%); animation: aurora-drift-c 38s ease-in-out infinite alternate; } .aurora--utility { opacity: 0.78; } @keyframes aurora-drift-a { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-6vmax, 4vmax, 0) scale(1.08); } } @keyframes aurora-drift-b { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(5vmax, -3vmax, 0) scale(1.05); } } @keyframes aurora-drift-c { from { transform: translate3d(0, 0, 0) scale(1); } to { transform: translate3d(-4vmax, -5vmax, 0) scale(1.1); } } /* ------------------------------------------------------------------ Scroll reveals. No-JS / pre-init: visible by default (graceful degradation). Once is added by site.js, items collapse to hidden until they enter the viewport and gain .is-in. ------------------------------------------------------------------ */ [data-reveal] { opacity: 1; transform: none; transition: opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft); transition-delay: var(--reveal-delay, 0ms); } body.has-reveal [data-reveal] { opacity: 0; transform: translateY(24px); } body.has-reveal [data-reveal].is-in { opacity: 1; transform: none; } /* ------------------------------------------------------------------ Hero word split (filled in by site.js wrapping each word in a span). ------------------------------------------------------------------ */ .hero-headline { display: block; } .hero-headline .word { display: inline-block; overflow: hidden; line-height: 0.9; padding-bottom: 0.08em; margin-right: 0.18em; } .hero-headline .word > span { display: inline-block; will-change: transform; } body.has-reveal .hero-headline .word > span { transform: translateY(110%); } body.has-reveal .hero-headline.is-in .word > span { transform: translateY(0); transition: transform 900ms var(--ease-out-soft); transition-delay: calc(var(--word-i, 0) * 60ms); } /* ------------------------------------------------------------------ Marquee. Built around two duplicate tracks for a seamless loop. ------------------------------------------------------------------ */ .marquee { position: relative; display: flex; overflow: hidden; border-block: 1px solid var(--line); background: var(--surface-soft); mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 8%, #000 92%, transparent 100%); } .marquee-track { display: flex; gap: 48px; padding: 18px 0; padding-right: 48px; flex: 0 0 auto; width: max-content; animation: marquee-scroll 48s linear infinite; will-change: transform; } .marquee:hover .marquee-track { animation-play-state: paused; } .marquee-item { display: inline-flex; align-items: center; gap: 12px; color: var(--text-soft); font-family: var(--font-mono); font-size: 0.82rem; letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; } .marquee-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); } @keyframes marquee-scroll { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-100%, 0, 0); } } /* ------------------------------------------------------------------ Pinned product showcase. Section structure (site.js drives the timeline): .showcase .showcase-frame (sticky-ish; pinned by ScrollTrigger) .showcase-screen [data-showcase-screen="live|movies|osd"] .showcase-captions .showcase-caption [data-showcase-caption="live|movies|osd"] ------------------------------------------------------------------ */ .showcase { position: relative; padding: clamp(48px, 8vw, 96px) 0; } .showcase-inner { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(28px, 5vw, 60px); align-items: center; } .showcase-frame { position: relative; aspect-ratio: 16 / 10; border-radius: var(--radius-xl); background: linear-gradient(160deg, #111811 0%, #050805 100%); border: 1px solid var(--line); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(255, 255, 255, 0.04); overflow: hidden; } .showcase-frame::after { /* CRT bezel highlight. */ content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 12% 0%, rgba(255, 255, 255, 0.06), transparent 35%), linear-gradient(180deg, transparent 70%, rgba(0, 0, 0, 0.45) 100%); } .showcase-screen { position: absolute; inset: 14px; border-radius: calc(var(--radius-xl) - 10px); overflow: hidden; opacity: 0; transform: scale(1.02); transition: opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft); } .showcase-screen.is-active { opacity: 1; transform: scale(1); } .showcase-captions { position: relative; } .showcase-caption { opacity: 0; transform: translateY(12px); transition: opacity var(--dur-slow) var(--ease-out-soft), transform var(--dur-slow) var(--ease-out-soft); position: absolute; inset: 0; } .showcase-caption.is-active { opacity: 1; transform: translateY(0); position: relative; } /* Inner screen mocks — composed in pure HTML/CSS, no screenshots needed. */ .mock { width: 100%; height: 100%; background: linear-gradient(180deg, #10160f 0%, #050805 100%); color: #ffffff; padding: 18px; display: grid; gap: 14px; font-size: 12px; line-height: 1.4; } .mock-topbar { display: flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 11px; letter-spacing: var(--tracking-wide); text-transform: uppercase; color: rgba(255, 255, 255, 0.6); } .mock-topbar-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent); } /* Live + EPG mock. */ .mock-epg { display: grid; grid-template-columns: 80px repeat(6, 1fr); gap: 4px; flex: 1; } .mock-epg-cell { padding: 8px 10px; border-radius: 8px; background: rgba(255, 255, 255, 0.05); font-size: 11px; color: rgba(255, 255, 255, 0.78); } .mock-epg-cell.channel { background: rgba(36, 199, 183, 0.12); color: var(--accent-bright); font-weight: 600; } .mock-epg-cell.live { background: linear-gradient(135deg, rgba(36, 199, 183, 0.34), rgba(47, 111, 237, 0.28)); color: #ffffff; box-shadow: 0 0 0 1px rgba(36, 199, 183, 0.42); } /* Movies grid mock. */ .mock-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; flex: 1; } .mock-tile { aspect-ratio: 2 / 3; border-radius: 10px; background: linear-gradient(160deg, rgba(36, 199, 183, 0.22), transparent 60%), linear-gradient(180deg, #253021 0%, #10180f 100%); border: 1px solid rgba(255, 255, 255, 0.06); } .mock-tile.is-focus { transform: scale(1.05); box-shadow: 0 0 0 2px var(--accent), 0 14px 28px rgba(36, 199, 183, 0.24); } /* OSD now-playing mock. */ .mock-osd { flex: 1; display: grid; place-items: end stretch; background: linear-gradient(180deg, rgba(0, 0, 0, 0.3) 0%, rgba(0, 0, 0, 0.05) 30%, rgba(0, 0, 0, 0.5) 100%), linear-gradient(135deg, #253021 0%, #050805 100%); border-radius: 6px; position: relative; overflow: hidden; } .mock-osd-panel { margin: 14px; padding: 14px 16px; border-radius: 14px; background: rgba(11, 17, 10, 0.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.08); display: grid; gap: 10px; } .mock-osd-title { font-size: 14px; font-weight: 600; } .mock-osd-sub { font-size: 11px; color: rgba(255, 255, 255, 0.7); font-family: var(--font-mono); letter-spacing: var(--tracking-label); text-transform: uppercase; } .mock-osd-bar { height: 4px; background: rgba(255, 255, 255, 0.12); border-radius: 2px; overflow: hidden; } .mock-osd-bar > span { display: block; width: 42%; height: 100%; background: var(--accent); border-radius: 2px; box-shadow: 0 0 12px color-mix(in srgb, var(--accent) 70%, transparent); } /* ------------------------------------------------------------------ Setup rail — vertical gradient line that fills as user scrolls. --rail-fill set by site.js (0..1). ------------------------------------------------------------------ */ .setup-rail { position: relative; --rail-fill: 0; } .setup-rail::before { content: ''; position: absolute; left: 18px; top: 12px; bottom: 12px; width: 2px; background: var(--line-strong); border-radius: 2px; } .setup-rail::after { content: ''; position: absolute; left: 18px; top: 12px; width: 2px; height: calc((100% - 24px) * var(--rail-fill)); background: linear-gradient(180deg, var(--accent), var(--brand-3)); border-radius: 2px; box-shadow: 0 0 16px color-mix(in srgb, var(--accent) 45%, transparent); transition: height 220ms linear; } /* ------------------------------------------------------------------ Magnetic button — translation applied by site.js via custom props. ------------------------------------------------------------------ */ [data-magnetic] { transform: translate3d(var(--mx, 0), var(--my, 0), 0); transition: transform 240ms var(--ease-out-soft); } [data-magnetic]:hover { transition: transform 80ms linear; } /* ------------------------------------------------------------------ View Transitions — theme swap circular wipe. ------------------------------------------------------------------ */ ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-old(root) { z-index: 1; } ::view-transition-new(root) { z-index: 2; animation: theme-wipe 480ms var(--ease-out-soft) both; clip-path: circle(0% at var(--vt-x, 50%) var(--vt-y, 50%)); } @keyframes theme-wipe { to { clip-path: circle(150% at var(--vt-x, 50%) var(--vt-y, 50%)); } } /* ------------------------------------------------------------------ Reduced-motion overrides. ------------------------------------------------------------------ */ @media (prefers-reduced-motion: reduce) { .aurora::before, .aurora::after, .aurora-3 { animation: none !important; } .marquee-track { animation: none !important; } body.has-reveal [data-reveal], body.has-reveal .hero-headline .word > span { opacity: 1 !important; transform: none !important; } .showcase-screen, .showcase-caption { opacity: 1 !important; transform: none !important; position: relative !important; } .showcase-inner { grid-template-columns: 1fr; } [data-magnetic] { transform: none !important; } ::view-transition-new(root) { animation: none; clip-path: none; } }