/* =================================================================== PFI Motion System v1 Drop-in animation layer for any PFI page. Pair with pfi-motion.js. Built to sit on top of the existing design-system CSS vars — reads --navy / --gold / --line etc. from :root, never redefines them. =================================================================== */ :root{ --pm-ease: cubic-bezier(.16,.84,.36,1); --pm-ease-out: cubic-bezier(.22,1,.36,1); } /* ---------- preloader (must exist in raw HTML, right after ) ---------- */ .preloader{ position:fixed; inset:0; z-index:9998; display:flex; align-items:center; justify-content:center; background:var(--navy); transition:opacity .6s var(--pm-ease), visibility .6s var(--pm-ease); } .preloader::after{ content:""; position:absolute; inset:0; background:radial-gradient(600px 420px at 50% 42%, rgba(217,197,155,.10), transparent 70%); } .preloader .mark{ position:relative; width:52px; height:52px; opacity:0; transform:scale(.82); animation:pm-mark-in .7s var(--pm-ease-out) .15s forwards; } .preloader .mark i{ position:absolute; inset:0; border:1px solid rgba(217,197,155,.55); } .preloader .mark i:nth-child(2){ inset:9px; border-color:rgba(217,197,155,.85); } .preloader.is-done{ opacity:0; visibility:hidden; pointer-events:none; } @keyframes pm-mark-in{ to{ opacity:1; transform:scale(1); } } html.pm-lock, html.pm-lock body{ overflow:hidden; height:100%; } /* ---------- scroll progress (created by JS) ---------- */ .pm-progress{ position:fixed; top:0; inset-inline:0; height:2px; z-index:9000; pointer-events:none; background:transparent; } .pm-progress i{ display:block; height:100%; width:0%; background:linear-gradient(90deg,var(--gold3,#D9C59B),var(--gold,#B4955C)); } /* ---------- sticky nav w/ blur-on-scroll ---------- */ .nav{ position:sticky; top:0; z-index:80; transition:transform .45s var(--pm-ease), box-shadow .35s var(--pm-ease), background-color .35s var(--pm-ease); will-change:transform; } .nav.pm-scrolled{ background:rgba(255,255,255,.88); -webkit-backdrop-filter:blur(10px) saturate(1.4); backdrop-filter:blur(10px) saturate(1.4); box-shadow:0 1px 0 var(--line), 0 16px 32px -20px rgba(6,42,26,.28); } .nav.pm-hidden{ transform:translateY(-100%); } /* mobile full-screen menu */ @media(max-width:900px){ .menu{ position:fixed; inset:0; z-index:70; display:flex; flex-direction:column; align-items:flex-start; justify-content:center; gap:22px; padding:0 32px; background:var(--navy); color:#fff; transform:translateY(-8px); opacity:0; visibility:hidden; pointer-events:none; transition:opacity .35s var(--pm-ease), transform .35s var(--pm-ease), visibility .35s; } .menu.pm-open{ opacity:1; transform:none; visibility:visible; pointer-events:auto; } .menu a{ color:#fff; font:400 26px/1.2 var(--serif); opacity:0; transform:translateY(14px); transition:opacity .5s var(--pm-ease-out), transform .5s var(--pm-ease-out); transition-delay:var(--d,0s); } .menu.pm-open a{ opacity:1; transform:none; } .menu a.btn{ font:600 13px/1 var(--sans); letter-spacing:.1em; text-transform:uppercase; margin-top:8px; } .burger{ position:relative; z-index:75; width:24px; height:16px; cursor:pointer; } .burger i{ transition:transform .35s var(--pm-ease), opacity .25s var(--pm-ease); } .burger.pm-active i:nth-child(1){ transform:translateY(6px) rotate(45deg); } .burger.pm-active i:nth-child(2){ opacity:0; } .burger.pm-active i:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } } /* ---------- generic scroll reveal ---------- */ [data-reveal]{ opacity:0; transform:translateY(30px); transition:opacity .9s var(--pm-ease-out), transform .9s var(--pm-ease-out); transition-delay:var(--d,0s); } [data-reveal].pm-in{ opacity:1; transform:none; } [data-reveal="scale"]{ transform:translateY(18px) scale(.96); } [data-reveal="row"]{ transform:translateY(16px); } /* ---------- hero entrance ---------- */ .hero .label, .hero p, .hero .ctas{ opacity:0; transform:translateY(18px); transition:opacity .8s var(--pm-ease-out), transform .8s var(--pm-ease-out); } .hero.pm-in .label{ opacity:1; transform:none; transition-delay:.05s; } .hero.pm-in p{ opacity:1; transform:none; transition-delay:.72s; } .hero.pm-in .ctas{ opacity:1; transform:none; transition-delay:.86s; } .hero h1 .word{ display:inline-block; overflow:hidden; vertical-align:top; } .hero h1 .word > i{ display:inline-block; font-style:inherit; transform:translateY(112%); transition:transform .85s var(--pm-ease-out); transition-delay:var(--d,0s); } .hero.pm-in h1 .word > i{ transform:none; } /* hero SVG chart art */ .hero .art svg .h-grid{ opacity:0; transition:opacity 1s var(--pm-ease) .25s; } .hero .art svg .h-line-main{ stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 1.5s var(--pm-ease) .5s; } .hero .art svg .h-line-soft{ stroke-dasharray:900; stroke-dashoffset:900; transition:stroke-dashoffset 1.5s var(--pm-ease) .68s; } .hero .art svg .h-node, .hero .art svg .h-dot{ opacity:0; transform:scale(.35); transform-origin:center; transition:opacity .5s var(--pm-ease-out), transform .5s var(--pm-ease-out); } .hero .art svg .h-node{ transition-delay:1.05s; } .hero .art svg .h-dot:nth-of-type(1){ transition-delay:1.2s; } .hero .art svg .h-dot:nth-of-type(2){ transition-delay:1.3s; } .hero .art svg .h-tip{ opacity:0; transform:translateY(12px); transition:opacity .7s var(--pm-ease-out), transform .7s var(--pm-ease-out); transition-delay:1.3s; } .hero.pm-in .art svg .h-grid, .hero.pm-in .art svg .h-node, .hero.pm-in .art svg .h-dot, .hero.pm-in .art svg .h-tip{ opacity:1; transform:none; } .hero.pm-in .art svg .h-line-main, .hero.pm-in .art svg .h-line-soft{ stroke-dashoffset:0; } /* subtle parallax layers (JS sets transform via CSS var) */ .hero .bg, .hero .gridbg{ transform:translate3d(0, calc(var(--pm-py, 0) * 1px), 0); } /* ---------- stat counters ---------- */ .stat .v{ font-variant-numeric:tabular-nums; } /* ---------- card / row hovers ---------- */ .pillar{ transition:transform .45s var(--pm-ease-out), border-color .35s var(--pm-ease-out); } .pillar:hover{ transform:translateY(-6px); border-color:var(--gold); } .pillar .ic svg{ transition:transform .45s var(--pm-ease-out); } .pillar:hover .ic svg{ transform:scale(1.12) rotate(-4deg); } .card-a .img{ transition:transform .7s var(--pm-ease-out); } .card-a:hover .img{ transform:scale(1.045); } .step{ transition:transform .4s var(--pm-ease-out); } .step:hover{ transform:translateY(-4px); } .tb tbody tr{ transition:background-color .3s var(--pm-ease-out); } .tb tbody tr:hover{ background:var(--od-line, rgba(255,255,255,.04)); } /* ---------- links with gold arrow ---------- */ .link{ display:inline-flex; align-items:center; gap:6px; } .link::after{ content:"\2192"; display:inline-block; transition:transform .3s var(--pm-ease-out); } html[dir=rtl] .link::after{ content:"\2190"; } .link:hover::after{ transform:translateX(4px); } html[dir=rtl] .link:hover::after{ transform:translateX(-4px); } /* ---------- magnetic buttons ---------- */ .btn{ transition:transform .35s var(--pm-ease-out), box-shadow .3s var(--pm-ease-out); will-change:transform; } .btn > .pm-mag{ display:inline-flex; align-items:center; gap:8px; transform:translate(var(--mx,0), var(--my,0)); transition:transform .25s var(--pm-ease-out); } /* ---------- cursor aura (desktop pointer only, created by JS) ---------- */ .pm-aura{ position:fixed; top:0; left:0; width:380px; height:380px; margin:-190px 0 0 -190px; border-radius:50%; pointer-events:none; z-index:5; opacity:0; background:radial-gradient(circle, rgba(180,149,92,.11), transparent 72%); transition:opacity .5s var(--pm-ease-out); will-change:transform; } .pm-aura.pm-visible{ opacity:1; } @media (hover:none), (pointer:coarse){ .pm-aura{ display:none !important; } } /* ---------- reduced motion: show everything instantly, no motion ---------- */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; scroll-behavior:auto !important; } .preloader{ display:none !important; } .pm-aura{ display:none !important; } [data-reveal], .hero .label, .hero p, .hero .ctas, .hero h1 .word > i, .hero .art svg .h-grid, .hero .art svg .h-node, .hero .art svg .h-dot, .hero .art svg .h-tip, .tb tbody tr{ opacity:1 !important; transform:none !important; } .hero .art svg .h-line-main, .hero .art svg .h-line-soft{ stroke-dashoffset:0 !important; } .hero .bg, .hero .gridbg{ transform:none !important; } }