/* =========================================================
   Aadhi Media LLP: Movies + Upcoming Movies (#upcoming-movies only, owner 2026-10-17).
   Two dark panels after the owner's reference (aashirvadcinemas.com): left "Movies" poster carousel,
   right "Upcoming Movies" film strip with sprocket holes and a ticker.
   ========================================================= */
#upcoming-movies {
	--mv-ease: cubic-bezier(.22, .7, .16, 1);
	--mv-panel: #161616;
	--mv-ivory: #F2EBDF;
	--mv-mute: #9A928A;
	--mv-gold: #C6A15B;
	--mv-crimson: #C8102E;
	--mv-serif: var(--am-display, 'Cormorant Garamond'), Georgia, serif; /* follows Elementor global fonts */
	--mv-sans: var(--am-head, 'Manrope'), system-ui, sans-serif;
}
html body #upcoming-movies.e-con {
	background: #0B0B0B !important; background-image: none !important;
	padding-left: clamp(16px, 3vw, 40px) !important; padding-right: clamp(16px, 3vw, 40px) !important; /* top and bottom: the shared section spacing */
}
html body #upcoming-movies > .e-con-inner { max-width: 1320px; }

/* ---------- two panels ---------- */
html body #upcoming-movies .e-con.am-mv-row { display: flex; flex-direction: row; align-items: stretch; gap: clamp(20px, 2.4vw, 32px); }
html body #upcoming-movies .e-con.am-mv-panel {
	position: relative; overflow: hidden; width: auto; --width: auto; min-width: 0;
	background: var(--mv-panel); border-radius: 18px; padding-left: 0 !important; padding-right: 0 !important; /* top and bottom: the shared box spacing */
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .05);
}
html body #upcoming-movies .e-con.am-mv-released { flex: 1.6 1 0; }
html body #upcoming-movies .e-con.am-mv-upcoming { flex: 1 1 0; }
html body #upcoming-movies .am-mv-title, html body #upcoming-movies .am-mv-sub { padding: 0 clamp(26px, 3vw, 44px); }
/* panel titles: defaults only, with low specificity and no !important, so the heading's own Style tab in
   Elementor (typography, colour) takes priority (owner, 2026-10-17) */
.am-mv-title .elementor-heading-title {
	font-family: var(--am-display, 'Cormorant Garamond'), Georgia, serif; font-weight: 500; font-size: clamp(40px, 3.8vw, 58px); line-height: 1.05;
	letter-spacing: -.01em; text-transform: none; color: #F2EBDF;
}
.am-mv-sub .elementor-heading-title {
	font-family: var(--am-head, 'Manrope'), system-ui, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: .26em; text-transform: uppercase;
	color: #C6A15B; margin-top: 10px;
}
html body #upcoming-movies .e-con .elementor-widget.am-mv-sub { margin-bottom: clamp(30px, 3vw, 44px); }

/* ---------- left: poster carousel with soft edge fades ---------- */
html body #upcoming-movies .am-mv-car { position: relative; padding: 0 clamp(26px, 3vw, 44px); }
html body #upcoming-movies .am-mv-car::before, html body #upcoming-movies .am-mv-car::after {
	content: ""; position: absolute; top: 0; bottom: 0; width: clamp(26px, 4vw, 60px); z-index: 3; pointer-events: none;
}
html body #upcoming-movies .am-mv-car::before { left: 0; background: linear-gradient(90deg, var(--mv-panel) 20%, rgba(22, 22, 22, 0)); }
html body #upcoming-movies .am-mv-car::after { right: 0; background: linear-gradient(270deg, var(--mv-panel) 20%, rgba(22, 22, 22, 0)); }
html body #upcoming-movies .am-mv-car .swiper { padding: 26px 0 30px !important; margin: -26px 0 -30px; }
html body #upcoming-movies .am-mv-car .swiper-slide-inner { aspect-ratio: 2 / 3; }
html body #upcoming-movies .am-mv-car .swiper-slide-image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 20%; }

/* ---------- right: film strip ---------- */
html body #upcoming-movies .am-mv-strip { position: relative; background: #050505; padding: 34px 0 !important; }
html body #upcoming-movies .am-mv-strip::before, html body #upcoming-movies .am-mv-strip::after {
	content: ""; position: absolute; left: 0; right: 0; height: 34px; z-index: 3; pointer-events: none;
	background: #050505 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='30' height='34'%3E%3Crect x='8' y='11' width='14' height='12' rx='2.5' fill='%232b2b2b'/%3E%3C/svg%3E") repeat-x 0 0 / 30px 34px;
}
html body #upcoming-movies .am-mv-strip::before { top: 0; }
html body #upcoming-movies .am-mv-strip::after { bottom: 0; }
html body #upcoming-movies .am-mv-strip .swiper { padding: 0 !important; margin: 0 !important; }
html body #upcoming-movies .am-mv-strip .swiper-slide-inner { aspect-ratio: 3 / 4; }
html body #upcoming-movies .am-mv-strip .swiper-slide-image { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; }

/* ticker */
html body #upcoming-movies .am-mv-ticker-w { width: 100%; }
html body #upcoming-movies .am-mv-ticker { padding: clamp(34px, 3.4vw, 50px) 0 0; text-align: center; }
html body #upcoming-movies .am-mv-ticker-k {
	display: flex; align-items: center; gap: 18px; margin: 0 clamp(26px, 3vw, 44px) 18px; font-family: var(--mv-sans); font-size: 11.5px; font-weight: 600;
	letter-spacing: .32em; text-transform: uppercase; color: var(--mv-gold);
}
html body #upcoming-movies .am-mv-ticker-k::before, html body #upcoming-movies .am-mv-ticker-k::after { content: ""; flex: 1 1 auto; height: 1px; background: rgba(198, 161, 91, .3); }
html body #upcoming-movies .am-mv-ticker-run {
	display: flex; width: max-content; animation: am-mv-run 26s linear infinite;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent);
}
html body #upcoming-movies .am-mv-ticker { overflow: hidden; }
html body #upcoming-movies .am-mv-ticker-run > div { display: flex; align-items: center; flex: 0 0 auto; }
html body #upcoming-movies .am-mv-ticker-run span { padding: 0 22px; font-family: var(--mv-sans); font-size: clamp(20px, 1.8vw, 26px); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: #8A6E3E; white-space: nowrap; }
html body #upcoming-movies .am-mv-ticker-run i { width: 7px; height: 7px; flex: 0 0 7px; background: var(--mv-crimson); transform: rotate(45deg); }
@keyframes am-mv-run { to { transform: translate3d(-50%, 0, 0); } }

/* ---------- posters: hover pop-up (both carousels) ---------- */
html body #upcoming-movies .swiper-slide { overflow: visible !important; }
html body #upcoming-movies .swiper-slide-inner {
	position: relative; display: block; overflow: hidden; outline: 0 !important; margin: 0;
	box-shadow: 0 18px 36px -16px rgba(0, 0, 0, .8) !important;
	transition: transform .7s var(--mv-ease), box-shadow .7s var(--mv-ease), opacity .5s ease, filter .5s ease !important;
}
html body #upcoming-movies .swiper-slide-inner img { transition: transform 1.2s var(--mv-ease) !important; filter: none !important; }
html body #upcoming-movies .swiper-slide-inner::after {
	content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
	background: linear-gradient(115deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, .2) 50%, rgba(255, 255, 255, 0) 65%);
	background-size: 250% 100%; background-position: 130% 0; transition: background-position 1.1s var(--mv-ease);
}
@media (hover: hover) and (pointer: fine) {
	html body #upcoming-movies .am-mv-car .swiper:hover .swiper-slide-inner { opacity: .5; filter: grayscale(.5); }
	html body #upcoming-movies .am-mv-car .swiper-slide:hover .swiper-slide-inner {
		opacity: 1; filter: none; transform: translate3d(0, -12px, 0) scale(1.06);
		box-shadow: 0 34px 60px -18px rgba(0, 0, 0, .95), 0 0 0 1px var(--mv-gold) !important;
	}
	html body #upcoming-movies .am-mv-strip .swiper:hover .swiper-slide-inner { opacity: .55; }
	html body #upcoming-movies .am-mv-strip .swiper-slide:hover .swiper-slide-inner { opacity: 1; transform: scale(1.05); box-shadow: 0 0 0 1px var(--mv-crimson) !important; z-index: 2; }
	html body #upcoming-movies .swiper-slide:hover .swiper-slide-inner img { transform: scale(1.06); }
	html body #upcoming-movies .swiper-slide:hover .swiper-slide-inner::after { background-position: -30% 0; }
}

/* ---------- reveal (only once aadhi-upcoming.js adds .am-up-ready) ---------- */
html body #upcoming-movies.am-up-ready .am-mv-panel { opacity: 0; transform: translate3d(0, 50px, 0); transition: opacity 1.1s var(--mv-ease), transform 1.1s var(--mv-ease); }
html body #upcoming-movies.am-up-ready .am-mv-upcoming { transition-delay: .15s; }
html body #upcoming-movies.am-up-ready .am-mv-panel .am-mv-title, html body #upcoming-movies.am-up-ready .am-mv-panel .am-mv-sub { opacity: 0; transform: translate3d(0, 20px, 0); transition: opacity 1s var(--mv-ease) .35s, transform 1s var(--mv-ease) .35s; }
html body #upcoming-movies.am-up-ready .am-mv-panel .am-mv-sub { transition-delay: .5s; }
html body #upcoming-movies.am-up-ready .am-mv-car .swiper-slide-inner { opacity: 0; transform: translate3d(0, 70px, 0) scale(.94); }
html body #upcoming-movies.am-up-ready .am-mv-panel.am-up-on { opacity: 1; transform: none; }
html body #upcoming-movies.am-up-ready .am-mv-panel.am-up-on .am-mv-title, html body #upcoming-movies.am-up-ready .am-mv-panel.am-up-on .am-mv-sub { opacity: 1; transform: none; }
html body #upcoming-movies.am-up-ready .am-mv-panel.am-up-on:not(.am-up-done) .am-mv-car .swiper-slide-inner { transition: transform 1.2s var(--mv-ease) var(--am-up-d, .4s), opacity 1s var(--mv-ease) var(--am-up-d, .4s) !important; }
html body #upcoming-movies.am-up-ready .am-mv-panel.am-up-on .am-mv-car .swiper-slide-inner { opacity: 1; transform: none; }
html body #upcoming-movies.am-up-ready .am-mv-panel.am-up-on .am-mv-car .swiper:hover .swiper-slide-inner { opacity: .5; }
html body #upcoming-movies.am-up-ready .am-mv-panel.am-up-on .am-mv-car .swiper-slide:hover .swiper-slide-inner { opacity: 1; transform: translate3d(0, -12px, 0) scale(1.06); }
/* the strip slides in sideways like film through a gate */
html body #upcoming-movies.am-up-ready .am-mv-strip .swiper { opacity: 0; transform: translate3d(60px, 0, 0); transition: opacity 1.1s var(--mv-ease) .45s, transform 1.4s var(--mv-ease) .45s; }
html body #upcoming-movies.am-up-ready .am-mv-panel.am-up-on .am-mv-strip .swiper { opacity: 1; transform: none; }

/* carousels never grow wider than their panel (Swiper in a flex column) */
html body #upcoming-movies .e-con.am-mv-row, html body #upcoming-movies .e-con.am-mv-panel { min-width: 0; max-width: 100%; }
html body #upcoming-movies .am-mv-car, html body #upcoming-movies .am-mv-strip, html body #upcoming-movies .am-mv-ticker-w { width: 100%; min-width: 0; max-width: 100%; overflow: hidden; }
html body #upcoming-movies .am-mv-car { overflow: visible; }
html body #upcoming-movies .am-mv-car .elementor-image-carousel-wrapper { max-width: 100%; overflow: hidden; }

/* ---------- tablet and phone ---------- */
@media (max-width: 1024px) {
	html body #upcoming-movies .e-con.am-mv-row { flex-direction: column; }
	html body #upcoming-movies .e-con.am-mv-released, html body #upcoming-movies .e-con.am-mv-upcoming { flex: 0 0 auto; width: 100%; --width: 100%; }
}
@media (max-width: 767px) {
	html body #upcoming-movies.e-con { padding-left: 12px !important; padding-right: 12px !important; }
	html body #upcoming-movies .e-con.am-mv-panel { border-radius: 14px; }
	html body #upcoming-movies .am-mv-ticker-run span { font-size: 18px; padding: 0 14px; }
}
@media (prefers-reduced-motion: reduce) {
	html body #upcoming-movies *, html body #upcoming-movies *::after { transition: none !important; }
	html body #upcoming-movies .am-mv-ticker-run { animation: none; }
}