/* Founders Hub — motion layer (Oct 2026). Loads after site.css. Everything here is switched off for visitors who ask for reduced motion. */
:root{--ease:cubic-bezier(.2,.7,.2,1);--ease-back:cubic-bezier(.34,1.56,.64,1)}

/* ---------- scroll progress + header ---------- */
.fh-progress{position:fixed;top:0;left:0;right:0;height:3px;z-index:70;pointer-events:none;transform-origin:0 50%;transform:scaleX(0);background:linear-gradient(90deg,var(--gold-deep),var(--gold),#f3dca4)}
[dir="rtl"] .fh-progress{transform-origin:100% 50%;background:linear-gradient(270deg,var(--gold-deep),var(--gold),#f3dca4)}
header.top{transition:box-shadow .35s var(--ease),background-color .35s var(--ease)}
header.top .wrap{transition:padding .35s var(--ease)}
header.top.scrolled{background:rgba(14,27,52,.9);box-shadow:0 10px 30px rgba(0,0,0,.28)}
header.top.scrolled .wrap{padding-block:8px}
.brand img{transition:transform .6s var(--ease-back)}
.brand:hover img{transform:rotate(-8deg) scale(1.08)}
nav.links a{position:relative}
nav.links a::after{content:"";position:absolute;left:0;right:0;bottom:-6px;height:2px;border-radius:2px;background:var(--gold);transform:scaleX(0);transition:transform .35s var(--ease)}
nav.links a:hover::after,nav.links a[aria-current="page"]::after{transform:scaleX(1)}

/* ---------- hero: living background ---------- */
.hero,.page-hero,.contact{position:relative;isolation:isolate;overflow:hidden}
.hero::before,.page-hero::before,.contact::before{content:"";position:absolute;inset:-25%;z-index:-1;pointer-events:none;
  background:radial-gradient(38% 34% at 18% 28%,rgba(214,176,98,.17),transparent 70%),radial-gradient(34% 40% at 82% 72%,rgba(70,104,176,.24),transparent 70%),radial-gradient(26% 26% at 60% 12%,rgba(214,176,98,.08),transparent 70%);
  animation:fh-aurora 20s ease-in-out infinite alternate}
.hero::after,.page-hero::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(rgba(214,176,98,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(214,176,98,.07) 1px,transparent 1px);background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 70% at 30% 40%,#000,transparent 75%);mask-image:radial-gradient(70% 70% at 30% 40%,#000,transparent 75%);
  animation:fh-grid 30s linear infinite}
@keyframes fh-aurora{0%{transform:translate3d(0,0,0) rotate(0deg) scale(1)}50%{transform:translate3d(3%,-2%,0) rotate(5deg) scale(1.05)}100%{transform:translate3d(-2%,3%,0) rotate(-4deg) scale(1)}}
@keyframes fh-grid{to{background-position:64px 64px,64px 64px}}

/* gold shimmer on the gold words of every headline */
.hero h1 em,.page-hero h1 em,.contact h2 em{background:linear-gradient(100deg,var(--gold) 0%,var(--gold) 38%,#f8e7b9 50%,var(--gold) 62%,var(--gold) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;animation:fh-shine 6s linear infinite}
@keyframes fh-shine{from{background-position:120% 0}to{background-position:-130% 0}}

/* hero entrance (runs once on load) */
.js-motion .hero .wrap > div:first-child > *,.js-motion .page-hero .wrap > *{opacity:0;animation:fh-rise .9s var(--ease) forwards}
.js-motion .hero .wrap > div:first-child > :nth-child(1),.js-motion .page-hero .wrap > :nth-child(1){animation-delay:.05s}
.js-motion .hero .wrap > div:first-child > :nth-child(2),.js-motion .page-hero .wrap > :nth-child(2){animation-delay:.18s}
.js-motion .hero .wrap > div:first-child > :nth-child(3),.js-motion .page-hero .wrap > :nth-child(3){animation-delay:.32s}
.js-motion .hero .wrap > div:first-child > :nth-child(4),.js-motion .page-hero .wrap > :nth-child(4){animation-delay:.46s}
.js-motion .hero .wrap > div:first-child > :nth-child(5),.js-motion .page-hero .wrap > :nth-child(5){animation-delay:.6s}
.js-motion .hero .wrap > div:first-child > :nth-child(n+6),.js-motion .page-hero .wrap > :nth-child(n+6){animation-delay:.72s}
@keyframes fh-rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.hero .facts span{display:inline-flex;align-items:center;gap:8px}
.hero .facts span::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 0 rgba(214,176,98,.6);animation:fh-dot 2.6s ease-out infinite}
.hero .facts span:nth-child(2)::before{animation-delay:.6s}.hero .facts span:nth-child(3)::before{animation-delay:1.2s}
@keyframes fh-dot{0%{box-shadow:0 0 0 0 rgba(214,176,98,.55)}70%,100%{box-shadow:0 0 0 9px rgba(214,176,98,0)}}

/* hero photo: curtain reveal, slow zoom, floating tag */
.fh-ph{position:relative;border-radius:18px;overflow:hidden;box-shadow:0 30px 60px rgba(0,0,0,.35)}
.fh-ph img{border-radius:0!important;transform-origin:60% 40%}
.js-motion .fh-ph{animation:fh-curtain 1.3s var(--ease) .25s both}
.js-motion .fh-ph img{animation:fh-kenburns 24s ease-in-out 1.4s infinite alternate}
.fh-ph::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(180deg,transparent 55%,rgba(14,27,52,.45));}
@keyframes fh-curtain{from{clip-path:inset(0 0 100% 0 round 18px);transform:scale(1.04)}to{clip-path:inset(0 0 0 0 round 18px);transform:none}}
@keyframes fh-kenburns{from{transform:scale(1)}to{transform:scale(1.12) translate3d(-1.5%,-1%,0)}}
.js-motion .hero-photo .tag{z-index:2;animation:fh-pop .7s var(--ease-back) 1.1s both,fh-float 5s ease-in-out 1.9s infinite}
@keyframes fh-pop{from{opacity:0;scale:.6}to{opacity:1;scale:1}}
@keyframes fh-float{0%,100%{translate:0 0}50%{translate:0 -10px}}

/* ---------- buttons ---------- */
.btn{position:relative;overflow:hidden;isolation:isolate;transition:transform .3s var(--ease),box-shadow .3s var(--ease),background-color .3s,color .3s,border-color .3s}
.btn:hover{transform:translateY(-2px)}
.btn:active{transform:translateY(0) scale(.98)}
.btn-gold:hover{box-shadow:0 12px 28px rgba(214,176,98,.38)}
.btn-gold::after{content:"";position:absolute;top:-10%;bottom:-10%;left:-70%;width:45%;z-index:-1;background:linear-gradient(100deg,transparent,rgba(255,255,255,.6),transparent);transform:skewX(-20deg)}
.btn-gold:hover::after{animation:fh-sheen .9s var(--ease)}
.hero .ctas .btn-gold::after,.cards-wa::after{animation:fh-sheen 1.1s var(--ease) 2s,fh-sheen-loop 6s var(--ease) 3.1s infinite}
@keyframes fh-sheen{from{left:-70%}to{left:130%}}
@keyframes fh-sheen-loop{0%,80%{left:-70%}100%{left:130%}}

/* ---------- chat button pulse ---------- */
.chat-fab{transition:transform .3s var(--ease),box-shadow .3s}
.chat-fab:hover{transform:translateY(-3px);box-shadow:0 16px 34px rgba(0,0,0,.3)}
.chat-fab .dot{position:relative}
.chat-fab .dot::after{content:"";position:absolute;inset:-5px;border-radius:50%;border:2px solid var(--gold);opacity:0;animation:fh-ring 2.8s ease-out 2s infinite}
@keyframes fh-ring{0%{opacity:.9;transform:scale(.85)}80%,100%{opacity:0;transform:scale(1.45)}}

/* ---------- scroll reveal ---------- */
.js-motion .rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease);transition-delay:var(--d,0ms);will-change:opacity,transform}
.js-motion .rv.rv-zoom{transform:scale(.94)}
.js-motion .rv.rv-side{transform:translateX(-40px)}
[dir="rtl"].js-motion .rv.rv-side{transform:translateX(40px)}
.js-motion .rv.in{opacity:1;transform:none}
/* section labels: a gold line draws in */
.eyebrow{display:inline-flex;align-items:center;gap:10px}
.eyebrow::before{content:"";width:26px;height:2px;border-radius:2px;background:currentColor;flex:none}
.js-motion .rv .eyebrow::before,.js-motion .rv.eyebrow::before{width:0;transition:width .8s var(--ease) .35s}
.js-motion .rv.in .eyebrow::before,.js-motion .rv.in.eyebrow::before{width:26px}

/* ---------- cards ---------- */
.lic,.svc,.ccard,.forms .form,.faq details{transition:transform .4s var(--ease),box-shadow .4s var(--ease),border-color .4s,background-color .4s}
.lic:hover{transform:translateY(-8px);box-shadow:0 26px 46px rgba(14,27,52,.16);border-color:rgba(214,176,98,.65)}
.lic figure{overflow:hidden}
.lic figure img{transition:transform 1s var(--ease)}
.lic:hover figure img{transform:scale(1.08)}
.svc{position:relative}
.svc::after{content:"";position:absolute;left:0;right:0;bottom:0;height:3px;background:linear-gradient(90deg,var(--gold-deep),var(--gold));transform:scaleX(0);transform-origin:0 50%;transition:transform .5s var(--ease)}
[dir="rtl"] .svc::after{transform-origin:100% 50%}
.svc:hover{background:#fbfaf6}
.svc:hover::after{transform:scaleX(1)}
.svc .ico{transition:transform .5s var(--ease-back),background-color .4s}
.svc:hover .ico{transform:rotate(-8deg) scale(1.12);background:var(--gold)}
.svc:hover .ico svg{stroke:var(--navy)}
.ccard:hover{transform:translateY(-3px);border-color:rgba(214,176,98,.55)}
.faq details:hover{border-color:rgba(214,176,98,.6)}
.faq details[open] > :not(summary){animation:fh-rise .45s var(--ease)}
.about-photo img{transition:transform 1.2s var(--ease)}
.about-photo:hover img{transform:scale(1.03)}
.js-motion .about-photo .years{animation:fh-float 6s ease-in-out infinite}

/* how it works: the line between steps fills in gold */
.js-motion .step::after{background:linear-gradient(90deg,var(--gold),var(--line));transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--ease) .35s}
[dir="rtl"].js-motion .step::after{background:linear-gradient(270deg,var(--gold),var(--line));transform-origin:100% 50%}
.js-motion .step.in::after{transform:scaleX(1)}
.js-motion .step::before{transition:transform .6s var(--ease-back) .15s,background-color .4s,color .4s}
.js-motion .step.rv:not(.in)::before{transform:scale(.4)}
.step:hover::before{background:var(--gold);color:var(--navy)}

/* ---------- client logos: endless strip ---------- */
.client-grid.is-marquee{display:block;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.client-track{display:flex;gap:14px;width:max-content;animation:fh-marquee 38s linear infinite}
.client-grid.is-marquee:hover .client-track{animation-play-state:paused}
.client-track figure{flex:none;width:230px}
[dir="rtl"] .client-track{animation-name:fh-marquee-rtl}
@keyframes fh-marquee{to{transform:translateX(calc(-50% - 7px))}}
@keyframes fh-marquee-rtl{to{transform:translateX(calc(50% + 7px))}}
@media (max-width:600px){.client-track figure{width:170px}.client-track{animation-duration:28s}}

/* ---------- reduced motion: show everything, still ---------- */
@media (prefers-reduced-motion: reduce){
  .js-motion .rv,.js-motion .hero .wrap > div:first-child > *,.js-motion .page-hero .wrap > *{opacity:1!important;transform:none!important}
  .hero h1 em,.page-hero h1 em,.contact h2 em{background:none;color:var(--gold);-webkit-text-fill-color:var(--gold)}
}

/* hover lifts must win over the finished reveal */
.js-motion .rv.in.lic:hover{transform:translateY(-8px)}
.js-motion .rv.in.ccard:hover{transform:translateY(-3px)}
.js-motion .lic.rv-done{transition:transform .25s ease-out,box-shadow .4s var(--ease),border-color .4s}