/* Lovely Trip — animated sunset-ocean hero background (home page).
   Pure CSS/SVG: drifting sky, setting sun + shimmer, layered moving waves,
   a small plane crossing. No external images. */

.hero-bg { background: #101740; }

/* Sky */
.ocean-sky {
  position: absolute; inset: 0 0 40% 0;
  background: linear-gradient(180deg, #0f1640 0%, #2a2a6e 26%, #6f3a8c 48%, #c85c88 68%, #ff9c78 88%, #ffd0a0 100%);
}

/* Sun */
.ocean-sun {
  position: absolute; left: 62%; top: 30%; width: 160px; height: 160px; margin-left: -80px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6de 0%, #ffd885 34%, #ff9e5e 58%, rgba(255, 150, 90, 0) 72%);
  animation: sunbob 9s ease-in-out infinite;
}
.ocean-sun::after {
  content: ''; position: absolute; inset: -75%; border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 180, 120, .28), transparent 66%);
}

/* Clouds */
.ocean-clouds span {
  position: absolute; display: block; border-radius: 100px; filter: blur(10px);
  background: rgba(255, 224, 216, .22);
}
.ocean-clouds span:nth-child(1) { top: 15%; left: -18%; width: 230px; height: 34px; animation: drift 48s linear infinite; }
.ocean-clouds span:nth-child(2) { top: 25%; left: -28%; width: 160px; height: 26px; opacity: .7; animation: drift 66s linear infinite; }

/* Plane */
.ocean-plane { position: absolute; top: 19%; left: -10%; color: #141b3a; opacity: .72; animation: fly 40s linear infinite; }
.ocean-plane svg { width: 50px; height: auto; display: block; }

/* Sea */
.ocean-sea {
  position: absolute; left: 0; right: 0; bottom: 0; height: 40%; overflow: hidden;
  background: linear-gradient(180deg, #f0a0ad 0%, #c9709a 12%, #6a5aa8 32%, #2f7fb8 58%, #17689f 82%, #0d4d80 100%);
}
.sun-reflect {
  position: absolute; top: 0; left: 62%; width: 90px; margin-left: -45px; height: 72%;
  background: linear-gradient(180deg, rgba(255, 225, 160, .6), rgba(255, 180, 120, 0));
  filter: blur(4px); animation: shimmer 4.5s ease-in-out infinite;
}

/* Waves */
.wave { position: absolute; left: 0; width: 100%; background-repeat: repeat-x; background-size: 1200px 100%; }
.w1 {
  bottom: 62%; height: 56px; opacity: .5;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120'%3E%3Cpath d='M0 40 C150 80 350 0 600 40 C850 80 1050 0 1200 40 L1200 120 L0 120 Z' fill='%23cdeefa'/%3E%3C/svg%3E");
  animation: waveflow 15s linear infinite;
}
.w2 {
  bottom: 34%; height: 82px; opacity: .6;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120'%3E%3Cpath d='M0 40 C150 80 350 0 600 40 C850 80 1050 0 1200 40 L1200 120 L0 120 Z' fill='%235bc4e0'/%3E%3C/svg%3E");
  animation: waveflow 11s linear infinite reverse;
}
.w3 {
  bottom: 0; height: 130px; opacity: .92;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='120' viewBox='0 0 1200 120'%3E%3Cpath d='M0 50 C170 95 360 10 600 50 C840 90 1040 12 1200 50 L1200 120 L0 120 Z' fill='%230e5285'/%3E%3C/svg%3E");
  animation: waveflow 8s linear infinite;
}

/* Video background — sits above the ocean scene, fades in once loaded.
   If assets/hero.mp4 is missing, it stays invisible and the ocean shows. */
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  z-index: 1; opacity: 0; transition: opacity 1s ease; background: transparent;
}
.hero-video.ready { opacity: 1; }

/* Vignette for text legibility — above both scene and video */
.hero-bg::after {
  content: ''; position: absolute; inset: 0; z-index: 2;
  background: linear-gradient(100deg, rgba(8, 12, 35, .66) 0%, rgba(8, 12, 35, .32) 44%, rgba(8, 12, 35, .12) 100%);
}

@keyframes waveflow { from { background-position-x: 0; } to { background-position-x: 1200px; } }
@keyframes sunbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(10px); } }
@keyframes shimmer { 0%, 100% { opacity: .35; transform: scaleX(1); } 50% { opacity: .7; transform: scaleX(1.3); } }
@keyframes drift { from { transform: translateX(0); } to { transform: translateX(140vw); } }
@keyframes fly { 0% { transform: translate(0, 0); } 100% { transform: translate(130vw, -40px); } }

@media (prefers-reduced-motion: reduce) {
  .wave, .ocean-sun, .sun-reflect, .ocean-clouds span, .ocean-plane { animation: none !important; }
}