/* Font imports are now handled in index.html */

:root {
  --ghibli-green: #7ab97a;
  --ghibli-blue: #82addb;
  --ghibli-pink: #efb2d8;
  --ghibli-yellow: #f7e37c;
  --ghibli-beige: #f7e8d4;
  --ghibli-brown: #8b7355;
}

body {
  font-family: 'Poppins', 'Comic Neue', 'Lato', sans-serif;
  background-color: var(--ghibli-beige);
  color: #42392e;
  overflow-x: hidden;
}

.font-whimsical {
  font-family: 'Poppins', sans-serif;
  letter-spacing: 0.01em;
}

.hero-bg {
  background: linear-gradient(135deg, var(--ghibli-green), var(--ghibli-blue));
  position: relative;
  color: white;
}

.hero-bg::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: radial-gradient(ellipse at center, rgba(247, 232, 212, 0.2) 0%, rgba(122, 185, 122, 0.2) 100%);
}

.hero-section {
  background-image: url('https://newoaks.s3.us-west-1.amazonaws.com/AutoDev/8337/50d7a343-6171-44f8-a11d-f962ad37bb61.png');
  background-size: cover;
  background-position: center;
  position: relative;
  color: white;
}

.ghibli-dev-bg {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.3;
  filter: sepia(30%) saturate(140%) hue-rotate(10deg) contrast(110%);
  z-index: 0;
  mix-blend-mode: soft-light;
  transition: all 0.5s ease-in-out;
}

.ghibli-overlay {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background: linear-gradient(to bottom, rgba(122, 185, 122, 0.4), rgba(130, 173, 219, 0.6));
  z-index: 1;
}

.ghibli-gradient {
  background: linear-gradient(to bottom, #e1f5fe, #b3e5fc);
}

.watercolor-bg {
  background: linear-gradient(to bottom, #f7e8d4, #e6f2ff);
  position: relative;
}

.watercolor-bg::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(255, 255, 255, 0.7);
}

.btn-ghibli {
  background-color: var(--ghibli-green);
  color: white;
  border-radius: 2rem;
  padding: 0.75rem 2rem;
  font-weight: bold;
  letter-spacing: 0.05em;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  transition: all 0.3s ease;
}

.btn-ghibli:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 8px rgba(0, 0, 0, 0.12);
  background-color: #6aa86a;
}

.floating {
  animation: floating 3s ease-in-out infinite;
}

.floating-slow {
  animation: floating 6s ease-in-out infinite;
}

.floating-reverse {
  animation: floating 4s ease-in-out infinite reverse;
}

@keyframes floating {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
  100% {
    transform: translateY(0px);
  }
}

.leaf-fall {
  animation: leafFall 15s linear infinite;
}

@keyframes leafFall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(360deg);
    opacity: 0;
  }
}

.cloud-drift {
  animation: cloudDrift 30s linear infinite;
}

.hover-float {
  transition: transform 0.3s ease;
}

.hover-float:hover {
  transform: translateY(-10px);
}

@keyframes spiritGlow {
  0%, 100% {
    filter: drop-shadow(0 0 5px rgba(255, 255, 255, 0.7));
  }
  50% {
    filter: drop-shadow(0 0 15px rgba(255, 255, 255, 0.9));
  }
}

@keyframes ghibliFloat {
  0% {
    opacity: 0.7;
    transform: scale(1) translateY(0);
  }
  25% {
    opacity: 0.85;
  }
  50% {
    opacity: 0.8;
    transform: scale(1.03) translateY(-5px);
  }
  75% {
    opacity: 0.85;
  }
  100% {
    opacity: 0.7;
    transform: scale(1) translateY(0);
  }
}

.ghibli-animation {
  animation: ghibliFloat 15s ease-in-out infinite;
}

.spirit-glow {
  animation: spiritGlow 4s ease-in-out infinite;
}

@keyframes cloudDrift {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(100vw);
  }
}

.card-ghibli {
  background-color: rgba(255, 255, 255, 0.8);
  border-radius: 1rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  border: 2px solid #f0f0f0;
  overflow: hidden;
  transition: all 0.3s ease;
}

.card-ghibli:hover {
  transform: translateY(-5px);
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
  border-color: var(--ghibli-green);
}

.nav-link {
  position: relative;
  transition: all 0.3s ease;
}

.nav-link::after {
  content: '';
  position: absolute;
  width: 0;
  height: 2px;
  bottom: -5px;
  left: 0;
  background-color: var(--ghibli-green);
  transition: width 0.3s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.navbar {
  background-color: rgba(255, 255, 255, 0.8);
  backdrop-filter: blur(10px);
}

/* Forest-inspired contact form */
.forest-contact {
  position: relative;
}

.forest-contact input, 
.forest-contact textarea {
  background-color: rgba(255, 255, 255, 0.9);
  transition: all 0.3s ease;
}

.forest-contact input:focus, 
.forest-contact textarea:focus {
  background-color: white;
  transform: translateY(-2px);
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
}

/* Animated transitions for How It Works section */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(-20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(20px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.8s ease-out forwards;
}

.animate-fade-in-left {
  animation: fadeInLeft 0.8s ease-out forwards;
}

.animate-fade-in-right {
  animation: fadeInRight 0.8s ease-out forwards;
}

/* Additional nature-inspired elements */
.nature-border {
  position: relative;
}

.nature-border::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--ghibli-green), transparent);
}

/* Ghibli-style image effect */
.ghibli-image {
  position: relative;
  overflow: hidden;
}

.ghibli-image img {
  transition: filter 0.3s ease;
}

.ghibli-image:hover img {
  filter: sepia(40%) saturate(150%) brightness(105%) contrast(110%);
}

/* Water-color animation for background images */
@keyframes ghibliWaterColor {
  0% {
    filter: sepia(30%) saturate(130%) brightness(100%) contrast(110%);
  }
  33% {
    filter: sepia(35%) saturate(140%) brightness(105%) contrast(115%) hue-rotate(2deg);
  }
  66% {
    filter: sepia(33%) saturate(135%) brightness(103%) contrast(112%) hue-rotate(5deg);
  }
  100% {
    filter: sepia(30%) saturate(130%) brightness(100%) contrast(110%);
  }
}

/* Ghibli character breathe animation */
@keyframes ghibliBreathe {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

.ghibli-breathe {
  animation: ghibliBreathe 4s ease-in-out infinite;
}

.ghibli-watercolor-animation {
  animation: ghibliWaterColor 8s ease-in-out infinite;
}

/* Female developer Ghibli-style animation */
@keyframes ghibliDeveloperGlow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(122, 185, 122, 0.5);
  }
  50% {
    box-shadow: 0 0 25px rgba(122, 185, 122, 0.8), 0 0 40px rgba(247, 227, 124, 0.4);
  }
}

.ghibli-developer-glow {
  animation: ghibliDeveloperGlow 6s ease-in-out infinite;
}

/* Auth modal animations */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-in-up {
  animation: fadeInUp 0.4s ease-out forwards;
}

/* Profile dropdown */
.user-profile-dropdown {
  opacity: 0;
  transform: translateY(-10px);
  transition: opacity 0.3s ease, transform 0.3s ease;
  pointer-events: none;
}

.user-profile-dropdown.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Ghibli-style light particles */
@keyframes particleFloat {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 0.8;
  }
  90% {
    opacity: 0.8;
  }
  100% {
    transform: translateY(-50px) translateX(20px) rotate(360deg);
    opacity: 0;
  }
}

.light-particle {
  animation: particleFloat 10s ease-in-out infinite;
  position: absolute;
  width: 5px;
  height: 5px;
  background-color: rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}