/* ============================================
   PREMIUM ANIMATIONS & STORYTELLING
   Light-theme version with visible mountains
   ============================================ */

/* Smooth scroll behavior */
html {
  scroll-behavior: smooth;
}

/* Parallax mountains background — visible in hero */
.mountain-bg {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 300px;
  background: url('data:image/svg+xml,<svg width="1920" height="300" xmlns="http://www.w3.org/2000/svg"><path d="M0 300 L320 200 L640 240 L960 160 L1280 220 L1600 180 L1920 220 L1920 300 L0 300 Z" fill="rgba(22,140,100,0.38)" fill-rule="evenodd"/><path d="M0 300 L400 220 L800 260 L1200 180 L1600 240 L1920 200 L1920 300 L0 300 Z" fill="rgba(8,110,76,0.28)" fill-rule="evenodd"/></svg>') bottom center/cover;
  pointer-events: none;
  z-index: 0;
  transform-origin: bottom center;
  will-change: transform;
}

.mountain-bg::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 140px;
  background: linear-gradient(to bottom,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.6) 60%,
    rgba(255, 255, 255, 0.95) 100%
  );
  pointer-events: none;
}

/* Scroll-triggered parallax effect */
.parallax-element {
  will-change: transform;
}

/* Cinematic reveal for sections */
@keyframes slideInFromEdge {
  0% {
    opacity: 0;
    transform: translateX(-60px) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translateX(0) scale(1);
  }
}

.cinematic-reveal {
  animation: slideInFromEdge 1s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Floating animation for atmospheric elements */
@keyframes float {
  0%, 100% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
}

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

/* Atmospheric dots — warm accents */
.atmospheric-dots {
  position: absolute;
  width: 100%;
  height: 100%;
  overflow: hidden;
  pointer-events: none;
  z-index: 1;
}

.atmospheric-dots::before,
.atmospheric-dots::after {
  content: '';
  position: absolute;
  width: 250px;
  height: 250px;
  background: radial-gradient(circle, rgba(255, 122, 0, 0.08) 0%, transparent 70%);
  border-radius: 50%;
}

.atmospheric-dots::before {
  top: 20%;
  left: 10%;
  animation: float 8s ease-in-out infinite;
}

.atmospheric-dots::after {
  bottom: 20%;
  right: 10%;
  animation: float 10s ease-in-out infinite reverse;
}

/* Sophisticated hover states */
.premium-hover {
  transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, filter;
}

.premium-hover:hover {
  transform: translateY(-5px);
  filter: brightness(1.05);
}

/* Text glow effect — warm on dark hero */
.text-glow {
  text-shadow: 0 0 20px rgba(255, 122, 0, 0.25),
               0 0 40px rgba(255, 122, 0, 0.15);
}

/* Gradient shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -1000px 0;
  }
  100% {
    background-position: 1000px 0;
  }
}

.shimmer-effect {
  background: linear-gradient(
    90deg,
    rgba(255, 122, 0, 0) 0%,
    rgba(255, 122, 0, 0.08) 50%,
    rgba(255, 122, 0, 0) 100%
  );
  background-size: 1000px 100%;
  animation: shimmer 3s infinite;
}

/* Scroll reveal with different effects */
.reveal-fade {
  opacity: 0;
  transition: opacity 1s ease-out;
}

.reveal-fade.revealed {
  opacity: 1;
}

.reveal-scale {
  opacity: 0;
  transform: scale(0.95);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

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

.reveal-slide-right {
  opacity: 0;
  transform: translateX(-40px);
  transition: opacity 1s ease-out, transform 1s ease-out;
}

.reveal-slide-right.revealed {
  opacity: 1;
  transform: translateX(0);
}

/* Magnetic effect on buttons */
.magnetic {
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Cinematic loading states */
@keyframes pulse-glow {
  0%, 100% {
    box-shadow: 0 0 15px rgba(255, 122, 0, 0.2);
  }
  50% {
    box-shadow: 0 0 30px rgba(255, 122, 0, 0.4);
  }
}

.pulse-glow {
  animation: pulse-glow 2s ease-in-out infinite;
}