/* ============================================================
   Avijit Anand — Portfolio
   Design system: Kanit / #0C0C0C / gradient display type
   ============================================================ */

:root{
  --bg:#0C0C0C;
  --ink:#D7E2EA;
  --muted:rgba(215,226,234,0.6);
  --grad-top:#646973;
  --grad-bottom:#BBCCD7;
  --btn-grad:linear-gradient(123deg,#18011F 7%,#B600A8 37%,#7621B0 72%,#BE4C00 100%);
  --radius-xl:60px;
  --radius-card:40px;
}

*{ box-sizing:border-box; margin:0; padding:0; }

html, body{
  background:var(--bg);
  height:100%;
}

body{
  font-family:'Kanit', sans-serif;
  color:var(--ink);
  overflow-x:clip;
  -webkit-font-smoothing:antialiased;
}

img{ display:block; max-width:100%; }
a{ color:inherit; }

/* ---------- display type ---------- */
.hero-heading,
.mega-heading{
  background:linear-gradient(180deg, var(--grad-top) 0%, var(--grad-bottom) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:-0.02em;
  line-height:1;
}

.mega-heading{
  font-size:clamp(3rem, 12vw, 160px);
  text-align:center;
}

.mega-heading.dark{
  background:none;
  -webkit-text-fill-color:currentColor;
  color:var(--bg);
}

/* ---------- fade-in on view ---------- */
.fade{
  opacity:0;
  transform:translate(var(--fx,0), var(--fy,30px));
  transition:opacity .7s cubic-bezier(.25,.1,.25,1), transform .7s cubic-bezier(.25,.1,.25,1);
  transition-delay:var(--fd,0s);
}
.fade.show{ opacity:1; transform:translate(0,0); }

@media (prefers-reduced-motion:reduce){
  .fade{ opacity:1; transform:none; transition:none; }
  .marquee-row{ transform:none !important; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero{
  min-height:100vh;
  min-height:100svh;
  display:flex;
  flex-direction:column;
  position:relative;
  overflow-x:clip;
}

.navbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:32px 40px 0;
  position:relative;
  z-index:20;
}

.navbar a{
  color:var(--ink);
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:500;
  font-size:clamp(0.85rem, 1.4vw, 1.4rem);
  transition:opacity .2s ease;
}
.navbar a:hover{ opacity:.7; }

.hero-heading-wrap{
  overflow:hidden;
  width:100%;
  margin-top:1.5rem;
}

.hero-heading{
  font-size:17.5vw;
  white-space:nowrap;
  text-align:center;
  width:100%;
}

.hero-bottom{
  margin-top:auto;
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding:0 40px 40px;
  position:relative;
  z-index:20;
}

.hero-lead{
  color:var(--ink);
  font-weight:300;
  text-transform:uppercase;
  letter-spacing:0.05em;
  line-height:1.4;
  font-size:clamp(0.75rem, 1.4vw, 1.5rem);
  max-width:260px;
}

.hero-portrait{
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width:clamp(280px, 36vw, 520px);
  z-index:10;
  will-change:transform;
}

.hero-portrait img{
  width:100%;
  height:auto;
  -webkit-mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
  mask-image:linear-gradient(180deg,#000 82%,transparent 100%);
}

/* magnet transform is applied to the inner img via JS */

/* ---------- gradient pill button ---------- */
.contact-btn{
  display:inline-block;
  border-radius:999px;
  background:var(--btn-grad);
  box-shadow:0 4px 4px rgba(181,1,167,0.25), 4px 4px 12px #7721B1 inset;
  outline:2px solid #fff;
  outline-offset:-3px;
  color:#fff;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.15em;
  font-weight:500;
  font-size:clamp(0.7rem, 1.1vw, 1rem);
  padding:14px 44px;
  border:none;
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
}
.contact-btn:hover{ transform:translateY(-2px); filter:brightness(1.1); }
.contact-btn.as-button{ font-family:inherit; }

/* ---------- ghost pill button ---------- */
.ghost-btn{
  display:inline-block;
  border-radius:999px;
  border:2px solid var(--ink);
  color:var(--ink);
  background:transparent;
  text-decoration:none;
  text-transform:uppercase;
  letter-spacing:0.15em;
  font-weight:500;
  font-size:clamp(0.75rem, 1vw, 1rem);
  padding:12px 34px;
  cursor:pointer;
  transition:background .2s ease;
}
.ghost-btn:hover{ background:rgba(215,226,234,0.1); }

/* ============================================================
   MARQUEE
   ============================================================ */
.marquee-section{
  background:var(--bg);
  padding:clamp(6rem, 12vw, 10rem) 0 2.5rem;
  display:flex;
  flex-direction:column;
  gap:12px;
  overflow:hidden;
}

.marquee-row{
  display:flex;
  gap:12px;
  will-change:transform;
}

.marquee-row img{
  width:420px;
  height:270px;
  object-fit:cover;
  border-radius:16px;
  flex-shrink:0;
}

@media (max-width:640px){
  .marquee-row img{ width:260px; height:170px; }
}

/* ============================================================
   ABOUT
   ============================================================ */
.about{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:clamp(2.5rem, 5vw, 4rem);
  padding:80px 24px;
  text-align:center;
}

.about-text{
  color:var(--ink);
  font-weight:500;
  line-height:1.7;
  max-width:560px;
  font-size:clamp(1rem, 2vw, 1.35rem);
}

.about-text .ch{ opacity:0.2; }
.about-text .ch.on{ opacity:1; transition:opacity .15s linear; }

/* ============================================================
   SKILLS
   ============================================================ */
.skills-section{
  padding:80px 24px 120px;
  max-width:1000px;
  margin:0 auto;
}

.skills-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:48px;
  margin-top:clamp(2.5rem, 5vw, 4rem);
}

.skills{ display:flex; flex-direction:column; gap:14px; }

.skillrow{
  display:flex;
  justify-content:space-between;
  text-transform:uppercase;
  letter-spacing:0.05em;
  font-weight:500;
  color:var(--muted);
  font-size:clamp(0.85rem, 1.4vw, 1.05rem);
}

.skillbar{
  background:rgba(215,226,234,0.08);
  border:1px solid rgba(215,226,234,0.15);
  padding:6px;
  border-radius:999px;
  overflow:hidden;
}

.skillbar .fill{
  height:10px;
  border-radius:999px;
  transform:scaleX(0);
  transform-origin:left;
  background:linear-gradient(90deg, var(--grad-top), var(--grad-bottom));
}

.softskills-title{
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  margin-bottom:14px;
  font-size:clamp(1rem, 1.8vw, 1.3rem);
}

.softskills ul{
  color:var(--muted);
  padding-left:20px;
  line-height:2;
  font-weight:300;
  font-size:clamp(0.9rem, 1.5vw, 1.1rem);
}

/* ============================================================
   SERVICES (white sheet)
   ============================================================ */
.services{
  background:#fff;
  color:var(--bg);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  padding:clamp(5rem, 10vw, 8rem) 24px;
  position:relative;
  z-index:5;
}

.service-list{
  max-width:1000px;
  margin:clamp(4rem, 8vw, 7rem) auto 0;
}

.service-item{
  display:flex;
  gap:clamp(1.5rem, 4vw, 4rem);
  align-items:flex-start;
  padding:clamp(2rem, 4vw, 3rem) 0;
  border-bottom:1px solid rgba(12,12,12,0.15);
}
.service-item:first-child{ border-top:1px solid rgba(12,12,12,0.15); }

.service-num{
  font-weight:900;
  font-size:clamp(3rem, 10vw, 140px);
  line-height:0.9;
  color:var(--bg);
}

.service-body{ flex:1; min-width:0; padding-top:clamp(0.25rem, 1.5vw, 1.25rem); }

.service-name{
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.02em;
  font-size:clamp(1rem, 2.2vw, 2.1rem);
  margin-bottom:10px;
}

.service-desc{
  font-weight:300;
  line-height:1.7;
  max-width:640px;
  font-size:clamp(0.85rem, 1.6vw, 1.25rem);
  opacity:0.6;
}

/* ============================================================
   PROJECTS (sticky stacking cards)
   ============================================================ */
.projects{
  background:var(--bg);
  border-radius:var(--radius-xl) var(--radius-xl) 0 0;
  margin-top:-56px;
  position:relative;
  z-index:10;
  padding:clamp(5rem, 10vw, 8rem) 24px 40px;
}

.projects-note{
  text-align:center;
  color:var(--muted);
  font-weight:300;
  margin-top:16px;
  font-size:clamp(0.85rem, 1.4vw, 1.1rem);
}

.stack-list{
  max-width:1000px;
  margin:clamp(3rem, 6vw, 5rem) auto 0;
}

.stack-wrap{
  height:85vh;
  position:relative;
}

.stack-card{
  position:sticky;
  top:96px;
  border:2px solid var(--ink);
  border-radius:var(--radius-card);
  background:var(--bg);
  padding:clamp(1rem, 3vw, 2rem);
  will-change:transform;
  transform-origin:top center;
  display:flex;
  flex-direction:column;
  gap:clamp(1rem, 2.5vw, 1.75rem);
}

.stack-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
  flex-wrap:wrap;
}

.stack-num{
  font-weight:900;
  font-size:clamp(3rem, 9vw, 120px);
  line-height:0.9;
  background:linear-gradient(180deg, var(--grad-top), var(--grad-bottom));
  -webkit-background-clip:text;
  background-clip:text;
  -webkit-text-fill-color:transparent;
  color:transparent;
}

.stack-meta{ flex:1; min-width:180px; }

.stack-cat{
  text-transform:uppercase;
  letter-spacing:0.15em;
  font-weight:300;
  color:var(--muted);
  font-size:clamp(0.7rem, 1.1vw, 0.95rem);
}

.stack-title{
  font-weight:600;
  text-transform:uppercase;
  font-size:clamp(1.3rem, 3vw, 2.4rem);
  line-height:1.1;
}

.stack-desc{
  color:var(--muted);
  font-weight:300;
  font-size:clamp(0.85rem, 1.4vw, 1.05rem);
  margin-top:6px;
}

.stack-img{
  border-radius:calc(var(--radius-card) - 12px);
  overflow:hidden;
  background:#151515;
}

.stack-img img{
  width:100%;
  height:clamp(240px, 42vw, 480px);
  object-fit:cover;
}

/* ============================================================
   CONTACT
   ============================================================ */
.contact{
  padding:clamp(5rem, 10vw, 8rem) 24px;
  max-width:1100px;
  margin:0 auto;
}

.contact-grid{
  display:grid;
  grid-template-columns:1fr;
  max-width:760px;
  margin:clamp(3rem, 6vw, 5rem) auto 0;
}

input, textarea{
  width:100%;
  padding:14px 18px;
  border-radius:16px;
  border:1px solid rgba(215,226,234,0.25);
  background:rgba(215,226,234,0.05);
  color:var(--ink);
  font-family:inherit;
  font-weight:300;
  font-size:15px;
  margin-bottom:16px;
}
input::placeholder, textarea::placeholder{ color:var(--muted); }
input:focus, textarea:focus{ outline:2px solid var(--grad-bottom); outline-offset:1px; }

textarea{ min-height:180px; resize:vertical; }

#contactForm{ display:flex; flex-direction:column; }
#contactForm .contact-btn{ align-self:center; margin-top:8px; }
#contactForm .form-msg{ text-align:center; }

.form-msg{ margin-top:12px; color:var(--muted); font-size:13px; font-weight:300; }

.contact-cards{ display:flex; flex-direction:column; gap:12px; }

.ccard{
  border:1px solid rgba(215,226,234,0.2);
  border-radius:20px;
  padding:16px 20px;
}
.ccard strong{
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-weight:600;
  font-size:0.85rem;
}
.ccard div{ color:var(--muted); font-weight:300; font-size:13px; margin-top:4px; }
.ccard a{ color:var(--grad-bottom); }

.social-row{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:center;
  margin-top:48px;
}

footer{
  text-align:center;
  color:var(--muted);
  font-weight:300;
  padding:32px 0 40px;
  font-size:13px;
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:900px){
  .navbar{ padding:24px 24px 0; }
  .hero-bottom{ padding:0 24px 32px; }
  .skills-grid{ grid-template-columns:1fr; }
  .contact-grid{ grid-template-columns:1fr; }
  .stack-card{ top:72px; }
}

@media (max-width:640px){
  .hero-portrait{
    bottom:auto;
    top:50%;
    transform:translate(-50%,-50%);
  }
  .hero-heading{ font-size:15vw; margin-top:0.5rem; }
  .hero-lead{ max-width:160px; }
  .service-item{ flex-direction:column; gap:0.75rem; }
  .stack-wrap{ height:auto; margin-bottom:24px; }
  .stack-card{ position:relative; top:0; }
}

/* ============================================================
   Admin page (/adminlog) — re-skinned to the new theme
   ============================================================ */
.container{
  max-width:1100px;
  margin:40px auto;
  padding:24px;
}

.card{
  background:rgba(215,226,234,0.04);
  border:1px solid rgba(215,226,234,0.18);
  border-radius:24px;
  padding:20px;
}

.small{ font-size:13px; font-weight:300; }

.grid2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
@media (max-width:700px){ .grid2{ grid-template-columns:1fr; } }

button.primary{
  border-radius:999px;
  border:none;
  background:var(--btn-grad);
  box-shadow:0 4px 4px rgba(181,1,167,0.25), 4px 4px 12px #7721B1 inset;
  outline:2px solid #fff;
  outline-offset:-3px;
  color:#fff;
  font-family:inherit;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.12em;
  font-size:13px;
  padding:12px 28px;
  cursor:pointer;
  transition:transform .2s ease, filter .2s ease;
}
button.primary:hover{ transform:translateY(-2px); filter:brightness(1.1); }

.toggle-btn{
  display:inline-block;
  border-radius:999px;
  border:2px solid rgba(215,226,234,0.5);
  background:transparent;
  color:var(--ink);
  font-family:inherit;
  font-weight:500;
  text-transform:uppercase;
  letter-spacing:0.08em;
  font-size:12px;
  padding:9px 18px;
  cursor:pointer;
  text-decoration:none;
  transition:background .2s ease, border-color .2s ease;
}
.toggle-btn:hover{ background:rgba(215,226,234,0.1); border-color:var(--ink); }

.admin-container{ margin-top:40px; }

.admin-login{
  min-height:80vh;
  display:flex;
  align-items:center;
  justify-content:center;
}

.admin-header{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:18px;
}

.admin-tabs{
  display:flex;
  gap:8px;
  margin-bottom:18px;
  flex-wrap:wrap;
}

.tab-btn.active{
  background:linear-gradient(90deg, var(--grad-top), var(--grad-bottom));
  color:var(--bg);
  border-color:transparent;
}

.tab-panel{ display:block; }

.admin-label{
  display:block;
  font-size:12px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.08em;
  color:var(--muted);
  margin:14px 0 6px;
}

.messages-list{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}

.message-card{ padding:14px 16px; }

.message-top{
  display:flex;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.admin-projects{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:12px;
}

.admin-project-row{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
}

.admin-project-thumb{
  width:84px;
  height:64px;
  border-radius:12px;
  overflow:hidden;
  flex-shrink:0;
  background:rgba(0,0,0,0.4);
  display:flex;
  align-items:center;
  justify-content:center;
}
.admin-project-thumb img{ width:100%; height:100%; object-fit:cover; }

.img-preview{ margin-top:10px; }
.img-preview img{
  max-width:180px;
  max-height:140px;
  border-radius:12px;
  border:1px solid rgba(215,226,234,0.25);
}

.delete-btn{ color:#ff8a8a; border-color:rgba(255,138,138,0.5); }
.delete-btn:hover{ background:rgba(255,138,138,0.1); border-color:#ff8a8a; }

@media (max-width:700px){
  .admin-project-row{ flex-direction:column; align-items:flex-start; }
}

/* admin page uses --muted / --accent / --primary from the old theme in inline styles */
:root{
  --accent:var(--ink);
  --primary:var(--grad-bottom);
}

/* ============================================================
   CUSTOM ANIMATED CURSOR
   (desktop only — touch devices keep the normal behaviour)
   ============================================================ */
@media (hover:hover) and (pointer:fine){
  body.has-cursor, body.has-cursor a, body.has-cursor button,
  body.has-cursor input, body.has-cursor textarea, body.has-cursor label{
    cursor:none;
  }

  .cursor-dot, .cursor-ring{
    position:fixed;
    top:0; left:0;
    pointer-events:none;
    z-index:99999;
    border-radius:50%;
    transform:translate(-50%,-50%);
  }

  .cursor-dot{
    width:8px; height:8px;
    background:var(--primary, #d7e2ea);
    transition:opacity .25s ease, width .2s ease, height .2s ease;
  }

  .cursor-ring{
    width:38px; height:38px;
    border:1.5px solid var(--primary, #d7e2ea);
    opacity:.55;
    transition:width .25s cubic-bezier(.2,.9,.2,1),
               height .25s cubic-bezier(.2,.9,.2,1),
               opacity .25s ease,
               background .25s ease;
  }

  /* hovering a link / button — ring grows, dot shrinks */
  body.cursor-hover .cursor-ring{
    width:64px; height:64px;
    background:rgba(215,226,234,0.08);
    opacity:.9;
  }
  body.cursor-hover .cursor-dot{ width:4px; height:4px; }

  /* mouse pressed — quick squeeze */
  body.cursor-down .cursor-ring{ width:28px; height:28px; opacity:1; }
}

/* ============================================================
   "VIEW LIVE PROJECT" button inside project cards
   ============================================================ */
.stack-live-btn{
  padding:10px 22px;
  font-size:clamp(0.65rem, 0.9vw, 0.85rem);
  white-space:nowrap;
  align-self:center;
  transition:background .2s ease, transform .2s ease;
}
.stack-live-btn:hover{ transform:translateY(-2px); }

@media (max-width:640px){
  .stack-live-btn{ padding:8px 16px; }
}