/* ============================================================
   ENTERTRAINER — Naveen Portfolio
   Anti-corporate brutalism × stompy bold
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root{
  /* palette */
  --black:#050505;
  --off-black:#0e0e0e;
  --paper:#f5f0eb;
  --orange:#f04e0f;
  --yellow:#f9d020;
  --red:#d9261c;
  --line:rgba(245,240,235,.14);
  --line-soft:rgba(245,240,235,.07);

  /* type */
  --display:'Anton',Impact,system-ui,sans-serif;
  --mono:'Space Mono',ui-monospace,monospace;
  --body:'DM Sans',system-ui,sans-serif;

  /* motion */
  --ease-expo:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.76,0,.24,1);
  --ease-spring:cubic-bezier(.34,1.56,.64,1);

  --gut:clamp(18px,4.5vw,64px);
  --maxw:1600px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
::selection{background:var(--orange);color:var(--black)}
::-webkit-scrollbar{width:8px}
::-webkit-scrollbar-track{background:var(--off-black)}
::-webkit-scrollbar-thumb{background:var(--orange)}

body{
  background:var(--black);
  color:var(--paper);
  font-family:var(--body);
  font-size:clamp(15px,1.05vw,18px);
  line-height:1.55;
  font-weight:400;
  overflow-x:hidden;
  cursor:none;
}
@media (pointer:coarse){body{cursor:auto}}

/* ---------- grain ---------- */
.fx-grain{
  position:fixed;inset:0;pointer-events:none;z-index:8000;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

.hero__cta {
  margin-bottom: 60px; /* Adjust to create more vertical space */
}

/* ---------- digital mosquito cursor ---------- */
.cursor{
  position:fixed;top:0;left:0;width:24px;height:32px;
  background:transparent;z-index:10000;pointer-events:none;
  transition:width .15s var(--ease-expo),height .15s var(--ease-expo);
}
.cursor::before{
  content:'';position:absolute;top:3px;left:50%;transform:translateX(-50%);
  width:6px;height:6px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 1.5px rgba(0,0,0,0.55);
}
.cursor::after{
  content:'';position:absolute;top:10px;left:50%;transform:translateX(-50%);
  width:3px;height:12px;background:var(--orange);
  box-shadow:0 0 0 1px rgba(0,0,0,0.45);
}
.cursor .wing{position:absolute;top:6px;width:4px;height:10px;background:var(--orange);opacity:0.9;box-shadow:0 0 0 0.5px rgba(0,0,0,0.35)}
.cursor .wing--left{left:3px;transform-origin:0 0;transform:translateY(var(--wing-left,0px)) rotate(-25deg)}
.cursor .wing--right{right:3px;transform-origin:100% 0;transform:translateY(var(--wing-right,0px)) rotate(25deg)}
.cursor .tail{position:absolute;bottom:0;left:50%;transform:translateX(-50%);width:2px;height:6px;background:var(--orange)}
.cursor.big{width:32px;height:40px}
.cursor.big::before{width:8px;height:8px;background:var(--yellow)}
.cursor.big::after{width:4px;height:16px;background:var(--orange)}
.cursor.big .wing{width:6px;height:14px;background:var(--orange)}
.cursor.big .tail{width:3px;height:8px;background:var(--orange)}
.cursor-label{
  position:fixed;font-family:var(--mono);font-size:9px;font-weight:700;
  letter-spacing:.12em;text-transform:uppercase;color:var(--paper);
  white-space:nowrap;pointer-events:none;z-index:9999;display:none;
}
.cursor.scrolling::before{background:var(--yellow)}
.cursor.scrolling .wing{background:var(--yellow);opacity:1}
.cursor.down::before{opacity:0.6}
.cursor.down .wing{opacity:0.4}
@media (pointer:coarse){.cursor{display:none}}

/* mosquito cursor canvas — visible on all devices (desktop and mobile) */
#mosquito-cursor{
  cursor:none !important;
  display:block !important;
  visibility:visible !important;
  transition:filter .35s var(--ease-expo);
}
/* hide old DOM cursor when mosquito canvas is active */
#mosquito-cursor~.cursor{display:none !important}

/* ---------- dark mode toggle ---------- */
.darkmode__checkbox{display:none}
.darkmode__toggle{
  position:absolute;top:50%;right:var(--gut);transform:translateY(-50%);
  display:inline-flex;align-items:center;justify-content:center;width:40px;height:40px;
  background:transparent;border:1.5px solid var(--orange);border-radius:50%;
  cursor:pointer;transition:background .3s var(--ease-expo),box-shadow .3s var(--ease-expo);
  z-index:501;color:var(--orange);
}
.eye-icon{width:18px;height:18px;stroke:currentColor;transition:stroke .3s var(--ease-expo)}
.darkmode__toggle:hover{background:rgba(240,78,15,.15);box-shadow:0 0 12px rgba(240,78,15,.3)}
.darkmode__checkbox:checked+.darkmode__toggle{
  background:rgba(240,78,15,.3);box-shadow:0 0 12px rgba(240,78,15,.5);
}
.darkmode__toggle::before{display:none}

/* dark mode filters — applied per direct child so body filter doesn't break position:fixed */
body[data-darkmode]>*:not(#hangingGif):not(#cursor){filter:saturate(0) brightness(1.1) contrast(1.2)}
/* in dark mode (toggle on) the mosquito blends with the 'difference' effect against the page */
body[data-darkmode] #mosquito-cursor{mix-blend-mode:difference}

/* hanging gif animation - drop, hold, bouncy exit */
@keyframes drop-and-exit{
  0%{transform:translateX(-50%) translateY(-110%);opacity:0}
  10%{transform:translateX(-50%) translateY(0);opacity:1}
  20%{transform:translateX(-50%) translateY(-0.3em);opacity:1}
  30%{transform:translateX(-50%) translateY(0);opacity:1}
  65%{transform:translateX(-50%) translateY(0);opacity:1}
  75%{transform:translateX(-50%) translateY(-40px);opacity:1}
  85%{transform:translateX(-50%) translateY(-100px);opacity:0.3}
  100%{transform:translateX(-50%) translateY(-150%);opacity:0}
}
.darkmode__hanging-gif{
  position:fixed;top:-30px;left:50%;transform:translateX(-50%);width:clamp(200px,30vw,400px);height:auto;
  aspect-ratio:1/1;background:url('gifs/BatNaveen.gif') center/contain no-repeat;
  pointer-events:none;z-index:8500;opacity:0;animation:none;will-change:transform;
}
body[data-darkmode] #hangingGif{animation:drop-and-exit 4s var(--ease-inout) 1 forwards;opacity:1;filter:saturate(0) brightness(1.1) contrast(1.2)}

/* ---------- layout ---------- */
.wrap{max-width:var(--maxw);margin:0 auto;padding-inline:var(--gut)}
section{position:relative}
.block{padding-block:clamp(72px,10vw,170px)}

/* ---------- type primitives ---------- */
.stomp{
  font-family:var(--display);font-weight:400;
  line-height:.88;letter-spacing:-.02em;text-transform:uppercase;
}
@media (max-width:640px){
  .stomp{line-height:.95}
}
.mono{font-family:var(--mono);text-transform:uppercase;letter-spacing:.14em}
.eyebrow{
  font-family:var(--mono);font-size:clamp(10px,.8vw,13px);
  text-transform:uppercase;letter-spacing:.26em;color:var(--orange);
}
.orange{color:var(--orange)}
.yellow{color:var(--yellow)}
.red{color:var(--red)}
.ital{font-family:var(--body);font-style:italic;font-weight:400;text-transform:none;letter-spacing:0}
.outline{color:transparent;-webkit-text-stroke:1.5px var(--paper)}

/* ---------- reveal ---------- */
.rev{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease-expo),transform .8s var(--ease-expo)}
.rev.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.rev{opacity:1;transform:none;transition:none}}

/* word-reveal */
.wr{display:inline-block;overflow:hidden;vertical-align:bottom}
.wr i{display:inline-block;font-style:normal;transform:translateY(108%);transition:transform .85s var(--ease-expo)}
.wr.in i{transform:none}

/* ---------- buttons ---------- */
.btn{
  font-family:var(--mono);font-weight:700;text-transform:uppercase;letter-spacing:.12em;
  font-size:clamp(12px,.95vw,15px);
  display:inline-flex;align-items:center;gap:.7em;
  padding:1.05em 1.7em;border:1.5px solid var(--paper);border-radius:999px;
  color:var(--black);background:var(--paper);
  text-decoration:none;cursor:none;
  transition:transform .12s,background .25s,color .25s,border-color .25s;
}
.btn:hover{background:var(--orange);border-color:var(--orange);color:var(--black)}
.btn:active{transform:scale(.95)}
.btn--ghost{background:transparent;color:var(--paper)}
.btn--ghost:hover{background:var(--paper);color:var(--black);border-color:var(--paper)}

/* ============================================================
   SECTIONS + COMPONENTS
   ============================================================ */

/* ---------- NAV ---------- */
.nav{
  position:fixed;top:0;left:0;right:0;z-index:500;
  display:flex;align-items:center;justify-content:space-between;
  padding:18px var(--gut);pointer-events:none;
  mix-blend-mode:difference;
}
.nav>*{pointer-events:auto}
.nav__brand{font-size:clamp(13px,1vw,16px);font-weight:700;color:var(--paper);text-decoration:none}
.nav__brand sup{font-size:.55em;letter-spacing:0}
.nav__links{display:flex;gap:clamp(14px,2vw,34px)}
.navlink{
  position:relative;display:inline-flex;flex-direction:column;overflow:hidden;
  height:1.15em;text-decoration:none;font-family:var(--mono);font-weight:700;
  font-size:clamp(11px,.85vw,13px);text-transform:uppercase;letter-spacing:.1em;color:var(--paper);
}
.navlink__t{display:block;transition:transform .4s var(--ease-expo)}
.navlink:hover .navlink__t{transform:translateY(-100%)}
.nav__cta{font-size:clamp(11px,.85vw,13px);font-weight:700;color:var(--orange);text-decoration:none}
@media(max-width:720px){.nav__links{display:none}}

/* ---------- HERO ---------- */
.hero{
  min-height:100svh;display:flex;flex-direction:column;justify-content:center;
  padding-top:80px;border-bottom:1px solid var(--line);
}
.hero__status{
  position:absolute;top:74px;right:var(--gut);
  font-size:11px;display:flex;align-items:center;gap:.6em;color:var(--paper);
}
.hero__status .dot{
  width:8px;height:8px;border-radius:50%;background:var(--orange);
  box-shadow:0 0 0 0 var(--orange);animation:pulse 2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(240,78,15,.6)}
  70%{box-shadow:0 0 0 12px rgba(240,78,15,0)}
  100%{box-shadow:0 0 0 0 rgba(240,78,15,0)}
}
.hero__eye{margin-bottom:clamp(20px,3vw,40px)}
.hero__title{font-size:clamp(64px,15vw,230px)}
.hero__title .l{display:block}
.hero__dot{color:var(--orange)}
.hero__sub{
  max-width:22ch;margin-top:clamp(24px,3vw,44px);
  font-size:clamp(18px,2.1vw,32px);line-height:1.25;font-weight:500;
}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,3.5vw,48px)}
.hero__foot{
  display:flex;justify-content:space-between;gap:20px;
  padding:18px var(--gut) 0;font-size:11px;color:rgba(245,240,235,.55);
  position:absolute;bottom:24px;left:0;right:0;
}

/* ---------- MARQUEE ---------- */
.marquee{border-block:1px solid var(--line);overflow:hidden;background:transparent}
.marquee__row{overflow:hidden;white-space:nowrap;padding:clamp(6px,2vw,12px) 0}
.marquee__track{display:inline-flex;gap:clamp(2px,1vw,6px);align-items:center;will-change:transform}
.marquee__track img{cursor:pointer}
.marquee__track img{height:clamp(48px,8vw,80px);width:auto;object-fit:contain;display:block;animation:icon-flip 0.8s ease-in-out infinite,float 4s ease-in-out infinite,drift 6s ease-in-out infinite;position:relative}

@keyframes icon-flip{
  0%,100%{transform:scaleX(1) rotateY(0deg);opacity:1}
  50%{transform:scaleX(0.95) rotateY(5deg);opacity:0.9}
}

@keyframes float{
  0%,100%{transform:translateY(0px)}
  50%{transform:translateY(-8px)}
}

@keyframes drift{
  0%,100%{transform:translateX(0px)}
  25%{transform:translateX(2px)}
  75%{transform:translateX(-2px)}
}

.marquee__track img[src*="javascript"]{
  filter:invert(1)
}

/* ---------- belt tap-to-spotlight ---------- */
.belt-spotlight{position:fixed;inset:0;z-index:9000}
.belt-spotlight__backdrop{
  position:absolute;inset:0;
  background:rgba(5,5,5,.35);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  opacity:0;transition:opacity .45s var(--ease-expo)
}
.belt-spotlight__backdrop.in{opacity:1}

/* lift wrapper: handles position + scale (lands back to 0,0 / scale 1) */
.belt-spotlight__lift{
  position:fixed;pointer-events:none;
  transform:translate(0,0) scale(1);
  transition:transform .5s var(--ease-expo);
  perspective:600px;z-index:2
}
.belt-spotlight__icon{
  width:100%;height:100%;object-fit:contain;display:block;
  transform-style:preserve-3d;transform:rotateY(0deg);
  transition:transform .5s var(--ease-expo);
  filter:drop-shadow(0 18px 36px rgba(0,0,0,.45))
}
.belt-spotlight__icon.is-spinning{animation:belt-spin 6s linear infinite,belt-drift 4.5s ease-in-out infinite}
.belt-spotlight__icon[src*="javascript"]{filter:invert(1) drop-shadow(0 18px 36px rgba(0,0,0,.45))}

@keyframes belt-spin{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
@keyframes belt-drift{
  0%,100%{margin-top:0}
  50%{margin-top:-10px}
}

.belt-spotlight__card{
  position:fixed;left:50%;transform:translate(-50%,8px);
  max-width:min(86vw,360px);text-align:center;
  background:rgba(245,240,235,.96);color:var(--black);
  border-radius:12px;padding:14px 18px;
  box-shadow:0 16px 40px rgba(0,0,0,.4);
  opacity:0;pointer-events:none;z-index:3;
  transition:opacity .4s var(--ease-expo) .08s,transform .4s var(--ease-expo) .08s
}
.belt-spotlight__card.in{opacity:1;transform:translate(-50%,0)}
.belt-spotlight__name{
  font-family:var(--display);font-size:clamp(20px,3.2vw,28px);
  line-height:1;letter-spacing:.01em;text-transform:uppercase;margin-bottom:6px
}
.belt-spotlight__desc{
  font-family:var(--body);font-size:clamp(13px,1.6vw,15px);
  line-height:1.45;color:rgba(5,5,5,.78)
}

@media (prefers-reduced-motion:reduce){
  .belt-spotlight__icon.is-spinning{animation:none}
}

/* ---------- HERO PEEK GIF ---------- */
.hero__name-wrapper{display:inline-flex;align-items:center;gap:0;position:relative}
.hero__peek{width:1em;height:1em;object-fit:contain;object-position:center;margin-left:-0.95em;vertical-align:bottom;position:relative;z-index:-1;left:0.625em;animation:peek-emphasis 6s ease-in-out infinite}
@keyframes peek-emphasis{
  0%{transform:translateX(-0.04em);opacity:0}
  25%{transform:translateX(0);opacity:1}
  50%,80%{transform:translateX(0);opacity:1}
  100%{transform:translateX(-0.04em);opacity:0}
}

/* ---------- RANT + MASHER ---------- */
.rant__grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,80px);align-items:center}
.rant__head{font-size:clamp(34px,5.2vw,82px);margin:18px 0 26px}
.rant__p{max-width:34ch;font-size:clamp(16px,1.3vw,21px);color:rgba(245,240,235,.78)}
.rant__p strong{color:var(--paper)}
.masher{border:1px solid var(--line);background:var(--off-black);padding:clamp(20px,2.5vw,34px)}
.masher__meta{
  display:flex;justify-content:space-between;font-size:11px;color:var(--orange);
  padding-bottom:18px;border-bottom:1px solid var(--line);margin-bottom:clamp(24px,4vw,48px);
}
.masher__btn{
  width:100%;border:none;background:var(--orange);color:var(--black);cursor:none;
  font-size:clamp(30px,4.5vw,60px);padding:.5em .4em;line-height:.9;
  transition:transform .08s,background .2s;
}
.masher__btn:hover{background:var(--yellow)}
.masher__btn:active{transform:scale(.97)}
.masher__txt{display:block;transition:opacity .14s,transform .14s}
.masher__txt.out{opacity:0;transform:translateY(-10px)}
.masher__txt.in{opacity:0;transform:translateY(10px)}
.masher__hint{margin-top:18px;font-size:11px;color:rgba(245,240,235,.5);text-align:center}
@media(max-width:840px){.rant__grid{grid-template-columns:1fr}}

/* ---------- SANDBOX ---------- */
.sandbox{border-top:1px solid var(--line)}
.sandbox__head{font-size:clamp(48px,10vw,168px);margin:18px 0 clamp(36px,5vw,70px)}
.sandbox__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(36px,5vw,80px);align-items:start}
.sandbox__lead{font-size:clamp(20px,2.2vw,34px);line-height:1.3;font-weight:500;max-width:20ch}
.sandbox__lead .ital{color:var(--yellow)}
.sandbox__cards{display:flex;flex-direction:column;gap:0}
.scard{
  display:grid;grid-template-columns:auto 1fr;gap:8px 28px;align-items:baseline;
  padding:26px 0;border-top:1px solid var(--line);
}
.scard:last-child{border-bottom:1px solid var(--line)}
.scard__n{grid-row:span 2;font-size:13px;color:var(--orange);font-weight:700;font-family:var(--mono)}
.scard__t{font-size:clamp(26px,3vw,46px)}
.scard p{color:rgba(245,240,235,.7);max-width:46ch;font-size:clamp(15px,1.15vw,18px)}
@media(max-width:840px){.sandbox__grid{grid-template-columns:1fr;gap:32px}}

/* ---------- TOOLS ---------- */
.tools{border-top:1px solid var(--line)}
.tools__head{font-size:clamp(30px,4.6vw,72px);margin:18px 0 clamp(30px,4vw,56px)}
.tools__list{list-style:none}
.trow{
  display:grid;grid-template-columns:auto 1fr 1.3fr;gap:clamp(18px,3vw,60px);align-items:center;
  padding:clamp(22px,3vw,40px) 0;border-top:1px solid var(--line);
  transition:padding-left .35s var(--ease-expo),background .35s,color .35s;
}
.trow:last-child{border-bottom:1px solid var(--line)}
.trow__idx{font-size:12px;color:var(--orange);font-family:var(--mono)}
.trow__name{font-size:clamp(34px,6vw,96px);transition:color .35s}
.trow__desc{font-size:clamp(15px,1.2vw,19px);color:rgba(245,240,235,.6);max-width:42ch}
.trow:hover{padding-left:clamp(12px,2vw,40px);background:var(--paper);color:var(--black)}
.trow:hover .trow__name{color:var(--orange)}
.trow:hover .trow__idx{color:var(--black)}
.trow:hover .trow__desc{color:rgba(5,5,5,.7)}
@media(max-width:840px){.trow{grid-template-columns:auto 1fr;gap:8px 18px}.trow__desc{grid-column:1/-1}}

/* ---------- STATEMENT ---------- */
.statement{border-top:1px solid var(--line);background:var(--off-black)}
.statement__head{font-size:clamp(40px,8vw,150px);max-width:18ch}
.statement__head em{font-style:normal}

/* ---------- WORK ---------- */
.work{border-top:1px solid var(--line)}
.work__top{
  display:flex;justify-content:space-between;align-items:flex-end;gap:24px;
  margin-bottom:clamp(34px,4vw,60px);flex-wrap:wrap;
}
.work__head{font-size:clamp(46px,9vw,150px);margin-top:14px}
.work__note{font-size:11px;color:rgba(245,240,235,.5);text-align:right;line-height:1.6}
.work__grid{display:grid;grid-template-columns:1fr 1fr;gap:clamp(14px,2vw,28px)}
.wcard{display:flex;flex-direction:column;gap:14px}
.wcard__img{width:100%;aspect-ratio:16/10;display:block;border:1px solid var(--line)}
.wcard figcaption{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.wcard__t{font-size:clamp(22px,2.4vw,40px)}
.wcard__tag{font-size:11px;color:var(--orange);font-family:var(--mono)}
@media(max-width:720px){.work__grid{grid-template-columns:1fr}.work__note{text-align:left}}

/* ---------- CONTACT / FOOTER ---------- */
.contact{padding:clamp(80px,12vw,180px) 0 0;border-top:1px solid var(--line)}
.contact__inner{display:flex;flex-direction:column;align-items:center;text-align:center;gap:22px}
.contact__mail{
  font-size:clamp(64px,18vw,280px);color:var(--paper);text-decoration:none;line-height:.86;
  transition:color .25s;
}
.contact__mail:hover{color:var(--orange)}
.contact__row{display:flex;gap:14px;flex-wrap:wrap;justify-content:center}
.foot{
  display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;
  margin-top:clamp(60px,9vw,140px);padding:22px var(--gut);
  border-top:1px solid var(--line);font-size:11px;color:rgba(245,240,235,.5);
}
#word-rotate {
  display: inline-block;
  white-space: nowrap;
  will-change: transform, opacity;
  min-width: 12ch;
}