/* ============================================================ DER FILMHANDWERKER — Cinematic Motion Layer (v2 "wow") ------------------------------------------------------------ Progressive enhancement only. Everything here is gated: • activates when gets `.motion-on` (set by motion.js once GSAP + Lenis load AND motion is allowed) • fully neutralised under prefers-reduced-motion The base site (styles.css) works untouched if this never loads. ============================================================ */ /* ── Lenis smooth scroll plumbing ──────────────────────────── */ html.lenis, html.lenis body { height: auto; } .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; } .lenis.lenis-stopped { overflow: hidden; } /* Native smooth-scroll would fight Lenis — hand it over. */ html.motion-on { scroll-behavior: auto; } /* ── Scroll progress bar ───────────────────────────────────── */ .scroll-progress { position: fixed; top: 0; left: 0; height: 3px; width: 100%; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--orange-btn), var(--orange-light) 60%, #FFC98A); box-shadow: 0 0 14px rgba(240,105,24,0.6); z-index: 200; pointer-events: none; opacity: 0; transition: opacity 0.4s ease; } html.motion-on .scroll-progress { opacity: 1; } /* ── WebGL cinematic hero canvas ───────────────────────────── */ .hero-webgl-canvas { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; will-change: opacity; } .hero.webgl-hero-active .hero-bg-fallback { opacity: 0; } /* the shader already darkens for legibility → lighten the CSS overlay a touch */ .hero.webgl-hero-active .hero-overlay { background: linear-gradient(180deg, rgba(0,0,0,0.32) 0%, rgba(0,0,0,0.40) 50%, rgba(0,0,0,0.62) 100%); } /* ── Cinematic reveal (richer than base .reveal) ───────────── */ html.motion-on .reveal { opacity: 0; transform: translateY(34px); filter: blur(8px); transition: opacity 0.85s cubic-bezier(0.16, 1, 0.3, 1), transform 0.85s cubic-bezier(0.16, 1, 0.3, 1), filter 0.85s cubic-bezier(0.16, 1, 0.3, 1); will-change: opacity, transform, filter; } html.motion-on .reveal.visible { opacity: 1; transform: none; filter: blur(0); } /* directional / special reveal variants (opt-in via class) */ html.motion-on .reveal-left { transform: translateX(-46px) translateY(0); } html.motion-on .reveal-right { transform: translateX(46px) translateY(0); } html.motion-on .reveal-scale { transform: scale(0.92); filter: blur(10px); } html.motion-on .reveal-left.visible, html.motion-on .reveal-right.visible, html.motion-on .reveal-scale.visible { transform: none; filter: blur(0); } /* Clip-path wipe for section headers */ html.motion-on .reveal-clip { opacity: 0; clip-path: inset(0 0 100% 0); transform: translateY(12px); transition: opacity 0.7s ease, clip-path 1s cubic-bezier(0.16, 1, 0.3, 1), transform 1s cubic-bezier(0.16, 1, 0.3, 1); filter: none; } html.motion-on .reveal-clip.visible { opacity: 1; clip-path: inset(0 0 -6% 0); transform: none; } /* ── Hero word-split reveal ────────────────────────────────── */ .hero-headline .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.06em; /* room for descenders inside the mask */ } .hero-headline .word > span { display: inline-block; will-change: transform; } html.motion-on .hero-headline .word > span { transform: translateY(115%) rotate(4deg); } /* accent word gets the warm gradient treatment */ .hero-headline .word.grad > span { background: linear-gradient(100deg, var(--orange-light) 0%, var(--orange) 45%, #FFD9A8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* generic gradient text utility (used for other headings' key word) */ .grad-text { background: linear-gradient(100deg, var(--orange-light) 0%, var(--orange) 50%, #FFD9A8 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* Hero parallax layers — motion.js drives the transforms */ html.motion-on .hero-video, html.motion-on .hero-overlay { will-change: transform; } /* ── Reel marquee (auto-scrolling wall of 9:16 reels) ──────── */ .reel-strip { position: relative; padding: clamp(40px, 6vw, 72px) 0 clamp(8px, 2vw, 20px); overflow: hidden; } .reel-strip-label { text-align: center; margin-bottom: 26px; } .reel-marquee { position: relative; width: 100%; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .reel-track { display: flex; gap: 18px; width: max-content; will-change: transform; /* CSS fallback animation if JS/GSAP never runs */ animation: reel-scroll 46s linear infinite; } html.motion-on .reel-track { animation: none; } /* GSAP takes over for velocity-reactivity */ @keyframes reel-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .reel-marquee:hover .reel-track { animation-play-state: paused; } .reel-card { position: relative; flex: 0 0 auto; width: clamp(150px, 17vw, 232px); aspect-ratio: 9 / 16; border-radius: 18px; overflow: hidden; background: #111; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 18px 44px rgba(0,0,0,0.42); transform: translateZ(0); transition: transform 0.5s cubic-bezier(0.16,1,0.3,1), box-shadow 0.5s ease, border-color 0.3s ease; } .reel-card img, .reel-card video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .reel-card::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 55%, rgba(0,0,0,0.55) 100%); } .reel-card .reel-tag { position: absolute; left: 12px; bottom: 12px; z-index: 2; font-family: var(--font-body); font-size: 0.7rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; opacity: 0.9; } .reel-card .reel-play { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%) scale(0.9); z-index: 2; width: 46px; height: 46px; border-radius: 50%; background: rgba(240,105,24,0.9); display: flex; align-items: center; justify-content: center; color: #fff; opacity: 0; transition: opacity 0.3s ease, transform 0.3s ease; } @media (hover: hover) and (pointer: fine) { .reel-card:hover { transform: translateY(-8px) scale(1.03); border-color: rgba(240,105,24,0.45); box-shadow: 0 26px 60px rgba(0,0,0,0.55); } .reel-card:hover .reel-play { opacity: 1; transform: translate(-50%,-50%) scale(1); } } @media (max-width: 600px) { .reel-card { width: 132px; border-radius: 14px; } } /* ── Magnetic buttons + glow ───────────────────────────────── */ @media (hover: hover) and (pointer: fine) { html.motion-on .btn.magnetic { will-change: transform; position: relative; } html.motion-on .btn-primary.magnetic::after { content: ""; position: absolute; inset: -2px; border-radius: inherit; background: radial-gradient(closest-side, rgba(255,131,48,0.55), transparent); opacity: 0; z-index: -1; filter: blur(14px); transition: opacity 0.35s ease; } html.motion-on .btn-primary.magnetic:hover::after { opacity: 1; } } /* ── 3D tilt cards ─────────────────────────────────────────── */ @media (hover: hover) and (pointer: fine) { html.motion-on .project-grid, html.motion-on .abo-grid { perspective: 1300px; } html.motion-on .tilt { transform-style: preserve-3d; will-change: transform; transition: transform 0.45s cubic-bezier(0.16,1,0.3,1), box-shadow 0.4s ease, border-color 0.3s ease; } /* GSAP owns transform on tilt cards → neutralise the base :hover translate so the two don't fight (shadow/border hovers still apply). */ html.motion-on .project-card.tilt:hover, html.motion-on .abo-card.tilt:hover { transform: none; } html.motion-on .tilt .tilt-inner { transform: translateZ(24px); } } /* ── Animated count-up numbers ─────────────────────────────── */ .count-up { font-variant-numeric: tabular-nums; } /* ── Section depth: subtle parallax on eyebrows ────────────── */ html.motion-on .section-header .eyebrow { will-change: transform; } /* ── Kinetic section headings ──────────────────────────────── */ /* When a header hosts a kinetic (word-split) h2, the block reveal drops its transform/blur so the per-word rise owns the motion (no double animation). */ html.motion-on .section-header.kinetic-host { transform: none; filter: none; } html.motion-on .section-header.kinetic-host .display-lg .word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.08em; } html.motion-on .section-header.kinetic-host .display-lg .word > span { display: inline-block; will-change: transform; } /* ── Branded intro reveal ──────────────────────────────────── */ #introVeil { position: fixed; inset: 0; z-index: 300; display: flex; align-items: center; justify-content: center; pointer-events: none; /* No-JS / no-motion safety: auto-dismiss even if the script never runs. */ animation: intro-failsafe 0.01s linear 2.6s forwards; } #introVeil .intro-panel-l, #introVeil .intro-panel-r { position: absolute; top: 0; bottom: 0; width: 50.5%; background: var(--dark); } #introVeil .intro-panel-l { left: 0; } #introVeil .intro-panel-r { right: 0; } #introVeil .intro-mark { position: relative; z-index: 2; width: clamp(64px, 9vw, 104px); height: auto; will-change: transform, opacity, filter; } body.intro-lock { overflow: hidden; } @keyframes intro-failsafe { to { opacity: 0; visibility: hidden; } } /* ── Animated underline draw (key phrases) ─────────────────── */ html.motion-on .u-draw { background-image: linear-gradient(var(--orange), var(--orange)); background-repeat: no-repeat; background-position: 0 100%; background-size: 0% 2px; transition: background-size 0.6s cubic-bezier(0.16,1,0.3,1); } html.motion-on .u-draw.visible { background-size: 100% 2px; } /* ── Kill everything for reduced motion / no-JS ────────────── */ @media (prefers-reduced-motion: reduce) { html.motion-on .reveal, html.motion-on .reveal-clip { opacity: 1 !important; transform: none !important; filter: none !important; clip-path: none !important; transition: none !important; } html.motion-on .hero-headline .word > span, html.motion-on .section-header .display-lg .word > span { transform: none !important; } html.motion-on .u-draw { background-size: 100% 2px !important; } .reel-track { animation: none !important; } .scroll-progress { display: none !important; } #introVeil { display: none !important; } }