/* Ecom Zone — styles supporting the GSAP layer (assets/js/animations.js). */

html.ez-motion{scroll-behavior:auto}

/* ---------- Page-transition curtain ---------- */
.ez-curtain{display:none}
html.ez-motion .ez-curtain{display:block;position:fixed;inset:0;z-index:99999;pointer-events:none;
  /* failsafe: never leave the page covered if scripts fail */
  animation:ez-curtain-failsafe 0s linear 4s forwards}
html.ez-motion .ez-curtain.is-live{animation:none}
.ez-curtain-panel{position:absolute;inset:0;transform-origin:50% 0}
.ez-curtain-panel--gold{background:#c6a65a}
.ez-curtain-panel--teal{background:#087f75}
.ez-curtain-panel--ink{background:#163e3a}
.ez-curtain-brand{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.ez-curtain-brand img{width:clamp(170px,22vw,280px);height:auto}
@keyframes ez-curtain-failsafe{to{visibility:hidden;opacity:0}}

/* ---------- Scroll progress ---------- */
.ez-progress{position:fixed;top:0;right:0;left:0;height:3px;z-index:9990;pointer-events:none;
  background:linear-gradient(270deg,#087f75,#c6a65a);transform:scaleX(0);transform-origin:100% 50%}
body.admin-bar .ez-progress{top:32px}
@media(max-width:782px){body.admin-bar .ez-progress{top:46px}}

/* ---------- Hero intro: hidden before first paint until GSAP takes over ---------- */
html.ez-js:not(.ez-ready) :is(.ez-site-header .ez-nav>*,.ez-hero-copy>*,.ez-portrait,.ez-visual-label,.ez-hero-stats>div){
  opacity:0;animation:ez-reveal-failsafe 0s linear 3s forwards}
@keyframes ez-reveal-failsafe{to{opacity:1}}

/* ---------- Hooks animated through CSS variables ---------- */
.ez-visual:after{transform:rotate(calc(-17deg + var(--ez-orbit,0deg) + var(--ez-orbit-scroll,0deg)))}
.ez-path-item:not(:last-child):before{transform-origin:50% 0;transform:scaleY(var(--ez-line,1))}
.ez-phase:after{transform-origin:100% 50%;transform:scaleX(var(--ez-rule,1))}

/* SplitText masks keep Arabic words whole (never split into chars: it breaks letter joining). */
.ez-split-word{display:inline-block;will-change:transform}
.ez-split-word-mask{padding-block:.08em;margin-block:-.08em}

/* GSAP owns transforms on these; keep CSS transitions off transform so they don't fight. */
.ez-gsap .ez-btn{transition:background .2s,color .2s,border-color .2s;will-change:transform}
.ez-gsap .ez-btn:hover{transform:none}

@media(prefers-reduced-motion:reduce){.ez-curtain,.ez-progress{display:none!important}}