/* ========================================================================== Movement Cube · Office Launchpad — Cinematic Layer Drop-in override sheet. Load AFTER launchpad.css. SCOPED: every rule requires class "mc-cinematic" on . Only the launchpad home page carries that class, so this sheet is inert everywhere else — apps are never touched, even if the file loads globally. No new colors. Brand tokens only. ========================================================================== */ /* ---------- Shared keyframes (mcCine-prefixed to avoid app collisions) ---------- */ @keyframes mcCineRiseIn { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes mcCineAmbientDrift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(4%, -3%, 0) scale(1.06); } 100% { transform: translate3d(-4%, 3%, 0) scale(1.02); } } @keyframes mcCineHeroSweep { 0% { transform: translateX(-100%) skewX(-12deg); } 38%, 100% { transform: translateX(100%) skewX(-12deg); } } @keyframes mcCineSheen { from { transform: translateX(-160%) skewX(-18deg); } to { transform: translateX(640%) skewX(-18deg); } } @keyframes mcCineBarGrow { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes mcCineNotifGlow { 0%, 100% { box-shadow: 0 4px 18px rgba(230,57,70,0.10); } 50% { box-shadow: 0 6px 30px rgba(230,57,70,0.32); } } /* ---------- 4 · Ambient background drift + vignette ---------- */ body.mc-cinematic::before { content: ""; position: fixed; inset: -20%; pointer-events: none; z-index: -1; background: radial-gradient(circle at 18% 22%, rgba(1,110,173,0.16), transparent 45%), radial-gradient(circle at 82% 78%, rgba(230,57,70,0.11), transparent 48%); animation: mcCineAmbientDrift 75s ease-in-out infinite alternate; } body.mc-cinematic::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 5; background: radial-gradient(ellipse at 50% 42%, transparent 58%, rgba(4,10,18,0.50) 100%); } /* ---------- 5 · Hero scale + gradient sweep ---------- */ body.mc-cinematic .hero-text h2 { font-size: clamp(26px, 3.8vw, 40px); } body.mc-cinematic .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.05) 48%, transparent 64%); transform: translateX(-100%) skewX(-12deg); animation: mcCineHeroSweep 9s ease-in-out 1.4s infinite; } /* ---------- 3 · Entrance choreography ---------- */ body.mc-cinematic .hero { animation: mcCineRiseIn .8s cubic-bezier(.22,1,.36,1) backwards; } body.mc-cinematic .hero-eyebrow { animation: mcCineRiseIn .6s cubic-bezier(.22,1,.36,1) .15s backwards; } body.mc-cinematic .hero-text h2 { animation: mcCineRiseIn .6s cubic-bezier(.22,1,.36,1) .25s backwards; } body.mc-cinematic .hero-sub { animation: mcCineRiseIn .6s cubic-bezier(.22,1,.36,1) .35s backwards; } body.mc-cinematic .hero-greeting { animation: mcCineRiseIn .6s cubic-bezier(.22,1,.36,1) .50s backwards; } body.mc-cinematic .section-title { animation: mcCineRiseIn .6s cubic-bezier(.22,1,.36,1) .50s backwards; } body.mc-cinematic .section-title::before { transform-origin: bottom; animation: mcCineBarGrow .45s cubic-bezier(.22,1,.36,1) .85s backwards; } body.mc-cinematic .foot { animation: mcCineRiseIn .8s cubic-bezier(.22,1,.36,1) .95s backwards; } /* Tiles cascade in — per-tile delay set by cinematic.js (fallback .55s) */ body.mc-cinematic .tile { animation: mcCineRiseIn .7s cubic-bezier(.22,1,.36,1) .55s backwards; transform-style: preserve-3d; will-change: transform; } /* ---------- 6 · Notification glow pulse ---------- */ body.mc-cinematic .notif-card { animation: mcCineRiseIn .7s cubic-bezier(.22,1,.36,1) .40s backwards, mcCineNotifGlow 2.6s ease 1.4s 2; } /* ---------- 2 · Cursor-tracking 3D tilt + sheen ---------- */ /* cinematic.js sets --rx / --ry on mousemove; grid already has perspective */ body.mc-cinematic .tile:hover { transform: translateY(-5px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg)); } body.mc-cinematic .tile-illust::after { content: ""; position: absolute; top: -60%; bottom: -60%; left: -30%; width: 38%; pointer-events: none; background: linear-gradient(105deg, transparent, rgba(255,255,255,0.10), transparent); transform: translateX(-160%) skewX(-18deg); } body.mc-cinematic .tile:hover .tile-illust::after { animation: mcCineSheen .9s ease; } body.mc-cinematic .tile-illust svg { transition: transform .5s cubic-bezier(.22,1,.36,1); } body.mc-cinematic .tile:hover .tile-illust svg { transform: scale(1.045); } /* ---------- 1 · Modal scale + fade (replaces display snap) ---------- Note: this animates the launchpad's modal WINDOW only. The app inside the iframe renders its own document and is never restyled. */ body.mc-cinematic .modal-scrim { display: block; opacity: 0; pointer-events: none; transition: opacity .28s ease; } body.mc-cinematic .modal-scrim.show { opacity: 1; pointer-events: auto; } body.mc-cinematic .modal { display: flex; opacity: 0; pointer-events: none; transform: scale(.965) translateY(12px); transition: opacity .28s ease, transform .32s cubic-bezier(.22,1,.36,1); } body.mc-cinematic .modal.show { opacity: 1; pointer-events: auto; transform: scale(1) translateY(0); } /* ---------- Accessibility (scoped) ---------- */ @media (prefers-reduced-motion: reduce) { body.mc-cinematic, body.mc-cinematic::before, body.mc-cinematic::after, body.mc-cinematic *, body.mc-cinematic *::before, body.mc-cinematic *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }