/* ========================================================= V36 ยท Smooth motion + page transitions Calm, premium motion: no photo shake, no pointer-driven tilt. ========================================================= */ /* Cross-page curtain. The incoming class is applied in so the destination page is covered before it paints, avoiding a visual flash. */ html::after{ content:""; position:fixed; z-index:2147483646; inset:-1px; pointer-events:none; background: radial-gradient(circle at 72% 18%,rgba(105,186,236,.34),transparent 30%), linear-gradient(145deg,#092538 0%,#14557f 52%,#2278B5 100%); transform:scaleY(0); transform-origin:bottom center; will-change:transform; } html.page-transition-out-v36::after{ transform:scaleY(1); transition:transform .42s cubic-bezier(.76,0,.24,1); } html.page-transition-in-v36::after{ transform:scaleY(1); transform-origin:top center; animation:pageCurtainOutV36 .58s .05s cubic-bezier(.22,1,.36,1) both; } @keyframes pageCurtainOutV36{to{transform:scaleY(0)}} /* Small content hand-off keeps the navigation feeling continuous. */ body.page-leaving-v36 main, body.page-leaving-v36 .site-header, body.page-leaving-v36 .topbar{ opacity:.72; transform:translate3d(0,-6px,0) scale(.997); filter:blur(2px); transition:opacity .28s ease,transform .38s cubic-bezier(.22,1,.36,1),filter .28s ease; } /* Native cross-document View Transitions where supported. */ @view-transition{navigation:auto} ::view-transition-old(root){animation:.28s ease both pageOldV36} ::view-transition-new(root){animation:.48s cubic-bezier(.22,1,.36,1) both pageNewV36} @keyframes pageOldV36{to{opacity:.18;transform:translateY(-6px) scale(.997)}} @keyframes pageNewV36{from{opacity:.12;transform:translateY(9px) scale(.998)}to{opacity:1;transform:none}} /* ---------------- Home: calmer photographic scenes ---------------- */ body.cinematic-home .cinema-scene, body.cinematic-home .cinema-scene.cinema-hero{ min-height:0!important; perspective:none!important; overflow:hidden; background:#fff!important; } body.cinematic-home .cinema-sticky, body.paypal-motion-home .cinema-sticky, body.paypal-motion-home .cinema-hero .cinema-sticky{ position:relative!important; top:auto!important; height:clamp(620px,84svh,860px)!important; min-height:0!important; perspective:none!important; transform-style:flat!important; background:#fff!important; } body.cinematic-home .cinema-hero .cinema-sticky, body.paypal-motion-home .cinema-hero .cinema-sticky{ height:clamp(650px,88svh,900px)!important; } body.cinematic-home .cinema-media{ inset:0!important; opacity:1!important; transform:none!important; transform-style:flat!important; clip-path:none!important; border-radius:0!important; border:0!important; box-shadow:none!important; overflow:hidden; background:#0a2639; } body.cinematic-home .cinema-media::before{display:none!important} body.cinematic-home .cinema-media::after{ transform:none!important; border:0!important; border-radius:0!important; background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(4,18,29,.08))!important; box-shadow:none!important; } body.cinematic-home .cinema-media img{ opacity:1!important; filter:saturate(.94) contrast(1.015)!important; transform:translate3d(0,var(--v36-photo-y,0px),0) scale(var(--v36-photo-scale,1.045))!important; transform-origin:center center!important; transition:filter .6s ease!important; will-change:transform; backface-visibility:hidden; } body.cinematic-home .cinema-overlay{opacity:.94!important} body.cinematic-home .cinema-grain{display:none!important} /* The copy appears once with a soft, stable reveal. No oscillation/rotation. */ body.cinematic-home .cinema-copy{ opacity:1!important; transform:none!important; filter:none!important; perspective:none!important; transform-style:flat!important; } body.cinematic-home [data-cinema-line]{ opacity:0!important; transform:translate3d(0,22px,0)!important; filter:blur(5px)!important; transition: opacity .68s cubic-bezier(.22,1,.36,1), transform .82s cubic-bezier(.22,1,.36,1), filter .72s ease!important; transition-delay:var(--v36-line-delay,0ms)!important; will-change:opacity,transform,filter; } body.cinematic-home .cinema-scene.is-v36-visible [data-cinema-line]{ opacity:1!important; transform:translate3d(0,0,0)!important; filter:blur(0)!important; } body.cinematic-home .hero-facts{ opacity:0!important; transform:translate3d(0,18px,0)!important; transition:opacity .68s .32s ease,transform .78s .32s cubic-bezier(.22,1,.36,1)!important; } body.cinematic-home .cinema-scene.is-v36-visible .hero-facts{ opacity:1!important; transform:none!important; } /* Neutralize the old word/3D states in case cached markup contains them. */ body.cinematic-home .cinema-title-line, body.cinematic-home .cinema-line-inner, body.cinematic-home .cinema-word, body.cinematic-home .cinema-word-inner, body.cinematic-home .cinema-detail-line{ perspective:none!important; transform-style:flat!important; } body.cinematic-home .cinema-line-inner, body.cinematic-home .cinema-word-inner, body.cinematic-home .cinema-detail-line{ opacity:1!important; transform:none!important; filter:none!important; } body.cinematic-home .cinema-title-line::after{display:none!important} /* Supporting sections: retain reveals but remove the bouncy/tilted feel. */ html.pp-motion-ready body.paypal-motion-home .pp-reveal{ --pp-reveal-y:20px!important; --pp-reveal-scale:1!important; --pp-rx:0deg!important; --pp-ry:0deg!important; --pp-card-x:0px!important; --pp-card-y:0px!important; transition: opacity .56s cubic-bezier(.22,1,.36,1), transform .72s cubic-bezier(.22,1,.36,1), box-shadow .3s ease, border-color .3s ease, background .3s ease!important; } body.paypal-motion-home .pp-word{ transform:translate3d(0,72%,0)!important; transition:opacity .42s ease,transform .7s cubic-bezier(.22,1,.36,1)!important; } body.paypal-motion-home .pp-heading.pp-in .pp-word{transform:none!important} body.paypal-motion-home .pp-card{transform-style:flat!important} body.paypal-motion-home .pp-card.pp-in:hover{ --pp-card-y:0px!important; transform:translate3d(0,-4px,0)!important; box-shadow:0 18px 42px rgba(10,47,74,.1)!important; } body.paypal-motion-home .cinema-price-row.pp-card.pp-in:hover{ transform:translate3d(0,-2px,0)!important; box-shadow:none!important; } body.paypal-motion-home .client-marquee figure.pp-card:hover img{ transform:scale(1.035)!important; } body.paypal-motion-home .pp-cursor-light{display:none!important} body.paypal-motion-home .pp-magnetic{transform:none!important} /* Buttons still feel alive, but the hover is controlled. */ body.cinematic-home .cinema-btn, body.cinematic-home .cinema-text-link, body.cinematic-home .cinema-dark-link{ transition:transform .28s cubic-bezier(.22,1,.36,1),background .25s ease,border-color .25s ease,color .25s ease!important; } body.cinematic-home .cinema-btn:hover{transform:translateY(-2px)!important} body.cinematic-home .cinema-text-link:hover, body.cinematic-home .cinema-dark-link:hover{transform:translateY(-1px)!important} @media(max-width:900px){ body.cinematic-home .cinema-sticky, body.paypal-motion-home .cinema-sticky, body.paypal-motion-home .cinema-hero .cinema-sticky{ height:clamp(590px,82svh,760px)!important; } body.cinematic-home .cinema-media img{--v36-photo-scale:1.035} body.cinematic-home [data-cinema-line]{transform:translate3d(0,16px,0)!important} } @media(max-width:600px){ body.cinematic-home .cinema-sticky, body.paypal-motion-home .cinema-sticky, body.paypal-motion-home .cinema-hero .cinema-sticky{ height:clamp(570px,78svh,700px)!important; } body.cinematic-home .cinema-media img{--v36-photo-scale:1.025} } @media(prefers-reduced-motion:reduce){ html::after{display:none!important} body.page-leaving-v36 main, body.page-leaving-v36 .site-header, body.page-leaving-v36 .topbar{opacity:1!important;transform:none!important;filter:none!important} body.cinematic-home .cinema-media img{transform:none!important;will-change:auto} body.cinematic-home [data-cinema-line], body.cinematic-home .hero-facts{ opacity:1!important; transform:none!important; filter:none!important; transition:none!important; } }