/* The group offer box under the ticket panel (inc/group-offer.php) and the celebration
   (assets/js/group-offer.js). The box mirrors the Season Pass note's look. */

.iau-group-offer {
	margin: 16px 0;
	padding: 14px 16px;
	background: #fff8e6;
	border: 1px solid #fabd53;
	border-radius: 10px;
	font-size: 14px;
	line-height: 1.5;
	color: #1a1a1a;
	transition: background-color .4s ease, border-color .4s ease;
}
.iau-group-offer__pill {
	display: inline-block;
	margin: 0 0 8px;
	padding: 3px 10px;
	border-radius: 20px;
	background: #000034;
	color: #fabd53;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .03em;
}
.iau-group-offer__text {
	margin: 0;
}
@media (max-width: 920px) {
	.iau-group-offer { margin: 16px 10px; }
}

/* Unlocked: enough tickets in the widget. */
.iau-group-offer.is-unlocked {
	background: #fff1cc;
	border-color: #000034;
}
.iau-group-offer.is-unlocked .iau-group-offer__pill {
	background: #fabd53;
	color: #000034;
	animation: iau-pop .6s cubic-bezier(.2, .9, .3, 1.3);
}
.iau-group-offer.is-unlocked .iau-group-offer__text {
	font-weight: 700;
	color: #000034;
}
@keyframes iau-pop {
	0% { transform: scale(.9); }
	50% { transform: scale(1.08); }
	100% { transform: scale(1); }
}

/* The celebration: a night sky over the page for about 3.5 seconds, never in the way. */
.iau-sky {
	position: fixed;
	inset: 0;
	z-index: 100000;
	overflow: hidden;
	pointer-events: none;
	animation: iau-sky-out .5s ease 3.6s forwards;
}
.iau-sky__dim {
	position: absolute;
	inset: 0;
	background: radial-gradient(ellipse at 50% 35%, rgba(0, 0, 52, .62), rgba(0, 0, 52, .88));
	opacity: 0;
	animation: iau-fade-in .5s ease forwards;
}
.iau-sky__stars i {
	position: absolute;
	left: calc(var(--x) * 1%);
	top: calc(var(--y) * 1%);
	width: calc(var(--s) * 1px);
	height: calc(var(--s) * 1px);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 0 6px 1px rgba(255, 255, 255, .85);
	opacity: 0;
	animation: iau-twinkle 1.4s ease-in-out calc(var(--d) * 1ms) 2;
}
/* A comet: a wrapper that only moves (transform and opacity) and holds a soft glow, the tail,
   the head and its corona as separate layers. No filters and no blurred shadows: every glow is
   a gradient, so the browser draws the comet once and then only moves it, and the glow stays
   round at any pixel density (a large box-shadow blur showed rectangular edges at 3x). */
.iau-sky__comet {
	position: absolute;
	top: 14%;
	left: -65vw;
	width: 60vw;
	height: 10px;
	opacity: 0;
	transform: rotate(10deg);
	will-change: transform, opacity;
	animation: iau-comet 3s cubic-bezier(.3, .5, .3, 1) .4s forwards;
}
.iau-sky__glow,
.iau-sky__tail,
.iau-sky__head,
.iau-sky__corona {
	position: absolute;
	display: block;
}
.iau-sky__glow { /* the soft wide glow along the tail, brightest at the head: two ellipses read as a blur */
	left: 0;
	right: 0;
	top: -500%;
	bottom: -500%;
	background:
		radial-gradient(100% 18% at 100% 50%, rgba(255, 222, 150, .95), rgba(250, 189, 83, .45) 45%, rgba(250, 189, 83, 0)),
		radial-gradient(75% 50% at 100% 50%, rgba(250, 189, 83, .6), rgba(250, 189, 83, .22) 50%, rgba(250, 189, 83, 0));
}
.iau-sky__tail {
	inset: 0;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(250, 189, 83, 0) 0%, rgba(250, 189, 83, .35) 35%, rgba(255, 226, 160, .92) 78%, #fff 100%);
}
.iau-sky__head {
	right: -22px;
	top: -19px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: radial-gradient(circle, #fff 0 30%, #ffe6a8 45%, #fabd53 62%, rgba(250, 189, 83, 0) 75%);
}
.iau-sky__head::before { /* the head's halo, behind the whole comet */
	content: '';
	position: absolute;
	inset: -450%;
	z-index: -1;
	border-radius: 50%;
	background: radial-gradient(circle closest-side, #ffd68c 10%, rgba(250, 189, 83, .85) 17%, rgba(250, 189, 83, .62) 29%, rgba(250, 189, 83, .4) 45%, rgba(250, 189, 83, .18) 65%, rgba(250, 189, 83, .06) 83%, rgba(250, 189, 83, 0));
}
.iau-sky__corona { /* a soft ring round the head that pulses on its own layer */
	inset: -45%;
	border-radius: 50%;
	background: radial-gradient(circle closest-side, rgba(255, 236, 190, 0) 50%, rgba(255, 226, 160, .5) 70%, rgba(250, 189, 83, 0));
	opacity: .7;
	will-change: transform;
	animation: iau-corona .45s ease-in-out infinite alternate;
}
@keyframes iau-corona { to { transform: scale(1.18); opacity: 1; } }
.iau-sky__comet--two {
	top: 64%;
	left: auto;
	right: -45vw;
	width: 40vw;
	height: 7px;
	transform: rotate(10deg) scaleX(-1);
	animation: iau-comet-two 2.6s cubic-bezier(.3, .5, .3, 1) 1.3s forwards;
}
.iau-sky__comet--two .iau-sky__head { width: 34px; height: 34px; top: -14px; right: -16px; }
@media (max-width: 600px) {
	.iau-sky__comet { height: 7px; }
	.iau-sky__head { width: 36px; height: 36px; top: -15px; right: -17px; }
	.iau-sky__head::before { inset: -600%; }
	.iau-sky__comet--two { height: 5px; }
	.iau-sky__comet--two .iau-sky__head { width: 26px; height: 26px; top: -11px; right: -12px; }
}
.iau-sky__shooter {
	position: absolute;
	left: calc(var(--x) * 1%);
	top: calc(var(--y) * 1%);
	width: calc(var(--l) * 1px);
	height: 2px;
	border-radius: 999px;
	background: linear-gradient(90deg, rgba(255, 255, 255, 0), #fff);
	box-shadow: 0 0 8px rgba(255, 255, 255, .9);
	opacity: 0;
	transform: rotate(28deg);
	animation: iau-shoot .9s ease-out calc(var(--d) * 1ms) forwards;
}
.iau-sky__card {
	position: absolute;
	left: 50%;
	top: 50%;
	min-width: 240px;
	max-width: calc(100vw - 48px);
	padding: 22px 32px;
	border: 1px solid rgba(250, 189, 83, .5);
	border-radius: 18px;
	background: #000034;
	color: #fabd53;
	text-align: center;
	box-shadow: 0 20px 60px rgba(0, 0, 0, .45), 0 0 0 6px rgba(250, 189, 83, .12);
	opacity: 0;
	transform: translate(-50%, -50%) scale(.6);
	animation: iau-card 3.1s cubic-bezier(.2, .9, .3, 1.2) .9s forwards;
}
.iau-sky__kicker {
	display: block;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.iau-sky__amount {
	display: block;
	margin: 6px 0 2px;
	font-size: 42px;
	font-weight: 800;
	line-height: 1.1;
	color: #fff;
}
.iau-sky__foot {
	display: block;
	font-size: 14px;
	color: rgba(255, 255, 255, .82);
}

@keyframes iau-fade-in { to { opacity: 1; } }
@keyframes iau-sky-out { to { opacity: 0; } }
@keyframes iau-twinkle {
	0%, 100% { opacity: 0; transform: scale(.6); }
	50% { opacity: 1; transform: scale(1.15); }
}
@keyframes iau-comet {
	0% { transform: translate(0, 0) rotate(10deg); opacity: 0; }
	8% { opacity: 1; }
	100% { transform: translate(190vw, 33vw) rotate(10deg); opacity: 1; }
}
@keyframes iau-comet-two {
	0% { transform: translate(0, 0) rotate(10deg) scaleX(-1); opacity: 0; }
	8% { opacity: 1; }
	100% { transform: translate(-190vw, -33vw) rotate(10deg) scaleX(-1); opacity: 1; }
}
@keyframes iau-shoot {
	0% { transform: translate(0, 0) rotate(28deg); opacity: 0; }
	15% { opacity: 1; }
	100% { transform: translate(38vw, 20vw) rotate(28deg); opacity: 0; }
}
@keyframes iau-card {
	0% { transform: translate(-50%, -50%) scale(.6); opacity: 0; }
	12% { transform: translate(-50%, -50%) scale(1.05); opacity: 1; }
	18% { transform: translate(-50%, -50%) scale(1); }
	85% { transform: translate(-50%, -50%) scale(1); opacity: 1; }
	100% { transform: translate(-50%, -50%) scale(.96); opacity: 0; }
}

/* Reduced motion (the system setting, or the script's own check): the card only, fading. */
.iau-sky--still .iau-sky__stars,
.iau-sky--still .iau-sky__comet,
.iau-sky--still .iau-sky__shooter {
	display: none;
}
.iau-sky--still {
	animation-delay: 2.2s;
}
.iau-sky--still .iau-sky__card {
	animation: iau-fade-in .4s ease .1s forwards;
	transform: translate(-50%, -50%);
}
@media (prefers-reduced-motion: reduce) {
	.iau-sky__stars, .iau-sky__comet, .iau-sky__shooter { display: none; }
	.iau-sky__corona { animation: none; }
	.iau-group-offer.is-unlocked .iau-group-offer__pill { animation: none; }
}