/* ========================================================================== motion.css — cinematic, professional motion layer (v3) JS-gated via .mo on . No-JS + prefers-reduced-motion safe. Covers DJ pages (.service-card, .review-card, …) AND production pages (.proof-card, .learn-item, .pak, .player, .story-card, .ba-card, .label). Pattern: pre-hide via :not(.rv-in) so revealed elements keep their normal hover transforms (no !important fights). ========================================================================== */ :root{ --mo-ease: cubic-bezier(.16,1,.3,1); --mo-ease-soft: cubic-bezier(.22,.61,.36,1); --mo-dur: 900ms; --mo-gold: #C9A84C; --mo-gold-lite: #E8C97A; } html{ scroll-behavior: smooth; } /* ---- Scroll progress bar ---- */ .mo-progress{ position: fixed; top:0; left:0; right:0; height:3px; z-index: 9999; transform: scaleX(var(--mo-p,0)); transform-origin: 0 50%; background: linear-gradient(90deg, var(--mo-gold), var(--mo-gold-lite)); box-shadow: 0 0 12px rgba(201,168,76,.6); pointer-events:none; } /* ========================================================================== REVEALS — pre-hidden until .rv-in ========================================================================== */ .mo .section-label:not(.rv-in), .mo .label:not(.rv-in), .mo .lead:not(.rv-in), .mo .service-card:not(.rv-in), .mo .review-card:not(.rv-in), .mo .faq-item:not(.rv-in), .mo .stat:not(.rv-in), .mo .g-item:not(.rv-in), .mo .booking-inner:not(.rv-in), .mo .proof-card:not(.rv-in), .mo .learn-item:not(.rv-in), .mo .pak:not(.rv-in), .mo .story-card:not(.rv-in), .mo .ba-card:not(.rv-in), .mo .player:not(.rv-in), .mo blockquote:not(.rv-in), .mo .rv:not(.rv-in){ opacity: 0; transform: translateY(48px); } /* headlines: cinematic blur-up */ .mo h2:not(.rv-in){ opacity: 0; transform: translateY(34px); filter: blur(10px); } /* directional variants */ .mo .rv-left:not(.rv-in){ transform: translateX(-52px); } .mo .rv-right:not(.rv-in){ transform: translateX(52px); } .mo .rv-scale:not(.rv-in){ transform: scale(.92); } /* revealed: only define the transition — final state is the element's own */ .mo .rv-in{ transition: opacity var(--mo-dur) var(--mo-ease), transform var(--mo-dur) var(--mo-ease), filter var(--mo-dur) var(--mo-ease); transition-delay: var(--rvd, 0ms); } /* ---- Image wipe reveal inside
---- */ .mo figure{ overflow: hidden; } .mo figure:not(.rv-in) img{ opacity: 0; transform: scale(1.08); clip-path: inset(0 100% 0 0); } .mo figure.rv-in img{ transition: clip-path 1.1s var(--mo-ease), transform 1.4s var(--mo-ease), opacity .6s ease; } /* ========================================================================== HERO ENTRANCE (pure CSS on load) — DJ (.hero-text) & production (.hero-inner) ========================================================================== */ @keyframes moHeroUp{ from{opacity:0; transform:translateY(46px);} to{opacity:1; transform:none;} } @keyframes moHeroImg{ from{opacity:0; transform:translateY(28px) scale(1.05);} to{opacity:1; transform:none;} } .mo .hero-text > *, .mo .hero-inner > *{ animation: moHeroUp 1s var(--mo-ease) both; } .mo .hero-text > *:nth-child(1), .mo .hero-inner > *:nth-child(1){ animation-delay:.05s; } .mo .hero-text > *:nth-child(2), .mo .hero-inner > *:nth-child(2){ animation-delay:.16s; } .mo .hero-text > *:nth-child(3), .mo .hero-inner > *:nth-child(3){ animation-delay:.27s; } .mo .hero-text > *:nth-child(4), .mo .hero-inner > *:nth-child(4){ animation-delay:.38s; } .mo .hero-text > *:nth-child(5), .mo .hero-inner > *:nth-child(5){ animation-delay:.49s; } .mo .hero-text > *:nth-child(6), .mo .hero-inner > *:nth-child(6){ animation-delay:.60s; } .mo .hero-portrait, .mo .hero-portrait-frame{ animation: moHeroImg 1.3s var(--mo-ease) .2s both; } /* ---- Ambient drifting gold glow behind hero content ---- */ @keyframes moGlowDrift{ 0%,100%{ transform: translate3d(-6%, -4%, 0) scale(1); } 33% { transform: translate3d(8%, 6%, 0) scale(1.15); } 66% { transform: translate3d(-4%, 8%, 0) scale(.95); } } .mo .mo-glow{ position:absolute; width:60vw; height:60vw; max-width:900px; max-height:900px; top:-10%; right:-10%; border-radius:50%; background: radial-gradient(circle, rgba(201,168,76,.13) 0%, transparent 60%); animation: moGlowDrift 18s ease-in-out infinite; pointer-events:none; z-index:1; } .mo .hero{ position:relative; } .mo .hero-inner, .mo .hero-text{ position:relative; z-index:2; } /* ---- Gold shimmer on gradient text ---- */ @keyframes moShimmer{ to{ background-position: 200% center; } } .mo .mo-shimmer{ background-size: 200% auto !important; animation: moShimmer 6s linear infinite; } /* ---- Section label: animated gold underline ---- */ .mo .section-label, .mo .label{ position: relative; } .mo .section-label.rv-in::after, .mo .label.rv-in::after{ content:""; position:absolute; left:0; bottom:-8px; height:2px; width:0; background: linear-gradient(90deg, var(--mo-gold), transparent); animation: moLine .9s var(--mo-ease) .25s forwards; } @keyframes moLine{ to{ width: 56px; } } /* centered labels: underline centered */ .mo .center .label.rv-in::after, .mo .section-label[style*="text-align:center"].rv-in::after{ left:50%; transform:translateX(-50%); background: linear-gradient(90deg, transparent, var(--mo-gold), transparent); } /* ---- Soft float for opt-in chips ---- */ @keyframes moFloat{ 0%,100%{ transform: translateY(0);} 50%{ transform: translateY(-6px);} } .mo [data-float]{ animation: moFloat 5.5s ease-in-out infinite; } /* ---- Parallax layers ---- */ .mo [data-px]{ will-change: transform; } /* ---- Nav: darkened once scrolled (no backdrop-filter: avoids GPU glitches) ---- */ .mo nav{ transition: background-color .4s ease, box-shadow .4s ease; } .mo nav.mo-scrolled{ background: rgba(10,10,10,.92) !important; box-shadow: 0 10px 30px rgba(0,0,0,.35); } /* ========================================================================== MICRO-INTERACTIONS ========================================================================== */ .mo a, .mo button{ transition: color .25s ease, background-color .25s ease, border-color .25s ease, box-shadow .3s ease, transform .3s var(--mo-ease); } /* Buttons (DJ + production): shine sweep + lift + glow */ .mo .btn-gold, .mo .btn-outline, .mo .nav-btn, .mo .mm-cta, .mo .rev-btn, .mo .btn-p, .mo .btn-g, .mo .pbtn{ position: relative; overflow: hidden; } .mo .btn-gold::after, .mo .nav-btn::after, .mo .mm-cta::after, .mo .btn-p::after, .mo .pbtn::after{ content:""; position:absolute; top:0; left:-120%; width:60%; height:100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,.35), transparent); transform: skewX(-18deg); transition: left .6s var(--mo-ease); pointer-events:none; } .mo .btn-gold:hover, .mo .nav-btn:hover, .mo .mm-cta:hover, .mo .btn-p:hover, .mo .pbtn:hover, .mo .rev-btn:hover{ transform: translateY(-2px); box-shadow: 0 10px 30px rgba(201,168,76,.28); } .mo .btn-gold:hover::after, .mo .nav-btn:hover::after, .mo .mm-cta:hover::after, .mo .btn-p:hover::after, .mo .pbtn:hover::after{ left: 130%; } .mo .btn-outline:hover, .mo .btn-g:hover{ transform: translateY(-2px); border-color: var(--mo-gold); } /* Cards: lift + cursor-follow gold glow (DJ + production) */ .mo .service-card, .mo .review-card, .mo .g-item, .mo .proof-card, .mo .learn-item, .mo .pak, .mo .story-card, .mo .player, .mo .ba-card{ position: relative; transition: transform .4s var(--mo-ease), box-shadow .4s ease, border-color .3s ease, opacity var(--mo-dur) var(--mo-ease); } .mo .service-card::before, .mo .review-card::before, .mo .g-item::before, .mo .proof-card::before, .mo .learn-item::before, .mo .pak::before, .mo .story-card::before, .mo .player::before{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; opacity:0; transition: opacity .35s ease; background: radial-gradient(220px circle at var(--mx,50%) var(--my,50%), rgba(201,168,76,.15), transparent 60%); } .mo .service-card:hover, .mo .review-card:hover, .mo .g-item:hover, .mo .proof-card:hover, .mo .learn-item:hover, .mo .story-card:hover, .mo .player:hover{ transform: translateY(-6px); box-shadow: 0 20px 50px rgba(0,0,0,.4); } .mo .service-card:hover::before, .mo .review-card:hover::before, .mo .g-item:hover::before, .mo .proof-card:hover::before, .mo .learn-item:hover::before, .mo .pak:hover::before, .mo .story-card:hover::before, .mo .player:hover::before{ opacity:1; } /* Package cards: 3D tilt (JS drives --rx/--ry) */ .mo .pak{ transform-style: preserve-3d; } .mo .pak:hover{ transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(-6px); box-shadow: 0 24px 60px rgba(0,0,0,.45); } .mo .pak-img img, .mo .pak img{ transition: transform .8s var(--mo-ease); } .mo .pak:hover img{ transform: scale(1.05); } /* Audio players: play button glow on hover */ .mo .play-btn{ transition: transform .3s var(--mo-ease), box-shadow .3s ease; } .mo .player:hover .play-btn{ transform: scale(1.08); box-shadow: 0 0 0 6px rgba(201,168,76,.15), 0 0 24px rgba(201,168,76,.35); } /* FAQ: rotate plus icon when open */ .mo .faq-plus{ transition: transform .35s var(--mo-ease); display:inline-block; } .mo .faq-item[open] .faq-plus, .mo details[open] .faq-plus{ transform: rotate(45deg); } /* Nav links: animated gold underline */ .mo .nav-links a{ position: relative; } .mo .nav-links a::after{ content:""; position:absolute; left:0; bottom:-4px; height:1.5px; width:0; background: var(--mo-gold); transition: width .3s var(--mo-ease); } .mo .nav-links a:hover::after{ width: 100%; } /* Focus rings */ .mo a:focus-visible, .mo button:focus-visible, .mo input:focus-visible, .mo [tabindex]:focus-visible{ outline: 2px solid var(--mo-gold); outline-offset: 3px; border-radius: 4px; } /* Count-up numbers: stable width */ .mo .stat-num, .mo [data-count], .mo .ach-grid .grad{ font-variant-numeric: tabular-nums; } /* ========================================================================== v5 ADDITIONS — hero scrub, equalizer, logo marquee, section line-draw ========================================================================== */ /* Hero scrub / parallax: give layers their own compositor layer */ .mo .hero-text, .mo .hero-inner, .mo .hero-bg{ will-change: transform, opacity; } /* Section title line-draw underline (draws in on reveal) */ .mo h2{ position: relative; } .mo h2.rv-in::after{ content:""; display:block; height:2px; width:0; margin-top:14px; background: linear-gradient(90deg, var(--mo-gold), transparent); animation: moDraw 1s var(--mo-ease) .3s forwards; } .mo .center h2.rv-in::after, .mo h2[style*="center"].rv-in::after, .mo [style*="text-align:center"] > h2.rv-in::after{ margin-left:auto; margin-right:auto; background: linear-gradient(90deg, transparent, var(--mo-gold), transparent); } @keyframes moDraw{ to{ width:72px; } } /* Equalizer bars on the playing audio player (display toggle = instant) */ .mo .mo-eq{ display:none; align-items:flex-end; gap:2px; height:13px; margin-left:12px; vertical-align:middle; } .mo .player.mo-playing .mo-eq{ display:inline-flex; } .mo .mo-eq i{ width:3px; height:100%; background:var(--mo-gold); border-radius:1px; transform-origin:bottom; transform:scaleY(.28); display:block; } .mo .player.mo-playing .mo-eq i{ animation: moEq .9s ease-in-out infinite; } .mo .player.mo-playing .mo-eq i:nth-child(2){ animation-delay:.18s; } .mo .player.mo-playing .mo-eq i:nth-child(3){ animation-delay:.36s; } .mo .player.mo-playing .mo-eq i:nth-child(4){ animation-delay:.10s; } @keyframes moEq{ 0%,100%{ transform:scaleY(.28);} 50%{ transform:scaleY(1);} } .mo .player.mo-playing .play-btn{ box-shadow: 0 0 0 4px rgba(201,168,76,.14), 0 0 22px rgba(201,168,76,.32); } /* Logo marquee (proof strip) */ .mo .proof-grid.mo-marquee{ display:flex !important; grid-template-columns:none !important; flex-wrap:nowrap; overflow:hidden; gap:0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent); } .mo .proof-grid.mo-marquee .mo-mq-track{ display:flex; gap:1.5rem; padding-right:1.5rem; flex:0 0 auto; animation: moMarquee 30s linear infinite; } .mo .proof-grid.mo-marquee:hover .mo-mq-track{ animation-play-state: paused; } .mo .proof-grid.mo-marquee .proof-card{ flex:0 0 210px; } @keyframes moMarquee{ to{ transform: translateX(-50%); } } /* ========================================================================== SAFETY FALLBACK + REDUCED MOTION ========================================================================== */ .mo.mo-fallback .section-label, .mo.mo-fallback .label, .mo.mo-fallback .lead, .mo.mo-fallback h2, .mo.mo-fallback .service-card, .mo.mo-fallback .review-card, .mo.mo-fallback .faq-item, .mo.mo-fallback .stat, .mo.mo-fallback .g-item, .mo.mo-fallback .booking-inner, .mo.mo-fallback .proof-card, .mo.mo-fallback .learn-item, .mo.mo-fallback .pak, .mo.mo-fallback .story-card, .mo.mo-fallback .ba-card, .mo.mo-fallback .player, .mo.mo-fallback blockquote, .mo.mo-fallback figure img, .mo.mo-fallback .rv{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior: auto; } .mo-progress, .mo .mo-glow{ display:none; } .mo .section-label:not(.rv-in), .mo .label:not(.rv-in), .mo .lead:not(.rv-in), .mo h2:not(.rv-in), .mo .service-card:not(.rv-in), .mo .review-card:not(.rv-in), .mo .faq-item:not(.rv-in), .mo .stat:not(.rv-in), .mo .g-item:not(.rv-in), .mo .booking-inner:not(.rv-in), .mo .proof-card:not(.rv-in), .mo .learn-item:not(.rv-in), .mo .pak:not(.rv-in), .mo .story-card:not(.rv-in), .mo .ba-card:not(.rv-in), .mo .player:not(.rv-in), .mo blockquote:not(.rv-in), .mo .rv:not(.rv-in), .mo .rv-left:not(.rv-in), .mo .rv-right:not(.rv-in), .mo .rv-scale:not(.rv-in), .mo figure:not(.rv-in) img{ opacity:1 !important; transform:none !important; filter:none !important; clip-path:none !important; } .mo .hero-text > *, .mo .hero-inner > *, .mo .hero-portrait, .mo .hero-portrait-frame{ animation:none !important; opacity:1 !important; transform:none !important; } .mo .mo-shimmer, .mo [data-float]{ animation:none !important; } .mo [data-px]{ transform:none !important; } .mo .section-label.rv-in::after, .mo .label.rv-in::after{ animation:none !important; width:56px; } .mo h2.rv-in::after{ animation:none !important; width:72px; } .mo .mo-eq i{ animation:none !important; } .mo .proof-grid.mo-marquee .mo-mq-track{ animation:none !important; } }