/* Alzar Luck — the winning moment (session 5). */

.azcel-canvas {
	position: fixed;
	inset: 0;
	z-index: 100000;
	pointer-events: none;
}

.azcel {
	position: fixed;
	inset-block-start: 14vh;
	inset-inline: 0;
	z-index: 100001;
	display: grid;
	place-items: center;
	pointer-events: none;
	opacity: 0;
	transform: translateY( 18px ) scale( .92 );
	transition: opacity .32s ease, transform .42s cubic-bezier( .18, .9, .25, 1.3 );
}

.azcel.is-in { opacity: 1; transform: none; }

.azcel__card {
	position: relative;
	overflow: hidden;
	min-width: min( 330px, 88vw );
	padding: 1.2rem 1.6rem 1.3rem;
	border-radius: 24px;
	text-align: center;
	color: #2a1c00;
	background: linear-gradient( 160deg, #FFE9A8 0%, #FFD877 42%, #F2B33D 100% );
	box-shadow: 0 24px 60px rgba( 160, 110, 10, .4 ), inset 0 0 0 2px rgba( 255, 255, 255, .55 );
	display: grid;
	gap: .25rem;
	justify-items: center;
}

.azcel__shine {
	position: absolute;
	inset-block: -40%;
	inset-inline-start: -60%;
	width: 45%;
	background: linear-gradient( 100deg, transparent, rgba( 255, 255, 255, .75 ), transparent );
	transform: skewX( -18deg );
	animation: azcel-shine 1.5s .35s ease-out 1;
}

@keyframes azcel-shine { to { inset-inline-start: 140%; } }

.azcel__trophy {
	font-size: 46px;
	line-height: 1;
	filter: drop-shadow( 0 6px 10px rgba( 120, 80, 0, .35 ) );
	animation: azcel-pop .6s cubic-bezier( .2, 1.4, .4, 1 ) both;
}

@keyframes azcel-pop { from { transform: scale( .2 ) rotate( -22deg ); opacity: 0; } to { transform: none; opacity: 1; } }

.azcel__h { font-size: 1rem; font-weight: 800; letter-spacing: .01em; }
.azcel__prize { font-size: 1.35rem; font-weight: 900; line-height: 1.3; }
.azcel__code { font-size: .82rem; background: rgba( 255, 255, 255, .6 ); padding: .22rem .7rem; border-radius: 999px; }
.azcel__code b { letter-spacing: .06em; }
.azcel__price { font-size: .88rem; font-weight: 700; opacity: .85; }

@media ( prefers-reduced-motion: reduce ) {
	.azcel { transition: opacity .2s ease; transform: none; }
	.azcel__trophy, .azcel__shine { animation: none; }
	.azcel__shine { display: none; }
}