@import url("https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700&display=swap");

body {
  font-family: "Outfit", sans-serif;
}

/* ===== SCROLL REVEAL ANIMATIONS ===== */
.reveal-on-scroll {
  opacity: 0;
  transform: translateY(40px);
  transition:
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity, transform;
}

.reveal-on-scroll.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reveal from left */
.reveal-left {
  opacity: 0;
  transform: translateX(-60px);
  transition:
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-left.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Reveal from right */
.reveal-right {
  opacity: 0;
  transform: translateX(60px);
  transition:
    opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-right.is-visible {
  opacity: 1;
  transform: translateX(0);
}

/* Scale up reveal */
.reveal-scale {
  opacity: 0;
  transform: scale(0.8);
  transition:
    opacity 0.6s cubic-bezier(0.4, 0, 0.2, 1),
    transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.reveal-scale.is-visible {
  opacity: 1;
  transform: scale(1);
}

/* ===== FLOATING ANIMATION ===== */
@keyframes float {
  0%,
  100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-15px);
  }
}

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

/* ===== PULSE GLOW ANIMATION ===== */
@keyframes pulseGlow {
  0%,
  100% {
    box-shadow: 0 0 20px rgba(212, 163, 115, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(212, 163, 115, 0.7);
  }
}

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

/* ===== SHIMMER EFFECT ===== */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 3s infinite;
}

/* ===== GRADIENT TEXT ANIMATION ===== */
@keyframes gradientShift {
  0% {
    background-position: 0% 50%;
  }
  50% {
    background-position: 100% 50%;
  }
  100% {
    background-position: 0% 50%;
  }
}

.animate-gradient-text {
  background: linear-gradient(
    90deg,
    #d4a373,
    #e6c9a8,
    #d4a373,
    #b08968,
    #d4a373
  );
  background-size: 300% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: gradientShift 4s ease infinite;
}

/* ===== BOUNCE IN ANIMATION ===== */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.animate-bounce-in {
  animation: bounceIn 0.8s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* ===== SLIDE IN FROM BOTTOM ===== */
@keyframes slideInUp {
  from {
    opacity: 0;
    transform: translateY(60px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-slide-in-up {
  animation: slideInUp 0.8s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

/* ===== ROTATE IN ANIMATION ===== */
@keyframes rotateIn {
  from {
    opacity: 0;
    transform: rotate(-15deg) scale(0.8);
  }
  to {
    opacity: 1;
    transform: rotate(0) scale(1);
  }
}

.animate-rotate-in {
  animation: rotateIn 0.6s ease-out forwards;
}

/* ===== PARALLAX EFFECT ===== */
.parallax-bg {
  will-change: transform;
  transition: transform 0.1s linear;
}

/* ===== STAGGER CHILDREN ANIMATION ===== */
.stagger-children > *:nth-child(1) {
  transition-delay: 0ms;
}
.stagger-children > *:nth-child(2) {
  transition-delay: 100ms;
}
.stagger-children > *:nth-child(3) {
  transition-delay: 200ms;
}
.stagger-children > *:nth-child(4) {
  transition-delay: 300ms;
}
.stagger-children > *:nth-child(5) {
  transition-delay: 400ms;
}
.stagger-children > *:nth-child(6) {
  transition-delay: 500ms;
}

/* ===== TYPEWRITER EFFECT ===== */
@keyframes typing {
  from {
    width: 0;
  }
  to {
    width: 100%;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}

.typewriter {
  overflow: hidden;
  white-space: nowrap;
  border-right: 3px solid #d4a373;
  animation:
    typing 3s steps(30, end),
    blink 0.75s step-end infinite;
}

/* ===== UNDERLINE ANIMATION ===== */
.animated-underline {
  position: relative;
  display: inline-block;
}

.animated-underline::after {
  content: "";
  position: absolute;
  width: 0;
  height: 3px;
  bottom: -4px;
  left: 0;
  background: linear-gradient(90deg, #d4a373, #b08968);
  transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.animated-underline:hover::after,
.animated-underline.is-visible::after {
  width: 100%;
}

/* ===== CARD TILT EFFECT ===== */
.card-tilt {
  transform-style: preserve-3d;
  transition: transform 0.3s ease;
}

.card-tilt:hover {
  transform: perspective(1000px) rotateX(5deg) rotateY(-5deg);
}

/* ===== MAGNETIC BUTTON EFFECT ===== */
.magnetic-btn {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ===== RIPPLE EFFECT ===== */
.ripple-effect {
  position: relative;
  overflow: hidden;
}

.ripple-effect::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition:
    width 0.6s ease,
    height 0.6s ease;
}

.ripple-effect:hover::before {
  width: 300%;
  height: 300%;
}

/* ===== BLUR IN ANIMATION ===== */
@keyframes blurIn {
  from {
    opacity: 0;
    filter: blur(10px);
  }
  to {
    opacity: 1;
    filter: blur(0);
  }
}

.animate-blur-in {
  animation: blurIn 0.8s ease-out forwards;
}

/* ===== WAVE ANIMATION ===== */
@keyframes wave {
  0%,
  100% {
    transform: rotate(0deg);
  }
  25% {
    transform: rotate(20deg);
  }
  75% {
    transform: rotate(-15deg);
  }
}

.animate-wave {
  animation: wave 1.5s ease-in-out infinite;
  transform-origin: 70% 70%;
  display: inline-block;
}

/* ===== GRADIENT BORDER ANIMATION ===== */
@keyframes borderGradient {
  0% {
    border-image-source: linear-gradient(0deg, #d4a373, #548073);
  }
  50% {
    border-image-source: linear-gradient(180deg, #d4a373, #548073);
  }
  100% {
    border-image-source: linear-gradient(360deg, #d4a373, #548073);
  }
}

.animate-border-gradient {
  border: 3px solid;
  border-image-slice: 1;
  animation: borderGradient 3s linear infinite;
}

/* ===== COUNTER NUMBER ANIMATION ===== */
.counter-number {
  display: inline-block;
  font-variant-numeric: tabular-nums;
}

/* ===== SMOOTH SCROLL INDICATOR ===== */
@keyframes scrollIndicator {
  0% {
    opacity: 1;
    transform: translateY(0);
  }
  50% {
    opacity: 0.5;
    transform: translateY(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.scroll-indicator {
  animation: scrollIndicator 2s ease-in-out infinite;
}

/* ===== HERO TEXT ANIMATION ===== */
@keyframes heroTextReveal {
  0% {
    opacity: 0;
    transform: translateY(30px);
    filter: blur(10px);
  }
  100% {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

.hero-text-animate {
  animation: heroTextReveal 1s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

.hero-text-animate.delay-1 {
  animation-delay: 0.2s;
  opacity: 0;
}
.hero-text-animate.delay-2 {
  animation-delay: 0.4s;
  opacity: 0;
}
.hero-text-animate.delay-3 {
  animation-delay: 0.6s;
  opacity: 0;
}
.hero-text-animate.delay-4 {
  animation-delay: 0.8s;
  opacity: 0;
}

/* ===== IMAGE REVEAL ANIMATION ===== */
.image-reveal {
  position: relative;
  overflow: hidden;
}

.image-reveal::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, #38524a, #548073);
  transform: translateX(-100%);
  z-index: 10;
  transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.image-reveal.is-visible::before {
  transform: translateX(100%);
}

/* ===== NAV LINK HOVER ANIMATION ===== */
.nav-link-animated {
  position: relative;
}

.nav-link-animated::before {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: #d4a373;
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

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

/* ===== LOADING SKELETON ===== */
@keyframes skeleton {
  0% {
    background-position: -200px 0;
  }
  100% {
    background-position: calc(200px + 100%) 0;
  }
}

.skeleton {
  background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
  background-size: 200px 100%;
  animation: skeleton 1.5s ease-in-out infinite;
}

/* ===== SMOOTH PAGE TRANSITIONS ===== */
.page-transition-enter {
  opacity: 0;
  transform: translateY(20px);
}

.page-transition-enter-active {
  opacity: 1;
  transform: translateY(0);
  transition: all 0.5s ease;
}

/* ===== BACKGROUND PATTERN ANIMATION ===== */
@keyframes patternMove {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 60px 60px;
  }
}

.animate-pattern {
  animation: patternMove 20s linear infinite;
}

/* ===== GLOW EFFECT ON HOVER ===== */
.glow-on-hover {
  transition: all 0.3s ease;
}

.glow-on-hover:hover {
  box-shadow:
    0 0 20px rgba(212, 163, 115, 0.5),
    0 0 40px rgba(212, 163, 115, 0.3),
    0 0 60px rgba(212, 163, 115, 0.1);
}

/* ===== SPLIT TEXT ANIMATION ===== */
.split-text span {
  display: inline-block;
  opacity: 0;
  transform: translateY(100%);
  animation: splitReveal 0.5s forwards;
}

@keyframes splitReveal {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== SMOOTH SCROLLBAR ===== */
html {
  scroll-behavior: smooth;
}

::-webkit-scrollbar {
  width: 10px;
}

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

::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #548073, #38524a);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #42665b, #293834);
}