/* UpRooted motion layer. Loaded after style.css; only active when motion.js adds html.motion. */
:root{--ease:cubic-bezier(.22,.8,.24,1);--ease-soft:cubic-bezier(.45,.05,.25,1)}

/* ---------- Scroll progress + header ---------- */
.scroll-progress{position:fixed;top:0;left:0;height:2px;width:100%;background:var(--gold);transform:scaleX(0);transform-origin:0 50%;z-index:60;pointer-events:none}
.motion .site-header{transition:transform .5s var(--ease),background .4s ease,height .4s var(--ease)}
.motion .site-header:not(.site-header--overlay){position:sticky;top:0}
.motion .site-header--overlay.is-stuck{position:fixed;background:rgba(25,39,30,.88)}
.motion .site-header.is-hidden{transform:translateY(-100%)}
.motion .site-header.is-stuck .mobile-nav{top:100%}
.motion .brand-mark{transition:transform .8s var(--ease)}
.motion .brand:hover .brand-mark{transform:rotate(-14deg) scale(1.06)}
.motion .nav a:not(.nav-cta){position:relative}
.motion .nav a:not(.nav-cta)::after{content:'';position:absolute;left:0;right:0;bottom:-6px;height:1px;background:#E8D0A9;transform:scaleX(0);transform-origin:right;transition:transform .45s var(--ease)}
.motion .nav a:not(.nav-cta):hover::after,.motion .nav a[aria-current="page"]::after{transform:scaleX(1);transform-origin:left}
.motion .nav-cta{transition:background .3s ease,color .3s ease,border-color .3s ease}
.motion .nav-cta:hover{background:var(--ivory);color:var(--deep);border-color:var(--ivory)}

/* ---------- Generic reveal ---------- */
.motion .rv{opacity:0;translate:0 34px;transition:opacity 1s var(--ease),translate 1.1s var(--ease);transition-delay:var(--d,0s)}
.motion .rv.in{opacity:1;translate:0 0}
.motion .rv-fade{opacity:0;transition:opacity 1.4s ease var(--d,0s)}
.motion .rv-fade.in{opacity:1}
.motion .rv-left{opacity:0;translate:-30px 0;filter:blur(6px);transition:opacity .9s var(--ease),translate 1s var(--ease),filter .9s ease;transition-delay:var(--d,0s)}
.motion .rv-left.in{opacity:1;translate:0 0;filter:blur(0)}

/* Line-by-line headline reveal */
.ln{display:block;overflow:hidden;padding:0 .08em .12em;margin:0 -.08em -.12em}
.ln>span{display:inline-block}
.motion .lines .ln>span{translate:0 110%;transition:translate 1.15s var(--ease);transition-delay:calc(var(--d,0s) + var(--i,0) * .11s)}
.motion .lines.in .ln>span{translate:0 0}

/* Image curtain reveal */
.motion .curtain{clip-path:inset(100% 0 0 0);transition:clip-path 1.4s var(--ease) var(--d,0s)}
.motion .curtain img{scale:1.22;transition:scale 2s var(--ease) var(--d,0s)}
.motion .curtain.in{clip-path:inset(0 0 0 0)}
.motion .curtain.in img{scale:1}

/* Short decorative rules draw in */
.motion .short-rule,.motion .mind-line{transform:scaleX(0);transform-origin:left;transition:transform 1.2s var(--ease) .35s}
.motion .short-rule{transform-origin:center}
.motion .in .short-rule,.motion .in .mind-line,.motion .short-rule.in{transform:scaleX(1)}

/* ---------- Hero ---------- */
.motion .home-hero .hero-photo{animation:kenburns 2.6s var(--ease) both,breathe 22s ease-in-out 2.6s infinite alternate;will-change:transform}
@keyframes kenburns{from{opacity:0;transform:scale(1.14)}to{opacity:1;transform:scale(1.02)}}
@keyframes breathe{from{transform:scale(1.02)}to{transform:scale(1.08) translateX(-1%)}}
.motion .hero-wash{animation:fadein 1.6s ease both}
@keyframes fadein{from{opacity:0}to{opacity:1}}
.hero-dust{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1}
.motion .hero-inner{z-index:2}
.motion .hero-copy>.eyebrow,.motion .hero-summary,.motion .hero-copy>.button{opacity:0;animation:rise 1.1s var(--ease) both}
.motion .hero-copy>.eyebrow{animation-delay:.35s}
.motion .hero-summary{animation-delay:1.05s}
.motion .hero-copy>.button{animation-delay:1.25s}
@keyframes rise{from{opacity:0;transform:translateY(26px)}to{opacity:1;transform:none}}
.motion .hero-seal{opacity:0;animation:rise 1.2s var(--ease) 1.5s both,float 7s ease-in-out 2.7s infinite}
.motion .hero-seal img{animation:spin 60s linear infinite}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}
@keyframes spin{to{transform:rotate(360deg)}}
.scroll-cue{position:absolute;left:50%;bottom:26px;z-index:3;width:1px;height:54px;background:rgba(255,253,246,.22);overflow:hidden;translate:-50% 0}
.scroll-cue::after{content:'';position:absolute;left:0;top:-50%;width:1px;height:50%;background:var(--gold);animation:drip 2.2s var(--ease-soft) infinite}
@keyframes drip{0%{top:-50%}100%{top:100%}}

/* ---------- Marquee ---------- */
.marquee{background:var(--ivory);border-block:1px solid var(--line);overflow:hidden;padding:22px 0;white-space:nowrap;position:relative}
.marquee--dark{background:var(--deep);border-color:rgba(255,255,255,.12);color:var(--ivory)}
.marquee-track{display:inline-flex;animation:marquee 46s linear infinite}
.marquee:hover .marquee-track{animation-play-state:paused}
.marquee-track span{font-family:'Playfair Display',Georgia,serif;font-size:clamp(1.5rem,2.6vw,2.3rem);font-style:italic;color:var(--deep);padding-right:.5em;letter-spacing:-.01em}
.marquee--dark .marquee-track span{color:#E8D6BA}
.marquee-track i{font-style:normal;display:inline-block;width:.55em;height:.55em;margin:0 .9em .1em;vertical-align:middle;background:url('/assets/root-mark.png') center/contain no-repeat;opacity:.7}
.marquee--dark .marquee-track i{filter:brightness(0) invert(1)}
@keyframes marquee{to{transform:translateX(-50%)}}

/* ---------- Cards ---------- */
.motion .mind-card,.motion .offer-card,.motion .framework-grid article,.motion .journal-card{transition:opacity 1s var(--ease),translate 1.1s var(--ease),box-shadow .5s ease,background-color .5s ease;transition-delay:var(--d,0s)}
.motion .mind-card.in:hover,.motion .offer-card.in:hover,.motion .framework-grid article.in:hover,.motion .journal-card.in:hover{translate:0 -8px;box-shadow:0 28px 50px -22px rgba(39,59,48,.35);transition-delay:0s}
.motion .mind-card:hover .mind-line{transform:scaleX(2.2);transition-delay:0s}
.motion .mind-card h3,.motion .offer-card h3{transition:translate .6s var(--ease)}
.motion .mind-card:hover h3,.motion .offer-card:hover h3{translate:6px 0}
.motion .card-number{display:inline-block;transition:letter-spacing .6s var(--ease)}
.motion article:hover>.card-number,.motion a:hover>.card-number{letter-spacing:.26em}
.motion .mind-card::after{content:'';position:absolute;right:-40px;top:-40px;width:150px;height:150px;border-radius:50%;background:radial-gradient(circle,rgba(212,175,122,.28),transparent 70%);transition:transform 1.2s var(--ease);transform:scale(.6)}
.motion .mind-card:hover::after{transform:scale(1.6)}

/* Text links + buttons */
.motion .text-link{border-bottom:0;background:linear-gradient(currentColor,currentColor) 0 100%/100% 1px no-repeat;transition:background-size .5s var(--ease),color .3s ease}
.motion .text-link::after{content:'→';display:inline-block;margin-left:.45em;transition:transform .45s var(--ease)}
.motion .text-link:hover{background-size:0 1px;background-position:100% 100%}
.motion .text-link:hover::after{transform:translateX(5px)}
.motion .button{position:relative;overflow:hidden;isolation:isolate}
.motion .button::before{content:'';position:absolute;inset:0;z-index:-1;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:transform .9s var(--ease)}
.motion .button:hover::before{transform:translateX(120%)}
.motion .button::after{content:'→';margin-left:0;max-width:0;opacity:0;overflow:hidden;transition:max-width .45s var(--ease),margin .45s var(--ease),opacity .3s ease}
.motion .button:hover::after{max-width:1.2em;margin-left:.6em;opacity:1}

/* ---------- Proof strip ---------- */
.motion .proof-grid strong{font-variant-numeric:tabular-nums}

/* ---------- Story panel + images with parallax ---------- */
.motion .story-panel>img,.motion .featured-image>img{scale:1.16;will-change:transform}
.motion .story-copy{transition:opacity 1.2s var(--ease),translate 1.2s var(--ease),backdrop-filter 1.2s ease}
.motion .featured-image>img{transition:scale 1.4s var(--ease),filter .8s ease}
.motion .featured-image:hover>img{scale:1.22;filter:saturate(1) brightness(.78)}
.motion .featured-image strong{transition:translate .8s var(--ease)}
.motion .featured-image:hover strong{translate:0 -6px}
.motion .workshop-image img,.motion .about-photo img{will-change:transform}
.motion .journal-preview-grid img{transition:transform 1.2s var(--ease)}
.motion .journal-preview-grid a:first-child:hover img{transform:scale(1.07)}
.motion .about-photo-tag{opacity:0;translate:0 14px;transition:opacity .8s ease 1.1s,translate .8s var(--ease) 1.1s}
.motion .about-photo.in .about-photo-tag{opacity:1;translate:0 0}

/* ---------- Aspiration + founder ---------- */
.motion .aspiration-inner h2 em{background:linear-gradient(var(--gold),var(--gold)) 0 92%/0 2px no-repeat;transition:background-size 1.2s var(--ease) .7s}
.motion .aspiration-inner h2.in em{background-size:100% 2px}
.founder-statement .w{opacity:.14;transition:opacity .35s ease}
.founder-statement .w.lit{opacity:1}
.motion .founder-attribution img{transition:transform .8s var(--ease)}
.motion .founder-attribution:hover img{transform:scale(1.1) rotate(-4deg)}

/* ---------- Closing banner, footer, inner heroes ---------- */
.motion .closing-banner{animation:pan 40s ease-in-out infinite alternate}
@keyframes pan{from{background-position:center 30%}to{background-position:center 70%}}
.motion .footer-mark{animation:sway 9s ease-in-out infinite;transform-origin:50% 90%}
@keyframes sway{0%,100%{transform:rotate(-5deg)}50%{transform:rotate(5deg)}}
.motion .inner-hero h1+p,.motion .inner-hero-grid>div:first-child>.eyebrow,.motion .inner-hero-grid>div:first-child>.button{opacity:0;animation:rise 1.1s var(--ease) both}
.motion .inner-hero-grid>div:first-child>.eyebrow{animation-delay:.2s}
.motion .inner-hero h1+p{animation-delay:.85s}
.motion .inner-hero-grid>div:first-child>.button{animation-delay:1.05s}
.motion .inner-hero-art,.motion .explore-art,.motion .journal-hero-art{opacity:0;animation:rise 1.4s var(--ease) .5s both}
.motion .inner-hero-art img{animation:float 7s ease-in-out infinite}
.motion .explore-art img{animation:spin 90s linear infinite}
.motion .journal-hero-art img{animation:breathe2 18s ease-in-out infinite alternate}
@keyframes breathe2{from{transform:scale(1)}to{transform:scale(1.08)}}
.motion .inner-hero--booking,.motion .inner-hero--explore{animation:pan 36s ease-in-out infinite alternate}
.motion .detail-row{transition:opacity 1s var(--ease),translate 1.1s var(--ease),background-color .5s ease,padding .5s var(--ease)}
.motion .detail-row.in:hover{background-color:rgba(168,189,176,.14);padding-inline:18px}
.motion .detail-index{transition:translate .6s var(--ease),color .4s ease}
.motion .detail-row:hover .detail-index{translate:0 -4px;color:var(--gold)}
.motion .process-list>div span{transition:translate .5s var(--ease)}
.motion .process-list>div:hover span{translate:6px 0}

/* ---------- Reduced motion: show everything, move nothing ---------- */
@media (prefers-reduced-motion:reduce){
  .motion *,.motion *::before,.motion *::after{animation:none!important;transition:none!important}
  .motion .rv,.motion .rv-left,.motion .rv-fade,.motion .lines .ln>span,.motion .curtain,.motion .curtain img{opacity:1!important;translate:none!important;filter:none!important;clip-path:none!important;scale:1!important}
  .motion .hero-copy>*,.motion .hero-seal,.motion .inner-hero *{opacity:1!important}
  .founder-statement .w{opacity:1}
  .marquee-track{transform:none}
  .hero-dust,.scroll-cue{display:none}
}