/* ===========================
   BASE
=========================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: 'Manrope', sans-serif; overflow-x: hidden; }

/* ===========================
   NAV
=========================== */
#navbar {
  background: rgba(253, 252, 249, 0);
  transition: background 0.4s ease, box-shadow 0.4s ease;
}
#navbar.scrolled {
  background: rgba(253, 252, 249, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow: 0 1px 0 rgba(26,26,27,0.06);
}

/* ===========================
   ORGANIC BLOBS
=========================== */
.organic-blob {
  position: absolute;
  background: radial-gradient(circle, rgba(212,163,115,0.08) 0%, rgba(253,252,249,0) 70%);
  border-radius: 50%;
  z-index: 0;
  filter: blur(50px);
  pointer-events: none;
}

/* ===========================
   TAGS
=========================== */
.tag {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 12px;
  background: #F5F3EF;
  border-radius: 9999px;
  color: #52525B;
  letter-spacing: 0.02em;
}
.tag-outline {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 14px;
  background: transparent;
  border: 1.5px solid #E9E7E2;
  border-radius: 9999px;
  color: #52525B;
}
.tech-badge {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 5px 12px;
  background: #F5F3EF;
  border-radius: 8px;
  color: #52525B;
  transition: all 0.25s ease;
}
.tech-badge:hover {
  background: #1A1A1B;
  color: #fff;
  transform: translateY(-2px);
}

/* ===========================
   CONTACT CHANNELS
=========================== */
.contact-channel {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 16px 20px;
  background: white;
  border-radius: 1.5rem;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  text-decoration: none;
  color: inherit;
}
.contact-channel:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(26,26,27,0.08);
}

/* ===========================
   CTA CARD BLOBS
=========================== */
.cta-card { position: relative; }
.cta-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(60px);
  pointer-events: none;
}
.cta-blob-1 {
  width: 400px; height: 400px;
  background: rgba(255,255,255,0.04);
  top: -100px; left: -80px;
}
.cta-blob-2 {
  width: 300px; height: 300px;
  background: rgba(212,163,115,0.08);
  bottom: -80px; right: -60px;
}

/* ===========================
   MARQUEE
=========================== */
.marquee-track {
  display: flex;
  gap: 3.5rem;
  animation: marquee 30s linear infinite;
  width: max-content;
}
@keyframes marquee {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===========================
   PROJECT IMG HOVER
=========================== */
.project-img {
  transition: transform 1s cubic-bezier(0.4, 0, 0.2, 1);
}
.project-img:hover {
  transform: scale(1.04);
}

/* ===========================
   MATERIAL SYMBOLS
=========================== */
.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  font-size: inherit;
  line-height: 1;
  vertical-align: middle;
}

/* ===========================
   SCROLL ANIMATIONS — base states
=========================== */

/* Elements start invisible */
[data-anim] {
  opacity: 0;
  will-change: transform, opacity;
}

/* fade-up: rise from below */
[data-anim="fade-up"] {
  transform: translateY(50px);
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
              transform 0.75s cubic-bezier(0.22,1,0.36,1);
}

/* fade-down: fall from above */
[data-anim="fade-down"] {
  transform: translateY(-40px);
  transition: opacity 0.75s cubic-bezier(0.22,1,0.36,1),
              transform 0.75s cubic-bezier(0.22,1,0.36,1);
}

/* fade-right: slide from left */
[data-anim="fade-right"] {
  transform: translateX(-70px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
}

/* fade-left: slide from right */
[data-anim="fade-left"] {
  transform: translateX(70px);
  transition: opacity 0.8s cubic-bezier(0.22,1,0.36,1),
              transform 0.8s cubic-bezier(0.22,1,0.36,1);
}

/* scale-in: grow from small */
[data-anim="scale-in"] {
  transform: scale(0.93);
  transition: opacity 0.9s cubic-bezier(0.22,1,0.36,1),
              transform 0.9s cubic-bezier(0.22,1,0.36,1);
}

/* pop: quick scale bounce */
[data-anim="pop"] {
  transform: scale(0.7) rotate(-3deg);
  transition: opacity 0.5s cubic-bezier(0.34,1.56,0.64,1),
              transform 0.5s cubic-bezier(0.34,1.56,0.64,1);
}

/* word-reveal: handled by JS, each word wraps in a span */
[data-anim="word-reveal"] {
  opacity: 1 !important; /* container visible, spans animate */
  transform: none !important;
}
.word-wrap {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  margin-right: 0.25em;
}
.word-inner {
  display: inline-block;
  transform: translateY(110%);
  opacity: 0;
  transition: transform 0.65s cubic-bezier(0.22,1,0.36,1),
              opacity 0.65s cubic-bezier(0.22,1,0.36,1);
}
.word-inner.visible {
  transform: translateY(0);
  opacity: 1;
}

/* VISIBLE STATE — all types become natural */
[data-anim].is-visible {
  opacity: 1 !important;
  transform: none !important;
}

/* ===========================
   SCROLLBAR (optional styling)
=========================== */
::-webkit-scrollbar { width: 6px; }
::-webkit-scrollbar-track { background: #FDFCF9; }
::-webkit-scrollbar-thumb { background: #E9E7E2; border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: #D4A373; }

/* ===========================
   SELECTION
=========================== */
::selection { background: rgba(26,26,27,0.1); }

/* ===========================
   MOBILE
=========================== */
@media (max-width: 768px) {
  .cta-blob-1 { width: 200px; height: 200px; }
  .cta-blob-2 { width: 150px; height: 150px; }
}