/* ===========================
   Arjun Portfolio — Mobile-First Fix
   =========================== */

/* Base */
:root{
  --bg:#0b0c0f; --card:#111318; --text:#e9edf3; --muted:#a8b0bc;
  --brand:#FFCC00; --brand-hover:#E6B800;
  --brand-grad-start:#FFD000; --brand-grad-end:#FFB300;
  --brand-soft:rgba(255,204,0,.10); --brand-soft-border:rgba(255,204,0,.25);
  --border:#1b1f27;

  /* dark gradients */
  --ink-1:#0b0c0f; --ink-2:#0d1015; --ink-3:#0e1218; --ink-4:#0a0c12;
  --bg-gradient:
    radial-gradient(1100px 520px at 12% -8%, rgba(255,255,255,.05) 0%, rgba(255,255,255,0) 60%),
    radial-gradient(900px 420px at 110% 8%, rgba(255,255,255,.035) 0%, rgba(255,255,255,0) 58%),
    linear-gradient(180deg, var(--ink-1) 0%, var(--ink-4) 100%);
  --card-gradient:
    linear-gradient(180deg, rgba(255,255,255,.03), rgba(255,255,255,0) 38%),
    linear-gradient(180deg, #13161c, #0f1217);
  --brand-gradient: linear-gradient(180deg, var(--brand-grad-start) 0%, var(--brand-grad-end) 100%);
  --safe-left: env(safe-area-inset-left, 0px);
  --safe-right: env(safe-area-inset-right, 0px);

  /* layout */
  --radius:20px; --shadow:0 6px 28px rgba(0,0,0,.35);
  --header-h:64px;

  /* safe-areas + paddings */
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --pad-x: clamp(14px, 4vw, 24px);
}

*{box-sizing:border-box}
html{ scroll-behavior:smooth; scroll-padding-top: var(--header-h); }
html, body{
  overflow-x:hidden;
  -webkit-text-size-adjust:100%;
  text-size-adjust:100%;
}

body{
  margin:0; color:var(--text);
  background-color:var(--bg); background-image:var(--bg-gradient);
  background-attachment:fixed; background-repeat:no-repeat; background-size:cover;
  font-family:"Space Grotesk", system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  line-height:1.6; position:relative; overflow-x:hidden;
}

/* subtle ambient drift */
body::after{
  content:"";
  position:fixed; inset:-20%; pointer-events:none; z-index:0;
  background:
    radial-gradient(28rem 20rem at var(--mx,70%) var(--my,10%), rgba(255,204,0,.055), transparent 60%),
    radial-gradient(40rem 28rem at 20% 8%, rgba(255,255,255,.035), transparent 60%);
  mix-blend-mode:screen; animation:drift 18s ease-in-out infinite alternate;
}
@keyframes drift{0%{transform:translate3d(0,0,0) scale(1)}100%{transform:translate3d(0,-2.5%,0) scale(1.02)}}

h1,h2,h3{letter-spacing:-0.02em}
h1{font-size:clamp(2.2rem, 6.8vw, 4rem); line-height:1.12; margin:.2rem 0 .8rem}
h2{font-size:clamp(1.4rem, 4.2vw, 2.2rem); margin:0 0 1rem}
h3{font-size:clamp(1rem, 3.2vw, 1.1rem); margin:.2rem 0 .4rem}
p{margin:.4rem 0 1rem}
a{color:var(--brand); text-decoration:none}
a:hover{opacity:.9}

/* Container: perfectly centered + symmetric padding */
.container{
  max-width:1100px;
  margin-left:auto; margin-right:auto;
  padding-left:calc(var(--pad-x) + var(--safe-left));
  padding-right:calc(var(--pad-x) + var(--safe-right));
}


/* Header (fixed; hidden at top) */
.site-header{
  position:fixed; inset:0 auto auto 0; right:0; height:var(--header-h); z-index:50;
  display:flex; align-items:center;
  background:transparent; border-bottom:1px solid transparent;
  opacity:0; transform:translateY(-100%); pointer-events:none;
  transition:opacity .25s ease, transform .25s ease, background .25s ease, border-color .25s ease, backdrop-filter .25s ease;
}
.site-header.visible{
  backdrop-filter: blur(10px);
  background:rgba(11,12,15,.65);
  border-bottom:1px solid var(--border);
  opacity:1; transform:translateY(0); pointer-events:auto;
}
.header-content{display:flex; align-items:center; justify-content:space-between; padding:12px 0; width:100%}
.logo{
  display:inline-flex; align-items:center; justify-content:center;
  height:40px; padding:0 12px; border-radius:999px;
  background:linear-gradient(145deg,var(--brand-grad-start),var(--brand-grad-end));
  color:#0a0c10; font-weight:800; letter-spacing:-0.01em; white-space:nowrap; font-size:1rem;
}
@media (max-width:420px){ .logo{ font-size:.95rem; padding:0 10px; } }
.nav__list{display:flex; gap:12px; list-style:none; margin:0; padding:0}
.nav__list a{display:inline-block; padding:8px 12px; border-radius:999px}
.nav__list a:hover{background:rgba(255,255,255,.06)}
.pill{border:1px solid var(--border)}
.nav__toggle{display:none; background:none; color:var(--text); border:0; font-size:1.4rem}
@media (max-width:820px){
  .nav__toggle{display:block}
  .nav__list{position:absolute; right:16px; top:64px; background:var(--card);
    border:1px solid var(--border); border-radius:16px; box-shadow:var(--shadow);
    padding:10px; display:none; flex-direction:column; width:min(280px, 86vw)}
  .nav__list.open{display:flex}
}

/* HERO — full screen, copy left + image right (clean) */
.hero{
  position:relative;
  min-height:100vh;       /* fallback */
  min-height:100svh;      /* newer mobile */
  min-height:100dvh;      /* dynamic viewport */
  display:flex; align-items:center; justify-content:center;
  width:100%;
  padding-block: max(24px, calc(24px + var(--safe-top)))
                 max(24px, calc(24px + var(--safe-bottom)));
  box-sizing:border-box;
}
.hero::before{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 480px at 50% -16%, rgba(255,255,255,.035), transparent 65%),
    radial-gradient(900px 360px at 100% 0%, rgba(255,255,255,.02), transparent 60%);
  opacity:.45;
}
@media (max-width:720px){ .hero::before{opacity:.28} }

.hero__inner{
  width:100%;
  max-width:1100px;     /* align with .container */
  margin:0 auto;
  padding-inline:0;     /* container handles side padding */
}

.hero__grid{
  display:grid;
  grid-template-columns: minmax(0,1.15fr) minmax(0,0.85fr); /* text | image */
  align-items:center;
  gap:clamp(24px, 6vw, 56px);
}

.hero__copy{
  min-width:0;
  text-align:left;
  justify-self:start;
}
.hero__title{ color:var(--brand); }
.hero__tag, .hero__meta{ text-align:left; }
.hero__cta{
  display:flex; gap:12px; flex-wrap:wrap;
  justify-content:flex-start; /* left-align buttons */
}

/* Right-side image */
.hero__photo{
  justify-self:end;       /* stick to right edge */
  align-self:center;
  max-width:min(40vw, 480px);
}
.hero__img{
  display:block; width:100%; height:auto; object-fit:contain;
  object-position: bottom right;
  filter: drop-shadow(0 14px 48px rgba(0,0,0,.45));
  transform: translateZ(0);
}

/* Mobile: stack and re-center */
@media (max-width:900px){
  .hero__grid{ grid-template-columns:1fr; }
  .hero__copy{ text-align:center; justify-self:center; }
  .hero__tag, .hero__meta{ text-align:center; }
  .hero__cta{ justify-content:center; }
  .hero__photo{ justify-self:center; max-width:min(68vw, 420px); margin-top:10px; }
}


/* Sections — centered, balanced spacing */
.section{ position:relative; padding:72px 0; border-top:1px solid var(--border); }
.section > .container{ margin-left:auto; margin-right:auto; } /* explicit centering */
@media (max-width:720px){
  .section{ padding:56px 0; }
  .section::before{ display:none; }  /* remove mobile “bar” vignette */
}
.section::before{
  content:""; position:absolute; left:0; right:0; top:-1px; height:140px;
  background:radial-gradient(600px 120px at 50% 0, rgba(255,255,255,.04), transparent 70%);
  pointer-events:none;
}

@media (max-width:900px){
  body{ background-attachment:scroll; }
}

/* Grids */
.grid-2{display:grid; gap:28px; grid-template-columns:1.2fr .8fr}
.grid-3{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
@media (max-width:1000px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:900px){ .grid-2{grid-template-columns:1fr} .grid-3{grid-template-columns:1fr} }
@media (max-width:700px){ .cards{grid-template-columns:1fr} }

/* Buttons */
.btn{
  display:inline-block; padding:10px 16px; border-radius:999px; border:1px solid var(--border);
  transition:transform .2s ease, background .2s ease, filter .2s ease, box-shadow .2s ease
}
.btn:hover{transform:translateY(-2px)}
.btn--primary{ background:var(--brand-gradient); color:#07121e; border-color:transparent; }
.btn--primary:hover{filter:brightness(.97)}
.btn--primary:focus-visible{outline:none; box-shadow:0 0 0 3px rgba(255,204,0,.35)}

/* Cards & badges */
.cards{display:grid; gap:18px; grid-template-columns:repeat(3,1fr)}
.card{
  background:var(--card-gradient); border:1px solid var(--border); border-radius:var(--radius);
  padding:18px; transition:box-shadow .2s ease, transform .2s ease, border-color .2s ease, opacity .6s ease, translate .6s ease;
}
.card:hover{box-shadow:var(--shadow); border-color:rgba(255,204,0,.18); transform:translateY(-4px)}
.card__head{display:flex; align-items:center; justify-content:space-between}
.badge{
  font-size:.75rem; color:#FFD84D; background:var(--brand-soft);
  border:1px solid var(--brand-soft-border); padding:4px 8px; border-radius:999px
}
@media (max-width:1000px){ .cards{grid-template-columns:1fr 1fr} }
@media (max-width:700px){ .cards{grid-template-columns:1fr} }

/* Lists / tags */
.list{margin:0; padding-left:18px}
.stack-tags{display:flex; flex-wrap:wrap; gap:13px; margin-top:10px}
.stack-tags span{
  font-size:.85rem; color:#FFE38A; background:var(--brand-soft);
  border:1px solid var(--brand-soft-border); padding:6px 10px; border-radius:999px
}

/* Links inside cards */
.link-out{display:inline-block; margin-top:8px}
.inline-cta{margin-top:12px}
.link-cta{border-bottom:1px dashed var(--brand)}

/* Contact bar */
.contact-bar{display:flex; gap:16px; justify-content:left}
.contact-bar a{padding:8px 12px; border-radius:999px; border:1px solid var(--border)}
.contact-bar a:hover{background:rgba(255,255,255,.06)}

/* Reveal */
.fade-in{opacity:0; transform:translateY(16px); transition:opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1)}
.fade-in.scroll-visible{opacity:1; transform:translateY(0)}
.fade-in{transition-delay:var(--delay, 0s)}

@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  body::after{animation:none}
  .fade-in{transition:none; opacity:1; transform:none}
  .btn,.card{transition:none}
}

/* ---- Hero fine-tuning (desktop only) ---- */
@media (min-width: 900px){
  /* push the copy a little to the right */
  .hero__copy{
    margin-left: clamp(12px, 3vw, 64px);
  }

  /* give a bit more space between text and image */
  .hero__grid{
    gap: clamp(32px, 6vw, 72px);
  }

  /* enlarge the image so it occupies more of the hero */
  .hero__photo{
    max-width: min(52vw, 640px);   /* was ~40vw */
    align-self: end;               /* sit a touch lower for balance */
  }
  .hero__img{
    transform: translateZ(0) scale(2.4); /* tasteful zoom */

  }
}

/* keep mobile behavior unchanged */
@media (max-width: 899px){
  .hero__copy{ margin-left: 0; }
  .hero__photo{ max-width: min(68vw, 420px); }
  .hero__img{ transform: translateZ(0) scale(1); }
}

/* utility: justify long paragraphs nicely */
.justify{
  text-align: justify;
  text-justify: inter-word;
  hyphens: auto;                 /* smoother justification */
}
/* Contact buttons: rectangle, yellow background, black text + justified layout */
.hero__copy .contact-bar,
.section .contact-bar{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); /* spreads/justifies */
  gap: 12px;
  align-items: stretch;
  justify-items: stretch;
}

.contact-bar a{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 16px;
  border-radius: 12px;                /* rectangle (soft corners) */
  background: var(--brand);           /* yellow */
  color: #0A0C10;                     /* black text */
  font-weight: 600;
  border: 1px solid transparent;
  text-decoration: none;
  box-shadow: 0 0 0 1px rgba(0,0,0,.08) inset;
  transition: transform .15s ease, filter .15s ease, box-shadow .2s ease;
}
.contact-bar a:hover{ filter: brightness(.97); transform: translateY(-1px); }
.contact-bar a:active{ transform: translateY(0); }
.contact-bar a:focus-visible{ outline: none; box-shadow: 0 0 0 3px rgba(255,204,0,.35); }

/* Optional: keep them on one line (desktop) instead of filling the whole width
@media (min-width: 900px){
  .hero__copy .contact-bar{
    grid-template-columns: repeat(4, max-content);
    justify-content: flex-start;
  }
}
*/
/* Icon sizing + color inside yellow buttons */
.contact-bar a{
  display:inline-flex; align-items:center; justify-content:center;
  gap:10px; font-weight:600;
}
.contact-bar a .ico{ width:18px; height:18px; color:#0A0C10; }          /* inline SVG uses currentColor */
.contact-bar a .ico-img{ width:18px; height:18px; display:block; filter:brightness(0); } /* make SVG imgs black */

/* --- Shuffling Card Deck --- */
.card-deck{
  position: relative;
  width: 100%;
  max-width: 840px;
  margin: 0 auto;
  /* reserve height via JS; fallback so content doesn't jump */
  min-height: 220px;
}
.card-deck .card{
  position: absolute;
  left: 50%;
  top: 0;
  width: min(760px, 100%);
  transform: translate(-50%, 0);
  will-change: transform, opacity;
  transition: transform .55s cubic-bezier(.22,.61,.36,1), opacity .45s ease;
  /* reuse your existing card visuals */
  background: var(--card-gradient);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: none;
}
.card-deck .card:hover{ box-shadow: var(--shadow); border-color: rgba(255,204,0,.18); }

/* show arrows */
.deck-btn{
  position: absolute;
  bottom: -46px;
  width: 40px; height: 40px;
  border-radius: 10px;
  background: var(--brand); color:#0A0C10;
  border: 0;
  font-size: 20px; line-height: 1;
  display: grid; place-items: center;
  cursor: pointer;
  transition: filter .15s ease, transform .15s ease;
}
.deck-btn:hover{ filter:brightness(.97); transform:translateY(-1px); }
.deck-prev{ left: 0; }
.deck-next{ right: 0; }

/* responsive arrow position */
@media (max-width:700px){
  .deck-btn{ bottom: -40px; }
}
/* Center the GitHub button and keep it yellow with a logo */
.card__actions{ display:flex; justify-content:center; margin-top:10px; }
.btn--github{
  background: var(--brand-gradient);
  color:#0A0C10; border:0; border-radius:12px;
  padding:10px 14px; display:inline-flex; align-items:center; gap:8px;
}
.btn--github svg{ width:18px; height:18px; fill:#0A0C10; display:block; }