/* ============================================================
   PREMIUM POLISH LAYER
   Adds: scroll reveal animations, image reveal effects, refined
   hover states, sticky nav shadow, gallery motion, mobile fixes,
   smooth scrolling, and a rotating Ken-Burns hero background.
   Does NOT change colors, fonts, layout, spacing, or content —
   purely additive motion/interaction polish.
   ============================================================ */

/* ---- Smooth scrolling (in case it's ever overridden) ---- */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---- Sticky nav: subtle elevation once page is scrolled ---- */
.nav {
  transition: box-shadow .3s ease, background-color .3s ease;
}
.nav.is-scrolled {
  box-shadow: 0 4px 24px rgba(11,42,99,.08);
}

/* ============================================================
   HERO ROTATING BACKGROUND (Ken Burns zoom/pan + crossfade)
   ============================================================ */
.hero-bg{
  position:absolute;inset:0;
  background:none; /* replaces old single-image background */
}
.hero-slide{
  position:absolute;inset:0;
  background-size:cover;
  background-position:center;
  opacity:0;
  animation:heroFade 20s infinite, heroZoom 20s infinite;
  transform-origin:center center;
}
.hero-slide:nth-child(1){animation-delay:0s}
.hero-slide:nth-child(2){animation-delay:5s}
.hero-slide:nth-child(3){animation-delay:10s}
.hero-slide:nth-child(4){animation-delay:15s}

@keyframes heroFade{
  0%{opacity:0}
  3%{opacity:1}
  22%{opacity:1}
  28%{opacity:0}
  100%{opacity:0}
}

@keyframes heroZoom{
  0%{transform:scale(1) translate(0,0)}
  100%{transform:scale(1.12) translate(-1.5%,-1.5%)}
}

@media (prefers-reduced-motion: reduce){
  .hero-slide{animation:none;opacity:1;transform:none}
}

/* ---- Scroll-reveal base classes (toggled by JS via IntersectionObserver) ---- */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity .7s cubic-bezier(.16,.84,.44,1), transform .7s cubic-bezier(.16,.84,.44,1);
  will-change: opacity, transform;
}
.reveal.reveal-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger helper — children get incremental delay via inline custom property set by JS */
.reveal[style*="--rd"] { transition-delay: var(--rd); }

/* Section headers get a slightly softer reveal (fade + small rise) */
.section-header.reveal { transform: translateY(18px); }

/* ---- Image reveal: subtle clip + fade-scale as images enter viewport ---- */
.img-reveal {
  overflow: hidden;
  position: relative;
}
.img-reveal img {
  opacity: 0;
  transform: scale(1.08);
  filter: saturate(.9);
  transition: opacity .9s cubic-bezier(.16,.84,.44,1), transform 1.1s cubic-bezier(.16,.84,.44,1), filter .9s ease;
}
.img-reveal.img-reveal-visible img {
  opacity: 1;
  transform: scale(1);
  filter: saturate(1);
}

/* ---- Card hover refinement (layers on top of existing hover rules) ---- */
.svc-card, .svc-page-card, .food-card, .delivery-card, .testi-card, .stat-box, .why-card {
  transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s cubic-bezier(.16,.84,.44,1);
}
.svc-card:hover, .delivery-card:hover, .food-card:hover {
  box-shadow: 0 14px 36px rgba(11,42,99,.14);
}
.testi-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(11,42,99,.1);
}
.why-card {
  transition: transform .3s cubic-bezier(.16,.84,.44,1), box-shadow .3s ease, border-color .3s ease;
}
.why-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 26px rgba(11,42,99,.08);
  border-color: rgba(245,130,32,.35);
}
.stat-box:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(11,42,99,.08);
}

/* ---- Event card image scale already exists; smooth the easing ---- */
.ev-img img, .svc-img img, .svc-page-img img, .food-img img, .delivery-img img {
  transition: transform .5s cubic-bezier(.16,.84,.44,1);
}

/* ---- Button hover polish: gentle lift + soft glow, no color changes ---- */
.btn {
  transition: transform .25s cubic-bezier(.16,.84,.44,1), box-shadow .25s ease, background-color .2s ease;
}
.btn-primary:hover { box-shadow: 0 8px 22px rgba(245,130,32,.35); }
.btn-navy:hover { box-shadow: 0 8px 22px rgba(11,42,99,.28); transform: translateY(-1px); }
.btn-wa:hover { box-shadow: 0 8px 22px rgba(37,211,102,.35); }
.btn-orange-outline:hover { box-shadow: 0 6px 18px rgba(245,130,32,.2); }
.btn-outline-white:hover { box-shadow: 0 6px 18px rgba(255,255,255,.12); }
.btn:active { transform: translateY(0) scale(.98); }

/* ---- Tab buttons: smoother active/hover state ---- */
.tab-btn {
  transition: all .25s cubic-bezier(.16,.84,.44,1);
}
.tab-btn:hover:not(.active) {
  border-color: var(--orange);
  color: var(--orange);
  transform: translateY(-1px);
}

/* ---- Gallery: refined hover + reveal-in stagger ---- */
.gallery-item {
  transition: transform .4s cubic-bezier(.16,.84,.44,1), box-shadow .4s ease;
}
.gallery-item:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(11,42,99,.18);
}
.gallery-overlay {
  transition: background .3s ease, opacity .3s ease;
}
.gallery-overlay span {
  transform: translateY(6px);
  opacity: 0;
  transition: transform .3s ease .05s, opacity .3s ease .05s;
}
.gallery-item:hover .gallery-overlay span {
  transform: translateY(0);
  opacity: 1;
}

/* ---- Reviews carousel: smoother card hover inside slider ---- */
.review-slide .testi-card {
  transition: transform .35s cubic-bezier(.16,.84,.44,1), box-shadow .35s ease;
}
.carousel-dot {
  transition: all .3s cubic-bezier(.16,.84,.44,1);
}

/* ---- Floating WhatsApp button: refined entrance + breathing ---- */
.wa-float {
  transition: transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .3s ease;
}
.wa-float.wa-visible {
  animation: waFloatIn .5s cubic-bezier(.34,1.56,.64,1) both;
}
@keyframes waFloatIn {
  from { opacity: 0; transform: translateY(16px) scale(.8); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ---- Nav link underline: smoother easing (keeps existing color logic) ---- */
.nav-links button::after {
  transition: transform .3s cubic-bezier(.16,.84,.44,1);
}

/* ---- Logo subtle hover ---- */
.nav-logo {
  transition: opacity .25s ease;
}
.nav-logo:hover {
  opacity: .85;
}

/* ---- Mobile responsiveness refinements (non-destructive additions) ---- */
@media (max-width: 480px) {
  .hero-content { padding-top: 4rem; }
  .hero-btns { gap: .6rem; }
  .hero-btns .btn { flex: 1 1 auto; min-width: 0; }
  .carousel-prev { left: 0; }
  .carousel-next { right: 0; }
  .review-slide { padding: 0 .35rem; }
}
@media (max-width: 380px) {
  .trust-item, .why-card, .stat-box { padding-left: 1.1rem; padding-right: 1.1rem; }
}

/* ---- Lazy-load fade-in for native lazy images ---- */
img[loading="lazy"] {
  transition: opacity .4s ease;
}
img.img-loaded {
  opacity: 1;
}

/* ---- Prevent layout shift / improve perceived performance ---- */
.svc-img, .svc-page-img, .food-img, .ev-img, .delivery-img {
  background-color: var(--light);
}
.gallery-item img {
  background-color: var(--light);
}