/* 1. Import Tailwind v4 */
@import "tailwindcss";
@custom-variant dark (&:where(.dark, .dark *));

/* 2. Definisi Tema */
@theme {
  --color-brand-purple: #7000F6;
  --color-text-dark: #1F2937;
  --font-inter: 'Inter', sans-serif;
  --color-card-stack: #f0e6ff;
}

/* 3. Base Styles */
@layer base {
  html {
    scroll-behavior: smooth;
  }

  body {
    @apply font-inter bg-[#F9F9F9] text-text-dark antialiased transition-colors duration-300 dark:bg-gray-950 dark:text-gray-100;
    animation: fadeIn 0.8s ease-out;
  }

  /* Custom Highlight Warna */
  ::selection {
    @apply bg-brand-purple/20 text-brand-purple;
  }

  @keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
  }
}

/* 4. Components & Utilities */
@layer utilities {
  /* Fix Navbar - Box Shadow & Blur */
  .navbar-fixed {
    @apply fixed z-[9999] bg-white/70 backdrop-blur-md shadow-sm transition-colors duration-300 dark:bg-gray-950/80 dark:shadow-none;
    box-shadow: inset 0 -1px 0 0 rgba(0, 0, 0, 0.05);
  }

  .dark .navbar-fixed {
    box-shadow: inset 0 -1px 0 0 rgba(255, 255, 255, 0.08);
  }

  /* Wave Animation */
  @keyframes wave {
    0%, 100% { transform: rotate(0.0deg); }
    10%, 30%, 50%, 70%, 90% { transform: rotate(14.0deg); }
    20%, 40%, 60%, 80% { transform: rotate(-10.0deg); }
  }

  .animate-wave {
    animation: wave 2s infinite;
    transform-origin: 70% 70%;
    display: inline-block;
  }

  /* Hamburger Logic */
  .hamburger-line {
    @apply w-[30px] h-[2px] my-2 block bg-black transition-all duration-300 dark:bg-gray-100;
  }

  .hamburger-active > span:nth-child(1) { @apply origin-top-left rotate-45; }
  .hamburger-active > span:nth-child(2) { @apply scale-0; }
  .hamburger-active > span:nth-child(3) { @apply origin-bottom-left -rotate-45; }

  /* Bento Card Style (Purplefolio Look) */
  .bento-card {
    @apply bg-white border border-gray-100 rounded-[2rem] p-8 
           transition-all duration-500 hover:shadow-xl hover:shadow-purple-500/5 
           hover:-translate-y-1 dark:bg-gray-900 dark:border-gray-800;
  }

  /* Input Style */
  .input-framer {
    @apply bg-white border border-gray-200 p-4 rounded-2xl outline-none 
           transition-all duration-300 focus:border-brand-purple 
           focus:ring-4 focus:ring-brand-purple/10 dark:bg-gray-900 dark:border-gray-700 dark:text-gray-100 dark:placeholder:text-gray-500;
  }

  /* Image Hover Effect */
  .img-reveal {
    @apply grayscale hover:grayscale-0 transition-all duration-700 object-cover;
  }
}

@layer utilities {
  /* Keyframes untuk pergerakan horizontal */
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  .animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 15s linear infinite;
  }
}

@layer utilities {
  @keyframes marquee {
    0% { transform: translateX(0); }
    100% { transform: translateX(-50%); }
  }

  @keyframes marquee-reverse {
    0% { transform: translateX(-50%); }
    100% { transform: translateX(0); }
  }

  .animate-marquee {
    display: flex;
    width: max-content;
    animation: marquee 25s linear infinite;
  }

  .animate-marquee-reverse {
    display: flex;
    width: max-content;
    animation: marquee-reverse 25s linear infinite;
  }

  .stack-card {
    display: flex;
    align-items: center;
    white-space: nowrap;
    min-width: max-content;
    flex-shrink: 0;
    background-color: #ffffff;
    border: 1px solid #f3f4f6;
    padding: 16px 32px;
    border-radius: 16px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 0.05);
    margin-inline: 12px;
  }

  .dark .stack-card {
    background-color: #111827;
    border-color: #1f2937;
  }
}

@layer utilities {
  /* Scroll Reveal Animations */
  .reveal {
    opacity: 0;
    transition: all 1s ease-out;
  }

  .reveal-up {
    transform: translateY(50px);
  }

  .reveal-left {
    transform: translateX(-50px);
  }

  .reveal-right {
    transform: translateX(50px);
  }

  .reveal.active {
    opacity: 1;
    transform: translate(0, 0);
  }

  /* Page Transition */
  .page-transition {
    animation: pageFadeIn 0.8s ease-out forwards;
  }

  @keyframes pageFadeIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .page-exit {
    animation: pageFadeOut 0.5s ease-in forwards;
  }

  @keyframes pageFadeOut {
    from {
      opacity: 1;
      transform: translateY(0);
    }
    to {
      opacity: 0;
      transform: translateY(-10px);
    }
  }
}

/* Profile Card Styles */
.profile-card-stack {
  position: absolute;
  inset: 0;
  transform: translate(10px, 10px) rotate(-2deg);
  background-color: #f0e6ff;
  opacity: 0.35;
  border-radius: 24px;
  z-index: 0;
  pointer-events: none;
}

.profile-card {
  position: relative;
  z-index: 1;
}

.profile-photo-section {
  position: relative;
  width: 100%;
  aspect-ratio: 4/5;
  overflow: hidden;
}

.profile-photo-section img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
}

.profile-stats-section {
  padding: 14px 20px 20px;
  background-color: #ffffff;
}

.stat-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 3px 0;
}

.stat-row + .stat-row {
  margin-top: 8px;
}

@media (width <= 768px) {
  #home {
    min-height: auto !important;
    padding-top: 100px !important;
    padding-bottom: 40px !important;
  }
  #home h2 {
    font-size: 2.5rem !important;
  }
  #home h1 {
    font-size: 1rem !important;
  }
  .profile-card-stack {
    transform: translate(5px, 5px) rotate(-2deg) !important;
  }
  #profile-card-wrapper {
    width: 90% !important;
  }
}

@media (width <= 1024px) {
  #home {
    padding-top: 120px !important;
  }
  .profile-card-stack {
    transform: translate(6px, 6px) rotate(-2deg) !important;
  }
}

.nav-link {
  @apply text-base text-text-dark py-2 mx-3 flex transition duration-300 dark:text-gray-100;
}

.nav-link:hover {
  @apply text-brand-purple;
}

.nav-active {
  @apply text-brand-purple font-bold;
}

.nav-icon {
  @apply text-text-dark py-2 mx-3 flex transition duration-300 dark:text-gray-100;
}

.nav-icon-active {
  @apply text-brand-purple;
}

/* Know Me Better — outline/ghost button inside profile card */
.know-me-btn {
  display: flex;
  width: 100%;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 2px solid #7000F6;
  border-radius: 9999px;
  background-color: transparent;
  color: #7000F6;
  padding: 12px 24px;
  font-size: 1rem;
  font-weight: 800;
  transition: all 200ms ease;
}

.know-me-btn:hover {
  background-color: rgba(112, 0, 246, 0.1);
}

.know-me-arrow {
  display: inline-block;
  transition: transform 200ms ease;
}

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

.dark .know-me-btn {
  border-color: #c4b5fd;
  color: #c4b5fd;
}

.dark .know-me-btn:hover {
  background-color: rgba(196, 181, 253, 0.1);
}