/* OGTRAPLORD v6 — "3D template" (Jack-adapted). Kanit, #0C0C0C, gradient headings. */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#0C0C0C; --text:#D7E2EA; --text-dim:rgba(215,226,234,.6);
  --head-a:#646973; --head-b:#BBCCD7;
  --cta:linear-gradient(123deg,#18011F 7%,#B600A8 37%,#7621B0 72%,#BE4C00 100%);
  --font:'Kanit',sans-serif; --maxw:1400px; --ease:cubic-bezier(.25,.1,.25,1);
}
html,body{background:var(--bg);color:var(--text);font-family:var(--font)}
html{scroll-behavior:auto}
body{-webkit-font-smoothing:antialiased;line-height:1.5}
main{background:var(--bg);overflow-x:clip;display:block}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--head-b);color:var(--bg)}

.hero-heading{
  background:linear-gradient(180deg,#646973 0%,#BBCCD7 100%);
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:transparent;
}

/* pills */
.cta-pill{display:inline-block;border-radius:100px;background:var(--cta);color:#fff;
  font-weight:500;text-transform:uppercase;letter-spacing:.14em;
  padding:.85rem 2.4rem;font-size:clamp(.7rem,1vw,1rem);
  outline:2px solid #fff;outline-offset:-3px;
  box-shadow:0 4px 4px rgba(181,1,167,.25), 4px 4px 12px #7721B1 inset;
  transition:transform .2s var(--ease)}
.ghost-pill{display:inline-block;border-radius:100px;border:2px solid var(--text);
  color:var(--text);font-weight:500;text-transform:uppercase;letter-spacing:.16em;
  padding:.7rem 1.8rem;font-size:clamp(.75rem,.9vw,1rem);transition:background .2s var(--ease)}
.ghost-pill:hover{background:rgba(215,226,234,.1)}

/* ── HERO ── */
#hero{position:relative;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;
  padding:1.5rem clamp(1.25rem,3vw,2.5rem) clamp(1.75rem,3vw,2.5rem);overflow-x:clip}
.site-nav{display:flex;justify-content:space-between;gap:1rem;max-width:var(--maxw);width:100%;margin:0 auto;
  padding-top:.5rem}
.site-nav a{color:var(--text);font-weight:500;text-transform:uppercase;letter-spacing:.1em;
  font-size:clamp(.8rem,1.4vw,1.4rem);transition:opacity .2s}
.site-nav a:hover{opacity:.7}
/* Adaptation vs template: the template bottom-anchors a person PORTRAIT; we center an
   abstract object vertically so it sits clear above the bottom headline (no overlap). */
.hero-mid{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:1}
.magnet{pointer-events:auto;will-change:transform}
#hero-object{width:clamp(280px,34vw,520px);aspect-ratio:1;position:relative}
.hero-foot{margin-top:auto;position:relative;z-index:2}
.hero-foot .hero-heading{font-weight:900;text-transform:uppercase;letter-spacing:-.03em;
  line-height:.9;white-space:nowrap}
.hero-foot .hero-heading{font-size:clamp(2.2rem,11vw,12rem);width:100%}
.hero-foot .line{display:block;overflow:hidden}
.hero-foot .w{display:inline-block}
.hero-bar{display:flex;justify-content:space-between;align-items:flex-end;gap:1.5rem;margin-top:1.2rem}
.hero-strap{color:var(--text);font-weight:300;text-transform:uppercase;letter-spacing:.06em;
  line-height:1.3;font-size:clamp(.75rem,1.4vw,1.5rem);max-width:clamp(160px,22vw,300px)}

/* ── MARQUEE ── */
#marquee{padding:clamp(6rem,12vw,10rem) 0 2.5rem;overflow:hidden;background:var(--bg)}
.mrow{overflow:hidden;margin-bottom:.75rem}
.mtrack{display:flex;gap:.75rem;width:max-content;will-change:transform}
.mtile{width:420px;height:270px;object-fit:cover;border-radius:1rem;flex:0 0 auto}
@media(max-width:640px){.mtile{width:260px;height:168px}}

/* ── ABOUT ── */
#about{position:relative;min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding:5rem clamp(1.25rem,3vw,2.5rem);overflow:hidden}
.about-inner{display:flex;flex-direction:column;align-items:center;text-align:center;
  gap:clamp(2.5rem,5vw,4rem);position:relative;z-index:2}
.about-inner .hero-heading{font-weight:900;text-transform:uppercase;letter-spacing:-.02em;line-height:1;
  font-size:clamp(3rem,12vw,160px)}
.about-copy{color:var(--text);font-weight:500;max-width:560px;line-height:1.6;
  font-size:clamp(1rem,2vw,1.35rem)}
.about-copy .ch{transition:opacity .2s linear}   /* filled by AnimatedText */
.corner{position:absolute;z-index:1;border-radius:50% 40% 55% 45%;filter:blur(2px);opacity:.85;
  background:radial-gradient(circle at 35% 30%, #BBCCD7, #646973 55%, #1a1a20 100%)}
.c-tl{width:clamp(120px,16vw,210px);aspect-ratio:1;top:4%;left:2%}
.c-tr{width:clamp(120px,16vw,210px);aspect-ratio:1;top:4%;right:2%;
  background:radial-gradient(circle at 65% 30%, #BE4C00, #7621B0 60%, #18011F 100%)}
.c-bl{width:clamp(100px,13vw,180px);aspect-ratio:1;bottom:8%;left:6%;
  background:radial-gradient(circle at 40% 40%, #B600A8, #7621B0 55%, #18011F 100%)}
.c-br{width:clamp(130px,16vw,220px);aspect-ratio:1;bottom:8%;right:6%}
@media(max-width:640px){.corner{opacity:.5}}

/* ── SERVICES (white) ── */
.svc{background:#fff;color:var(--bg);border-radius:clamp(40px,6vw,60px) clamp(40px,6vw,60px) 0 0;
  padding:clamp(5rem,10vw,8rem) clamp(1.25rem,3vw,2.5rem);position:relative;z-index:2}
.svc-title{text-align:center;color:var(--bg);font-weight:900;text-transform:uppercase;
  font-size:clamp(3rem,12vw,160px);line-height:1;margin-bottom:clamp(4rem,7vw,7rem)}
.svc-list{max-width:1024px;margin:0 auto}
.svc-row{display:flex;gap:clamp(1rem,3vw,2.5rem);align-items:flex-start;
  padding:clamp(2rem,5vw,3rem) 0;border-top:1px solid rgba(12,12,12,.15)}
.svc-row:last-child{border-bottom:1px solid rgba(12,12,12,.15)}
.svc-num{color:var(--bg);font-weight:900;line-height:.8;font-size:clamp(3rem,10vw,140px);flex:0 0 auto}
.svc-name{color:var(--bg);font-weight:500;text-transform:uppercase;font-size:clamp(1rem,2.2vw,2.1rem);margin-bottom:.6rem}
.svc-desc{color:var(--bg);font-weight:300;line-height:1.6;max-width:42rem;opacity:.6;font-size:clamp(.85rem,1.6vw,1.25rem)}

/* ── WORK (dark, pulled up under services) ── */
#work{background:var(--bg);border-radius:clamp(40px,6vw,60px) clamp(40px,6vw,60px) 0 0;
  margin-top:clamp(-3.5rem,-6vw,-2.5rem);position:relative;z-index:3;
  padding:clamp(4rem,8vw,7rem) clamp(1.25rem,3vw,2.5rem) clamp(3rem,6vw,5rem)}
.work-title{text-align:center;font-weight:900;text-transform:uppercase;font-size:clamp(3rem,12vw,160px);
  line-height:1;margin-bottom:clamp(2rem,5vw,4rem)}
.stack{max-width:var(--maxw);margin:0 auto}
.card{background:var(--bg);border:2px solid var(--text);border-radius:clamp(40px,5vw,60px);
  padding:clamp(1rem,2vw,2rem);position:sticky;top:clamp(5rem,10vw,8rem)}
.card[data-index="0"]{top:calc(clamp(5rem,10vw,8rem) + 0px)}
.card[data-index="1"]{top:calc(clamp(5rem,10vw,8rem) + 28px)}
.card[data-index="2"]{top:calc(clamp(5rem,10vw,8rem) + 56px)}
.card-top{display:flex;align-items:center;gap:clamp(1rem,3vw,2.5rem);flex-wrap:wrap;margin-bottom:1.5rem}
.card-num{font-weight:900;line-height:.8;font-size:clamp(3rem,9vw,120px);color:var(--text)}
.card-meta{display:flex;flex-direction:column}
.card-cat{color:var(--text-dim);font-weight:300;text-transform:uppercase;letter-spacing:.14em;font-size:.8rem}
.card-name{color:var(--text);font-weight:500;text-transform:uppercase;font-size:clamp(1.2rem,2.4vw,2.2rem)}
.card-top .ghost-pill{margin-left:auto}
.collage{display:grid;grid-template-columns:40% 60%;gap:clamp(.6rem,1.4vw,1rem)}
.col-l{display:flex;flex-direction:column;gap:clamp(.6rem,1.4vw,1rem)}
.col-l img{width:100%;object-fit:cover;border-radius:clamp(30px,4vw,50px)}
.col-l img:first-child{height:clamp(130px,16vw,230px)}
.col-l img:last-child{height:clamp(160px,22vw,340px)}
.col-r img{width:100%;height:100%;object-fit:cover;border-radius:clamp(30px,4vw,50px)}
/* index row for the other 5 games */
.work-index{max-width:var(--maxw);margin:clamp(3rem,6vw,5rem) auto 0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem}
.idx-item{border:1px solid rgba(215,226,234,.2);border-radius:20px;overflow:hidden;
  display:flex;flex-direction:column;transition:border-color .25s var(--ease),transform .25s var(--ease)}
.idx-item:hover{border-color:var(--text);transform:translateY(-4px)}
.idx-item img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.7) brightness(.85)}
.idx-item span{padding:.4rem .9rem 0;font-weight:500}
.idx-item .idx-tag{padding:.1rem .9rem .8rem;color:var(--text-dim);font-weight:300;
  text-transform:uppercase;letter-spacing:.1em;font-size:.68rem}

/* ── DJTOKBET spiral ── */
#djtokbet{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden;background:var(--bg);
  border-radius:clamp(40px,6vw,60px) clamp(40px,6vw,60px) 0 0;margin-top:clamp(-3.5rem,-6vw,-2.5rem);z-index:4;
  padding:0 clamp(1.25rem,3vw,2.5rem)}
.spiral-canvas{position:absolute;inset:0;width:100%;height:100%}
.dj-overlay{position:relative;z-index:2;pointer-events:none;max-width:var(--maxw);margin:0 auto;width:100%}
.dj-title{font-weight:900;text-transform:uppercase;font-size:clamp(3rem,11vw,150px);line-height:1}
.dj-sub{color:var(--text);font-weight:300;font-size:1.1rem;margin-top:.8rem}
.dj-enter{pointer-events:auto;margin-top:1.6rem}
.dj-fade{position:absolute;left:0;right:0;height:16vh;z-index:1;pointer-events:none}
.dj-fade-top{top:0;background:linear-gradient(var(--bg),transparent)}
.dj-fade-bottom{bottom:0;background:linear-gradient(transparent,var(--bg))}

/* ── CONTACT + FOOTER ── */
#contact{background:var(--bg);text-align:center;padding:clamp(6rem,12vw,10rem) clamp(1.25rem,3vw,2.5rem)}
.contact-inner{display:flex;flex-direction:column;align-items:center;gap:clamp(1.5rem,3vw,2.5rem)}
.contact-inner .hero-heading{font-weight:900;text-transform:uppercase;font-size:clamp(2.4rem,9vw,120px);line-height:1}
.contact-email{color:var(--text);font-weight:500;font-size:clamp(1.2rem,4vw,2.6rem);
  border-bottom:2px solid transparent;transition:border-color .3s var(--ease)}
.contact-email:hover{border-color:var(--head-b)}
footer{background:var(--bg);border-top:1px solid rgba(215,226,234,.12);
  display:flex;justify-content:space-between;align-items:center;gap:1rem;flex-wrap:wrap;
  padding:2rem clamp(1.25rem,3vw,2.5rem)}
footer span{color:var(--text-dim);font-weight:300;font-size:.85rem}
.foot-links{display:flex;gap:1.4rem}
.foot-links a{color:var(--text);font-weight:300;font-size:.85rem}

/* reveal defaults (armed only when body.js-motion is set by main.js) */
body.js-motion [data-reveal]{opacity:0;transform:translateY(30px)}

/* responsive */
@media(max-width:768px){
  .hero-bar{flex-direction:column;align-items:flex-start;gap:1.2rem}
  .collage{grid-template-columns:1fr}
  .card-top .ghost-pill{margin-left:0}
  .card{position:static}   /* no sticky-stack on small screens */
}

/* reduced motion */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;transition-duration:.001ms!important}
  body.js-motion [data-reveal]{opacity:1;transform:none}
  .about-copy .ch{opacity:1!important}
  .card{position:static}
}