/* Interaction layer styles — alifmeherab.com (2026-09-27) */

/* ---------- Hero: portrait blended into a matching warm background ---------- */
.hero{background:radial-gradient(70% 80% at 68% 34%,#f67312 0%,#e65e0d 45%,#c24a06 100%)}
.hero:after{display:none}
.hero-shader{position:absolute;inset:0;width:100%;height:100%;z-index:-3;display:block}
.hero-photo{left:44%;z-index:-2;
 -webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 88%,rgba(0,0,0,.85) 100%),linear-gradient(180deg,#000 80%,rgba(0,0,0,.92) 100%);
 mask-image:linear-gradient(90deg,transparent 0%,#000 34%,#000 88%,rgba(0,0,0,.85) 100%);}
.hero-photo img{object-fit:cover;object-position:46% 12%;transform-origin:50% 30%;will-change:transform}
.hero-inner{will-change:transform,opacity}
.hero h1{text-shadow:0 2px 30px #8a2f0026}
@media(min-width:1500px){.hero-photo{left:46%}}
@media(max-width:1100px){.hero-photo{left:34%}}
@media(max-width:700px){
 .hero-photo{left:0;height:600px;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 97%);mask-image:linear-gradient(180deg,#000 55%,transparent 97%)}
 .hero-photo img{object-position:50% 0%}
}

/* ---------- Pinned direction board (scroll-scrub) ---------- */
.direction-feature.dir-scrub{height:230vh;padding-top:70px}
.direction-feature.dir-scrub .board{position:sticky;top:max(104px,calc(50vh - 255px));
 transform:scale(calc(.9 + .1 * min(1, var(--dir-p,0) * 6)));transform-origin:50% 40%;transition:transform .2s linear}
.direction-feature.dir-scrub .board:after{content:'Scroll to move';position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:4;
 font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--plum);opacity:calc(1 - var(--dir-p,0) * 8);pointer-events:none}
@media(max-width:700px){.direction-feature.dir-scrub{height:200vh;padding-top:35px}.direction-feature.dir-scrub .board{top:max(88px,calc(50vh - 285px))}}

/* ---------- ScrollReveal headings ---------- */
.scrub .m-w>span{transition:transform 1s cubic-bezier(.16,1,.3,1) calc(var(--d,0s) + var(--i,0) * 45ms),opacity .25s linear!important}

/* ---------- Process rail ---------- */
.proc-rail{position:relative;height:2px;background:#e6dce8;margin:0 0 26px;border-radius:2px}
.proc-fill{position:absolute;inset:0 auto 0 0;width:calc(var(--p,0) * 100%);background:linear-gradient(90deg,#f67112,#e2600a);border-radius:2px}
.proc-rail i{position:absolute;top:50%;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:#fff;border:2px solid #d9cddb;transition:border-color .4s ease,background-color .4s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.proc-rail i:nth-of-type(1){left:12.5%}.proc-rail i:nth-of-type(2){left:37.5%}.proc-rail i:nth-of-type(3){left:62.5%}.proc-rail i:nth-of-type(4){left:87.5%}
.proc-rail i.on{border-color:#f67112;background:#f67112;transform:scale(1.25)}
.process-4 article{transition:box-shadow .5s cubic-bezier(.16,1,.3,1),transform .5s cubic-bezier(.16,1,.3,1),opacity .6s ease,filter .6s ease}
.process-4 article .number{transition:color .4s ease}
.process-4 article.lit .number{color:#b04a0e}
@media(max-width:1100px){.proc-rail{display:none}}

/* ---------- Spotlight + tilt cards ---------- */
.spot{position:relative;isolation:isolate}
.spot:after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;opacity:0;transition:opacity .4s ease;
 background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),#f6711226,transparent 60%)}
.spot.spot-on:after{opacity:1}
.spot>*{position:relative;z-index:1}
.m-on .spot.m-in:not(.no-tilt),.spot:not(.no-tilt){transform:perspective(1000px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg)) translateY(var(--ty,0px))}
.spot:not(.no-tilt):hover{--ty:-4px}
.spot.spot-on{transition:transform .15s ease-out,box-shadow .5s cubic-bezier(.16,1,.3,1)!important}
.engage-grid article.featured.spot:after{background:radial-gradient(420px circle at var(--mx,50%) var(--my,50%),#f6711240,transparent 60%)}

/* ---------- Magnetic buttons ---------- */
.magnetic{transition:translate .35s cubic-bezier(.16,1,.3,1),transform .45s cubic-bezier(.16,1,.3,1),box-shadow .45s cubic-bezier(.16,1,.3,1),background-color .3s ease}

@media(prefers-reduced-motion:reduce){
 .direction-feature.dir-scrub{height:auto}.direction-feature.dir-scrub .board{position:relative;top:auto;transform:none}
 .hero-photo img,.hero-inner{transform:none!important;opacity:1!important}
}

/* ---------- Phones/tablets: lighter direction board (no per-frame blur/filters) ---------- */
@media (hover:none),(pointer:coarse),(max-width:900px){
 .board .tile{backdrop-filter:none;-webkit-backdrop-filter:none;background:#fffffff2;animation:none}
 .dir-scene .contour,.dir-scene .dir-dots circle{animation:none}
 .dir-scene{transition:opacity .25s linear}
 .dir-pin-halo{filter:none;stroke:#f6711226;stroke-width:6}
 .dir-pin{will-change:transform}
 .ambient-bg i{animation:none!important}
}