/* Minimal Portfolio - custom styles (Tailwind handles utilities) */

html {
  scroll-behavior: smooth;
}

.hero-purple-text {
  color: #b398ff;
  text-shadow: 0 0 24px rgba(179, 152, 255, 0.35);
}

.hero-bg {
  background: #0a091a;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.02) 1px, transparent 1px);
  background-size: 60px 60px;
  background-position: center;
}

/* Hero background image – change url to try different proposals:
   assets/hero-bg-1-grid.png   – abstract grid / tech
   assets/hero-bg-2-aurora.png – soft aurora / flowing
   assets/hero-bg-3-cosmic.png – subtle constellation / stars
   assets/hero-bg-4-mesh.png   – soft mesh gradient
*/
.hero-bg-image {
  background-image: url("assets/hero-bg-2-aurora.png");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  background-attachment: fixed;
  opacity: 0.7;
}

.hero-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(
      ellipse 100% 80% at 0% 30%,
      rgba(124, 58, 237, 0.12),
      transparent 50%
    ),
    radial-gradient(
      ellipse 60% 60% at 20% 80%,
      rgba(88, 80, 236, 0.08),
      transparent 45%
    );
  pointer-events: none;
}

.hero-bg::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 40%;
  background: linear-gradient(to bottom, transparent, #0a091a);
  pointer-events: none;
}

.hero-speckles {
  background-image:
    radial-gradient(
      1px 1px at 20px 30px,
      rgba(179, 152, 255, 0.4),
      transparent
    ),
    radial-gradient(
      1px 1px at 40px 70px,
      rgba(255, 255, 255, 0.25),
      transparent
    ),
    radial-gradient(
      1px 1px at 50px 160px,
      rgba(179, 152, 255, 0.3),
      transparent
    ),
    radial-gradient(
      1.5px 1.5px at 90px 40px,
      rgba(255, 255, 255, 0.2),
      transparent
    ),
    radial-gradient(
      1px 1px at 130px 80px,
      rgba(179, 152, 255, 0.35),
      transparent
    ),
    radial-gradient(
      1px 1px at 160px 120px,
      rgba(255, 255, 255, 0.2),
      transparent
    );
  background-size: 200px 200px;
  background-repeat: repeat;
}

/* Fixed navbar – stays at top, transparent so content shows through when scrolling */
.navbar-fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1rem 1.5rem;
  background: rgba(10, 9, 26, 0.5);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  transition: background 0.25s ease;
}
.navbar-fixed:hover {
  background: rgba(10, 9, 26, 0.75);
}

.nav-pill {
  background: rgba(20, 18, 45, 0.6);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 0 1px rgba(179, 152, 255, 0.06);
}

.hero-cta-btn {
  background: linear-gradient(
    180deg,
    rgba(45, 42, 75, 0.9) 0%,
    rgba(30, 28, 55, 0.95) 100%
  );
  border: 1px solid rgba(255, 255, 255, 0.1);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.card-glow {
  background: rgba(20, 15, 45, 0.6);
  border: 1px solid rgba(148, 163, 184, 0.12);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.03);
}

.code-block {
  background: rgba(15, 10, 35, 0.9);
  border: 1px solid rgba(148, 163, 184, 0.1);
  font-family: ui-monospace, monospace;
  font-size: 0.8rem;
}

.btn-primary {
  background: rgba(30, 41, 59, 0.5);
}

.btn-ghost:hover {
  background: rgba(255, 255, 255, 0.05);
}

/* My approach section – subtle cross grid background */
.section-approach-bg {
  background-image: radial-gradient(circle at center, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 24px 24px;
}
.section-approach-bg::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 20px 20px;
  pointer-events: none;
}
.approach-card {
  background: rgba(20, 15, 45, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  min-height: 280px;
  transition: transform 0.4s ease;
}

/* Experience cards – same dark card style */
.experience-card {
  background: rgba(20, 15, 45, 0.7);
  border: 1px solid rgba(148, 163, 184, 0.15);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.04);
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.experience-card:hover {
  transform: scale(1.02);
}
/* Scroll-in: start slightly smaller, grow when in view */
.experience-card.scroll-animate {
  transform: scale(0.96);
  opacity: 0.9;
}
.experience-card.scroll-animate.in-view {
  transform: scale(1);
  opacity: 1;
}
/* Same scroll grow/shrink for approach cards */
.approach-card.scroll-animate {
  transform: scale(0.96);
  opacity: 0.9;
  transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.5s ease;
}
.approach-card.scroll-animate.in-view {
  transform: scale(1);
  opacity: 1;
}
.approach-card:hover {
  transform: scale(1.02);
}

/* Framer-style button animations */
.btn-animate {
  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease,
    background-color 0.25s ease,
    border-color 0.25s ease;
}

.btn-animate:hover {
  transform: scale(1.02);
}

.btn-animate:active {
  transform: scale(0.98);
}

.btn-arrow {
  display: inline-block;
  transition: transform 0.25s ease;
}

.group:hover .btn-arrow {
  transform: translateX(4px);
}