/* ============================================================ Mays Growth Partners — premium motion layer Cinematic preloader, custom cursor, staggered overlay menu, masked headline reveals, parallax, marquee, micro-interactions. Restrained, old-money. Loaded after styles.css. ============================================================ */ /* ---------- preloader ---------- */ .preloader{ position:fixed;inset:0;z-index:9999; background:var(--green-ink); display:flex;align-items:center;justify-content:center; transition:transform .9s cubic-bezier(.76,0,.24,1); } .pre-inner{display:flex;flex-direction:column;align-items:center;gap:22px;padding:0 24px} .pre-badge{ width:64px;height:64px;opacity:0;transform:scale(.85); transition:opacity .7s ease .1s,transform .9s cubic-bezier(.22,1,.36,1) .1s; } .pre-word{ font-family:var(--serif);font-size:clamp(1rem,2.6vw,1.35rem);font-weight:600; letter-spacing:.34em;text-transform:uppercase;color:var(--ivory); opacity:0;transform:translateY(14px);white-space:nowrap; transition:opacity .8s ease .45s,transform .8s cubic-bezier(.22,1,.36,1) .45s,letter-spacing 1.2s ease .45s; } .pre-line{ display:block;width:0;height:1px;background:var(--gold); transition:width 1s cubic-bezier(.76,0,.24,1) .55s; } .preloader.play .pre-badge{opacity:1;transform:scale(1)} .preloader.play .pre-word{opacity:1;transform:none;letter-spacing:.42em} .preloader.play .pre-line{width:min(320px,70vw)} .preloader.done{transform:translateY(-101%)} .preloader.done .pre-inner{opacity:0;transition:opacity .4s ease} /* returning visitor: instant quiet fade */ .pre-skip .preloader{transition:opacity .45s ease} .pre-skip .preloader.done{transform:none;opacity:0;pointer-events:none} /* SAFETY NET: JS timers and rAF are throttled/paused in hidden or prerendered tabs, which can strand the preloader. This wall-clock CSS animation guarantees the overlay clears itself ~2.8s in even if site.js never releases it. (Deliberately NO body overflow lock for the same reason.) */ @keyframes preSafety{to{opacity:0;visibility:hidden}} .preloader{animation:preSafety .5s ease 2.8s forwards;pointer-events:none} /* ---------- page transitions ---------- */ /* NOTE: never animate transform on — an animated/filled transform makes body the containing block for position:fixed children (cursor, header, overlay) and they stop tracking the viewport once the page scrolls. Opacity only. */ @keyframes pageIn{from{opacity:0}to{opacity:1}} body{animation:pageIn .7s ease both} html.page-exit body{opacity:0;transition:opacity .32s ease;animation:none} /* panel wipe: green-ink sheet sweeps up over the page on exit, gold leading edge */ .page-wipe{ position:fixed;inset:0;z-index:9998;pointer-events:none; background:var(--green-ink); clip-path:inset(100% 0 0 0); transition:clip-path .55s cubic-bezier(.76,0,.24,1); } .page-wipe::before{ content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--gold); opacity:0;transition:opacity .2s; } html.wiping .page-wipe{clip-path:inset(0 0 0 0);pointer-events:auto} html.wiping .page-wipe::before{opacity:1} /* ---------- easter egg toast ---------- */ .egg-toast{ position:fixed;left:50%;bottom:36px;z-index:9997; transform:translate(-50%,24px);opacity:0;pointer-events:none; background:var(--green-deep);border:1px solid var(--gold-soft);border-radius:var(--radius); padding:16px 30px;max-width:min(560px,86vw);text-align:center; font-family:var(--serif);font-style:italic;font-size:1.05rem;color:var(--ivory); box-shadow:0 18px 50px rgba(0,0,0,.35); transition:opacity .5s ease,transform .6s cubic-bezier(.22,1,.36,1); } .egg-toast .egg-eyebrow{ display:block;font-family:var(--label);font-style:normal;font-size:.64rem;font-weight:600; letter-spacing:.26em;text-transform:uppercase;color:var(--gold);margin-bottom:8px; } .egg-toast.show{opacity:1;transform:translate(-50%,0)} @media (prefers-reduced-motion:reduce){.page-wipe{display:none}} /* ---------- custom cursor (desktop, fine pointers only) ---------- */ @media (hover:hover) and (pointer:fine){ html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor input, html.has-cursor select, html.has-cursor textarea, html.has-cursor label{cursor:none} .cur-dot,.cur-ring{ position:fixed;top:0;left:0;z-index:10000;pointer-events:none; border-radius:50%;transform:translate(-50%,-50%); will-change:transform; } .cur-dot{width:7px;height:7px;background:var(--gold);transition:opacity .25s,width .25s,height .25s} .cur-ring{ width:36px;height:36px;border:1px solid var(--gold-soft); display:flex;align-items:center;justify-content:center; transition:width .3s cubic-bezier(.22,1,.36,1),height .3s cubic-bezier(.22,1,.36,1), border-color .3s,background .3s,opacity .25s; } .cur-ring .cur-label{ font-family:var(--label);font-size:.55rem;font-weight:600;letter-spacing:.2em; text-transform:uppercase;color:var(--green-ink);opacity:0;transition:opacity .2s; } html.cur-hover .cur-dot{opacity:0} html.cur-hover .cur-ring{width:56px;height:56px;border-color:var(--gold);background:rgba(194,163,91,.1)} html.cur-view .cur-dot{opacity:0} html.cur-view .cur-ring{width:74px;height:74px;background:var(--gold);border-color:var(--gold)} html.cur-view .cur-ring .cur-label{opacity:1} html.cur-hidden .cur-dot,html.cur-hidden .cur-ring{opacity:0} } @media (hover:none),(pointer:coarse){.cur-dot,.cur-ring{display:none}} /* ---------- ambient gold glow (follows cursor, very faint) ---------- */ .glow{ position:fixed;top:0;left:0;z-index:1;pointer-events:none; width:640px;height:640px;border-radius:50%; background:radial-gradient(circle,rgba(194,163,91,.16) 0%,transparent 62%); transform:translate(-50%,-50%);opacity:0;transition:opacity 1s ease; will-change:transform; } .glow.on{opacity:.5} @media (hover:none),(pointer:coarse){.glow{display:none}} /* ---------- header: hide on scroll + progress hairline ---------- */ .site-header{transition:transform .45s cubic-bezier(.22,1,.36,1),background .3s} .site-header.hidden{transform:translateY(-100%)} .site-header.scrolled{background:rgba(7,44,28,.92)} .scroll-progress{ position:absolute;left:0;bottom:-1px;height:1px;width:0; background:linear-gradient(90deg,var(--gold),#d3b76e);z-index:101; } /* nav link underline: animated grow from left */ .nav-links a{position:relative;border-bottom:0 !important} .nav-links a::after{ content:"";position:absolute;left:0;bottom:0;height:1px;width:100%; background:var(--gold);transform:scaleX(0);transform-origin:right; transition:transform .35s cubic-bezier(.22,1,.36,1); } .nav-links a:hover::after,.nav-links a.active::after{transform:scaleX(1);transform-origin:left} /* ---------- fullscreen overlay menu ---------- */ .nav-overlay{ position:fixed;inset:0;z-index:99;background:var(--green-ink); display:flex;flex-direction:column;justify-content:center; padding:90px 8vw 60px;visibility:hidden; clip-path:inset(0 0 100% 0); transition:clip-path .7s cubic-bezier(.76,0,.24,1),visibility 0s .7s; } .nav-overlay.open{visibility:visible;clip-path:inset(0 0 0 0);transition:clip-path .7s cubic-bezier(.76,0,.24,1)} .nav-overlay ul{list-style:none;display:flex;flex-direction:column;gap:6px} .nav-overlay li{overflow:hidden} .nav-overlay li a{ display:flex;align-items:baseline;gap:18px; font-family:var(--serif);font-size:clamp(2rem,7vw,3.6rem);font-weight:600; color:var(--ivory);padding:8px 0;line-height:1.15; transform:translateY(110%);transition:transform .7s cubic-bezier(.22,1,.36,1),color .3s; } .nav-overlay.open li a{transform:none} .nav-overlay li a:hover{color:var(--gold);font-style:italic} .nav-overlay li a .idx{ font-family:var(--serif);font-style:italic;font-size:1rem;color:var(--gold); letter-spacing:.06em;flex:none; } .nav-overlay .ov-foot{ margin-top:48px;padding-top:26px;border-top:1px solid rgba(244,239,230,.12); display:flex;gap:30px;flex-wrap:wrap; font-family:var(--label);font-size:.8rem;letter-spacing:.12em;text-transform:uppercase; color:var(--ivory-faint);opacity:0;transform:translateY(16px); transition:opacity .6s ease .35s,transform .6s cubic-bezier(.22,1,.36,1) .35s; } .nav-overlay.open .ov-foot{opacity:1;transform:none} .nav-overlay .ov-foot a:hover{color:var(--gold)} /* stagger the links */ .nav-overlay li:nth-child(1) a{transition-delay:.08s} .nav-overlay li:nth-child(2) a{transition-delay:.14s} .nav-overlay li:nth-child(3) a{transition-delay:.2s} .nav-overlay li:nth-child(4) a{transition-delay:.26s} .nav-overlay li:nth-child(5) a{transition-delay:.32s} .nav-overlay:not(.open) li a{transition-delay:0s} /* hamburger is now visible at all sizes, morphs to X */ .menu-toggle{display:flex;z-index:102;position:relative} .menu-toggle span{transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .25s} html.menu-open .menu-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)} html.menu-open .menu-toggle span:nth-child(2){opacity:0} html.menu-open .menu-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} html.menu-open body{overflow:hidden} @media (min-width:721px){ .menu-toggle{margin-left:22px} } /* ---------- masked headline reveal (word split) ---------- */ .split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em} .split .wi{display:inline-block;transform:translateY(115%);transition:transform .9s cubic-bezier(.22,1,.36,1)} .split.in .wi{transform:none} /* soft reveal upgrade: gentle blur-out + stagger via --d */ .reveal{ opacity:0;transform:translateY(30px);filter:blur(6px); transition:opacity .9s ease var(--d,0s),transform .9s cubic-bezier(.22,1,.36,1) var(--d,0s),filter .9s ease var(--d,0s); } .reveal.in{opacity:1;transform:none;filter:none} /* ---------- press marquee ---------- */ .press .container{display:block;text-align:center;padding-top:30px;padding-bottom:30px} .press .plabel{display:block;margin-bottom:18px} .marquee{overflow:hidden;position:relative; -webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent); } .marquee-track{ display:inline-flex;align-items:center;gap:56px;white-space:nowrap; animation:mgpScroll 30s linear infinite;padding-right:56px;will-change:transform; } .marquee:hover .marquee-track{animation-play-state:paused} @keyframes mgpScroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} .marquee-track span{font-family:var(--serif);font-size:1.15rem;letter-spacing:.06em;color:var(--ivory-dim);transition:color .3s} .marquee-track span.sans{font-family:var(--label);font-weight:700;letter-spacing:.12em;font-size:1rem} .marquee-track span:hover{color:var(--gold)} .marquee-track i{font-style:normal;color:var(--gold);font-size:.7rem} /* ---------- parallax helpers ---------- */ .hero-video{will-change:transform} .case-media{overflow:hidden} .case-media img{transform:translateY(var(--py,0)) scale(1.1);transition:transform .1s linear} .case:hover .case-media img{transform:translateY(var(--py,0)) scale(1.14)} .founder-media{overflow:hidden} .founder-media img{transform:translateY(var(--py,0)) scale(1.08)} /* ---------- micro-interactions ---------- */ /* gold sheen sweep on primary buttons */ .btn{position:relative;overflow:hidden;will-change:transform} .btn-primary::before{ content:"";position:absolute;top:0;left:-80%;width:50%;height:100%; background:linear-gradient(105deg,transparent,rgba(255,255,255,.35),transparent); transform:skewX(-20deg);transition:left .6s ease; } .btn-primary:hover::before{left:130%} .btn-primary:hover{box-shadow:0 8px 30px rgba(194,163,91,.25)} .btn-ghost:hover{box-shadow:0 6px 24px rgba(0,0,0,.18)} /* number counters get tabular figures so they don't jiggle */ .result .num,.hero-panel .k,.case .facts div span{font-variant-numeric:tabular-nums} /* service cards: gold corner tick draws in on hover */ .service::after{ content:"";position:absolute;top:0;right:0;width:0;height:0; border-top:1px solid var(--gold);border-right:1px solid var(--gold); transition:width .4s cubic-bezier(.22,1,.36,1),height .4s cubic-bezier(.22,1,.36,1); } .service:hover::after{width:44px;height:44px} /* selection color */ ::selection{background:var(--gold);color:var(--green-ink)} /* ---------- reduced motion: switch it all off ---------- */ @media (prefers-reduced-motion:reduce){ .preloader{display:none} html.is-loading body{overflow:auto} body{animation:none} .reveal,.split .wi{opacity:1 !important;transform:none !important;filter:none !important;transition:none !important} .marquee-track{animation:none} .cur-dot,.cur-ring,.glow{display:none !important} html.has-cursor,html.has-cursor a,html.has-cursor button{cursor:auto} .case-media img,.founder-media img,.hero-video{transform:none !important} } /* mobile: keep the theater lean */ @media (max-width:720px){ .nav-overlay{padding:90px 28px 40px} .glow{display:none} }