@tailwind base;
@tailwind components;
@tailwind utilities;

/* =========================================================
   DESIGN TOKENS (CSS Variables for Themes)
 ========================================================= */

:root {
  --background: #fff8f5;
  --on-background: #1e1b19;
  --surface: #fff8f5;
  --on-surface: #1e1b19;
  --surface-dim: #e0d8d5;
  --surface-container: #f4ece9;
  --surface-container-low: #faf2ef;
  --surface-container-lowest: #ffffff;
  --surface-container-high: #efe7e3;
  --surface-container-highest: #e9e1de;
  --on-secondary-container: #fffbff;
  --on-primary-fixed: #002021;
  --on-primary-fixed-variant: #004f52;
  --on-primary: #ffffff;
  --primary-container: #3e7e81;
  --on-surface-variant: #3f4849;
  --surface-tint: #24686b;
  --primary: #216568;
  --secondary: #b51a16;
  --on-secondary: #ffffff;
  --on-secondary-fixed: #410001;
  --on-secondary-fixed-variant: #930005;
  
  --theme-blue: #458588;
  --theme-red: #9d0006;
  --theme-green: #b8bb26;
  --theme-yellow: #d79921;
  --theme-grey: #ebdbb2;

  --neo-border-color: #1e1b19;
  --footer-bg: #1e1b19;
  --footer-text: #fff8f5;

  /* Section backgrounds - Light Mode */
  --about-bg: #9d0006;
  --skills-bg: #458588;
  --contact-bg: #d79921;
  --experience-bg: #ebdbb2;
}

.dark {
  --background: #0f0f11;
  --on-background: #e2e8f0;
  --surface: #17171a;
  --on-surface: #e2e8f0;
  --surface-dim: #0a0a0b;
  --surface-container: #1b1b1f;
  --surface-container-low: #141416;
  --surface-container-lowest: #ffffff; /* Stays white to keep high-contrast text on badges readable */
  --surface-container-high: #202024;
  --surface-container-highest: #28282d;
  --on-secondary-container: #e2e8f0;
  --on-primary-fixed: #e2e8f0;
  --on-primary-fixed-variant: #94a3b8;
  --on-primary: #0f0f11;
  --primary-container: #1b1b1f;
  --on-surface-variant: #94a3b8;
  --surface-tint: #3b82f6;
  --primary: #3b82f6;
  --secondary: #ef4444;
  --on-secondary: #0f0f11;
  --on-secondary-fixed: #ef4444;
  --on-secondary-fixed-variant: #ef4444;

  /* Accent highlights stay bright in both modes */
  --theme-blue: #3b82f6;
  --theme-red: #ef4444;
  --theme-green: #10b981;
  --theme-yellow: #f59e0b;
  --theme-grey: #262626;

  --neo-border-color: #1e1b19;
  --footer-bg: #070708;
  --footer-text: #e2e8f0;

  /* Section backgrounds - Dark Mode */
  --about-bg: #1b1315;
  --skills-bg: #0f172a;
  --contact-bg: #1c140a;
  --experience-bg: #151516;
}

body {
  background-color: var(--background);
  color: var(--on-background);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* =========================================================
   CUSTOM UTILITIES (Efek Neo-Brutalism & Hover)
========================================================= */

/* Efek shadow kotak solid khas brutalism */

.neo-shadow {
  box-shadow: 8px 8px 0px 0px var(--neo-border-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Versi shadow lebih kecil */

.neo-shadow-sm {
  box-shadow: 4px 4px 0px 0px var(--neo-border-color);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Border standar neo-brutalism */

.neo-border {
  border: 4px solid var(--neo-border-color);
  transition: border-color 0.3s ease;
}

/* Border tebal neo-brutalism */

.neo-border-heavy {
  border: 6px solid var(--neo-border-color);
  transition: border-color 0.3s ease;
}

/* Divider antar section */

.neo-section-divider {
  border-bottom: 8px solid var(--neo-border-color);
  transition: border-color 0.3s ease;
}

/* Animasi hover yang exaggerated (berlebihan) */

.exaggerated-hover {
  transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.exaggerated-hover:hover {
  transform: scale(1.1) rotate(calc(var(--tw-rotate) * -2)) translateY(-10px);
  box-shadow: 16px 16px 0px 0px #1e1b19;
  z-index: 10;
}

/* =========================================================
   ANIMATIONS & TRANSITIONS
========================================================= */

/* Transisi smooth buat elemen saat discroll */

.reveal-section {
  opacity: 0;
  transform: translateY(50px);
  transition: all 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Class ini di-inject via JavaScript pas elemen masuk layar */

.reveal-section.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-left.reveal-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-right.reveal-visible {
  opacity: 1;
  transform: translateX(0);
}

.reveal-bottom {
  opacity: 0;
  transform: translateY(60px);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-bottom.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-top {
  opacity: 0;
  transform: translateY(-40px);
  transition: all 0.8s cubic-bezier(0.25, 1, 0.5, 1);
}
.reveal-top.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}

.reveal-bounce {
  opacity: 0;
  transform: scale(0.3) rotate(-12deg);
  transition: all 0.9s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.reveal-bounce.reveal-visible {
  opacity: 1;
  transform: scale(1) rotate(var(--rotation-deg, 0deg));
}

/* Animasi floating (melayang) ambient */

@keyframes ambientFloat {
  0% {
    transform: translateY(0px) rotate(0deg);
  }

  50% {
    transform: translateY(-15px) rotate(2deg);
  }

  100% {
    transform: translateY(0px) rotate(0deg);
  }
}

.animate-float {
  animation: ambientFloat 6s ease-in-out infinite;
}

/* Styling partikel buat efek mouse trail */

.mouse-trail-particle {
  position: fixed;
  pointer-events: none;
  z-index: 9999;
  border: 3px solid #1e1b19;
  animation: trailFadeOut 0.8s forwards cubic-bezier(0.16, 1, 0.3, 1);
}

@keyframes trailFadeOut {
  0% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }

  100% {
    opacity: 0;
    transform: scale(0.2) rotate(45deg);
  }
}

/* Animasi teks berjalan / Marquee */

@keyframes marquee {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

/* Card expand transition using clip-path and scale to look like physical bounds expansion */
@keyframes expandCardIn {
  0% {
    opacity: 0;
    transform: scale(0.85);
    clip-path: inset(15% 25% 15% 25% round 12px);
  }
  100% {
    opacity: 1;
    transform: scale(1);
    clip-path: inset(0% 0% 0% 0% round 0px);
  }
}

/* Card inner contents sliding along with boundaries */
@keyframes expandContentLeft {
  0% {
    transform: translateX(-60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes expandContentRight {
  0% {
    transform: translateX(60px);
    opacity: 0;
  }
  100% {
    transform: translateX(0);
    opacity: 1;
  }
}

@keyframes closeButtonIn {
  0% {
    transform: scale(0) rotate(-45deg);
    opacity: 0;
  }
  100% {
    transform: scale(1) rotate(0deg);
    opacity: 1;
  }
}

/* Wiggle animation for cards */

@keyframes wiggle {
  0%, 100% {
    transform: rotate(-2deg);
  }
  50% {
    transform: rotate(2deg);
  }
}

.animate-wiggle {
  animation: wiggle 2s ease-in-out infinite;
}

/* Float animation without rotation (up and down only) */
@keyframes verticalFloat {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}
.animate-float-vertical {
  animation: verticalFloat 6s ease-in-out infinite;
}

/* Brutalist Vertical Float animation with shadow illusion (for cards with box-shadow) */
@keyframes brutalistVerticalFloat {
  0%, 100% {
    transform: translateY(0px);
    box-shadow: 4px 4px 0px 0px #1e1b19;
  }
  50% {
    transform: translateY(-12px);
    box-shadow: 12px 16px 0px 0px #1e1b19;
  }
}
.animate-brutalist-vertical {
  animation: brutalistVerticalFloat 6s ease-in-out infinite;
}

/* Hide scrollbar for Chrome, Safari, Opera, Firefox and Edge */
.no-scrollbar::-webkit-scrollbar {
  display: none;
}
.no-scrollbar {
  -ms-overflow-style: none;  /* IE and Edge */
  scrollbar-width: none;  /* Firefox */
}