/* ===== ESF Interactive – style.css ===== */
:root{
  --bg:#000; --fg:#fff; --muted:#9d9d9d;
  --card:#fafafa; --ink:#111; --frame:#a9a9a9; --plate:#f1f1f1;
  --ease:cubic-bezier(.22,1,.36,1);
  --pad:clamp(6px,1.1vw,14px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth;background:var(--bg)}
body{background:var(--bg);color:var(--fg);font-family:'Rajdhani',system-ui,sans-serif;font-weight:500;
  overflow-x:clip;-webkit-font-smoothing:antialiased}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:2px solid #fff;outline-offset:4px}

/* ---------- Loader ---------- */
.loader{position:fixed;inset:0;z-index:100;background:#000;display:grid;place-items:center;
  transition:transform 1.1s var(--ease)}
.ready .loader{transform:translateY(-100%)}
.ld-inner{display:grid;gap:22px;justify-items:center}
.ld-inner img{width:clamp(120px,22vw,220px);height:auto;animation:ldPulse 1.4s ease-in-out infinite}
.ld-bar{width:clamp(120px,22vw,220px);height:1px;background:#333;overflow:hidden}
.ld-bar i{display:block;height:100%;background:#fff;transform:scaleX(0);transform-origin:left;animation:ldFill 1.1s var(--ease) forwards}
@keyframes ldPulse{50%{opacity:.45}}
@keyframes ldFill{to{transform:scaleX(1)}}

/* ---------- Nav ---------- */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:14px clamp(14px,4vw,60px);background:linear-gradient(rgba(0,0,0,.65),transparent);
  opacity:0;transition:opacity 1s .9s,transform .6s var(--ease)}
.ready .nav{opacity:1}
.nav.hide{transform:translateY(-110%)}
.nav ul{display:flex;gap:clamp(18px,5vw,72px)}
.nav ul:first-of-type{justify-content:flex-end}
.link{position:relative;font-size:clamp(14px,1.5vw,18px);letter-spacing:.04em;padding:6px 0}
.link::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;
  transform:scaleX(0);transform-origin:right;transition:transform .5s var(--ease)}
.link:hover::after,.link:focus-visible::after{transform:scaleX(1);transform-origin:left}
.logo{padding:0 clamp(18px,5vw,70px)}
.logo img{height:clamp(20px,2.8vw,34px);width:auto;transition:transform .5s var(--ease)}
.logo:hover img{transform:scale(1.08)}

/* ---------- Hero ---------- */
.hero{position:relative;height:100vh;height:100svh;min-height:520px;overflow:hidden;display:grid;place-items:center;
  background:radial-gradient(120% 90% at 50% 100%,#14141a 0%,#050507 55%,#000 100%)}
.hero-bg{position:absolute;inset:0;will-change:transform;opacity:0;transition:opacity 2.2s ease .4s}
.ready .hero-bg{opacity:1}
.hero-bg canvas{position:absolute;inset:0;width:100%;height:100%}
.moon{position:absolute;left:50%;bottom:0;width:min(190vw,1900px);aspect-ratio:1;translate:-50% 90%;border-radius:50%;
  background:radial-gradient(circle at 50% 0,#2a2a30 0,#0d0d10 38%,#000 62%);
  box-shadow:0 -2px 0 rgba(255,255,255,.55),0 -18px 90px rgba(255,255,255,.22),0 -60px 220px rgba(180,190,255,.12)}
.hero::after{content:"";position:absolute;inset:auto 0 0 0;height:32%;background:linear-gradient(transparent,#000);z-index:1;pointer-events:none}

.hero-content{position:relative;z-index:2;display:grid;justify-items:center;text-align:center;gap:clamp(14px,2.4vh,26px);
  padding:clamp(70px,12vh,120px) 5vw 0}
.hero-content > *{opacity:0;transform:translateY(22px);transition:opacity 1.2s ease,transform 1.3s var(--ease)}
.ready .hero-content > *{opacity:1;transform:none}
.ready .hero-content > :nth-child(1){transition-delay:1.1s}
.ready .hero-content > :nth-child(2){transition-delay:1.25s}
.ready .hero-content > :nth-child(3){transition-delay:1.45s}
.ready .hero-content > :nth-child(4){transition-delay:1.65s}
.eyebrow{font-family:'Syncopate',sans-serif;font-size:clamp(9px,1.1vw,13px);letter-spacing:.5em;margin-right:-.5em;color:var(--muted);text-transform:uppercase}
.hero-logo img{width:clamp(220px,40vw,520px);height:auto;filter:drop-shadow(0 0 40px rgba(255,255,255,.18))}
.tagline{font-size:clamp(16px,2vw,24px);letter-spacing:.06em;color:#d8d8d8;max-width:30em}
.cta{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin-top:clamp(4px,1vh,12px)}
.btn{position:relative;overflow:hidden;padding:12px clamp(22px,3vw,38px);border:1px solid #fff;background:#fff;color:#000;
  font-size:clamp(13px,1.3vw,16px);font-weight:600;letter-spacing:.2em;text-transform:uppercase;
  transition:background .4s var(--ease),color .4s var(--ease),transform .4s var(--ease)}
.btn:hover,.btn:focus-visible{transform:translateY(-3px)}
.btn.ghost{background:transparent;color:#fff}
.btn.ghost:hover,.btn.ghost:focus-visible{background:#fff;color:#000}
.btn:not(.ghost):hover,.btn:not(.ghost):focus-visible{background:transparent;color:#fff}

.corner{position:absolute;bottom:clamp(16px,4vh,38px);z-index:2;font-size:clamp(10px,1vw,13px);letter-spacing:.2em;color:var(--muted);
  text-transform:uppercase;opacity:0;transition:opacity 1.4s ease 2s}
.ready .corner{opacity:1}
.corner.left{left:clamp(14px,4vw,60px)}
.corner.right{right:clamp(14px,4vw,60px)}
.hero-cue{position:absolute;left:50%;bottom:28px;z-index:2;width:1px;height:56px;background:rgba(255,255,255,.25);overflow:hidden}
.hero-cue::after{content:"";position:absolute;inset:0;background:#fff;animation:cue 2s var(--ease) infinite}
@keyframes cue{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* ---------- Section titles (animated lines) ---------- */
.sec-title{display:flex;align-items:center;gap:16px;font-size:clamp(15px,1.8vw,22px);font-weight:500;
  letter-spacing:.04em;white-space:nowrap}
.sec-title .line{flex:1;height:1px;background:#fff;transform:scaleX(0);transition:transform 1.5s var(--ease) .1s}
.sec-title .line:first-child{transform-origin:right}
.sec-title .line:last-child{transform-origin:left}
.sec-title.in .line{transform:scaleX(1)}
.sec-title .dot{width:8px;height:8px;border-radius:50%;background:#fff;flex:none;transform:scale(0);transition:transform .6s var(--ease) 1.1s}
.sec-title.in .dot{transform:scale(1)}
.sec-title.center{width:min(940px,94vw);margin-inline:auto}
.team-title{width:min(1180px,94vw);margin:0 auto;font-size:clamp(12px,1.4vw,16px);letter-spacing:.06em}
.team-title .line.s,.about-title .line.s{flex:none;width:clamp(16px,3vw,34px);transform-origin:right}
.team-title .line.m{flex:none;width:clamp(80px,22vw,260px)}
.about-title{width:100%;padding-left:clamp(0px,20vw,300px)}

/* ---------- Projects: horizontal scroll ---------- */
.projects{position:relative;height:400vh} /* height is recalculated in script.js */
.pin{position:sticky;top:0;height:100vh;overflow:hidden}
.pin .sec-title{position:absolute;top:clamp(76px,11vh,110px);left:50%;translate:-50% 0;z-index:3}
.track{display:flex;height:100%;align-items:center;will-change:transform}
.slide{flex:0 0 100vw;height:100%;display:grid;place-items:center;padding-top:clamp(50px,9vh,100px)}
.slide img{width:min(100vw,calc((100vh - 110px) * 1.7778));height:auto;will-change:transform,opacity}
.hud{position:absolute;left:0;right:0;bottom:clamp(16px,4vh,38px);display:flex;justify-content:center;align-items:center;
  gap:18px;font-size:14px;letter-spacing:.18em;color:var(--muted)}
.hud b{color:#fff;font-weight:600}
.bar{position:relative;width:min(320px,50vw);height:2px;background:#2b2b2b;overflow:hidden}
.bar i{position:absolute;inset:0;background:#fff;transform:scaleX(0);transform-origin:left}

/* ---------- Team ---------- */
.team{padding:clamp(70px,10vw,140px) 0 clamp(30px,5vw,60px)}
.members{display:grid;gap:clamp(60px,9vw,130px);margin-top:clamp(40px,6vw,90px)}
.member{position:relative;width:min(1180px,94vw);aspect-ratio:2.62;margin:0 auto}

.card{position:absolute;top:12%;bottom:0;background:var(--card);color:var(--ink);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.9em;z-index:1;
  transition:clip-path 1.3s var(--ease) .15s}
.member.left .card{left:12%;right:0;padding-left:22%;clip-path:inset(0 100% 0 0)}
.member.right .card{left:0;right:12%;padding-right:22%;clip-path:inset(0 0 0 100%)}
.member.in .card{clip-path:inset(0)}

.name{font-family:'Syncopate',sans-serif;font-weight:400;font-size:clamp(15px,3.7vw,46px);color:var(--ink);
  letter-spacing:.7em;margin-right:-.7em;opacity:0;
  transition:letter-spacing 1.6s var(--ease) .7s,margin 1.6s var(--ease) .7s,opacity 1s ease .7s}
.member.in .name{letter-spacing:.26em;margin-right:-.26em;opacity:1}
.role{font-size:clamp(9px,1.35vw,17px);letter-spacing:.36em;margin-right:-.36em;color:#555;font-weight:500;
  opacity:0;transform:translateY(10px);transition:opacity 1s ease 1.2s,transform 1s var(--ease) 1.2s}
.member.in .role{opacity:1;transform:none}

.plate{position:absolute;top:-4%;width:27%;height:72%;background:var(--plate);z-index:0;
  opacity:0;transition:transform 1.2s var(--ease),opacity .8s ease}
.member.left .plate{left:0;transform:translateX(-40%)}
.member.right .plate{right:0;transform:translateX(40%)}
.member.in .plate{opacity:1;transform:none}

.frame{position:absolute;top:0;width:30%;aspect-ratio:134/163;z-index:2;perspective:900px;
  opacity:0;transition:transform 1.3s var(--ease) .1s,opacity .9s ease .1s}
.member.left .frame{left:4%;transform:translateX(-25%)}
.member.right .frame{right:4%;transform:translateX(25%)}
.member.in .frame{opacity:1;transform:none}
.tilt{position:absolute;inset:0;background:var(--frame);transition:transform .35s ease-out;transform-style:preserve-3d;
  box-shadow:0 18px 40px rgba(0,0,0,.45)}
.tilt img{position:absolute;inset:var(--pad);width:calc(100% - 2*var(--pad));height:calc(100% - 2*var(--pad));object-fit:cover;
  clip-path:inset(0 0 100% 0);transform:scale(1.3);transition:clip-path 1.3s var(--ease) .5s,transform 1.8s var(--ease) .5s}
.member.in .tilt img{clip-path:inset(0);transform:scale(1)}

/* ---------- About ---------- */
.about{padding:clamp(60px,9vw,130px) 0}
.about-body{width:min(900px,90vw);margin:clamp(40px,6vw,70px) auto 0;text-align:center}
.about-body h3{font-size:clamp(20px,3vw,32px);font-weight:700;letter-spacing:.02em;margin-bottom:.9em}
.about-body > div{margin-bottom:.4em}
.about-body p{font-size:clamp(14px,1.7vw,18px);line-height:1.45}
.about-body li{font-size:clamp(14px,1.7vw,18px);line-height:1.45;margin-top:.15em}
.about-body li::before{content:"•";display:inline-block;margin-right:.7em}
[data-reveal]{--i:0}
.js [data-reveal]{opacity:0;transform:translateY(26px);
  transition:opacity 1s ease,transform 1.1s var(--ease);transition-delay:calc(var(--i) * 110ms)}
.js [data-reveal].in{opacity:1;transform:none}

/* ---------- EVIE ---------- */
.evie{padding:clamp(40px,7vw,90px) 0 clamp(40px,7vw,100px);text-align:center}
.evie h2{font-size:clamp(19px,2.8vw,30px);font-weight:700;padding:0 5vw}
.evie-logo{margin:clamp(20px,4vw,44px) auto 0;width:min(520px,82vw)}
.evie-logo img{width:100%;height:auto;animation:float 6s ease-in-out infinite;
  filter:drop-shadow(0 0 28px rgba(255,120,200,.18))}
@keyframes float{50%{transform:translateY(-14px) scale(1.025);filter:drop-shadow(0 0 46px rgba(80,170,255,.32))}}

/* ---------- Contact ---------- */
.contact{position:relative;overflow:hidden;padding-top:clamp(28px,4vw,52px);min-height:clamp(420px,56vw,620px);
  display:flex;flex-direction:column}
.contact-bg{position:absolute;inset:-10% 0;z-index:0;will-change:transform}
.contact-bg img{width:100%;height:100%;object-fit:cover}
.contact::before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(#000 0%,transparent 28%,transparent 70%,rgba(0,0,0,.5))}
.contact .sec-title{position:relative;z-index:2;width:min(1300px,96vw)}
.contact-body{position:relative;z-index:2;flex:1;display:grid;grid-template-columns:1fr 1.5fr;align-items:end;gap:clamp(16px,4vw,50px);
  width:min(1180px,92vw);margin:0 auto;padding:clamp(40px,7vw,90px) 0 clamp(40px,6vw,80px)}
.contact-logo{width:clamp(100px,17vw,200px);height:auto;align-self:end}
.contact-text h3{font-size:clamp(19px,2.8vw,32px);font-weight:700;margin-bottom:.6em}
.contact-text p{font-size:clamp(14px,1.9vw,22px)}
.contact-text b{font-weight:700}
.mail{position:relative;display:inline-block;padding-bottom:3px;word-break:break-all}
.mail::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:#fff;transform:scaleX(0);
  transform-origin:right;transition:transform .55s var(--ease)}
.mail:hover::after,.mail:focus-visible::after{transform:scaleX(1);transform-origin:left}

/* ---------- Footer ---------- */
.foot{position:relative;z-index:3;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;
  padding:22px clamp(14px,4vw,50px);background:#000;font-size:clamp(11px,1.3vw,15px)}
.foot strong{font-weight:700;font-size:clamp(13px,1.6vw,18px)}
.loc{display:flex;align-items:center;gap:8px;font-size:clamp(10px,1.1vw,13px)}
.foot svg{width:clamp(16px,2vw,24px);height:auto;fill:none;stroke:#fff;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.loc svg{width:16px}
.social{display:flex;justify-content:flex-end;gap:clamp(8px,1.4vw,18px)}
.social a{display:grid;place-items:center;transition:transform .35s var(--ease),opacity .3s;opacity:.85}
.social a:hover{transform:translateY(-4px) scale(1.12);opacity:1}

/* ---------- Small screens ---------- */
@media (max-width:640px){
  .nav ul{gap:14px}
  .about-title{padding-left:0}
  .contact-body{grid-template-columns:1fr 1.7fr}
  .slide{padding-top:clamp(60px,12vh,110px)}
  .corner{display:none}
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important;transition-delay:0s!important}
  .loader{display:none}
  .nav{opacity:1}
  .hero-bg,.hero-content > *,.corner{opacity:1;transform:none}
}