/* Custom styles and overrides for Exaggerated Minimalism */

/* Typography Overrides */
.exaggerated-text {
  font-size: clamp(4rem, 15vw, 10rem);
  line-height: 1;
}

/* Summer Animations */
.cloud {
  position: absolute;
  will-change: transform;
}

@keyframes floatCloud {
  0% {
    transform: translateX(-20vw);
  }

  100% {
    transform: translateX(120vw);
  }
}

.bird {
  position: absolute;
  will-change: transform;
}

@keyframes flyBird {
  0% {
    transform: translate(-20vw, 10vh) scale(0.8);
  }

  25% {
    transform: translate(25vw, -5vh) scale(1.1);
  }

  50% {
    transform: translate(60vw, 15vh) scale(0.9);
  }

  75% {
    transform: translate(90vw, -10vh) scale(1.2);
  }

  100% {
    transform: translate(120vw, 5vh) scale(0.8);
  }
}

@keyframes flyBirdReverse {
  0% {
    transform: translate(120vw, 10vh) scale(0.8) scaleX(-1);
  }

  25% {
    transform: translate(80vw, -5vh) scale(1.1) scaleX(-1);
  }

  50% {
    transform: translate(40vw, 15vh) scale(0.9) scaleX(-1);
  }

  75% {
    transform: translate(10vw, -10vh) scale(1.2) scaleX(-1);
  }

  100% {
    transform: translate(-20vw, 5vh) scale(0.8) scaleX(-1);
  }
}

.bird-wing {
  animation: flapWing 0.3s ease-in-out infinite alternate;
}

@keyframes flapWing {
  0% {
    transform: rotate(-15deg) scaleY(1.05);
  }

  100% {
    transform: rotate(35deg) scaleY(0.7);
  }
}

.bird-tail {
  animation: wagTail 0.5s ease-in-out infinite alternate;
}

@keyframes wagTail {
  0% {
    transform: rotate(-5deg);
  }

  100% {
    transform: rotate(5deg);
  }
}

.bird-eye {
  transform-origin: 80% 35%;
  animation: blinkEye 4s infinite;
}

@keyframes blinkEye {

  0%,
  96%,
  100% {
    transform: scaleY(1);
  }

  98% {
    transform: scaleY(0.1);
  }
}

.plant {
  position: absolute;
  bottom: -5px;
  transform-origin: center bottom;
  transform: scale(0);
  will-change: transform;
}

.plant-body {
  transform-origin: center bottom;
}

@keyframes growPlant {
  0% {
    transform: scale(0);
  }

  100% {
    transform: scale(1);
  }
}

@keyframes swayPlant {
  0% {
    transform: rotate(-10deg);
  }

  100% {
    transform: rotate(10deg);
  }
}

/* Base Form Inputs */
.input {
  min-height: 44px;
  padding: 12px 16px;
  border: 1px solid #bbf7d0;
  /* green-200 */
  border-radius: 8px;
  font-size: 16px;
  transition: all 200ms ease;
  color: #14532d;
  /* green-900 */
}

.input:focus {
  border-color: #22c55e;
  /* green-500 */
  outline: none;
  box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.2);
}

.input::placeholder {
  color: #86efac;
  /* green-300 */
}

/* Buttons */
.btn-primary {
  background: #166534;
  /* green-800 */
  color: #f0fdf4;
  /* green-50 */
  padding: 12px 24px;
  border-radius: 9999px;
  /* Pill shape for elegance */
  font-weight: 600;
  transition: all 300ms cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  border: 1px solid transparent;
}

.btn-primary:hover {
  background: #14532d;
  /* green-900 */
  box-shadow: 0 10px 15px -3px rgba(22, 101, 52, 0.3);
  transform: translateY(-2px);
}

.btn-primary:active {
  transform: translateY(0);
}

/* Custom Scrollbar for elegance */
::-webkit-scrollbar {
  width: 10px;
}

::-webkit-scrollbar-track {
  background: #f0fdf4;
}

::-webkit-scrollbar-thumb {
  background: #86efac;
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: #4ade80;
}

/* Mobile UX Enhancements */
html {
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior-y: none;
}

body {
  padding-bottom: env(safe-area-inset-bottom);
  padding-left: env(safe-area-inset-left);
  padding-right: env(safe-area-inset-right);
}

button,
a,
input,
textarea,
.card,
.transport-btn,
.interactive-element {
  touch-action: manipulation;
}

/* Hide scrollbar on mobile devices for cleaner look */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    display: none;
    width: 0px;
    background: transparent;
  }
}