/**
 * Popcorn slider — [cinemore_popcorn].
 * A hero jobb oldalának slider stage-e: a kártyákat matrix3d homográfia
 * vetíti a popcorn-doboz döntött elejére (a popcorn-art 650×807-es, fix).
 * Minden méret fix px-ben (nincs clamp/vw). Desktop: doboz-vetítés két
 * kártyával; mobil (767px): ugyanez, oszlopszélességre skálázva (JS),
 * a 2. kártya rejtve. Google Fontot (Poppins) a sablon tölti.
 */

.cinemore-popcorn {
	position: relative;
	font-family: "Poppins", sans-serif;
	color: #10201d;
}

.cinemore-popcorn__stage {
	position: relative;
	width: 800px;
	height: 820px;
	margin: 0 auto;
	isolation: isolate;
}

.cinemore-popcorn__art {
	position: absolute;
	left: -28px;
	top: 40px;
	width: 650px;
	height: 807px;
	z-index: 3;
	display: block;
	object-fit: contain;
	object-position: center;
	pointer-events: none;
	user-select: none;
}

.cinemore-popcorn__card {
	position: absolute;
	width: 280px;
	height: 348px;
	padding: 32px 26px 30px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	border: 1px solid #ffffff;
	border-radius: 35px;
	background: #ffffff;
	box-shadow: 0 28px 44px rgba(83, 31, 61, .16), inset 0 1px rgba(255, 255, 255, .9);
	backface-visibility: hidden;
	transform-style: preserve-3d;
	will-change: transform, opacity;
}

/* A kártya a doboz döntött elejére esik: matrix3d homográfia (4 sarok -> 4
   mért sarok), transform-origin: 0 0 — a lokál (0,0)-(W,H) színpad
   koordinátákra esik. Az értékek a 650×807-es popcorn-arthoz mértek. */
.cinemore-popcorn__card.is-active {
	left: 0;
	top: 0;
	z-index: 5;
	transform-origin: 0 0;
	transform: matrix3d(0.983447, -0.017126, 0, -0.00007, 0.112208, 1.284281, 0, 0.000377, 0, 0, 1, 0, 108, 346, 0, 1);
	box-shadow: none;
}

.cinemore-popcorn__card.is-preview {
	left: 0;
	top: 0;
	z-index: 2;
	transform-origin: 0 0;
	transform: matrix3d(1.031975, 0.150222, 0, 0.000297, -0.17943, 0.909699, 0, -0.000125, 0, 0, 1, 0, 491, 310, 0, 1);
	box-shadow: 16px 30px 48px rgba(83, 31, 61, .13);
}

/* --accent / --accent-light értékeket a JS teszi a kártya elemeire. */
.cinemore-popcorn__icon {
	width: 60px;
	height: 60px;
	flex: 0 0 auto;
	display: grid;
	place-items: center;
	border-radius: 50%;
	color: #ffffff;
	background: linear-gradient(145deg, var(--accent-light), var(--accent));
	box-shadow: 0 9px 18px color-mix(in srgb, var(--accent) 25%, transparent);
}

.cinemore-popcorn__icon svg {
	width: 30px;
	height: 30px;
}

.cinemore-popcorn__number {
	margin: 14px 0 8px;
	color: var(--accent);
	font-size: 46px;
	line-height: 1;
	font-weight: 700;
	letter-spacing: -0.04em;
}

.cinemore-popcorn__description {
	max-width: 250px;
	margin: 0;
	font-size: 15px;
	line-height: 1.55;
}

.cinemore-popcorn__dots {
	position: absolute;
	left: 285px;
	bottom: 14px;
	z-index: 8;
	display: flex;
	gap: 12px;
	transform: translateX(-50%);
}

.cinemore-popcorn__dot {
	width: 13px;
	height: 13px;
	padding: 0;
	border: 0;
	border-radius: 99px;
	background: #ddbed0;
	cursor: pointer;
	transition: width .25s ease, background .25s ease;
}

.cinemore-popcorn__dot[aria-current="true"] {
	width: 44px;
	background: #b85b91;
}

/* Lapozónyíl: a két kártya közé ékelődő kerek gradiens gomb (1 db, előre). */
.cinemore-popcorn__next {
	position: absolute;
	left: 430px;
	top: 496px;
	z-index: 8;
	width: 60px;
	height: 60px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 50%;
	color: #ffffff;
	background: linear-gradient(145deg, #c66ca0, #a9467e);
	box-shadow: 0 13px 28px rgba(126, 41, 91, .3);
	cursor: pointer;
	transform: translate(-50%, -50%);
	transition: transform .2s ease, box-shadow .2s ease;
}

.cinemore-popcorn__next:hover {
	transform: translate(-50%, -50%) scale(1.08);
	box-shadow: 0 15px 32px rgba(126, 41, 91, .38);
}

.cinemore-popcorn__next:focus-visible {
	outline: 4px solid rgba(0, 164, 123, .3);
	outline-offset: 4px;
}

.cinemore-popcorn__next svg {
	width: 26px;
	height: 26px;
}

/* Kártyacsere: az aktív kicsúszik balra, az előnézet a helyére fordul be. */
.cinemore-popcorn__stage.is-animating .cinemore-popcorn__card.is-active {
	animation: cinemore-popcorn-leave .72s cubic-bezier(.55, .02, .34, 1) forwards;
}

.cinemore-popcorn__stage.is-animating .cinemore-popcorn__card.is-preview {
	z-index: 6;
	animation: cinemore-popcorn-enter .72s cubic-bezier(.22, .75, .24, 1) forwards;
}

@keyframes cinemore-popcorn-leave {
	to {
		transform: matrix3d(1.013434, -0.017126, 0, -0.00007, -0.049834, 1.284281, 0, 0.000377, 0, 0, 1, 0, -322, 346, 0, 1);
		opacity: 0;
	}
}

@keyframes cinemore-popcorn-enter {
	to {
		transform: matrix3d(0.983447, -0.017126, 0, -0.00007, 0.112208, 1.284281, 0, 0.000377, 0, 0, 1, 0, 108, 346, 0, 1);
	}
}

/* -- Mobil (max-width: 767px) ---------------------------------------------
   Mobilon minden a desktopit ismétli: popcorn-doboz + matrix3d-ba vetített
   kártya, az eredeti arányokkal. A stage skálázását, középre igazítását és
   layout-magasság-kompenzációját a js/popcorn.js végzi px-ben (fitStage) —
   így a popcorn a rendelkezésre álló oszlopszélességet mindig kitölti.
   Itt csak ennyi: a szülő levágja a maradék layout-boxot, a 2. (előnézeti)
   kártya nem látszik, és a bejövő kártya fade-del csúszik a desktopos
   pályán. */
@media (max-width: 767px) {
	.cinemore-popcorn {
		overflow: hidden;
	}

	.cinemore-popcorn__stage {
		transform-origin: 0 0;
		touch-action: pan-y;
	}

	/* 2. slide mobilon nem kell — láthatatlan, csak a csere alatt jelenik meg. */
	.cinemore-popcorn__card.is-preview {
		opacity: 0;
	}

	/* Bejövő kártya: a desktopos pályán (előnézeti hely → aktív hely) mozog,
	   mobilon fade-del. */
	@keyframes cinemore-popcorn-enter {
		from {
			transform: matrix3d(1.031975, 0.150222, 0, 0.000297, -0.17943, 0.909699, 0, -0.000125, 0, 0, 1, 0, 491, 310, 0, 1);
			opacity: 0;
		}

		to {
			transform: matrix3d(0.983447, -0.017126, 0, -0.00007, 0.112208, 1.284281, 0, 0.000377, 0, 0, 1, 0, 108, 346, 0, 1);
			opacity: 1;
		}
	}
}

@media (prefers-reduced-motion: reduce) {
	.cinemore-popcorn,
	.cinemore-popcorn *,
	.cinemore-popcorn *::before,
	.cinemore-popcorn *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}