/**
 * Popcorn térkép — [cinemore_terkep].
 * A stage a térképképet (assets/terkep-map.webp) hordozza; arányát a
 * 4557×1957-es forrásnak megfelelő aspect-ratio tartja. A popcorn-sprite-ok
 * és a porfelhők a stage %-ában pozicionáltak és skálázódnak — a térkép
 * folyékony szélessége miatt itt a %-os méretezés indokolt (szöveg-méretet
 * a modul nem definiál, így a px-szabály nem sérül).
 */

.cinemore-terkep {
	position: relative;
}

.cinemore-terkep__stage {
	position: relative;
	width: 100%;
	max-width: 1180px;
	margin: 0 auto;
	aspect-ratio: 4557 / 1957;
	background-image: url("../assets/terkep-map.webp");
	background-repeat: no-repeat;
	background-size: 100% 100%;
	overflow: visible;
}

/* --ax / --ay (horgony), --dur és --delay értékeket a JS teszi a képekre.
   Kezdőállapot: 165%-kal a célpont fölé tolt, átlátszó (FOUC-biztos). */
.cinemore-terkep__pop {
	position: absolute;
	top: 0;
	left: 0;
	height: auto;
	pointer-events: none;
	opacity: 0;
	filter: drop-shadow(0 6px 5px rgba(60, 45, 20, .14));
	will-change: transform, opacity;
	transform: translate(var(--ax), calc(var(--ay) - 165%));
}

/* Zuhanás: gyorsulva esik, landoláskor kicsit túllő (+2.4%), visszarugózik
   (−1.1%), majd rögződik a horgonyponton. */
.cinemore-terkep__pop.is-drop {
	animation: cinemore-terkep-fall var(--dur) cubic-bezier(.45, .05, .75, .55) var(--delay) both;
}

/* -- Fade (alap mód) -------------------------------------------------------
   A popcorn vödör kép a helyén, kicsit kisebbről és pár %-kal lentebbről
   úszik be (opacity + scale + enyhe emelkedés). Nincs zuhanás, nincs
   porfelhő. Az img height:auto → a kép arányosan skálázódik a w-hez. */
.cinemore-terkep__pop--fade {
	transform: translate(var(--ax), calc(var(--ay) + 4%)) scale(.86);
	filter: drop-shadow(0 10px 12px rgba(60, 45, 20, .18));
}

.cinemore-terkep__pop--fade.is-drop {
	animation: cinemore-terkep-fade calc(var(--dur) * .8) cubic-bezier(.22, .8, .32, 1) var(--delay) both;
}

@keyframes cinemore-terkep-fade {
	0% {
		transform: translate(var(--ax), calc(var(--ay) + 4%)) scale(.86);
		opacity: 0;
	}
	100% {
		transform: translate(var(--ax), var(--ay)) scale(1);
		opacity: 1;
	}
}

/* -- További zuhanás-stílusok (teszt-gombsor / animacio attr) ------------- */

/* Pattogó: esés után 3 egyre kisebb pattanás. */
.cinemore-terkep__pop--pattog.is-drop {
	animation: cinemore-terkep-fall-bounce calc(var(--dur) * 1.3) cubic-bezier(.3, .5, .5, 1) var(--delay) both;
}

/* Pörgő: zuhanás közben kipörög a dőlésszögből 0°-ra. */
.cinemore-terkep__pop--porgo.is-drop {
	animation: cinemore-terkep-fall-spin var(--dur) cubic-bezier(.45, .05, .7, .6) var(--delay) both;
}

/* Kipukkanó: kicsit növekedve esik, landoláskor túlnyomul (+24%), majd
   összecsattan vissza; a csík levágásával „tiszta" popcorn marad. */
.cinemore-terkep__pop--pukkan.is-drop {
	animation: cinemore-terkep-fall-pop var(--dur) cubic-bezier(.4, .1, .5, 1) var(--delay) both;
}

.cinemore-terkep__pop--pukkan {
	clip-path: inset(0 0 0 0 round 12px);
	transition: clip-path .5s cubic-bezier(.4, .15, .3, 1), filter .5s ease;
}

.cinemore-terkep__pop--pukkan.is-landed {
	clip-path: inset(var(--ct) var(--cr) 0% var(--cl) round 12px);
	filter: drop-shadow(0 5px 4px rgba(60, 45, 20, .22));
}

/* Szélsodorta: oldalra ingázó, fodrozódó íven sodródik a helyére. */
.cinemore-terkep__pop--drift.is-drop {
	animation: cinemore-terkep-fall-drift calc(var(--dur) * 1.4) cubic-bezier(.4, .2, .55, .9) var(--delay) both;
}

/* Reduced-motion: a JS ezt teszi a képekre — lerakott állapot, animáció nélkül. */
.cinemore-terkep__pop.is-static {
	opacity: 1;
	transform: translate(var(--ax), var(--ay));
}

@keyframes cinemore-terkep-fall {
	0% {
		transform: translate(var(--ax), calc(var(--ay) - 165%));
		opacity: 0;
	}
	9% {
		opacity: 1;
	}
	76% {
		transform: translate(var(--ax), calc(var(--ay) + 2.4%));
		opacity: 1;
	}
	88% {
		transform: translate(var(--ax), calc(var(--ay) - 1.1%));
	}
	100% {
		transform: translate(var(--ax), var(--ay));
		opacity: 1;
	}
}

@keyframes cinemore-terkep-fall-bounce {
	0% {
		transform: translate(var(--ax), calc(var(--ay) - 165%));
		opacity: 0;
	}
	9% {
		opacity: 1;
	}
	46% {
		transform: translate(var(--ax), var(--ay));
	}
	60% {
		transform: translate(var(--ax), calc(var(--ay) - 12%));
	}
	73% {
		transform: translate(var(--ax), var(--ay));
	}
	83% {
		transform: translate(var(--ax), calc(var(--ay) - 5%));
	}
	91% {
		transform: translate(var(--ax), var(--ay));
	}
	96% {
		transform: translate(var(--ax), calc(var(--ay) - 1.6%));
	}
	100% {
		transform: translate(var(--ax), var(--ay));
		opacity: 1;
	}
}

@keyframes cinemore-terkep-fall-spin {
	0% {
		transform: translate(var(--ax), calc(var(--ay) - 165%)) rotate(-34deg);
		opacity: 0;
	}
	9% {
		opacity: 1;
	}
	78% {
		transform: translate(var(--ax), calc(var(--ay) + 2%)) rotate(7deg);
		opacity: 1;
	}
	89% {
		transform: translate(var(--ax), calc(var(--ay) - 1%)) rotate(-3deg);
	}
	100% {
		transform: translate(var(--ax), var(--ay)) rotate(0deg);
		opacity: 1;
	}
}

@keyframes cinemore-terkep-fall-pop {
	0% {
		transform: translate(var(--ax), calc(var(--ay) - 120%)) scale(.35);
		opacity: 0;
	}
	12% {
		opacity: 1;
	}
	66% {
		transform: translate(var(--ax), var(--ay)) scale(1);
		opacity: 1;
	}
	79% {
		transform: translate(var(--ax), var(--ay)) scale(1.24);
		opacity: 1;
	}
	90% {
		transform: translate(var(--ax), var(--ay)) scale(.93);
		opacity: 1;
	}
	100% {
		transform: translate(var(--ax), var(--ay)) scale(1);
		opacity: 1;
	}
}

@keyframes cinemore-terkep-fall-drift {
	0% {
		transform: translate(calc(var(--ax) - 60%), calc(var(--ay) - 155%)) rotate(-11deg);
		opacity: 0;
	}
	10% {
		opacity: 1;
	}
	34% {
		transform: translate(calc(var(--ax) + 46%), calc(var(--ay) - 98%)) rotate(10deg);
		opacity: 1;
	}
	58% {
		transform: translate(calc(var(--ax) - 30%), calc(var(--ay) - 48%)) rotate(-8deg);
	}
	80% {
		transform: translate(calc(var(--ax) + 14%), calc(var(--ay) - 8%)) rotate(5deg);
	}
	92% {
		transform: translate(calc(var(--ax) - 4%), calc(var(--ay) - 1%)) rotate(-2deg);
	}
	100% {
		transform: translate(var(--ax), var(--ay)) rotate(0deg);
		opacity: 1;
	}
}

/* Landoláskor pukkanó porfelhő a horgonyponton. */
.cinemore-terkep__puff {
	position: absolute;
	width: 3%;
	aspect-ratio: 1;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 252, 240, .9) 0%, rgba(240, 225, 190, .5) 45%, rgba(240, 225, 190, 0) 70%);
	transform: translate(-50%, -50%) scale(.2);
	opacity: 0;
	pointer-events: none;
}

.cinemore-terkep__puff.is-go {
	animation: cinemore-terkep-puff var(--pdur) ease-out var(--pdelay) both;
}

@keyframes cinemore-terkep-puff {
	0% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(.2);
	}
	30% {
		opacity: .85;
	}
	100% {
		opacity: 0;
		transform: translate(-50%, -50%) scale(2.4);
	}
}

/* -- Teszt-gombsor (teszt="igen") ------------------------------------------ */

.cinemore-terkep__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 9px;
	max-width: 1180px;
	margin: 20px auto 0;
}

.cinemore-terkep__btn {
	font-family: "Poppins", sans-serif;
	font-weight: 600;
	font-size: 14px;
	line-height: 1;
	padding: 11px 18px;
	border: 1.5px solid #bfe3d2;
	border-radius: 100px;
	background: #ffffff;
	color: #07130e;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease, background .12s ease, border-color .12s ease;
}

.cinemore-terkep__btn:hover {
	transform: translateY(-1px);
	border-color: #14c98d;
	box-shadow: 0 5px 14px rgba(20, 201, 141, .18);
}

.cinemore-terkep__btn:focus-visible {
	outline: 2px solid #14c98d;
	outline-offset: 2px;
}

.cinemore-terkep__btn.is-sel,
.cinemore-terkep__btn--primary {
	background: #14c98d;
	color: #07130e;
	border-color: #14c98d;
	box-shadow: 0 4px 14px rgba(20, 201, 141, .32);
}

.cinemore-terkep__btn--primary:hover {
	background: #0eb67c;
}

@media (max-width: 767px) {
	.cinemore-terkep__bar {
		gap: 8px;
		margin-top: 16px;
	}

	.cinemore-terkep__btn {
		font-size: 13px;
		padding: 9px 14px;
	}
}