/* ============================================================
   Eco Assets Manager — Motion & Effects
   Shared across all pages. Custom cursor intentionally omitted.
   ============================================================ */

/* ---------- Page transition wipe ---------- */
#pageWipe{
  position:fixed; inset:0; z-index:9999; pointer-events:none;
  display:grid; grid-template-columns:repeat(5,1fr);
}
#pageWipe .wipe-panel{
  background:#1a3326; transform:scaleY(1); transform-origin:top;
  transition:transform .7s cubic-bezier(.76,0,.24,1);
}
#pageWipe.open .wipe-panel{transform:scaleY(0);}
#pageWipe.closing .wipe-panel{transform-origin:bottom; transform:scaleY(1);}
#pageWipe .wipe-panel:nth-child(1){transition-delay:0s;}
#pageWipe .wipe-panel:nth-child(2){transition-delay:.07s;}
#pageWipe .wipe-panel:nth-child(3){transition-delay:.14s;}
#pageWipe .wipe-panel:nth-child(4){transition-delay:.21s;}
#pageWipe .wipe-panel:nth-child(5){transition-delay:.28s;}

#wipeLogo{
  position:fixed; inset:0; z-index:10000; display:flex;
  align-items:center; justify-content:center; pointer-events:none;
  font-family:'Cormorant Garamond',serif; font-size:clamp(24px,4vw,38px);
  color:#e8b040; letter-spacing:1px; opacity:1; transition:opacity .4s ease;
}
#wipeLogo.hide{opacity:0;}

/* ---------- Scroll progress bar ---------- */
#scrollBar{
  position:fixed; top:0; left:0; height:3px; width:0%;
  background:linear-gradient(90deg,#c8952a,#e8b040);
  z-index:9000; transition:width .1s linear;
}

/* ---------- Scroll reveal ---------- */
.reveal{
  opacity:0; transform:translateY(34px);
  transition:opacity .8s cubic-bezier(.22,1,.36,1), transform .8s cubic-bezier(.22,1,.36,1);
}
.reveal.in{opacity:1; transform:none;}
.reveal.d1{transition-delay:.08s;}
.reveal.d2{transition-delay:.16s;}
.reveal.d3{transition-delay:.24s;}
.reveal.d4{transition-delay:.32s;}

/* ---------- Hero headline word reveal ---------- */
.reveal-word{display:inline-block; overflow:hidden; vertical-align:top;}
.reveal-word > span{
  display:inline-block; transform:translateY(110%);
  transition:transform .9s cubic-bezier(.22,1,.36,1);
}
body.loaded .reveal-word > span{transform:translateY(0);}

/* ---------- WebGL hero canvas ---------- */
#glCanvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; opacity:0; transition:opacity .8s ease;
}
#glCanvas.live{opacity:1;}
.hero .hero-bg-pattern,
.hero .hero-lines,
.hero .hero-content{position:relative; z-index:1;}
.hero .hero-bg-pattern{z-index:0;}

/* ---------- Animated grid canvas ---------- */
.grid-fx{position:relative; overflow:hidden;}
.grid-fx > .grid-canvas{
  position:absolute; inset:0; width:100%; height:100%;
  z-index:0; pointer-events:none; opacity:.9;
}
.grid-fx > .section-inner{position:relative; z-index:1;}

/* ---------- Magnetic buttons ---------- */
.magnetic{will-change:transform;}

/* ---------- Spotlight cards ---------- */
.spotlight{position:relative; overflow:hidden;}
.spotlight::before{
  content:''; position:absolute; inset:0; opacity:0; pointer-events:none;
  transition:opacity .35s ease; z-index:0;
  background:radial-gradient(340px circle at var(--mx,50%) var(--my,50%), rgba(200,149,42,.16), transparent 62%);
}
.spotlight:hover::before{opacity:1;}
.spotlight > *{position:relative; z-index:1;}

/* Light-background cards get a softer, greener spotlight */
.spotlight.on-light::before{
  background:radial-gradient(320px circle at var(--mx,50%) var(--my,50%), rgba(47,102,73,.10), transparent 62%);
}

/* ---------- 3D tilt ---------- */
.tilt{
  transform-style:preserve-3d;
  transition:transform .2s cubic-bezier(.22,1,.36,1);
}
.tilt-lift{transform:translateZ(36px);}

/* ---------- Parallax float ---------- */
.parallax{will-change:transform;}

/* ---------- Accessibility ---------- */
@media (prefers-reduced-motion: reduce){
  #pageWipe, #wipeLogo{display:none !important;}
  .reveal{opacity:1 !important; transform:none !important; transition:none !important;}
  .reveal-word > span{transform:none !important; transition:none !important;}
  .tilt{transform:none !important;}
  .magnetic{transform:none !important;}
  #glCanvas{display:none !important;}
  .grid-fx > .grid-canvas{display:none !important;}
  *{animation:none !important;}
}

/* ---------- Mobile: drop the heavy stuff ---------- */
@media (max-width:768px){
  .tilt{transform:none !important;}
  .magnetic{transform:none !important;}
  .spotlight::before{display:none;}
}