/* ══════════════════════════════════════
   Taniya Kundu Portfolio — style.css
   ══════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { background: #0d0002; color: #fff; font-family: 'Inter', sans-serif; overflow-x: hidden; }

/* ── Keyframes ── */
@keyframes letterDrop {
  from { opacity: 0; transform: translateY(90px) rotate(-6deg); }
  to   { opacity: 1; transform: none; }
}
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: none; }
}
@keyframes pulse {
  0%,100% { opacity:1; transform:scale(1); }
  50%      { opacity:.4; transform:scale(.8); }
}
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
@keyframes float1 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-18px) rotate(8deg); }
}
@keyframes float2 {
  0%,100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(14px) rotate(-6deg); }
}
@keyframes shimmer {
  0%   { background-position: 200% center; }
  100% { background-position: -200% center; }
}
@keyframes floatCard {
  0%,100% { transform: translateY(0) rotate(-1deg); }
  50%      { transform: translateY(-10px) rotate(1deg); }
}
@keyframes gisPin {
  0%   { transform: translate(-50%,-50%) scale(1); opacity:.9; }
  100% { transform: translate(-50%,-50%) scale(4.5); opacity:0; }
}
@keyframes tkSunPop { from{transform:translate(-50%,-50%) scale(0)} to{transform:translate(-50%,-50%) scale(1)} }
@keyframes tkSunSpin { to{transform:translate(-50%,-50%) rotate(360deg)} }
@keyframes tkSwing { from{transform:rotate(-5deg)} to{transform:rotate(5deg)} }
@keyframes tkPop { from{opacity:0;transform:scale(0) rotate(-12deg)} to{opacity:1;transform:none} }
@keyframes tkBounce { from{transform:translateY(0) rotate(-3deg)} to{transform:translateY(-10px) rotate(3deg)} }
@keyframes tkSlideL { from{left:-100%} to{left:5%} }
@keyframes tkSlideR { from{right:-100%} to{right:5%} }
@keyframes tkCartIn { from{left:-100%} to{left:6%} }
@keyframes tkWheel { to{transform:rotate(360deg)} }

/* ── Scroll reveal ── */
.reveal       { opacity:0; transform:translateY(24px); transition:opacity .7s ease,transform .7s ease; }
.reveal-l     { opacity:0; transform:translateX(-28px); transition:opacity .7s ease,transform .7s ease; }
.reveal-r     { opacity:0; transform:translateX(28px); transition:opacity .7s ease,transform .7s ease; }
.reveal.on, .reveal-l.on, .reveal-r.on { opacity:1; transform:none; }

/* ── Hero role cycling ── */
.hero-role { position:absolute; top:0; left:0; width:100%; font-weight:600; font-size:clamp(14px,1.8vw,18px); white-space:nowrap;
  opacity:0; transform:translateY(110%); transition:transform .55s cubic-bezier(.16,1,.3,1),opacity .55s ease; }
.hero-role.active  { opacity:1; transform:translateY(0); }
.hero-role.leaving { opacity:0; transform:translateY(-110%); }

/* ── Skill chips ── */
.skill-chip { opacity:0; transform:translateY(8px) scale(.9); transition:opacity .35s ease,transform .35s ease; }
.skill-chip.on { opacity:1; transform:none; }

/* ── Timeline bar ── */
.tl-bar { transform:scaleY(0); transform-origin:top; transition:transform 1.6s cubic-bezier(.16,1,.3,1); }
.tl-bar.on { transform:scaleY(1); }

/* ── Project cards ── */
.proj-card { transition:transform .35s ease, box-shadow .35s ease; }
.proj-card:hover { transform:translateY(-6px); box-shadow:0 20px 50px rgba(233,30,140,.28); }

/* ── Scrollbar ── */
::-webkit-scrollbar { width:4px; }
::-webkit-scrollbar-track { background:#0d0002; }
::-webkit-scrollbar-thumb { background:#3d0010; border-radius:4px; }

/* ── Section label ── */
.section-label { font-size:10px; letter-spacing:.25em; text-transform:uppercase; color:rgba(245,196,0,.7); font-weight:600; }

/* ── Gold text ── */
.gold-text {
  background: linear-gradient(135deg,#f5c400,#e91e8c,#f5c400);
  background-size: 200% auto;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: shimmer 5s linear infinite;
}

/* ── Responsive ── */
@media (max-width: 768px) {
  aside { display: none; }
  .cv-main { padding: 2rem 1rem; }
  .proj-grid { grid-template-columns: 1fr; }
}