/* =========================================================
   Jaipur Celebration — hero video, running strip, enquiry popup and animations
   ========================================================= */

/* ---------- Hero with background video / photo slideshow ---------- */
.hero-video { min-height: 680px; overflow: hidden; background: var(--navy); }
.hero-video::before { z-index: 1; background: linear-gradient(180deg, rgba(28, 77, 116, .55), rgba(28, 77, 116, .70)); }
.hero-bg { position: absolute; inset: 0; z-index: 0; }
.hero-media { width: 100%; height: 100%; object-fit: cover; display: block; }
.hero-photo { position: absolute; inset: 0; background: center / cover no-repeat; opacity: 0; transition: opacity 1.4s ease; }
.hero-photo.active { opacity: 1; animation: kenburns 9s ease-out both; }
@keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } }
.hero-video .container { z-index: 3; max-width: 860px; }
.hero-video h1 { font-size: clamp(38px, 5.4vw, 70px); }
.hero-video .pill { display: inline-flex; align-items: center; gap: 8px; transition: background .3s, transform .3s; }
.hero-video .pill:hover { background: var(--pink-2); color: #fff; transform: translateY(-2px); }
.hero-deco { position: absolute; z-index: 2; pointer-events: none; opacity: .9; }
.deco-balloons { left: 4%; top: 150px; width: 90px; }
.deco-popper { right: 5%; bottom: 90px; width: 120px; }

/* Mobile menu: the dark overlay (z-index 99) must stay behind the menu, so lift the header above it */
.nav-open .site-header { z-index: 150; }

/* Tilted strip and floating decorations must never make the page scroll sideways */
html, body { overflow-x: clip; }
@supports not (overflow-x: clip) { body { overflow-x: hidden; } }

/* ---------- Running strip ---------- */
.strip { position: relative; z-index: 4; background: var(--pink-2); color: #fff; overflow: hidden; padding: 16px 0; transform: rotate(-1.2deg) scale(1.02); margin-top: -26px; box-shadow: 0 10px 30px rgba(0, 0, 0, .12); }
.strip-track { display: flex; width: max-content; animation: marquee 32s linear infinite; }
.strip:hover .strip-track { animation-play-state: paused; }
.strip-row { display: flex; align-items: center; gap: 28px; padding-right: 28px; white-space: nowrap; }
.strip-row span { font-family: var(--font-head); font-size: clamp(20px, 2.2vw, 28px); letter-spacing: .4px; }
.strip-row i { color: var(--yellow); font-size: 18px; animation: spin 6s linear infinite; }
@keyframes marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes spin { to { transform: rotate(360deg); } }
.strip-cta { text-align: center; padding: 40px 16px 10px; }

/* ---------- Enquiry popup ---------- */
.popup { position: fixed; inset: 0; z-index: 300; background: rgba(15, 30, 50, .65); display: flex; align-items: center; justify-content: center; padding: 20px; backdrop-filter: blur(3px); }
.popup[hidden] { display: none; }
.popup-box { position: relative; display: grid; grid-template-columns: 220px 1fr; width: min(860px, 100%); max-height: calc(100vh - 40px); overflow: auto; background: #fff; border-radius: 20px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); animation: popIn .45s cubic-bezier(.2, 1.4, .4, 1) both; }
@keyframes popIn { from { opacity: 0; transform: translateY(30px) scale(.92); } to { opacity: 1; transform: none; } }
.popup-side { background: var(--sky); padding: 26px 18px; color: #fff; display: flex; flex-direction: column; gap: 10px; align-items: center; justify-content: center; text-align: center; border-radius: 20px 0 0 20px; }
.popup-side img { width: 160px; border-radius: 14px; margin-bottom: 8px; }
.popup-side p { margin: 0; font-size: 14px; }
.popup-side a { color: #fff; font-weight: 600; }
.popup-form { padding: 28px 28px 22px; }
.popup-form h3 { font-size: 30px; margin-bottom: 4px; }
.popup-intro { font-size: 14px; margin-bottom: 16px; }
.popup-form .form-grid { gap: 12px 14px; }
.popup-form label { font-size: 13px; }
.popup-form input, .popup-form select, .popup-form textarea { padding: 10px 12px; font-size: 14px; }
.popup-form .btn { margin-top: 14px; }
.popup-close { position: absolute; top: 12px; right: 12px; width: 40px; height: 40px; border-radius: 50%; border: 0; background: var(--soft); color: var(--navy); font-size: 18px; cursor: pointer; z-index: 2; transition: transform .3s, background .3s; }
.popup-close:hover { transform: rotate(90deg); background: var(--pink); }
body.popup-open { overflow: hidden; }

/* ---------- Animations (Elementor-style entrance effects) ---------- */
/* Scroll reveal variants: data-anim="up" (default) | left | right | zoom */
.reveal[data-anim="left"] { transform: translateX(-50px); }
.reveal[data-anim="right"] { transform: translateX(50px); }
.reveal[data-anim="zoom"] { transform: scale(.85); }
.reveal.in[data-anim] { transform: none; }
/* Cards in a grid appear one after another */
.card-grid > .reveal:nth-child(4n+2), .stats > .reveal:nth-child(4n+2), .arch-grid > .reveal:nth-child(4n+2), .steps > .reveal:nth-child(4n+2), .price-grid > .reveal:nth-child(3n+2) { transition-delay: .12s; }
.card-grid > .reveal:nth-child(4n+3), .stats > .reveal:nth-child(4n+3), .arch-grid > .reveal:nth-child(4n+3), .steps > .reveal:nth-child(4n+3), .price-grid > .reveal:nth-child(3n+3) { transition-delay: .24s; }
.card-grid > .reveal:nth-child(4n+4), .stats > .reveal:nth-child(4n+4), .arch-grid > .reveal:nth-child(4n+4), .steps > .reveal:nth-child(4n+4) { transition-delay: .36s; }
.reveal { transition-timing-function: cubic-bezier(.2, .8, .2, 1); }

/* Hero text on page load */
.anim { opacity: 0; animation: fadeUp .9s cubic-bezier(.2, .8, .2, 1) forwards; }
.anim[data-anim="zoom"] { animation-name: zoomIn; }
.anim[data-delay="1"] { animation-delay: .15s; }
.anim[data-delay="2"] { animation-delay: .3s; }
.anim[data-delay="3"] { animation-delay: .45s; }
@keyframes fadeUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: none; } }
@keyframes zoomIn { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }

/* Floating decorations */
.float { animation: floatY 4s ease-in-out infinite; }
.float-slow { animation: floatY 6s ease-in-out infinite; }
@keyframes floatY { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-16px) rotate(3deg); } }
.photo-stack .popper.float, .blob-img .balloons.float-slow { will-change: transform; }
.dots { animation: drift 12s ease-in-out infinite alternate; }
@keyframes drift { to { transform: translate(14px, -10px); } }

/* Hover effects */
.btn { transition: background .3s, color .3s, transform .3s, box-shadow .3s; }
.btn:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(28, 77, 116, .18); }
.bounce-hover:hover { animation: jelly .6s; }
@keyframes jelly { 0%, 100% { transform: scale(1, 1); } 30% { transform: scale(1.12, .88); } 50% { transform: scale(.92, 1.08); } 70% { transform: scale(1.04, .96); } }
.svc-card:hover .ic-circle, .step:hover .ic-circle, .vcard:hover .ic, .info-card:hover .ic, .feature-list li:hover .ic-circle, .venue-card:hover .ic { animation: wobble .7s; }
@keyframes wobble { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-14deg); } 40% { transform: rotate(10deg); } 60% { transform: rotate(-6deg); } 80% { transform: rotate(3deg); } }
.photo-stack .ph { transition: transform .5s; }
.photo-stack:hover .ph-1 { transform: rotate(0) scale(1.02); }
.photo-stack:hover .ph-2 { transform: rotate(0) translateY(-6px); }
.price-card { transition: transform .4s, box-shadow .4s; }
.price-card:hover { transform: translateY(-10px); box-shadow: 0 24px 50px rgba(28, 77, 116, .18); }
.team-card .photo { transition: transform .6s; }
.team-card:hover .photo { transform: scale(1.04); }
.stat .num { transition: transform .4s; }
.stat:hover .num { transform: scale(1.08); }

@media (max-width: 860px) {
  .popup-box { grid-template-columns: 1fr; }
  .popup-side { border-radius: 20px 20px 0 0; flex-direction: row; flex-wrap: wrap; padding: 14px; }
  .popup-side img { width: 64px; margin: 0; }
}
@media (max-width: 680px) {
  .hero-video { min-height: 600px; }
  .deco-balloons, .deco-popper { display: none; }
  .popup { padding: 10px; }
  .popup-form { padding: 22px 16px 18px; }
  .popup-form .form-grid { grid-template-columns: 1fr 1fr; }
}
@media (prefers-reduced-motion: reduce) {
  .anim, .reveal, .float, .float-slow, .dots, .strip-track, .hero-photo.active, .strip-row i { animation: none !important; transition: none !important; opacity: 1 !important; transform: none !important; }
}