/* ============================================================
   SHALAW KOY — MOTION LAYER (cinematic, GPU-only, reduced-motion safe)
   ============================================================ */

.progress{position:fixed;inset-block-start:0;inset-inline-start:0;height:2px;width:100%;transform:scaleX(0);transform-origin:left;background:linear-gradient(90deg,var(--gold-deep),var(--gold-hi));z-index:70;will-change:transform}
[dir="rtl"] .progress{transform-origin:right}

/* ---- HERO cinematic entrance ---- */
.hero__bg img{will-change:transform,filter;transform:scale(1.12);filter:grayscale(.6) contrast(1.05) brightness(.7)}
.hero.lit .hero__bg img{transform:scale(1.04);filter:grayscale(.3) contrast(1.05) brightness(1);transition:transform 2.4s var(--ease),filter 1.8s ease}

.hero__name{display:block}
.heroline{display:block;overflow:hidden;line-height:.82}
.heroline > span{display:inline-block;transform:translateY(102%);will-change:transform}
.hero.lit .heroline:nth-child(1) > span{transform:none;transition:transform 1s var(--ease) .25s}
.hero.lit .heroline:nth-child(2) > span{transform:none;transition:transform 1s var(--ease) .42s}

.hero__role,.hero__pos,.hero__cta,.hero__eco{opacity:0;transform:translateY(20px);will-change:transform,opacity}
.hero.lit .hero__role{opacity:1;transform:none;transition:.8s var(--ease) .6s}
.hero.lit .hero__pos{opacity:1;transform:none;transition:.8s var(--ease) .72s}
.hero.lit .hero__cta{opacity:1;transform:none;transition:.8s var(--ease) .84s}
.hero.lit .hero__eco{opacity:1;transform:none;transition:.8s var(--ease) .96s}
.scrollcue{opacity:0}
.hero.lit .scrollcue{opacity:1;transition:opacity 1s ease 1.3s;animation:cuePulse 2.4s ease-in-out 1.6s infinite}
@keyframes cuePulse{0%,100%{opacity:.35}50%{opacity:1}}

.hero__bg{will-change:transform}
.pxy{will-change:transform}

/* ---- staggered reveal ---- */
.rv{opacity:0;transform:translateY(30px);will-change:transform,opacity;transition:opacity .8s var(--ease),transform .8s var(--ease)}
.rv.in{opacity:1;transform:none}
.stagger > *{opacity:0;transform:translateY(26px);will-change:transform,opacity}
.stagger.in > *{opacity:1;transform:none;transition:opacity .7s var(--ease),transform .7s var(--ease)}
.stagger.in > *:nth-child(1){transition-delay:.04s}
.stagger.in > *:nth-child(2){transition-delay:.10s}
.stagger.in > *:nth-child(3){transition-delay:.16s}
.stagger.in > *:nth-child(4){transition-delay:.22s}
.stagger.in > *:nth-child(5){transition-delay:.28s}
.stagger.in > *:nth-child(6){transition-delay:.34s}
.stagger.in > *:nth-child(7){transition-delay:.40s}
.stagger.in > *:nth-child(8){transition-delay:.46s}
.stagger.in > *:nth-child(n+9){transition-delay:.52s}

.kicker::before{transform:scaleX(0);transform-origin:inline-start;transition:transform .7s var(--ease)}
.rv.in .kicker::before,.kicker.in::before{transform:scaleX(1)}

.d1,.d2{clip-path:inset(0 0 102% 0);transition:clip-path 1s var(--ease)}
.rv.in .d1,.rv.in .d2,.d1.in,.d2.in{clip-path:inset(0 0 -10% 0)}

.stat__v,.reach__big{font-variant-numeric:tabular-nums}

/* ---- magnetic button ---- */
.btn{will-change:transform}
.btn--gold{position:relative;overflow:hidden}
.btn--gold::after{content:"";position:absolute;inset:0;background:linear-gradient(120deg,transparent 30%,rgba(255,255,255,.35) 50%,transparent 70%);transform:translateX(-120%);transition:none}
.btn--gold:hover::after{transform:translateX(120%);transition:transform .7s ease}

/* ---- custom cursor ---- */
@media (hover:hover) and (pointer:fine){
  .cursor{position:fixed;top:0;left:0;width:34px;height:34px;border:1.5px solid var(--gold);border-radius:50%;pointer-events:none;z-index:90;transform:translate(-50%,-50%);transition:width .25s,height .25s,background .25s,border-color .25s,opacity .3s;mix-blend-mode:difference;opacity:0}
  .cursor.on{opacity:1}
  .cursor.grow{width:64px;height:64px;background:rgba(79,209,232,.15);border-color:var(--gold-hi)}
  .cursor__dot{position:fixed;top:0;left:0;width:5px;height:5px;background:var(--gold);border-radius:50%;pointer-events:none;z-index:91;transform:translate(-50%,-50%);opacity:0}
  .cursor__dot.on{opacity:1}
  body.has-cursor{cursor:none}
  body.has-cursor a,body.has-cursor button{cursor:none}
}

/* ---- gallery ---- */
.gal a{cursor:pointer}
.gal a::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(79,209,232,.18),transparent 70%);opacity:0;transition:opacity .4s}
.gal a:hover::after{opacity:1}

.lightbox{position:fixed;inset:0;z-index:100;background:rgba(6,6,6,.96);display:flex;align-items:center;justify-content:center;opacity:0;pointer-events:none;transition:opacity .4s ease;padding:4vw}
.lightbox.open{opacity:1;pointer-events:auto}
.lightbox img{max-width:92vw;max-height:86vh;object-fit:contain;transform:scale(.94);transition:transform .5s var(--ease);box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lightbox.open img{transform:scale(1)}
.lightbox__x{position:absolute;top:3vh;inset-inline-end:4vw;font-family:var(--display);font-size:2rem;color:var(--white);opacity:.7;transition:opacity .2s}
.lightbox__x:hover{opacity:1}
.lightbox__nav{position:absolute;top:50%;transform:translateY(-50%);font-family:var(--display);font-size:2.4rem;color:var(--white);opacity:.6;transition:opacity .2s;padding:1rem}
.lightbox__nav:hover{opacity:1}
.lightbox__prev{inset-inline-start:1vw}.lightbox__next{inset-inline-end:1vw}
.lightbox__count{position:absolute;bottom:3vh;left:50%;transform:translateX(-50%);font-family:var(--display);letter-spacing:.1em;color:var(--dim);font-size:.9rem}

/* ---- press marquee ---- */
.marquee{overflow:hidden;position:relative;border-block:1px solid var(--line-faint);padding-block:1.2rem;margin-block-start:1.5rem;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;gap:3rem;width:max-content;animation:scroll-x 26s linear infinite;will-change:transform}
.marquee:hover .marquee__track{animation-play-state:paused}
.marquee__item{font-family:var(--display);text-transform:uppercase;letter-spacing:.14em;font-size:1.3rem;color:var(--dim);display:flex;align-items:center;gap:3rem;white-space:nowrap}
.marquee__item::after{content:"✦";color:var(--gold)}
@keyframes scroll-x{to{transform:translateX(-50%)}}
[dir="rtl"] .marquee__track{animation-direction:reverse}

.reach__row .reach__fill{transition:transform 1.1s var(--ease)}
.reach__row:nth-child(1) .reach__fill{transition-delay:.05s}
.reach__row:nth-child(2) .reach__fill{transition-delay:.13s}
.reach__row:nth-child(3) .reach__fill{transition-delay:.21s}
.reach__row:nth-child(4) .reach__fill{transition-delay:.29s}
.reach__row:nth-child(5) .reach__fill{transition-delay:.37s}
.reach__row:nth-child(6) .reach__fill{transition-delay:.45s}
.reach__row:nth-child(7) .reach__fill{transition-delay:.53s}
.reach__row:nth-child(8) .reach__fill{transition-delay:.61s}
.reach__row:nth-child(9) .reach__fill{transition-delay:.69s}

.vcard{will-change:transform}
.vcard:hover{transform:translateY(-6px)}

.nav{transition:background .3s,border-color .3s,backdrop-filter .3s,transform .4s var(--ease)}
.nav.hide{transform:translateY(-100%)}

@media (prefers-reduced-motion:reduce){
  .progress,.cursor,.cursor__dot{display:none!important}
  .hero__bg img{transform:none!important;filter:grayscale(.3) contrast(1.05)!important}
  .heroline > span,.hero__role,.hero__pos,.hero__cta,.hero__eco,.scrollcue{opacity:1!important;transform:none!important}
  .rv,.stagger > *{opacity:1!important;transform:none!important;transition:none!important}
  .d1,.d2{clip-path:none!important}
  .kicker::before{transform:scaleX(1)!important}
  .marquee__track{animation:none!important}
  .btn,.vcard{transition:none!important}
  .vcard:hover{transform:none!important}
  body.has-cursor{cursor:auto!important}
}