/* ===== LANDSCAPE TEXT OVERLAY ===== */
.landscape {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  /* Speed Index Optimization */
  min-height: 100vh;
  will-change: auto;
  transform: translateZ(0);
}

/* ===== VIDEO BACKGROUND ANIMATION - CREATIVE EFFECTS ===== */
#background-video {
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 1;
  object-fit: cover;
  animation: backgroundColorCycle 30s ease-in-out infinite alternate, videoFade 30s ease-in-out infinite;
  filter:
    blur(0.8px)
    brightness(0.9)
    contrast(1.15)
    saturate(1.15)
    hue-rotate(0deg);
}

@keyframes videoSlideSeamless {
  0% {
    transform: translate(-75%, -50%) scale(1.02) rotate(0deg);
  }
  25% {
    transform: translate(-65%, -52%) scale(1.04) rotate(0.5deg);
  }
  50% {
    transform: translate(-55%, -50%) scale(1.02) rotate(0deg);
  }
  75% {
    transform: translate(-45%, -48%) scale(1.06) rotate(-0.5deg);
  }
  100% {
    transform: translate(-25%, -50%) scale(1.02) rotate(0deg);
  }
}

@keyframes videoZoomPulse {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1.02);
  }
  25% {
    transform: translate(-50%, -50%) scale(1.08);
  }
  50% {
    transform: translate(-50%, -50%) scale(1.04);
  }
  75% {
    transform: translate(-50%, -50%) scale(1.1);
  }
}

@keyframes videoColorShift {
  0%, 100% {
    filter: 
      blur(0.8px) 
      brightness(0.85) 
      contrast(1.15) 
      saturate(1.1)
      hue-rotate(0deg);
  }
  20% {
    filter: 
      blur(0.6px) 
      brightness(0.9) 
      contrast(1.2) 
      saturate(1.3)
      hue-rotate(5deg);
  }
  40% {
    filter: 
      blur(1px) 
      brightness(0.8) 
      contrast(1.1) 
      saturate(0.9)
      hue-rotate(-3deg);
  }
  60% {
    filter: 
      blur(0.7px) 
      brightness(0.95) 
      contrast(1.25) 
      saturate(1.2)
      hue-rotate(8deg);
  }
  80% {
    filter: 
      blur(0.9px) 
      brightness(0.82) 
      contrast(1.18) 
      saturate(1.05)
      hue-rotate(-2deg);
  }
}

/* ===== CREATIVE OVERLAY LAYERS ===== */
.landscape::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  min-width: 100%;
  min-height: 100%;
  width: auto;
  height: auto;
  background: url('../videos/landscape-background.mp4') center/cover;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 0;
  animation: none;
  filter: 
    blur(1.2px) 
    brightness(0.7) 
    contrast(1.3) 
    saturate(0.8)
    hue-rotate(15deg);
  opacity: 0.4;
  mix-blend-mode: overlay;
}

@keyframes videoParallax {
  0%, 100% {
    transform: translate(-50%, -50%) scale(1.02) skewX(0deg);
  }
  25% {
    transform: translate(-48%, -52%) scale(1.05) skewX(1deg);
  }
  50% {
    transform: translate(-52%, -48%) scale(1.08) skewX(0deg);
  }
  75% {
    transform: translate(-50%, -52%) scale(1.03) skewX(-1deg);
  }
}

@keyframes videoWave {
  0%, 100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  25% {
    clip-path: polygon(0 5%, 100% 0, 100% 95%, 0 100%);
  }
  50% {
    clip-path: polygon(0 0, 100% 3%, 100% 100%, 0 97%);
  }
  75% {
    clip-path: polygon(0 2%, 100% 0, 100% 98%, 0 100%);
  }
}

/* ===== FLOATING PARTICLES EFFECT ===== */
.landscape::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: 
    linear-gradient(45deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.1) 30%, rgba(0, 0, 0, 0.1) 70%, rgba(0, 0, 0, 0.4) 100%),
    radial-gradient(ellipse at center, rgba(0, 0, 0, 0.1) 0%, rgba(0, 0, 0, 0.3) 100%),
    linear-gradient(180deg, rgba(0, 0, 0, 0.2) 0%, transparent 20%, transparent 80%, rgba(0, 0, 0, 0.2) 100%),
    radial-gradient(circle at 20% 30%, rgba(255, 255, 255, 0.03) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(255, 255, 255, 0.02) 0%, transparent 50%),
    radial-gradient(circle at 60% 20%, rgba(255, 255, 255, 0.025) 0%, transparent 50%);
  z-index: 2;
  pointer-events: none;
  animation: particleFloat 25s ease-in-out infinite;
}

@keyframes particleFloat {
  0%, 100% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 20% 30%, 80% 70%, 60% 20%;
  }
  25% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 25% 35%, 75% 65%, 65% 25%;
  }
  50% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 30% 40%, 70% 60%, 70% 30%;
  }
  75% {
    background-position: 0% 0%, 0% 0%, 0% 0%, 15% 25%, 85% 75%, 55% 15%;
  }
}

/* ===== ENHANCED LANDSCAPE OVERLAY ===== */
.landscape-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 10;
  max-width: 900px;
  padding: 40px 20px;
  opacity: 0;
  animation: 
    fadeInUp 1.5s ease-out 0.5s forwards,
    overlayFloat 20s ease-in-out infinite 2s;
}



.landscape-logo {
  max-width: 300px;
  width: 300px !important;
  height: auto;
  margin: 0 0 0.8rem 0;
  /* Speed Index Optimization - Disable animations for faster visual completion */
  opacity: 1 !important;
  animation: none !important;
  filter: 
    drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)) 
    drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6))
    drop-shadow(0 1px 3px rgba(0, 0, 0, 1));
  -webkit-transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  -webkit-perspective: 1000px;
  transition: filter 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  cursor: pointer;
  position: relative;
}

.landscape-logo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at center, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
  opacity: 0;
  transition: opacity 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  pointer-events: none;
  z-index: -1;
}

.landscape-logo:hover {
  filter: 
    drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)) 
    drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6))
    drop-shadow(0 1px 3px rgba(0, 0, 0, 1))
    drop-shadow(0 0 30px rgba(255, 255, 255, 0.5))
    drop-shadow(0 0 60px rgba(255, 255, 255, 0.3))
    drop-shadow(0 0 90px rgba(255, 255, 255, 0.1));
  animation-play-state: paused;
}

.landscape-logo:hover::before {
  opacity: 1;
}

@keyframes logoGlow {
  0%, 100% {
    filter: 
      drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)) 
      drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6))
      drop-shadow(0 1px 3px rgba(0, 0, 0, 1));
  }
  25% {
    filter: 
      drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)) 
      drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6))
      drop-shadow(0 1px 3px rgba(0, 0, 0, 1))
      drop-shadow(0 0 18px rgba(255, 255, 255, 0.12));
  }
  50% {
    filter: 
      drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)) 
      drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6))
      drop-shadow(0 1px 3px rgba(0, 0, 0, 1))
      drop-shadow(0 0 22px rgba(255, 255, 255, 0.15))
      drop-shadow(0 0 35px rgba(255, 255, 255, 0.08));
  }
  75% {
    filter: 
      drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)) 
      drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6))
      drop-shadow(0 1px 3px rgba(0, 0, 0, 1))
      drop-shadow(0 0 12px rgba(255, 255, 255, 0.08));
  }
}

.landscape-description {
  font-family: 'Montserrat', sans-serif;
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  font-weight: 400;
  color: #ffffff;
  line-height: 1.6;
  margin: 0 0 2rem 0;
  text-shadow: 
    0 4px 15px rgba(0, 0, 0, 0.9),
    0 8px 30px rgba(0, 0, 0, 0.7),
    0 2px 5px rgba(0, 0, 0, 1);
  opacity: 1;
  animation: none;
}

@keyframes textShimmer {
  0%, 100% {
    text-shadow: 
      0 4px 15px rgba(0, 0, 0, 0.9),
      0 8px 30px rgba(0, 0, 0, 0.7),
      0 2px 5px rgba(0, 0, 0, 1);
  }
  50% {
    text-shadow: 
      0 4px 15px rgba(0, 0, 0, 0.9),
      0 8px 30px rgba(0, 0, 0, 0.7),
      0 2px 5px rgba(0, 0, 0, 1),
      0 0 10px rgba(255, 255, 255, 0.1);
  }
}

/* ===== ENHANCED LANDSCAPE BUTTON ===== */
.landscape-btn {
  position: relative;
  display: inline-flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 14px 28px;
  background: rgba(255, 255, 255, 0.15);
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-radius: 100px;
  color: #ffffff;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 1rem;
  letter-spacing: 0.5px;
  backdrop-filter: blur(25px) saturate(1.3);
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden;
  opacity: 1;
  animation: none;
  box-shadow: 
    0 8px 25px rgba(0, 0, 0, 0.4),
    0 3px 10px rgba(0, 0, 0, 0.3),
    inset 0 1px 0 rgba(255, 255, 255, 0.2),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
  margin-top: 20px;
}


.landscape-btn::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
  transition: left 0.6s ease;
  animation: shimmerPass 8s ease-in-out infinite;
}


.landscape-btn:hover::before {
  left: 100%;
}

.landscape-btn:hover {
  transform: translateY(-4px) scale(1.02);
  border-color: rgba(255, 255, 255, 0.6);
  background: rgba(255, 255, 255, 0.25);
  box-shadow: 
    0 15px 40px rgba(0, 0, 0, 0.5),
    0 5px 20px rgba(0, 0, 0, 0.4),
    inset 0 1px 0 rgba(255, 255, 255, 0.3),
    inset 0 -1px 0 rgba(0, 0, 0, 0.1);
}

.btn-text {
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
  text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
}

.btn-arrow {
  position: relative;
  z-index: 2;
  transition: transform 0.3s ease;
  stroke: currentColor;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  animation: arrowFloat 6s ease-in-out infinite;
}


.landscape-btn:hover .btn-arrow {
  transform: none;
  animation: none;
}

.btn-glow {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.4) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: all 0.4s ease;
  opacity: 0;
}

.landscape-btn:hover .btn-glow {
  width: 160px;
  height: 160px;
  opacity: 1;
}

/* ===== ANIMATIONS ===== */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  to {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}

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

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

@keyframes slideInFromBottom {
  from {
    opacity: 0;
    transform: translateY(40px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ===== SCROLL INDICATOR ADJUSTMENTS ===== */
.scroll-indicator {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 15;
  opacity: 0;
  animation: 
    fadeInBounce 1s ease-out 2s forwards,
    indicatorGlow 10s ease-in-out infinite 3s;
  cursor: pointer;
  transition: transform 0.3s ease;
}

@keyframes indicatorGlow {
  0%, 100% {
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
  }
  50% {
    filter: 
      drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6))
      drop-shadow(0 0 15px rgba(255, 255, 255, 0.2));
  }
}

.scroll-indicator:hover {
  transform: translateX(-50%) scale(1.15);
}

.arrow-down {
  animation: 
    bounce 2s infinite,
    arrowPulse 8s ease-in-out infinite;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.6));
}

@keyframes arrowPulse {
  0%, 100% {
    opacity: 1;
  }
  50% {
    opacity: 0.7;
  }
}

@keyframes fadeInBounce {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(25px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateY(0);
  }
  40% {
    transform: translateY(-12px);
  }
  60% {
    transform: translateY(-6px);
  }
}

/* ===== RESPONSIVE DESIGN ===== */
@media (max-width: 768px) {
  #background-video {
    min-width: 170%;
    min-height: 115%;
    animation-duration: 8s, 12s, 16s;
    filter: 
      blur(0.6px) 
      brightness(0.8) 
      contrast(1.1) 
      saturate(1.05)
      hue-rotate(0deg);
  }
  
  .landscape::before {
    min-width: 170%;
    min-height: 115%;
    animation-duration: 8s, 10s, 6s;
    filter: 
      blur(1px) 
      brightness(0.65) 
      contrast(1.25) 
      saturate(0.7)
      hue-rotate(10deg);
  }
  
  .landscape-overlay {
    max-width: 95%;
    padding: 25px 15px;
    animation-duration: 1.5s, 16s;
  }
  
  .landscape-logo {
    max-width: 250px;
    margin-bottom: 0.6rem;
    animation-duration: 1.2s, 16s;
    transition: filter 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .landscape-logo:hover {
    filter: 
      drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)) 
      drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6))
      drop-shadow(0 1px 3px rgba(0, 0, 0, 1))
      drop-shadow(0 0 25px rgba(255, 255, 255, 0.4))
      drop-shadow(0 0 50px rgba(255, 255, 255, 0.25))
      drop-shadow(0 0 75px rgba(255, 255, 255, 0.1));
    animation-play-state: paused;
  }
  
  .landscape-description {
    line-height: 1.5;
    margin-bottom: 1.5rem;
    animation-duration: 1.2s, 14s;
  }
  
  .landscape-btn {
    padding: 14px 26px;
    font-size: 0.9rem;
    animation-duration: 1.2s, 10s;
  }
  
  .scroll-indicator {
    bottom: 20px;
    animation-duration: 1s, 8s;
  }
}

@media (max-width: 480px) {
  #background-video {
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%) scale(0.8);
    animation-duration: 7s, 10s, 14s;
    filter: 
      blur(0.5px) 
      brightness(0.75) 
      contrast(1.08) 
      saturate(1.02)
      hue-rotate(0deg);
  }
  
  .landscape::before {
    min-width: 100%;
    min-height: 100%;
    transform: translate(-50%, -50%) scale(0.8);
    animation-duration: 7s, 8s, 5s;
    filter: 
      blur(0.8px) 
      brightness(0.6) 
      contrast(1.2) 
      saturate(0.6)
      hue-rotate(8deg);
  }
  
  .landscape-overlay {
    width: 95%;
    max-width: 95%;
    box-sizing: border-box;
    padding: 20px 20px;
    animation-duration: 1.5s, 14s;
  }
  
  .landscape-logo {
    max-width: 200px;
    margin-bottom: 0.5rem;
    animation-duration: 1.2s, 14s;
    transition: filter 1.5s cubic-bezier(0.4, 0, 0.2, 1);
  }
  
  .landscape-logo:hover {
    filter: 
      drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)) 
      drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6))
      drop-shadow(0 1px 3px rgba(0, 0, 0, 1))
      drop-shadow(0 0 20px rgba(255, 255, 255, 0.4))
      drop-shadow(0 0 40px rgba(255, 255, 255, 0.25))
      drop-shadow(0 0 60px rgba(255, 255, 255, 0.1));
    animation-play-state: paused;
  }
  
  .landscape-description {
    margin-bottom: 1.2rem;
    animation-duration: 1.2s, 12s;
    font-size: clamp(1rem, 4vw, 1.3rem);
    line-height: 1.4;
  }
  
  .landscape-btn {
    padding: 12px 22px;
    font-size: 0.85rem;
    gap: 6px;
    animation-duration: 1.2s, 8s;
  }
}

/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
  #background-video,
  .landscape::before {
    animation: videoSlideSeamless 10s linear infinite;
  }
  
  .landscape-overlay,
  .landscape-logo,
  .landscape-description,
  .landscape-btn,
  .scroll-indicator,
  .arrow-down {
    animation: 
      fadeInUp 1.5s ease-out 0.5s forwards,
      slideInFromLeft 1.2s ease-out 0.8s forwards,
      slideInFromRight 1.2s ease-out 1.1s forwards,
      slideInFromBottom 1.2s ease-out 1.4s forwards,
      fadeInBounce 1s ease-out 2s forwards,
      bounce 2s infinite;
  }
  
  .landscape-overlay {
    transform: translate(-50%, -50%);
  }
  
  .landscape-logo,
  .landscape-description,
  .landscape-btn {
    transform: translateX(0);
  }
  
  .landscape-logo:hover {
    filter: 
      drop-shadow(0 8px 30px rgba(0, 0, 0, 0.8)) 
      drop-shadow(0 3px 10px rgba(0, 0, 0, 0.6))
      drop-shadow(0 1px 3px rgba(0, 0, 0, 1))
      drop-shadow(0 0 20px rgba(255, 255, 255, 0.3))
      drop-shadow(0 0 40px rgba(255, 255, 255, 0.2)) !important;
    transform: scale(1.02) !important;
    -webkit-transform: translateZ(0) scale(1.02) !important;
    animation-play-state: paused !important;
  }
  
  .scroll-indicator {
    transform: translateX(-50%);
  }
  
  .landscape-btn::before,
  .btn-glow,
  .landscape-btn:hover .btn-arrow {
    transition: none;
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS ===== */
@media (prefers-reduced-data: reduce) {
  #background-video {
    animation-duration: 12s, 18s, 24s;
    filter: blur(1.2px) brightness(0.7);
  }
  
  .landscape::before {
    display: none;
  }
  
  .landscape::after {
    animation: none;
  }
}

/* ===== HIGH CONTRAST MODE ===== */
@media (prefers-contrast: high) {
  .landscape::after {
    background: rgba(0, 0, 0, 0.7);
  }
  
  .landscape-description {
    color: #ffffff;
    text-shadow: 
      0 3px 6px rgba(0, 0, 0, 1),
      0 0 10px rgba(0, 0, 0, 1);
  }
  
  .landscape-btn {
    background: rgba(255, 255, 255, 0.3);
    border-color: rgba(255, 255, 255, 0.8);
  }
}
/* subtle hue/saturation cycle on background */
@keyframes backgroundColorCycle {
  0% {
    filter: blur(0.8px) brightness(0.85) contrast(1.15) saturate(1.1) hue-rotate(0deg);
  }
  50% {
    filter: blur(0.8px) brightness(0.85) contrast(1.15) saturate(1.15) hue-rotate(15deg);
  }
  100% {
    filter: blur(0.8px) brightness(0.85) contrast(1.15) saturate(1.1) hue-rotate(0deg);
  }
}


/* Fade video in/out at loop boundaries */
@keyframes videoFade {
  0%, 100% { opacity: 0.9; }
  15%, 85% { opacity: 1; }
}
/* Cinematic letterbox bars */
.cinematic-bars {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 9;
}
.cinematic-bars::before,
.cinematic-bars::after {
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 8%;
  background: rgba(0, 0, 0, 0.6);
}
.cinematic-bars::before {
  top: 0;
}
.cinematic-bars::after {
  bottom: 0;
}

/* Intensify cinematic color grade on video */
#background-video {
  filter:
    blur(0.8px)
    brightness(0.85)
    contrast(1.15)
    saturate(1.15)
    sepia(0.05)
    hue-rotate(0deg);
  animation: backgroundColorCycle 40s ease-in-out infinite alternate;
}
@keyframes backgroundColorCycle {
  0% {
    filter: blur(0.8px) brightness(0.85) contrast(1.15) saturate(1.1) hue-rotate(0deg);
  }
  50% {
    filter: blur(0.8px) brightness(0.85) contrast(1.15) saturate(1.15) hue-rotate(15deg);
  }
  100% {
    filter: blur(0.8px) brightness(0.85) contrast(1.15) saturate(1.1) hue-rotate(0deg);
  }
}