/* ═══════════════════════════════════════════════════════════
   METASPEAK — ENHANCE LAYER
   3D · Parallax · Page-Transitions · Advanced Hover
   ═══════════════════════════════════════════════════════════ */

/* PAGE-TRANSITION CURTAIN (digitalflagship-style) */
#pt-curtain{
  position:fixed;inset:0;z-index:9990;pointer-events:none;
  display:grid;grid-template-columns:repeat(8,1fr);
  opacity:1;
}
#pt-curtain .pt-col{
  background:linear-gradient(180deg,#010810,#020f20 50%,#010810);
  border-right:1px solid rgba(0,212,255,.04);
  transform:translateY(-101%);
  transition:transform .7s cubic-bezier(.76,0,.24,1);
}
#pt-curtain.intro .pt-col{transform:translateY(0);}
#pt-curtain.intro.out .pt-col{transform:translateY(101%);}
#pt-curtain.outro .pt-col{transform:translateY(101%);}
#pt-curtain.outro.in .pt-col{transform:translateY(0);}
/* stagger per column */
#pt-curtain .pt-col:nth-child(1){transition-delay:.00s;}
#pt-curtain .pt-col:nth-child(2){transition-delay:.04s;}
#pt-curtain .pt-col:nth-child(3){transition-delay:.08s;}
#pt-curtain .pt-col:nth-child(4){transition-delay:.12s;}
#pt-curtain .pt-col:nth-child(5){transition-delay:.16s;}
#pt-curtain .pt-col:nth-child(6){transition-delay:.20s;}
#pt-curtain .pt-col:nth-child(7){transition-delay:.24s;}
#pt-curtain .pt-col:nth-child(8){transition-delay:.28s;}

#pt-label{
  position:fixed;inset:0;z-index:9991;pointer-events:none;
  display:flex;align-items:center;justify-content:center;
  opacity:0;transition:opacity .3s;
}
#pt-label.show{opacity:1;}
#pt-label .ptl-inner{
  display:flex;align-items:center;gap:20px;
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(1.4rem,3vw,2.6rem);letter-spacing:6px;color:#fff;
  text-transform:uppercase;
}
#pt-label .ptl-dot{
  width:10px;height:10px;border-radius:50%;background:var(--cyan);
  box-shadow:0 0 18px var(--cyan);animation:ptlPulse 1s infinite;
}
@keyframes ptlPulse{0%,100%{transform:scale(1);opacity:1;}50%{transform:scale(1.6);opacity:.4;}}
#pt-label .ptl-bar{
  position:absolute;bottom:24%;left:50%;transform:translateX(-50%);
  width:240px;height:2px;background:rgba(0,212,255,.15);overflow:hidden;
}
#pt-label .ptl-bar::after{
  content:'';position:absolute;inset:0;width:30%;
  background:linear-gradient(90deg,transparent,var(--cyan),transparent);
  animation:ptlSlide 1s linear infinite;
}
@keyframes ptlSlide{from{transform:translateX(-100%);}to{transform:translateX(400%);}}

/* TILT 3D LAYERED CARDS */
[data-tilt3d]{
  transform-style:preserve-3d;
  transition:transform .35s cubic-bezier(.2,.8,.2,1);
  will-change:transform;
}
[data-tilt3d] .t3-inner{transform-style:preserve-3d;transition:transform .35s;}
[data-tilt3d] .t3-pop{transform:translateZ(30px);transition:transform .4s cubic-bezier(.2,.8,.2,1);}
[data-tilt3d] .t3-pop-2{transform:translateZ(60px);}
[data-tilt3d]:hover .t3-pop{transform:translateZ(50px);}
[data-tilt3d] .t3-shine{
  position:absolute;inset:0;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle 220px at var(--mx,50%) var(--my,50%),rgba(0,212,255,.18),transparent 60%);
  opacity:0;transition:opacity .35s;mix-blend-mode:screen;
}
[data-tilt3d]:hover .t3-shine{opacity:1;}

/* PILLAR ENHANCEMENT */
.pillar{transform-style:preserve-3d;}
.pillar .pillar-icon{transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.pillar:hover .pillar-icon{transform:translateZ(40px) scale(1.12) rotate(-4deg);}
.pillar h3,.pillar p{transition:transform .5s cubic-bezier(.2,.8,.2,1);}
.pillar:hover h3{transform:translateZ(24px);}
.pillar:hover p{transform:translateZ(14px);}
.pillar::after{
  content:'';position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  background:radial-gradient(circle 320px at var(--mx,50%) var(--my,50%),rgba(0,212,255,.12),transparent 55%);
  opacity:0;transition:opacity .4s;
}
.pillar:hover::after{opacity:1;}

/* MARQUEE WITH IMAGE REVEAL (geex-arts inspired) */
#works-rail{padding:120px 0 100px;position:relative;overflow:hidden;}
.works-rail-head{
  display:flex;justify-content:space-between;align-items:flex-end;
  max-width:1300px;margin:0 auto 60px;padding:0 52px;flex-wrap:wrap;gap:24px;
}
.works-rail-head h2{
  font-family:'Orbitron',sans-serif;font-weight:900;color:#fff;
  font-size:clamp(2.4rem,5vw,4.6rem);letter-spacing:-1.5px;line-height:.95;
}
.works-rail-head h2 .ac{
  background:linear-gradient(135deg,#fff,var(--cyan) 60%,var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.works-rail-head .wrh-r{font-size:.86rem;color:rgba(180,210,235,.7);max-width:380px;line-height:1.7;}

.wr-list{
  list-style:none;border-top:1px solid rgba(0,212,255,.12);
  max-width:1300px;margin:0 auto;padding:0 52px;
}
.wr-item{
  position:relative;
  border-bottom:1px solid rgba(0,212,255,.12);
  padding:30px 0;
  display:flex;align-items:center;justify-content:space-between;
  cursor:pointer;
  transition:padding .5s cubic-bezier(.2,.8,.2,1);
}
.wr-item .wr-no{
  font-family:'Orbitron',sans-serif;font-size:.7rem;color:rgba(0,212,255,.5);
  letter-spacing:3px;flex:0 0 70px;
}
.wr-item .wr-title{
  flex:1;font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(1.4rem,3.4vw,2.8rem);
  color:rgba(255,255,255,.92);letter-spacing:-.5px;line-height:1;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),color .4s;
  position:relative;
}
.wr-item .wr-tag{
  font-size:.62rem;letter-spacing:3px;text-transform:uppercase;
  color:rgba(180,210,235,.5);flex:0 0 auto;
}
.wr-item .wr-arrow{
  width:48px;height:48px;border-radius:50%;
  border:1px solid rgba(0,212,255,.25);
  display:flex;align-items:center;justify-content:center;
  color:rgba(0,212,255,.7);flex:0 0 auto;margin-left:24px;
  transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s,border-color .3s;
}
.wr-item:hover{padding:46px 0;}
.wr-item:hover .wr-title{color:#fff;transform:translateX(20px);}
.wr-item:hover .wr-arrow{transform:rotate(-45deg);background:var(--cyan);color:#000;border-color:var(--cyan);}
.wr-item::before{
  content:'';position:absolute;left:0;right:0;top:0;height:1px;
  background:linear-gradient(90deg,var(--cyan),var(--purple),transparent);
  transform:scaleX(0);transform-origin:left;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.wr-item:hover::before{transform:scaleX(1);}

/* Floating preview that follows cursor */
.wr-preview{
  position:fixed;top:0;left:0;
  width:340px;height:220px;border-radius:8px;overflow:hidden;
  pointer-events:none;z-index:50;
  opacity:0;transform:translate(-50%,-50%) scale(.85);
  transition:opacity .35s cubic-bezier(.2,.8,.2,1),transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 30px 80px rgba(0,87,255,.4),0 0 0 1px rgba(0,212,255,.4);
  background:#04101e;
}
.wr-preview.show{opacity:1;transform:translate(-50%,-50%) scale(1);}
.wr-preview img{width:100%;height:100%;object-fit:cover;display:block;
  filter:saturate(1.1) brightness(.9);}
.wr-preview::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,15,40,.1),rgba(0,5,15,.65));
}
.wr-preview .wrp-label{
  position:absolute;left:18px;bottom:14px;z-index:2;
  font-family:'Orbitron',sans-serif;font-weight:900;font-size:.78rem;
  color:#fff;letter-spacing:1.5px;text-transform:uppercase;
}

/* PARALLAX STACKED STRIPS (digitalflagship-style) */
.px-strip{
  position:relative;width:100%;overflow:hidden;
  padding:24px 0;border-top:1px solid rgba(0,212,255,.08);
  border-bottom:1px solid rgba(0,212,255,.08);
}
.px-track{
  display:flex;gap:80px;width:max-content;
  will-change:transform;
  align-items:center;
}
.px-track > span{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(1.6rem,3vw,2.6rem);letter-spacing:6px;text-transform:uppercase;
  color:transparent;-webkit-text-stroke:1px rgba(0,212,255,.4);
  white-space:nowrap;display:inline-flex;align-items:center;gap:30px;
}
.px-track > span.solid{
  color:#fff;-webkit-text-stroke:0;
  background:linear-gradient(135deg,#fff,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.px-track > span::after{
  content:'';width:8px;height:8px;border-radius:50%;
  background:var(--cyan);box-shadow:0 0 12px var(--cyan);
}

/* CHARACTER REVEAL PARALLAX (3D scene) */
#scene{
  position:relative;min-height:120vh;
  padding:100px 52px;overflow:hidden;
  perspective:1200px;
}
.scene-stage{
  max-width:1400px;margin:0 auto;position:relative;
  transform-style:preserve-3d;
  height:680px;
}
.scene-layer{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;will-change:transform;}
.scene-bg-grid{
  background-image:linear-gradient(rgba(0,212,255,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,255,.06) 1px,transparent 1px);
  background-size:80px 80px;
  mask-image:radial-gradient(ellipse 70% 60% at 50% 50%,black 30%,transparent 100%);
}
.scene-orb{
  width:560px;height:560px;border-radius:50%;
  background:radial-gradient(circle at 50% 40%,rgba(0,87,255,.35),rgba(123,47,255,.15) 50%,transparent 70%);
  filter:blur(20px);
}
.scene-ring{
  width:680px;height:680px;border-radius:50%;
  border:1px dashed rgba(0,212,255,.25);
  animation:rspin 50s linear infinite;
}
.scene-ring.r2{width:480px;height:480px;animation-duration:38s;animation-direction:reverse;border-style:dotted;}
.scene-text{pointer-events:none;}
.scene-text-line{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(3rem,10vw,9rem);letter-spacing:-3px;line-height:.9;
  color:transparent;-webkit-text-stroke:1.5px rgba(255,255,255,.18);
  text-transform:uppercase;text-align:center;
}
.scene-char{
  position:relative;width:auto;height:560px;
  filter:drop-shadow(0 30px 60px rgba(0,87,255,.5));
}
.scene-char img{height:100%;width:auto;object-fit:contain;display:block;}
.scene-caption{
  position:absolute;left:50%;bottom:0;transform:translateX(-50%);
  text-align:center;
  font-family:'Orbitron',sans-serif;font-size:.68rem;
  letter-spacing:4px;color:rgba(0,212,255,.7);text-transform:uppercase;
}
.scene-caption .sc-name{
  font-size:1.6rem;color:#fff;letter-spacing:1px;
  margin-bottom:4px;background:linear-gradient(135deg,#fff,var(--cyan));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}

/* CIRCULAR FOLLOW BADGE (geex-style "view") */
.follow-cursor{
  position:fixed;width:96px;height:96px;border-radius:50%;
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  display:flex;align-items:center;justify-content:center;
  color:#000;font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:.7rem;letter-spacing:2px;text-transform:uppercase;
  pointer-events:none;z-index:9100;
  opacity:0;transform:translate(-50%,-50%) scale(.5);
  transition:opacity .35s,transform .35s cubic-bezier(.2,.8,.2,1);
  box-shadow:0 0 40px rgba(0,212,255,.5);
}
.follow-cursor.show{opacity:1;transform:translate(-50%,-50%) scale(1);}

/* SPLIT-TEXT REVEAL */
.split-word{display:inline-block;overflow:hidden;vertical-align:bottom;}
.split-word > span{display:inline-block;transform:translateY(110%);transition:transform .8s cubic-bezier(.7,0,.2,1);}
.split-word.in > span{transform:translateY(0);}

/* MAGNETIC NUMBER STATS — hover lift each */
.hero-meta .hm{transition:transform .5s cubic-bezier(.2,.8,.2,1);cursor:default;}
.hero-meta .hm:hover{transform:translateY(-8px);}
.hero-meta .hm:hover .n{text-shadow:0 0 35px rgba(0,212,255,.8),0 0 60px rgba(0,87,255,.5);}

/* WORK CARD IMAGE: brutalist hover scale + slow drift */
.work-card .ov{transition:opacity .5s;}
.work-card:hover .ov{opacity:.7;}
.work-card .arrow{transition:transform .6s cubic-bezier(.2,.8,.2,1),background .3s;}
.work-card{transform-style:preserve-3d;}

/* SECTION FADE-IN ON SCROLL */
.fade-section{opacity:0;transition:opacity 1s ease;}
.fade-section.in{opacity:1;}

/* GLOW ORBIT CTA */
.cta-box{transform-style:preserve-3d;}
.cta-box::after{
  content:'';position:absolute;inset:-2px;border-radius:14px;pointer-events:none;
  background:conic-gradient(from var(--ang,0deg),transparent 0deg,rgba(0,212,255,.5) 30deg,transparent 60deg,transparent 360deg);
  filter:blur(1.5px);
  opacity:.6;
  animation:ctaSpin 6s linear infinite;
  mask:
    linear-gradient(#000,#000) content-box,
    linear-gradient(#000,#000);
  mask-composite:exclude;
  -webkit-mask:
    linear-gradient(#000,#000) content-box,
    linear-gradient(#000,#000);
  -webkit-mask-composite:xor;
  padding:1.5px;
}
@keyframes ctaSpin{to{--ang:360deg;}}
@property --ang{syntax:'<angle>';initial-value:0deg;inherits:false;}

/* SCROLL-LINKED HEADLINE EFFECT */
.scroll-headline{
  font-family:'Orbitron',sans-serif;font-weight:900;
  font-size:clamp(3rem,11vw,11rem);line-height:.9;letter-spacing:-3px;
  text-transform:uppercase;color:transparent;
  -webkit-text-stroke:1px rgba(0,212,255,.25);
  text-align:center;margin:0;
  background:linear-gradient(180deg,#fff 0%,var(--cyan) 50%,transparent 80%);
  -webkit-background-clip:text;background-clip:text;
  background-size:100% 200%;background-position:0 var(--sp,0%);
  transition:background-position .1s linear;
}

/* MOUSE-FOLLOW SPOT IN BG */
.mouse-spot{
  position:fixed;width:600px;height:600px;border-radius:50%;
  background:radial-gradient(circle,rgba(0,87,255,.12),transparent 60%);
  pointer-events:none;z-index:1;
  transform:translate(-50%,-50%);
  filter:blur(40px);
  transition:opacity .4s;
  mix-blend-mode:screen;
}

/* HORIZONTAL MARQUEE (slower, parallax-linked) */
.px-strip[data-px-dir="-1"] .px-track{animation-direction:reverse;}

/* PARALLAX IMAGE BAND */
.parallax-band{
  position:relative;overflow:hidden;height:60vh;min-height:380px;
  margin:80px 0;
}
.parallax-band .pb-img{
  position:absolute;inset:-15% 0;width:100%;height:130%;
  background-size:cover;background-position:center;
  will-change:transform;
}
.parallax-band .pb-veil{
  position:absolute;inset:0;
  background:radial-gradient(ellipse 70% 70% at 50% 50%,rgba(1,8,16,.3),rgba(1,8,16,.95));
  z-index:1;
}
.parallax-band .pb-content{
  position:relative;z-index:2;height:100%;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  padding:0 52px;text-align:center;
}
.parallax-band h2{
  font-family:'Orbitron',sans-serif;font-weight:900;color:#fff;
  font-size:clamp(2rem,5vw,4.4rem);letter-spacing:-1px;line-height:1;
  text-transform:uppercase;text-wrap:balance;
}
.parallax-band h2 .ac{
  background:linear-gradient(135deg,var(--cyan),var(--purple));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.parallax-band p{
  max-width:680px;margin:24px auto 0;
  font-size:1.02rem;line-height:1.7;color:rgba(220,235,255,.78);
}

/* SMOOTH-SCROLL "lenis-like" feel via easing layer on body wrapper */
html.smooth-scroll body{scroll-behavior:smooth;}

/* RESPONSIVE */
@media(max-width:900px){
  #pt-curtain{grid-template-columns:repeat(4,1fr);}
  .wr-item .wr-no{flex:0 0 40px;}
  .wr-item .wr-tag{display:none;}
  .scene-stage{height:520px;}
  .scene-char{height:420px;}
}
@media(max-width:600px){
  .wr-preview{display:none;}
  .follow-cursor{display:none;}
  .wr-item:hover{padding:30px 0;}
  .wr-item:hover .wr-title{transform:none;}
  .scene-stage{height:440px;}
  .scene-char{height:340px;}
  .parallax-band{height:50vh;min-height:320px;}
  .px-track > span{font-size:1.3rem;letter-spacing:4px;}
  .px-track{gap:50px;}
}