/* ============ Motion layer — alifmeherab.com (2026-09-26) ============ */
:root{
 --ease-out:cubic-bezier(.16,1,.3,1);
 --ease-soft:cubic-bezier(.22,.61,.36,1);
 --shadow-card:0 1px 2px #3023340a,0 10px 28px -8px #30233421,0 34px 70px -28px #735b7740;
 --shadow-card-hover:0 2px 4px #3023340d,0 16px 36px -10px #3023342b,0 44px 90px -30px #735b7752;
 --glass:#fffaf5d9;
}

/* ---------- Moving gradient mesh background ---------- */
body{background:#FAF7F2}
.ambient-bg{position:fixed;inset:0;z-index:0;overflow:hidden;pointer-events:none;background:
 radial-gradient(120% 90% at 0% 0%,#fff3e8 0%,transparent 55%),
 radial-gradient(110% 80% at 100% 100%,#f3ebf4 0%,transparent 60%),#FAF7F2}
.ambient-bg i{position:absolute;display:block;border-radius:50%;filter:blur(70px);opacity:.9;will-change:transform;
 width:62vmax;height:62vmax;background:radial-gradient(circle at 50% 50%,var(--c) 0%,transparent 68%);
 animation:mesh-a 34s var(--ease-soft) infinite alternate}
.ambient-bg i:nth-child(1){--c:#f6711238;left:-18vmax;top:-20vmax}
.ambient-bg i:nth-child(2){--c:#735b7730;right:-22vmax;top:18vh;animation-name:mesh-b;animation-duration:40s}
.ambient-bg i:nth-child(3){--c:#ffb27a4d;left:18vw;bottom:-28vmax;animation-name:mesh-c;animation-duration:30s}
.ambient-bg i:nth-child(4){--c:#f4c1ae55;left:40vw;top:-10vmax;width:48vmax;height:48vmax;animation-name:mesh-b;animation-duration:44s;animation-delay:-12s}
.ambient-bg i:nth-child(5){--c:#e9d9ee66;left:-14vmax;bottom:-16vmax;width:52vmax;height:52vmax;animation-name:mesh-a;animation-duration:38s;animation-delay:-20s}
.ambient-bg i:nth-child(6){--c:#f671121f;right:8vw;bottom:10vh;width:40vmax;height:40vmax;animation-name:mesh-c;animation-duration:28s;animation-delay:-8s}
@keyframes mesh-a{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(18vw,12vh,0) scale(1.18)}100%{transform:translate3d(6vw,28vh,0) scale(.92)}}
@keyframes mesh-b{0%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-20vw,-10vh,0) scale(.9)}100%{transform:translate3d(-8vw,22vh,0) scale(1.15)}}
@keyframes mesh-c{0%{transform:translate3d(0,0,0) scale(.95)}50%{transform:translate3d(14vw,-22vh,0) scale(1.2)}100%{transform:translate3d(-16vw,-8vh,0) scale(1)}}
.ambient-paused .ambient-bg i,.page-hidden .ambient-bg i{animation-play-state:paused}

/* ---------- Depth: shadows behind the boxes for visibility ---------- */
.intro>div:last-child,.service-list,.statement,.local,.process article,#faq details,.board{
 box-shadow:var(--shadow-card);
 transition:box-shadow .5s var(--ease-out),transform .5s var(--ease-out),background-color .4s ease}
.intro>div:last-child{background:linear-gradient(135deg,#fff3e9f0,#f4ecf5ef);border-color:#fff}
.service-list{background:var(--glass);border-color:#fff;backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1)}
.statement{background:linear-gradient(120deg,#fff1e5f2,#efe6f2f2)}
.local{background:linear-gradient(125deg,#ffece0f2 0%,#f3e8f1f2 65%,#efe9f6f2 100%)}
.process article{background:var(--glass);border-color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.process article:nth-child(2){background:#f5eef7e6}.process article:nth-child(3){background:#fff2e7e6}
#faq details{background:var(--glass);border-color:#fff;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.process article:hover,#faq details:hover{box-shadow:var(--shadow-card-hover);transform:translateY(-4px)}
#faq details[open]{box-shadow:var(--shadow-card-hover)}
header nav{box-shadow:0 1px 2px #3023340a,0 12px 40px -12px #3023342e;transition:height .5s var(--ease-out),box-shadow .5s var(--ease-out),background-color .5s ease}
header.is-scrolled nav{background:#fffaf3e6;box-shadow:0 1px 2px #3023340d,0 18px 50px -16px #30233438}
.clients{border-bottom-color:#e6dce880}
.logo-toggle,.ambient-toggle{box-shadow:0 6px 18px -8px #3023342e}

/* ---------- Smooth micro-interactions ---------- */
.button{transition:transform .45s var(--ease-out),box-shadow .45s var(--ease-out),background-color .3s ease;box-shadow:0 10px 26px -12px #30233452}
.button:hover{transform:translateY(-3px);box-shadow:0 18px 36px -14px #30233466}
.button span{display:inline-block;transition:transform .45s var(--ease-out)}
.button:hover span{transform:translate(3px,-3px)}
.links a{transition:color .3s ease,background-color .3s ease,transform .4s var(--ease-out)}
.links a:last-child:hover{transform:translateY(-2px)}
summary{transition:color .3s ease}
.service-body,#faq details p{animation:m-open .5s var(--ease-out)}
@keyframes m-open{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.logo-track{animation-duration:60s}
.logo-wall img{transition:opacity .4s ease,filter .4s ease,transform .5s var(--ease-out)}
.logo-wall a:hover img{filter:grayscale(0);opacity:1;transform:scale(1.06)}

/* ---------- Headline letter spacing (less cramped) ---------- */
h1,h2,h3,summary,.board-title{letter-spacing:-.012em!important}
.hero h1{letter-spacing:-.018em!important;line-height:1.02}
.contact h2,.statement h2{letter-spacing:-.015em!important}
h2{line-height:1.08}

/* ---------- Scroll reveal ---------- */
/* retire the older container fade; the new system is finer-grained */
.m-on .reveal{opacity:1!important;transform:none!important;transition:none!important}
.m-on [data-m]{opacity:0;transform:translate3d(0,32px,0);filter:blur(6px);
 transition:opacity .9s var(--ease-out) var(--d,0s),transform 1s var(--ease-out) var(--d,0s),filter .9s var(--ease-out) var(--d,0s)}
.m-on [data-m=scale]{transform:translate3d(0,40px,0) scale(.965)}
.m-on [data-m=left]{transform:translate3d(-36px,0,0)}
.m-on [data-m].m-in{opacity:1;transform:none;filter:none}
.m-on [data-m].m-done{will-change:auto;transition:box-shadow .5s var(--ease-out),transform .5s var(--ease-out),background-color .4s ease}
.m-on .process article.m-in:hover,.m-on #faq details.m-in:hover{transform:translateY(-4px)}
/* word-by-word headline reveal */
.m-w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.12em;margin-bottom:-.12em}
.m-w>span{display:inline-block;transform:translate3d(0,110%,0);opacity:0;
 transition:transform 1s var(--ease-out) calc(var(--d,0s) + var(--i,0) * 45ms),opacity .7s ease calc(var(--d,0s) + var(--i,0) * 45ms)}
.m-in .m-w>span,.m-words.m-in .m-w>span{transform:none;opacity:1}
.hero h1 .m-w>span{transition-duration:1.15s,.8s}

/* ---------- Back to top: the direction mark pointing up ---------- */
.to-top{position:fixed;right:22px;bottom:78px;z-index:30;width:64px;height:64px;padding:0;border:1px solid #fff;border-radius:50%;
 background:#fffaf5e6;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);cursor:pointer;
 box-shadow:0 2px 4px #3023340f,0 16px 36px -10px #30233440;display:grid;place-items:center;
 opacity:0;visibility:hidden;transform:translate3d(0,24px,0) scale(.7);
 transition:opacity .6s var(--ease-out),transform .7s var(--ease-out),visibility 0s linear .7s,box-shadow .4s ease}
.to-top.show{opacity:1;visibility:visible;transform:none;transition:opacity .6s var(--ease-out),transform .7s var(--ease-out),visibility 0s,box-shadow .4s ease}
.to-top img{width:30px;height:auto;transform:rotate(0deg);transition:transform 1.1s var(--ease-out) .15s}
.to-top.show img{transform:rotate(-135deg)} /* square corner turns from bottom-right to point up */
.to-top .tt-nudge{display:grid;place-items:center}
.to-top.show .tt-nudge{animation:tt-nudge 1.8s var(--ease-soft) 1.2s infinite}
@keyframes tt-nudge{0%,100%{transform:translateY(2px)}45%{transform:translateY(-7px)}}
.to-top:before{content:'';position:absolute;inset:-1px;border-radius:50%;border:2px solid #f67112;opacity:0}
.to-top.show:before{animation:tt-ring 2.4s ease-out 1.4s infinite}
@keyframes tt-ring{0%{opacity:.55;transform:scale(1)}100%{opacity:0;transform:scale(1.55)}}
.to-top:after{content:'Top';position:absolute;bottom:-20px;left:50%;transform:translateX(-50%);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--plum);opacity:.85}
.to-top:hover{box-shadow:0 2px 4px #3023340f,0 22px 44px -12px #3023344d}
.to-top:hover .tt-nudge{animation-duration:1s}
.to-top.launch img{transform:rotate(-135deg) translate3d(0,0,0)}
.to-top.launch .tt-nudge{animation:tt-launch .6s var(--ease-soft) forwards}
@keyframes tt-launch{0%{transform:none}40%{transform:translateY(4px)}100%{transform:translateY(-60px);opacity:0}}

@media(max-width:700px){
 .to-top{right:12px;bottom:66px;width:54px;height:54px}.to-top img{width:25px}
 .ambient-bg i{filter:blur(50px)}
 .m-on [data-m]{transform:translate3d(0,22px,0);filter:blur(4px)}
}
@media(prefers-reduced-motion:reduce){
 .ambient-bg{display:block!important}.ambient-bg i{animation:none!important}
 .m-on [data-m],.m-w>span{opacity:1!important;transform:none!important;filter:none!important;transition:none!important}
 .to-top img{transform:rotate(-135deg)!important}
 .to-top .tt-nudge,.to-top:before{animation:none!important}
}

/* ---------- Direction scene (replaces the 3D orb) ---------- */
.dir-scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;overflow:visible;opacity:var(--fade,1);transition:opacity .4s ease}
.dir-scene .contour{fill:none;stroke:#735b77;stroke-opacity:calc(.16 - var(--k) * .018);stroke-width:1;transform-box:view-box;transform-origin:70% 52%;animation:dir-breathe calc(14s + var(--k) * 2s) ease-in-out calc(var(--k) * -1.3s) infinite alternate}
@keyframes dir-breathe{from{transform:scale(.97) rotate(-1.5deg)}to{transform:scale(1.03) rotate(1.5deg)}}
.dir-scene .dir-dots circle{fill:#735b77;opacity:.25;animation:dir-twinkle 4s ease-in-out calc(var(--k) * -.6s) infinite alternate}
@keyframes dir-twinkle{to{opacity:.06}}
.dir-route{fill:none;stroke:#735b77;stroke-opacity:.38;stroke-width:1.6;stroke-dasharray:2 7;stroke-linecap:round}
.dir-trail{fill:none;stroke:#f67112;stroke-width:3;stroke-linecap:round}
.dir-node .dot{fill:#fffaf5;stroke:#735b77;stroke-width:1.5;transition:fill .4s ease,stroke .4s ease}
.dir-node .ring{fill:none;stroke:#f67112;stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center}
.dir-node.passed .dot{fill:#f67112;stroke:#f67112}
.dir-node.here .ring{animation:dir-ring 1s ease-out}
.dir-node.end.passed .ring{animation:dir-ring 1.4s ease-out infinite}
@keyframes dir-ring{0%{opacity:.8;transform:scale(.4)}100%{opacity:0;transform:scale(2.2)}}
.dir-pin-halo{fill:#fffaf5;opacity:.9;filter:drop-shadow(0 8px 14px #30233433)}
.dir-label{font:500 10px/1 Inter,sans-serif;letter-spacing:.16em;fill:#735b77}
.board .tile{transition:box-shadow .5s cubic-bezier(.16,1,.3,1),border-color .5s ease,background-color .5s ease,scale .5s cubic-bezier(.16,1,.3,1)}
.board .tile.dir-active{border-color:#f67112;background:#fffffff2;box-shadow:0 18px 40px -12px #f6711255;scale:1.05}
.board .tile.dir-active small{color:#b04a0e}
.board.dir-ready{background:linear-gradient(125deg,#f3ecf5,#fff2e6)}
.board.dir-ready .board-center{display:none}
@media(max-width:700px){.dir-label{font-size:8px}}
@media(prefers-reduced-motion:reduce){.dir-scene .contour,.dir-scene .dir-dots circle{animation:none!important}}

/* ---------- Brand name + larger direction mark (2026-09-27) ---------- */
.amc-a-rotor{overflow:visible}
.to-top img{width:38px}
@media(max-width:700px){.to-top img{width:32px}}
footer p{line-height:1.6}
footer .footer-name{display:block;font:700 15px/1.3 Urbanist,sans-serif;letter-spacing:-.005em;color:var(--ink);margin-bottom:4px}
@media(max-width:1640px){footer{padding-right:96px}}
@media(max-width:700px){footer{padding-right:0;padding-bottom:120px}}
/* client logos: trimmed files, optically balanced sizes set inline */
.logo-wall a{width:190px}
.logo-wall img{max-width:none;max-height:none;object-fit:contain}
@media(max-width:700px){.logo-wall a{width:160px}.logo-wall img{transform:scale(.85)}}