/* Motion layer: progressive enhancement. Everything is visible without JS (.js-anim is added by animations.js). */
:root{--ease:cubic-bezier(.22,1,.36,1)}

/* Scroll progress */
.scroll-progress{position:fixed;inset:0 0 auto 0;height:3px;z-index:30;transform-origin:left center;transform:scaleX(0);background:linear-gradient(90deg,var(--gold),#e0b870);pointer-events:none}
html[dir="rtl"] .scroll-progress{transform-origin:right center}

/* Header */
.site-header{transition:box-shadow .35s var(--ease),background .35s var(--ease),transform .45s var(--ease),top .35s var(--ease)}
.site-header.is-scrolled{box-shadow:0 10px 34px rgba(23,49,39,.12);background:rgba(250,247,242,.96)}
nav a:not(.nav-cta){position:relative;transition:opacity .25s}
nav a:not(.nav-cta):hover{opacity:1}
nav a:not(.nav-cta)::after{content:"";position:absolute;inset-inline:0;bottom:-6px;height:2px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--ease)}
html[dir="rtl"] nav a:not(.nav-cta)::after{transform-origin:right}
nav a:not(.nav-cta):hover::after{transform:scaleX(1)}
.nav-cta,.btn,.filter{transition:transform .3s var(--ease),background .3s,color .3s,border-color .3s,box-shadow .3s}
.nav-cta:hover,.btn:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(23,49,39,.18)}
.btn:not(.primary):hover{border-color:var(--gold)}
.filter:hover{border-color:var(--gold);transform:translateY(-1px)}

/* Hero entrance */
@keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:none}}
@keyframes sweep{from{background-position:200% 0}to{background-position:-200% 0}}
@keyframes float{0%,100%{transform:translateY(0)}50%{transform:translateY(-10px)}}
.js-anim .hero>*{opacity:0;animation:rise .9s var(--ease) forwards}
.js-anim .hero>:nth-child(1){animation-delay:.05s}
.js-anim .hero>:nth-child(2){animation-delay:.18s}
.js-anim .hero>:nth-child(3){animation-delay:.32s}
.js-anim .hero>:nth-child(4){animation-delay:.44s}
.js-anim .hero>:nth-child(5){animation-delay:.58s}
.hero h1 span{background:linear-gradient(100deg,var(--gold) 30%,#e6c58a 50%,var(--gold) 70%);background-size:200% 100%;-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;animation:sweep 7s linear infinite}
.meta div{transition:transform .35s var(--ease)}
.meta div:hover{transform:translateX(6px)}
html[dir="rtl"] .meta div:hover{transform:translateX(-6px)}

/* Scroll reveal */
.js-anim [data-reveal]{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0) * 90ms);will-change:opacity,transform}
.js-anim [data-reveal="fade"]{transform:none}
.js-anim [data-reveal="left"]{transform:translateX(-40px)}
.js-anim [data-reveal="right"]{transform:translateX(40px)}
html[dir="rtl"].js-anim [data-reveal="left"]{transform:translateX(40px)}
html[dir="rtl"].js-anim [data-reveal="right"]{transform:translateX(-40px)}
.js-anim [data-reveal].is-visible{opacity:1;transform:none;will-change:auto}

/* Project cards */
.media{transition:box-shadow .5s var(--ease),transform .5s var(--ease)}
.project-cover{transition:transform .9s var(--ease)}
.media:before{transition:transform .9s var(--ease)}
.arrow{transition:transform .45s var(--ease),background .3s,color .3s}
.project-open:hover .media{box-shadow:0 26px 50px rgba(23,49,39,.22);transform:translateY(-4px)}
.project-open:hover .project-cover{transform:scale(1.06)}
.project-open:hover .media:before{transform:scale(1.25)}
.project-open:hover .arrow{transform:rotate(45deg) scale(1.08);background:var(--gold);color:var(--cream)}
.info h3{background:linear-gradient(var(--gold),var(--gold)) 0 100%/0 2px no-repeat;transition:background-size .45s var(--ease);width:fit-content}
html[dir="rtl"] .info h3{background-position:100% 100%}
.project-open:hover .info h3{background-size:100% 2px}

/* Collaboration */
.partner-x{display:inline-block;animation:float 4s ease-in-out infinite}
.partner-brand img{transition:transform .5s var(--ease)}
.partner-lockup:hover .partner-brand img{transform:scale(1.06)}
.duo article{transition:transform .45s var(--ease),background .4s,border-color .4s}
.duo article:hover{transform:translateY(-6px);background:rgba(255,255,255,.06);border-color:rgba(190,145,77,.55)}

/* Dialog */
@keyframes dialog-in{from{opacity:0;transform:translateY(24px) scale(.97)}to{opacity:1;transform:none}}
@keyframes fade-in{from{opacity:0}to{opacity:1}}
dialog[open]{animation:dialog-in .5s var(--ease)}
dialog[open]::backdrop{animation:fade-in .4s ease}
.close{transition:transform .35s var(--ease),background .3s}
.close:hover{transform:rotate(90deg);background:var(--gold);color:var(--cream)}

/* Contact */
.contact .btn.primary{position:relative;overflow:hidden}
.contact .btn.primary::after{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 35%,rgba(255,255,255,.25) 50%,transparent 65%);transform:translateX(-120%);transition:transform .8s var(--ease)}
.contact .btn.primary:hover::after{transform:translateX(120%)}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .js-anim .hero>*,.js-anim [data-reveal]{opacity:1!important;transform:none!important}
  .hero h1 span{-webkit-text-fill-color:currentColor;background:none}
  .scroll-progress{display:none}
}

/* Green multiply veil on project media. Lifts on hover with a circular reveal that opens from the arrow button. */
.media{isolation:isolate}
.media::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:var(--green);opacity:.6;mix-blend-mode:multiply;
 clip-path:circle(150% at calc(100% - 38px) 38px);transition:clip-path .8s var(--ease)}
html[dir="rtl"] .media::after{clip-path:circle(150% at 38px 38px)}
.project-open:hover .media::after,.project-open:focus-visible .media::after{clip-path:circle(0 at calc(100% - 38px) 38px)}
html[dir="rtl"] .project-open:hover .media::after,html[dir="rtl"] .project-open:focus-visible .media::after{clip-path:circle(0 at 38px 38px)}

/* The decorative ring becomes a solid green disc with the same 60% multiply blend; it still swells on hover. */
.media:before{border:0;background:var(--green);opacity:.6;mix-blend-mode:multiply}