/* ============================================
   OPTI CONCIERGERIE — Custom CSS
   Tailwind v4 complement: animations, decoratives
   ============================================ */

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

/* ---- Selection ---- */
::selection { background: #F5DC4B; color: #1B4A4F; }

/* ---- Hero video overlay & motion ---- */
.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 0;
}

.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(27,74,79,0.35) 0%, rgba(27,74,79,0.15) 35%, rgba(27,74,79,0.75) 100%),
    radial-gradient(ellipse at top right, rgba(91,181,188,0.25), transparent 60%);
  z-index: 1;
}

/* ---- Decorative blobs ---- */
.blob {
  position: absolute;
  border-radius: 9999px;
  filter: blur(72px);
  opacity: 0.55;
  pointer-events: none;
  z-index: 0;
}

/* ---- Wave SVG separator ---- */
.wave-divider svg {
  display: block;
  width: 100%;
  height: 80px;
}

/* ---- Marquee bandeau ---- */
@keyframes marquee {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}
.marquee-track {
  display: flex;
  width: max-content;
  animation: marquee 38s linear infinite;
}
.marquee-track:hover { animation-play-state: paused; }

/* ---- Card hover lift ---- */
.card-lift {
  transition: transform .5s cubic-bezier(.2,.7,.2,1), box-shadow .5s ease;
}
.card-lift:hover {
  transform: translateY(-6px);
  box-shadow: 0 30px 60px -25px rgba(27,74,79,0.35);
}

/* ---- Image frame with double border ---- */
.frame-shadow {
  box-shadow:
    0 0 0 8px #FAF6EC,
    0 0 0 9px rgba(91,181,188,.4),
    0 30px 60px -25px rgba(27,74,79,0.35);
}

/* ---- Underline link animated ---- */
.link-underline {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
}
.link-underline::after {
  content: '';
  position: absolute;
  left: 0; bottom: -3px;
  width: 100%; height: 2px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.link-underline:hover::after {
  transform: scaleX(1);
  transform-origin: left;
}

/* Active nav link — permanent sun-yellow underline, more visible */
.link-underline-active::after {
  transform: scaleX(1) !important;
  transform-origin: left !important;
  background: #F5DC4B !important;
  height: 3px !important;
  bottom: -7px !important;
}
.link-underline-active { font-weight: 600; }

/* ---- Scroll indicator ---- */
@keyframes scrollDown {
  0% { transform: translateY(0); opacity: 1; }
  100% { transform: translateY(14px); opacity: 0; }
}
.scroll-dot {
  animation: scrollDown 1.6s ease-in-out infinite;
}

/* ---- Reveal on scroll ---- */
.reveal { opacity: 0; transform: translateY(28px); transition: all .9s cubic-bezier(.2,.7,.2,1); }
.reveal.in { opacity: 1; transform: translateY(0); }

/* ---- Sticky badge floating ---- */
@keyframes float {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-8px); }
}
.float-soft { animation: float 5s ease-in-out infinite; }

/* ---- Custom rounded asymmetric blob mask ---- */
.blob-mask {
  border-radius: 64% 36% 58% 42% / 50% 60% 40% 50%;
}
.blob-mask-2 {
  border-radius: 38% 62% 41% 59% / 56% 44% 56% 44%;
}

/* ---- Navbar transition ---- */
.navbar-scrolled {
  background: rgba(250, 246, 236, 0.92);
  backdrop-filter: blur(14px);
  box-shadow: 0 2px 20px -8px rgba(27,74,79,0.18);
}

/* ---- Mobile menu ---- */
#mobile-menu {
  transform: translateX(100%);
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
#mobile-menu.open { transform: translateX(0); }

/* ---- Number counters ---- */
.counter-num {
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* ---- Reduce motion ---- */
@media (prefers-reduced-motion: reduce) {
  .marquee-track, .float-soft, .scroll-dot { animation: none !important; }
  .reveal { opacity: 1; transform: none; }
}

/* ============================================
   LUMINOUS BACKGROUNDS — depth & glow without flat colors
   ============================================ */

/* Deep luminous: dark teal base with sky-blue glow + warm sun accent */
.bg-deep-luminous {
  background-color: #0F2D31;
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(106,186,193,0.32), transparent 58%),
    radial-gradient(90% 70% at 0% 100%, rgba(245,220,75,0.10), transparent 60%),
    radial-gradient(60% 50% at 50% 50%, rgba(106,186,193,0.08), transparent 70%),
    linear-gradient(140deg, #1B4A4F 0%, #0F2D31 55%, #14383D 100%);
}

/* Sky luminous: turquoise base with sun glow + deep teal contrast */
.bg-sky-luminous {
  background-color: #6ABAC1;
  background-image:
    radial-gradient(110% 90% at 100% 0%, rgba(245,220,75,0.25), transparent 55%),
    radial-gradient(90% 80% at 0% 100%, rgba(15,45,49,0.45), transparent 65%),
    linear-gradient(140deg, #7CC4CA 0%, #6ABAC1 50%, #5AA8AF 100%);
}

/* Cream luminous: cream base with subtle sun + sky glows */
.bg-cream-luminous {
  background-color: #FAF6EC;
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(245,220,75,0.18), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(106,186,193,0.22), transparent 60%);
}

/* Sand luminous: warm cream with soft accents */
.bg-sand-luminous {
  background-color: #F5EFE0;
  background-image:
    radial-gradient(120% 80% at 100% 0%, rgba(245,220,75,0.15), transparent 60%),
    radial-gradient(80% 60% at 0% 100%, rgba(106,186,193,0.18), transparent 60%);
}