/* ============================================================ GRJ LUX MOTION LAYER v2 — loud edition Loaded at the end of on every page. Pure enhancement: every "hidden until revealed" state is scoped under html.lux (set by lux.js), so if JS or this file fails to load the site renders exactly as before. All animation is transform/opacity (GPU-cheap) plus a few brief blurs/glows, and everything shuts off under prefers-reduced-motion. ============================================================ */ /* ---------- Fundamentals ---------- */ ::selection{background:rgba(198,165,92,.4);color:inherit;} [id]{scroll-margin-top:96px;} #luxProgress{position:fixed;top:0;left:0;right:0;height:4px;z-index:95;pointer-events:none; background:linear-gradient(90deg,var(--brass-deep,#8E7236),var(--brass,#C6A55C),var(--brass-bright,#E6CB89)); box-shadow:0 0 14px rgba(198,165,92,.75); transform:scaleX(0);transform-origin:0 50%;} /* ---------- Brand intro curtain (first load per session, built by lux.js) ---------- */ .lux-intro{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:16px;text-align:center;padding:24px; background:radial-gradient(ellipse 80% 60% at 50% 40%,#10264A 0%,#0B1E3D 45%,#050E1F 100%);} .lux-intro img{height:92px;width:auto; filter:drop-shadow(0 0 34px rgba(198,165,92,.6)) drop-shadow(0 8px 18px rgba(0,0,0,.5)); animation:luxIntroMark .9s cubic-bezier(.19,1,.22,1) both;} .lux-intro .li-name{font-family:'Instrument Serif',Georgia,serif;font-weight:400; font-size:clamp(24px,4.6vw,38px);color:#F5EFE3;letter-spacing:.03em; animation:luxIntroRise .8s cubic-bezier(.19,1,.22,1) .18s both;} .lux-intro .li-line{width:0;height:1px; background:linear-gradient(90deg,transparent,#E6CB89,transparent); animation:luxIntroLine .9s cubic-bezier(.22,.61,.36,1) .38s both;} .lux-intro .li-tag{font-family:'Satoshi','Inter',system-ui,sans-serif;font-size:11px;font-weight:600; letter-spacing:.32em;text-transform:uppercase;color:#C6A55C; animation:luxIntroRise .8s ease .5s both;} .lux-intro.hide{opacity:0;transform:translateY(-3%); transition:opacity .65s ease,transform .65s cubic-bezier(.22,.61,.36,1);pointer-events:none;} @keyframes luxIntroMark{from{opacity:0;transform:scale(.78);}to{opacity:1;transform:none;}} @keyframes luxIntroRise{from{opacity:0;transform:translateY(16px);}to{opacity:1;transform:none;}} @keyframes luxIntroLine{to{width:min(320px,72vw);}} /* ---------- Reveals: bigger, slower, silkier everywhere ---------- */ .lux .reveal{transition:opacity .95s ease,transform .95s cubic-bezier(.19,1,.22,1);} .lux .reveal:not(.in){transform:translateY(36px);} .lux .reveal-stagger:not(.in)>*{transform:translateY(30px);} /* Section headings: blur-to-sharp on every device */ .lux .reveal .display,.lux .reveal-stagger .display{ opacity:0;transform:translateY(18px);filter:blur(8px); transition:opacity .9s ease,transform .9s cubic-bezier(.19,1,.22,1),filter .9s ease;} .lux .reveal.in .display,.lux .reveal-stagger.in .display{opacity:1;transform:none;filter:none;} /* hero headline uses the line-mask entrance instead */ .lux .hero .reveal .display{opacity:1;transform:none;filter:none;transition:none;} /* ---------- Hero: cinematic entrance ---------- */ .lux .hl-line{display:block;overflow:hidden;padding:0 .12em .14em 0;margin-bottom:-.14em;} .lux .hl-in{display:block;transform:translateY(115%);transition:transform 1s cubic-bezier(.19,1,.22,1);} .lux .reveal.in .hl-in{transform:none;} .lux .hero .reveal .hero-pill, .lux .hero .reveal .lede, .lux .hero .reveal .hero-cta-row, .lux .hero .reveal .hero-trust-row{opacity:0;transform:translateY(26px); transition:opacity .85s ease,transform .85s cubic-bezier(.19,1,.22,1);} .lux .hero .reveal.in .hero-pill{opacity:1;transform:none;transition-delay:.05s;} .lux .hero .reveal.in .lede{opacity:1;transform:none;transition-delay:.5s;} .lux .hero .reveal.in .hero-cta-row{opacity:1;transform:none;transition-delay:.62s;} .lux .hero .reveal.in .hero-trust-row{opacity:1;transform:none;transition-delay:.74s;} /* When the intro curtain plays (html.lux-io), hold the hero cascade until the curtain lifts */ .lux-io .hero .reveal.in .hero-pill{transition-delay:2.35s;} .lux-io .hero .reveal.in .lede{transition-delay:2.8s;} .lux-io .hero .reveal.in .hero-cta-row{transition-delay:2.92s;} .lux-io .hero .reveal.in .hero-trust-row{transition-delay:3.04s;} .lux .hero .claim-card.reveal{transform:translateY(38px) scale(.96); transition:opacity .95s ease .25s,transform .95s cubic-bezier(.19,1,.22,1) .25s;} .lux .hero .claim-card.reveal.in{transform:none;animation:luxCardGlow 2s ease 1.1s 1;} .lux-io .hero .claim-card.reveal{transition-delay:2.7s,2.7s;} .lux-io .hero .claim-card.reveal.in{animation-delay:3.6s;} @keyframes luxCardGlow{ 0%,100%{box-shadow:var(--shadow-lift,0 24px 60px -28px rgba(5,14,31,.55));} 45%{box-shadow:0 24px 80px -20px rgba(198,165,92,.7),0 0 0 1px rgba(198,165,92,.5);}} /* Liquid-gold sheen on the italic accent word — hero AND every section heading */ .lux .hero h1 em{ background-image:linear-gradient(100deg,#E6CB89 0%,#FBF3D6 22%,#C6A55C 45%,#E6CB89 70%,#FBF3D6 100%); background-size:250% 100%;-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;animation:luxSheen 4.5s linear .9s infinite;} /* Section headings: static gold gradient (the moving sheen lives only on the hero headline — one element to repaint instead of a dozen) */ .lux .h2 em{ background-image:linear-gradient(100deg,#8E7236 0%,#C9A75F 35%,#7C6330 70%,#A8874A 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} .lux .authority .h2 em,.lux .process .h2 em,.lux .final .h2 em, .lux .bento-hero h3 em,.lux .social-inner h2 em{ background-image:linear-gradient(100deg,#E6CB89 0%,#FBF3D6 35%,#C6A55C 70%,#E6CB89 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;} @keyframes luxSheen{from{background-position:0% 0;}to{background-position:250% 0;}} /* Drone-footage hero: fades in over the photo slideshow once it's actually playing. The element carries inline "opacity:0" so it can never break layout if this file is missing; the photo slides remain the fallback in every failure case. */ .lux .hero-video{transition:opacity 1.4s ease;} .lux .hero-video.on{opacity:1!important;} /* Distant lightning flicker in the hero sky (under the dark overlay) */ .lux .hero-overlay::after{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(ellipse 60% 45% at 72% 6%,rgba(214,228,255,.55),transparent 60%); opacity:0;animation:luxStorm 13s linear 4s infinite;} @keyframes luxStorm{0%,91%,94%,100%{opacity:0;}91.8%{opacity:.42;}92.6%{opacity:.08;}93.2%{opacity:.26;}} /* Rising gold dust (injected by lux.js — fewer, smaller particles on phones) */ .lux-dust{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;} .lux-dust i{position:absolute;bottom:-12px;border-radius:50%; background:radial-gradient(circle,rgba(230,203,137,.9),rgba(230,203,137,0) 70%); opacity:0;animation:luxRise linear infinite;} @keyframes luxRise{ 0%{transform:translateY(0);opacity:0;} 8%{opacity:.75;} 85%{opacity:.15;} 100%{transform:translateY(-82vh);opacity:0;}} /* The buttons' shimmer sweep originally animated `left`, which re-runs layout every frame. Same visual, GPU-only: redefine the keyframes as pure transform. */ @keyframes btnShimmer{0%{transform:skewX(-20deg) translateX(0);}16%,100%{transform:skewX(-20deg) translateX(560%);}} /* Once the drone video is actually playing, stop the photo slideshow that is now invisible underneath it — three full-screen layers of free work. */ .lux .hero-slides:has(.hero-video.on) .slide{animation-play-state:paused;opacity:0;} /* ---------- Aurora glow in dark sections (static: painted once, zero per-frame cost) ---------- */ .lux-aurora{position:absolute;inset:0;overflow:hidden;pointer-events:none;} .lux-aurora i{position:absolute;width:46vmax;height:46vmax;border-radius:50%; background:radial-gradient(circle,rgba(198,165,92,.17),transparent 65%); filter:blur(36px);} .lux-aurora i:nth-child(1){top:-18%;left:-12%;} .lux-aurora i:nth-child(2){bottom:-22%;right:-14%;transform:scale(1.15); background:radial-gradient(circle,rgba(52,88,150,.28),transparent 65%);} /* ---------- Eyebrows: gold line draws out, dot pings ---------- */ .lux .eyebrow::after{content:"";display:inline-block;height:1px;width:0; background:linear-gradient(90deg,var(--brass,#C6A55C),transparent); transition:width .9s cubic-bezier(.22,.61,.36,1) .35s;} .lux .in .eyebrow::after,.lux .eyebrow.in::after{width:46px;} .lux .eyebrow .dot{position:relative;} .lux .eyebrow .dot::after{content:"";position:absolute;inset:-4px;border-radius:50%; border:1px solid var(--brass,#C6A55C);animation:luxPing 2.6s ease-out infinite;} @keyframes luxPing{0%{transform:scale(.55);opacity:.9;}70%,100%{transform:scale(2);opacity:0;}} /* ---------- Header: shrinks and gains a gold hairline ---------- */ .lux .site-header.scrolled::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px; background:linear-gradient(90deg,transparent 4%,rgba(198,165,92,.75),transparent 96%);} @media(min-width:761px){ .lux .site-header .container{transition:height .3s ease;} .lux .site-header.scrolled .container{height:64px;} } /* ---------- Comparison table: sides slide in, marks pop, "vs" pulses ---------- */ .lux .compare.reveal .compare-list li{opacity:0; transition:opacity .6s ease,transform .6s cubic-bezier(.22,.61,.36,1);} .lux .compare.reveal .left .compare-list li{transform:translateX(-20px);} .lux .compare.reveal .right .compare-list li{transform:translateX(20px);} .lux .compare.reveal.in .compare-list li{opacity:1;transform:none;} .lux .compare.reveal .compare-list li svg{transform:scale(0); transition:transform .5s cubic-bezier(.34,1.56,.64,1);} .lux .compare.reveal.in .compare-list li svg{transform:scale(1);} .lux .compare.reveal.in .compare-list li:nth-child(1){transition-delay:.08s;} .lux .compare.reveal.in .compare-list li:nth-child(2){transition-delay:.22s;} .lux .compare.reveal.in .compare-list li:nth-child(3){transition-delay:.36s;} .lux .compare.reveal.in .compare-list li:nth-child(4){transition-delay:.5s;} .lux .compare.reveal.in .compare-list li:nth-child(1) svg{transition-delay:.22s;} .lux .compare.reveal.in .compare-list li:nth-child(2) svg{transition-delay:.36s;} .lux .compare.reveal.in .compare-list li:nth-child(3) svg{transition-delay:.5s;} .lux .compare.reveal.in .compare-list li:nth-child(4) svg{transition-delay:.64s;} .lux .compare.reveal.in .right .compare-list li:nth-child(1){transition-delay:.22s;} .lux .compare.reveal.in .right .compare-list li:nth-child(2){transition-delay:.36s;} .lux .compare.reveal.in .right .compare-list li:nth-child(3){transition-delay:.5s;} .lux .compare.reveal.in .right .compare-list li:nth-child(4){transition-delay:.64s;} .lux .compare-divider::after{animation:luxVs 3s ease-in-out infinite;} @keyframes luxVs{0%,100%{transform:translate(-50%,-50%) scale(1);}50%{transform:translate(-50%,-50%) scale(1.18);}} /* ---------- Estimator: strike-throughs draw themselves, total lands with a pulse ---------- */ .lux .estimator.reveal .strike{position:relative;text-decoration:none;} .lux .estimator.reveal .strike::after{content:"";position:absolute;left:-2px;right:-2px;top:52%;height:1.5px; background:currentColor;opacity:.85;transform:scaleX(0);transform-origin:left; transition:transform .5s cubic-bezier(.22,.61,.36,1);} .lux .estimator.reveal.in .strike::after{transform:scaleX(1);} .lux .estimator.reveal.in > :nth-child(2) .strike::after{transition-delay:.25s;} .lux .estimator.reveal.in > :nth-child(3) .strike::after{transition-delay:.4s;} .lux .estimator.reveal.in > :nth-child(4) .strike::after{transition-delay:.55s;} .lux .estimator.reveal.in > :nth-child(5) .strike::after{transition-delay:.7s;} .lux .estimator.reveal.in > :nth-child(6) .strike::after{transition-delay:.85s;} .lux .estimator.reveal.in .estimator-total{animation:luxTotalIn 1.2s cubic-bezier(.22,.61,.36,1) 1.05s both;} @keyframes luxTotalIn{ 0%{transform:scale(1);} 40%{transform:scale(1.035);box-shadow:0 0 0 9px rgba(198,165,92,.22),0 0 30px rgba(230,203,137,.35);} 100%{transform:scale(1);box-shadow:0 0 0 0 rgba(198,165,92,0);}} /* ---------- Results: gold bar draws across each win ---------- */ .lux .result-card{position:relative;overflow:hidden; transition:transform .25s ease,box-shadow .25s ease;} .lux .result-card::before{content:"";position:absolute;top:0;left:0;right:0;height:3px; background:linear-gradient(90deg,var(--brass-deep,#8E7236),var(--brass-bright,#E6CB89)); transform:scaleX(0);transform-origin:left; transition:transform .8s cubic-bezier(.22,.61,.36,1) .35s;} .lux .reveal-stagger.in .result-card::before{transform:scaleX(1);} .lux .reveal-stagger.in .result-card:nth-child(2)::before{transition-delay:.5s;} .lux .reveal-stagger.in .result-card:nth-child(3)::before{transition-delay:.65s;} .lux .result-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lift,0 24px 60px -28px rgba(5,14,31,.55));} /* ---------- Icons get a life on hover ---------- */ .lux .bento-card .icon,.lux .step-icon,.lux .mech-list li .ic,.lux .area-card .pin{ transition:transform .3s cubic-bezier(.34,1.56,.64,1);} .lux .bento-card:hover .icon{transform:translateY(-4px) rotate(-3deg) scale(1.08);} .lux .step:hover .step-icon{transform:translateY(-4px) rotate(3deg);} .lux .area-card:hover .pin{transform:translateY(-3px) scale(1.1);} .lux .bento-card:hover{border-color:rgba(198,165,92,.55);} /* Once a staggered group has finished entering, drop the per-child delays so hover transitions feel instant (lux.js adds .lux-settled) */ .lux .reveal-stagger.lux-settled>*{transition-delay:0s;} /* ---------- 3D tilt cards (class added by lux.js, desktop pointer only) ---------- */ .lux .lux-tilt{position:relative;transition:opacity .7s ease,transform .25s ease;will-change:transform;} .lux .lux-tilt::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:2; background:radial-gradient(circle at var(--mx,50%) var(--my,40%),rgba(255,244,214,.2),transparent 55%); opacity:0;transition:opacity .35s ease;} .lux .lux-tilt:hover::after{opacity:1;} /* ---------- CTA arrows nudge periodically ---------- */ .lux .btn-primary svg{animation:luxArrow 5s ease-in-out 3s infinite;} @keyframes luxArrow{0%,84%,100%{transform:translateX(0);}88%{transform:translateX(5px);}92%{transform:translateX(0);}96%{transform:translateX(3px);}} /* ---------- FAQ: answers glide open with a gold accent ---------- */ .lux .faq-item[open] .faq-answer{animation:luxFaqIn .4s cubic-bezier(.22,.61,.36,1);} @keyframes luxFaqIn{from{opacity:0;transform:translateY(-8px);}to{opacity:1;transform:none;}} .lux .faq-item{transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease;} .lux .faq-item:hover{border-color:rgba(198,165,92,.5);transform:translateY(-2px);} .lux .faq-item[open]{box-shadow:inset 3px 0 0 var(--brass,#C6A55C),var(--shadow-card,0 18px 44px -22px rgba(5,14,31,.32));} /* ---------- Marquee: brighter, glowing dividers, pauses to read ---------- */ .lux .marquee{animation-duration:30s;} .lux .marquee span{opacity:.72;} .lux .marquee .div{opacity:.9;box-shadow:0 0 8px rgba(198,165,92,.8);} .lux .marquee-mask:hover .marquee{animation-play-state:paused;} /* ---------- Contact: the phone number boxes get a standing gold presence ---------- */ .lux .final-callbox{border-color:rgba(198,165,92,.4);} /* ---------- Link underlines that draw themselves ---------- */ .lux .footer-col a{width:fit-content;background-image:linear-gradient(90deg,var(--brass,#C6A55C),var(--brass-bright,#E6CB89)); background-repeat:no-repeat;background-size:0% 1px;background-position:0 100%; transition:background-size .3s ease,color .2s ease;} .lux .footer-col a:hover{background-size:100% 1px;} .lux .final-callbox a.phone{width:fit-content;background-image:linear-gradient(90deg,var(--brass,#C6A55C),var(--brass-bright,#E6CB89)); background-repeat:no-repeat;background-size:0% 2px;background-position:0 97%; transition:background-size .35s ease,color .2s ease;} .lux .final-callbox a.phone:hover{background-size:100% 2px;} /* ---------- Mobile: sticky bar slides up, shimmers, phone icon rings ---------- */ @media(max-width:760px){ .lux .mobile-cta-bar{background:var(--ink-deep,#050E1F);padding-bottom:env(safe-area-inset-bottom); animation:luxBarUp .7s cubic-bezier(.22,.61,.36,1) .9s both; box-shadow:0 -10px 30px -12px rgba(5,14,31,.45),0 -1px 0 rgba(198,165,92,.45);} .lux body{padding-bottom:calc(52px + env(safe-area-inset-bottom));} .lux .mobile-cta-bar .cta-text{position:relative;overflow:hidden;} .lux .mobile-cta-bar .cta-text::after{content:"";position:absolute;top:0;left:-70%;width:40%;height:100%; background:linear-gradient(90deg,transparent,rgba(255,255,255,.5),transparent); transform:skewX(-20deg);animation:luxSweep 4.5s ease-in-out 2s infinite;pointer-events:none;} .lux .mobile-cta-bar .cta-call svg{animation:luxRing 5s ease-in-out 3s infinite;} } @keyframes luxBarUp{from{transform:translateY(110%);}to{transform:translateY(0);}} @keyframes luxSweep{0%{transform:skewX(-20deg) translateX(0);}18%,100%{transform:skewX(-20deg) translateX(600%);}} @keyframes luxRing{0%,86%,100%{transform:rotate(0);}88%{transform:rotate(14deg);}90%{transform:rotate(-12deg);}92%{transform:rotate(9deg);}94%{transform:rotate(-6deg);}96%{transform:rotate(0);}} /* ---------- Phone performance: keep the look, drop the work ---------- Phones keep the entrances, gold text, video, dust, and call-bar effects. What goes: the giant blurred aurora layers, the always-repainting sheen loops on section headings, box-shadow pulse loops, and blur transitions — the things that make budget phones drop frames. */ @media(max-width:900px){ .lux-aurora{display:none;} .lux .estimator.reveal.in .estimator-total{animation:none;} .lux .estimator-total .val{display:inline-block;min-width:6.5ch;text-align:right;} .lux .reveal .display,.lux .reveal-stagger .display{filter:none; transition:opacity .9s ease,transform .9s cubic-bezier(.19,1,.22,1);} .lux .reveal.in .display,.lux .reveal-stagger.in .display{filter:none;} } /* ---------- Reduced motion: everything visible, nothing moves ---------- */ @media(prefers-reduced-motion:reduce){ html.lux *,html.lux *::before,html.lux *::after{animation:none!important;transition:none!important;} .lux .hl-in, .lux .reveal, .lux .reveal-stagger>*, .lux .hero .reveal .hero-pill,.lux .hero .reveal .lede, .lux .hero .reveal .hero-cta-row,.lux .hero .reveal .hero-trust-row, .lux .reveal .display,.lux .reveal-stagger .display, .lux .compare.reveal .compare-list li{opacity:1;transform:none!important;filter:none!important;} .lux .reveal:not(.in),.lux .reveal-stagger:not(.in)>*{opacity:1;} .lux .compare.reveal .compare-list li svg{transform:none!important;} .lux .hero .claim-card.reveal{transform:none!important;} .lux .estimator.reveal .strike{text-decoration:line-through!important;} .lux .estimator.reveal .strike::after{content:none!important;} .lux .result-card::before{transform:none!important;} .lux .eyebrow::after{width:46px!important;} .lux .hero h1 em,.lux .h2 em,.lux .bento-hero h3 em,.lux .social-inner h2 em{background:none;-webkit-text-fill-color:currentColor;} #luxProgress,.lux-dust,.lux-aurora,.lux-intro,.hero-video{display:none!important;} }