/* riviera-hero.css — flat illustrated Marbella-style poster (animated) */

.riviera {
  position: absolute; inset: 0;
  overflow: hidden;
  background: linear-gradient(180deg, #2f9fd6 0%, #5ab9e0 55%, #8fd0e8 75%, #8fd0e8 78%);
}

/* faint paper grain over everything inside the hero */
.riviera::after {
  content: '';
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.1  0 0 0 0 0.08  0 0 0 0 0.05  0 0 0 0.35 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  mix-blend-mode: multiply;
  opacity: 0.35;
  pointer-events: none;
  z-index: 30;
}

/* sun — soft pale disc behind the mountain */
.sun {
  position: absolute;
  right: 14%; top: 14%;
  width: 110px; height: 110px;
  border-radius: 50%;
  background: radial-gradient(circle, #fff6d6 0%, #ffe49a 60%, rgba(255,228,154,0) 100%);
  animation: sunBob 8s ease-in-out infinite alternate;
  z-index: 1;
}
@keyframes sunBob { 0%{transform:translateY(0)} 100%{transform:translateY(-10px)} }

/* drifting clouds */
.cloud {
  position: absolute;
  height: 18px;
  background: #f4f7fb;
  border-radius: 999px;
  box-shadow:
    24px 4px 0 -2px #f4f7fb,
    -22px 5px 0 -3px #f4f7fb,
    8px -6px 0 -4px #f4f7fb;
  opacity: 0.95;
  z-index: 1;
  animation: cloudDrift 60s linear infinite;
}
.cloud.c1 { top: 10%; width: 60px; animation-duration: 80s; }
.cloud.c2 { top: 18%; width: 40px; animation-duration: 110s; animation-delay: -30s; opacity: 0.85; }
.cloud.c3 { top: 8%;  width: 50px; animation-duration: 95s;  animation-delay: -60s; }
@keyframes cloudDrift {
  0%   { left: -10%; }
  100% { left: 110%; }
}

/* MOUNTAIN — dominant grey massif */
.mountain {
  position: absolute; left: 0; right: 0; top: 12%;
  width: 100%; height: 58%;
  z-index: 2;
}
.mountain svg { width: 100%; height: 100%; display: block; }

/* VILLAGE — Mediterranean harbour, squat & varied */
.village {
  position: absolute; left: 0; right: 0; bottom: 28%;
  width: 100%; height: 16%;
  z-index: 3;
}
.village svg { width: 100%; height: 100%; display: block; }

/* PROMENADE strip (light grey) */
.promenade {
  position: absolute; left: 0; right: 0;
  bottom: 24%; height: 5%;
  background: #d8d4cc;
  z-index: 4;
}

/* PALMS row — small playful palms along promenade */
.palm-row {
  position: absolute; left: 0; right: 0; bottom: 23%;
  height: 12%;
  z-index: 5;
  display: flex; justify-content: space-around; align-items: flex-end;
  padding: 0 4%;
  pointer-events: none;
}
.mini-palm { width: 56px; height: 110px; transform-origin: 50% 100%; }
.mini-palm:nth-child(odd)  { animation: pSway1 5s ease-in-out infinite; }
.mini-palm:nth-child(even) { animation: pSway2 6s ease-in-out infinite; }
@keyframes pSway1 { 0%,100%{transform:rotate(-2deg)} 50%{transform:rotate(2deg)} }
@keyframes pSway2 { 0%,100%{transform:rotate(2deg)}  50%{transform:rotate(-2deg)} }
.mini-palm svg { width: 100%; height: 100%; display: block; }

/* CARS — little jeep + roadster */
.car {
  position: absolute;
  bottom: 23.5%;
  z-index: 6;
}
.car.jeep     { left: 14%; width: 78px; }
.car.roadster { left: 6%;  width: 90px; bottom: 23%; }
/* (carBob removed — cars sit still on the road) */
.car svg { width: 100%; height: auto; display: block; }

/* SEA */
.sea {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 23%;
  background: linear-gradient(180deg, #4fb6c4 0%, #2e8aa0 100%);
  z-index: 4;
}
.sea::before {
  content: '';
  position: absolute; left: 0; right: 0; top: 0;
  height: 100%;
  background: repeating-linear-gradient(
    180deg,
    rgba(255,255,255,0) 0,
    rgba(255,255,255,0) 18px,
    rgba(255,255,255,0.18) 19px,
    rgba(255,255,255,0) 22px);
  animation: seaShift 5s linear infinite;
}
@keyframes seaShift {
  0%   { background-position: 0 0; }
  100% { background-position: 0 22px; }
}

  /* BOATS — speedboats + catamarans */
  .boat {
    position: absolute;
    bottom: 5%;
    z-index: 7;
    animation: boatBob 4s ease-in-out infinite;
  }
  .boat.speedboat-1 { left: 14%; width: 200px; animation-delay: 0s;   }
  .boat.catamaran-1 { left: 34%; width: 260px; animation-delay: -1.5s; bottom: 6%; }
  .boat.speedboat-2 { left: 60%; width: 220px; animation-delay: -2s;  }
  .boat.catamaran-2 { left: 76%; width: 240px; animation-delay: -3s;  bottom: 4.5%; }
@keyframes boatBob {
  0%,100% { transform: translateY(0)    rotate(-0.6deg); }
  50%     { transform: translateY(-4px) rotate(0.6deg);  }
}
.boat svg { width: 100%; height: auto; display: block; }