:root {
  --font-display: 'Urbanist', 'Plus Jakarta Sans', sans-serif;
  --font-sans: 'Plus Jakarta Sans', sans-serif;
  --font-mono: 'Space Mono', monospace;
  --color-coral: #FF4D2E;
  --color-lilac: #C4B5FD;
  --color-lilac-light: #EDE9FE;
  --color-cream: #FAF9F6;
  --color-dark: #121214;
}

body {
  font-family: var(--font-sans);
  background-color: #FFFFFF;
  color: #121214;
  letter-spacing: -0.015em;
}

h1, h2, h3, h4, .font-heading {
  font-family: var(--font-display);
  letter-spacing: -0.03em;
}

.font-sans { font-family: var(--font-sans); }
.font-mono { font-family: var(--font-mono); }

/* Custom Scrollbar */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: #FAFAFB;
}
::-webkit-scrollbar-thumb {
  background: #E4E4E7;
  border-radius: 9999px;
}
::-webkit-scrollbar-thumb:hover {
  background: #A1A1AA;
}

/* Amaeya-Style Pastel Gradient & Glows */
.text-gradient-purple {
  background: linear-gradient(135deg, #A78BFA 0%, #C4B5FD 50%, #E9D5FF 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-coral {
  background: linear-gradient(135deg, #FF4D2E 0%, #FB923C 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.text-gradient-rainbow {
  background: linear-gradient(90deg, #A78BFA 0%, #F472B6 40%, #FB923C 75%, #FF4D2E 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

/* Wave and Doodle Animations */
@keyframes floatSlow {
  0%, 100% { transform: translateY(0px) rotate(0deg); }
  50% { transform: translateY(-8px) rotate(1.5deg); }
}

@keyframes pulseGlow {
  0%, 100% { opacity: 0.8; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.04); }
}

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

.animate-pulse-glow {
  animation: pulseGlow 4s ease-in-out infinite;
}

/* Clean Bento Card Styling */
.bento-card {
  border-radius: 1.75rem;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}

.bento-card:hover {
  transform: translateY(-3px);
}

/* ---------------------------------------------------------------- */
/* Static-site helper styles (interactivity that Framer Motion /    */
/* React state handled inline in the original component code)        */
/* ---------------------------------------------------------------- */

.scrollbar-none {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.scrollbar-none::-webkit-scrollbar {
  display: none;
}

/* Interactive eye card */
.ear {
  transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.eye-pupil {
  transition: transform 0.12s cubic-bezier(0.34, 1.56, 0.64, 1);
}
#snout, .cheek, #eyes-row, #nose {
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.floating-heart {
  position: absolute;
  pointer-events: none;
  z-index: 30;
  transform: translate(-50%, -50%);
  animation: heartFloat 0.8s ease-out forwards;
}
@keyframes heartFloat {
  0% { transform: translate(-50%, -50%) scale(0) rotate(var(--rot, 0deg)); opacity: 1; }
  30% { transform: translate(-50%, -50%) scale(1.3) rotate(var(--rot, 0deg)); opacity: 1; }
  100% { transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% - 40px)) scale(0.9) rotate(var(--rot, 0deg)); opacity: 0; }
}

/* Discipline row hover preview */
.discipline-row-title {
  transition: color 0.3s, transform 0.3s;
}
.discipline-preview {
  transform: rotate(-6deg);
}

/* Modal fade/zoom-in */
.modal-fade-in {
  animation: modalFadeIn 0.2s ease-out;
}
@keyframes modalFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.modal-zoom-in {
  animation: modalZoomIn 0.2s ease-out;
}
@keyframes modalZoomIn {
  from { opacity: 0; transform: scale(0.95); }
  to { opacity: 1; transform: scale(1); }
}

.z-60 { z-index: 60; }