/* ═══════════════════════════════════════════════════════════ CINEMATIC.CSS — Cinematic Feature Injection Layer Coach Matt Garland Website Modules: A. Hero Gradient Drift + Entrance B. Nav Scroll State Enhancement C. Scroll Entrance Animations D. Button Fill-Wipe Hover E. Card Hover Lift (extended) F. Custom LERP Cursor G. Page-Hero Inner Page Entrance H. Reduced Motion Overrides ═══════════════════════════════════════════════════════════ */ /* ── Lenis Scroll Conflict Fix ───────────────────────────── global.css sets scroll-behavior: smooth on , which fights Lenis and causes double-smoothing / jarring scroll. Lenis requires scroll-behavior: auto to take sole control. */ html { scroll-behavior: auto !important; } /* Prevent scroll while gate is active */ body:not(.gate-done) { overflow: hidden; } /* ── MODULE 0: Cinematic Splash Gate ────────────────────── */ .gate { position: fixed; inset: 0; z-index: 20000; background: var(--color-bg-dark, #0D1B2A); display: flex; align-items: center; justify-content: center; pointer-events: all; } .gate-inner { text-align: center; user-select: none; padding: 2rem; } /* Thin line that expands outward — pure CSS, no GSAP needed */ .gate-line { height: 2px; width: 0; background: var(--color-accent, #F5A623); margin: 0 auto 2.5rem; animation: gateLineExpand 0.55s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; } @keyframes gateLineExpand { to { width: 56px; } } .gate-eyebrow { font-size: 0.68rem; font-weight: var(--font-weight-semibold, 600); text-transform: uppercase; letter-spacing: 0.32em; color: var(--color-accent, #F5A623); margin-bottom: 1.25rem; opacity: 0; transform: translateY(16px); } .gate-headline { font-size: clamp(3rem, 12vw, 7.5rem); font-weight: var(--font-weight-black, 900); text-transform: uppercase; letter-spacing: -0.025em; line-height: 0.9; color: var(--color-text-inverse, #ffffff); margin-bottom: 1.75rem; opacity: 0; transform: translateY(36px); } .gate-headline .gate-accent { color: var(--color-accent, #F5A623); display: block; } .gate-sub { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.25em; color: rgba(255, 255, 255, 0.38); opacity: 0; transform: translateY(16px); } /* Gate headline scales down gracefully on small screens */ @media (max-width: 480px) { .gate-headline { font-size: clamp(2.8rem, 18vw, 4.5rem); } } /* ── MODULE A: Hero Gradient Drift + Ken Burns Entrance ─── */ @keyframes heroGradientDrift { 0% { background-position: 0% 60%; } 50% { background-position: 100% 40%; } 100% { background-position: 0% 60%; } } .hero { background-size: 200% 200%; animation: heroGradientDrift 18s ease infinite; } @keyframes heroContentIn { from { opacity: 0; transform: translateY(30px) scale(0.99); } to { opacity: 1; transform: translateY(0) scale(1); } } .hero-eyebrow { animation: heroContentIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) 0.05s both; } /* .hero-inner entrance is handled by GSAP (cinematic.js) to avoid transform conflict with the ScrollTrigger parallax animation */ /* ── MODULE B: Nav Scroll State Enhancement ─────────────── */ .site-header { transition: background-color 300ms ease, box-shadow 300ms ease, border-bottom-color 300ms ease; } .site-header.is-scrolled { background-color: rgba(255, 255, 255, 1); box-shadow: 0 2px 32px rgba(0, 0, 0, 0.10), 0 1px 8px rgba(0, 0, 0, 0.06); border-bottom-color: transparent; } /* ── MODULE C: Scroll Entrance Animations ──────────────── */ .reveal-up { opacity: 0; transform: translateY(40px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-up.is-visible { opacity: 1; transform: translateY(0); } /* Natural stagger via sibling selectors */ .reveal-up:nth-child(2) { transition-delay: 0.08s; } .reveal-up:nth-child(3) { transition-delay: 0.16s; } .reveal-up:nth-child(4) { transition-delay: 0.24s; } .reveal-up:nth-child(5) { transition-delay: 0.32s; } .reveal-up:nth-child(6) { transition-delay: 0.40s; } .reveal-section-header { opacity: 0; transform: translateY(24px); transition: opacity 0.65s cubic-bezier(0.16, 1, 0.3, 1), transform 0.65s cubic-bezier(0.16, 1, 0.3, 1); } .reveal-section-header.is-visible { opacity: 1; transform: translateY(0); } /* ── MODULE D: Button Fill-Wipe Hover (gradient slide) ─── */ /* Solid-fill buttons only — outline variants are excluded */ .btn-accent { background-image: linear-gradient( to right, var(--color-accent-dark) 50%, var(--color-accent) 50% ); background-size: 200% 100%; background-position: 100% 0; transition: background-position 360ms cubic-bezier(0.77, 0, 0.175, 1), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .btn-accent:hover, .btn-accent:focus-visible { background-position: 0 0; } .btn-primary { background-image: linear-gradient( to right, var(--color-primary-dark) 50%, var(--color-primary) 50% ); background-size: 200% 100%; background-position: 100% 0; transition: background-position 360ms cubic-bezier(0.77, 0, 0.175, 1), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); } .btn-primary:hover, .btn-primary:focus-visible { background-position: 0 0; } /* ── MODULE E: Card Hover Lift (extended) ─────────────── */ .offer-card { transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1), border-color 280ms ease; will-change: transform; } .offer-card:hover { transform: translateY(-8px); box-shadow: 0 24px 60px rgba(27, 94, 158, 0.18), 0 4px 16px rgba(0, 0, 0, 0.08); border-color: var(--color-primary-light); } .testimonial-card { transition: transform 280ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 280ms cubic-bezier(0.16, 1, 0.3, 1); will-change: transform; } .testimonial-card:hover { transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.12); } .step-item { transition: transform 250ms cubic-bezier(0.16, 1, 0.3, 1), box-shadow 250ms ease; border-radius: var(--radius-lg); } .step-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); } /* ── MODULE F: Inner Page-Hero Entrance ─────────────────── */ .page-hero { animation: heroContentIn 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both; } /* ── MODULE H: Reduced Motion Overrides ──────────────────── */ @media (prefers-reduced-motion: reduce) { .hero, .hero-eyebrow, .page-hero { animation: none; opacity: 1; transform: none; } .reveal-up, .reveal-section-header { opacity: 1; transform: none; transition: none; } .offer-card, .testimonial-card, .step-item { transition: none; will-change: auto; } .btn-accent, .btn-primary { transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast); background-image: none; } } /* ── MODULE M: Contact Success Modal ─────────────────────── GSAP-animated success overlay — fires on form submit. Adapted from winn-software-solutions pattern. Brand colors: orange accent (#F4702B), navy bg (#0D1B2A). ─────────────────────────────────────────────────────────── */ .success-modal { position: fixed; inset: 0; z-index: 10000; display: flex; align-items: center; justify-content: center; padding: 1.5rem; pointer-events: none; } .success-modal:not([hidden]) { pointer-events: auto; } .success-modal__backdrop { position: absolute; inset: 0; background: rgba(8, 15, 26, 0.92); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); opacity: 0; } .success-modal__card { position: relative; z-index: 1; width: min(480px, 100%); padding: clamp(2.5rem, 6vw, 4rem) clamp(2rem, 5vw, 3.5rem); background: #0D1B2A; border: 1px solid rgba(244, 112, 43, 0.22); border-radius: 1.5rem; box-shadow: 0 0 0 1px rgba(244, 112, 43, 0.07), 0 40px 100px rgba(0, 0, 0, 0.75), 0 0 80px rgba(244, 112, 43, 0.12); text-align: center; overflow: hidden; opacity: 0; transform: translateY(28px) scale(0.9); } /* Top shimmer edge */ .success-modal__card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(244, 112, 43, 0.65) 50%, transparent 100%); pointer-events: none; } /* Floating particles */ .success-modal__particles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: inherit; } .success-modal__particle { position: absolute; border-radius: 50%; animation: smParticleFloat linear infinite; } @keyframes smParticleFloat { 0% { transform: translateY(0) scale(1); opacity: 0; } 8% { opacity: 0.9; } 85% { opacity: 0.3; } 100% { transform: translateY(-360px) scale(0.2); opacity: 0; } } /* Glowing icon ring */ .success-modal__icon-wrap { width: 84px; height: 84px; margin: 0 auto 1.75rem; border-radius: 50%; background: rgba(244, 112, 43, 0.08); border: 1px solid rgba(244, 112, 43, 0.22); display: flex; align-items: center; justify-content: center; box-shadow: 0 0 0 10px rgba(244, 112, 43, 0.05), 0 0 0 20px rgba(244, 112, 43, 0.02), 0 0 50px rgba(244, 112, 43, 0.15); opacity: 0; transform: scale(0.55) rotate(-12deg); } .success-check-svg { width: 42px; height: 42px; overflow: visible; } .check-circle { stroke-dasharray: 164; stroke-dashoffset: 164; } .check-mark { stroke-dasharray: 37; stroke-dashoffset: 37; } /* Text elements — start hidden, animated by GSAP */ .success-modal__eyebrow { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.22em; text-transform: uppercase; color: var(--color-accent, #F4702B); margin-bottom: 0.5rem; opacity: 0; transform: translateY(12px); } .success-modal__title { font-size: clamp(2.2rem, 5vw, 3.2rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; color: #fff; line-height: 1; margin-bottom: 0.75rem; opacity: 0; transform: translateY(12px); } .success-modal__subtitle { font-size: 1.05rem; color: rgba(255, 255, 255, 0.9); font-weight: 500; margin-bottom: 0.4rem; opacity: 0; transform: translateY(12px); } .success-modal__body { font-size: 0.875rem; color: rgba(255, 255, 255, 0.5); line-height: 1.65; margin-bottom: 2.25rem; opacity: 0; transform: translateY(12px); } .success-modal__close { width: 100%; opacity: 0; transform: translateY(8px); } /* Pulsing glow on icon after entrance */ @keyframes iconPulse { 0%, 100% { box-shadow: 0 0 0 10px rgba(244, 112, 43, 0.05), 0 0 0 20px rgba(244, 112, 43, 0.02), 0 0 50px rgba(244, 112, 43, 0.15); } 50% { box-shadow: 0 0 0 14px rgba(244, 112, 43, 0.09), 0 0 0 28px rgba(244, 112, 43, 0.04), 0 0 70px rgba(244, 112, 43, 0.28); } } .success-modal__icon-wrap.pulsing { animation: iconPulse 2.8s ease-in-out infinite; }