/* LEOPARD - alleen noodzakelijke CSS */

		#orakel-result {
			display: none;
			opacity: 0;
			transition: opacity 4s ease;
		
			position: absolute;
			inset: 0;
			z-index: 10;
		
			justify-content: center;
			align-items: flex-start;
		}

		#orakel-animation {
		    position: fixed;
		    inset: 0;
		    z-index: 9999;
		    opacity: 0;
		    transition: opacity 3s ease;
		}

		.scene {
			position: relative;
			width: 100vw;
			height: 100vh;
			overflow: hidden;
			perspective: 1200px;
			background:
				radial-gradient(circle at 50% 68%, rgba(190,135,45,.20), transparent 30%),
				linear-gradient(180deg, #020202 0%, #11100e 55%, #030303 100%);
		}

		.glow {
			position: absolute;
			left: 50%;
			top: 67%;
			width: 500px;
			height: 170px;
			transform: translate(-50%, -50%);
			border-radius: 50%;
			background: radial-gradient(circle, rgba(225,170,70,.32), transparent 68%);
			filter: blur(24px);
			animation: glowPulse 5s ease-in-out infinite;
		}

		@keyframes glowPulse {
			0%,100% { opacity:.42; transform:translate(-50%,-50%) scale(.9); }
			50% { opacity:.92; transform:translate(-50%,-50%) scale(1.1); }
		}

		.shadow {
			position: absolute;
			left: 50%;
			top: 77%;
			width: 330px;
			height: 105px;
			transform: translate(-50%, -50%);
			background: rgba(0,0,0,.76);
			border-radius: 50%;
			filter: blur(26px);
		}

		.world {
			position: absolute;
			left: 50%;
			top: 68%;
			width: 420px;
			height: 520px;
			transform: translate(-50%, -50%) rotateX(58deg) rotateZ(-3deg) scale(.86);
			transform-style: preserve-3d;
			animation: cameraMove 13s ease-in-out forwards;
		}

@media (max-width: 500px) {
  .world {top: 85%;}
}

		@keyframes cameraMove {
			0% { transform:translate(-50%,-50%) rotateX(60deg) rotateZ(-5deg) scale(.78); }
			35% { transform:translate(-50%,-53%) rotateX(58deg) rotateZ(-3deg) scale(.9); }
			100% { transform:translate(-50%,-56%) rotateX(52deg) rotateZ(0deg) scale(1.02); }
		}

		.deck-stage {
			position: absolute;
			inset: 0;
			transform-style: preserve-3d;
			z-index: 20;
		}

		.card {
			position: absolute;
			left: 50%;
			top: 64%;
			width: 145px;
			height: 225px;
			margin-left: -72.5px;
			margin-top: -112.5px;
			border-radius: 12px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			border: 1px solid rgba(239,190,88,.55);
			box-shadow:
				0 9px 24px rgba(0,0,0,.62),
				0 0 22px rgba(220,160,65,.16);
			transform-style: preserve-3d;
			transform: translate3d(var(--x), var(--y), var(--z)) rotateZ(var(--r));
			animation:
				deckPulse 2.6s ease-in-out infinite,
				flyCard var(--duration) cubic-bezier(.18,.76,.26,1) forwards;
			animation-delay: 0s, var(--delay);
		}

		@keyframes deckPulse {
			0%,100% { filter: brightness(1); }
			50% { filter: brightness(1.13); }
		}

		@keyframes flyCard {
			0% {
				transform: translate3d(var(--x), var(--y), var(--z)) rotateZ(var(--r));
				opacity: 1;
			}
			100% {
				transform: translate3d(var(--fly-x), var(--fly-y), var(--fly-z))
					rotateZ(var(--fly-r))
					rotateY(var(--spin-y))
					rotateX(var(--spin-x));
				opacity: var(--end-opacity);
			}
		}

		.deck-card {
			animation: stackMove 3s ease-in-out infinite;
		}

		@keyframes stackMove {
			0%,100% {
				transform: translate3d(var(--x), var(--y), var(--z)) rotateZ(var(--r));
			}
			50% {
				transform: translate3d(calc(var(--x) + 1px), calc(var(--y) - 2px), calc(var(--z) + 2px))
					rotateZ(calc(var(--r) + .6deg));
			}
		}

		.reveal-card {
			z-index: 90;
			animation: revealSimple 6.2s cubic-bezier(.18,.76,.26,1) forwards;
			animation-delay: 5.9s;
		}

		@keyframes revealSimple {
			0% {
				transform: translate3d(0px, -10px, 84px) rotateZ(0deg) rotateY(0deg) rotateX(0deg) scaleX(1) scaleY(1);
				opacity: 1;
			}
			30% {
				transform: translate3d(0px, -145px, 300px) rotateZ(2deg) rotateY(-12deg) rotateX(0deg) scaleX(1) scaleY(1.04);
			}
			48% {
				transform: translate3d(0px, -170px, 340px) rotateZ(0deg) rotateY(-90deg) rotateX(0deg) scaleX(.08) scaleY(1.08);
			}
			49% {
				transform: translate3d(0px, -170px, 340px) rotateZ(0deg) rotateY(90deg) rotateX(0deg) scaleX(.08) scaleY(1.08);
			}
			70% {
				transform: translate3d(0px, -135px, 370px) rotateZ(0deg) rotateY(18deg) rotateX(-18deg) scaleX(1.16) scaleY(1.20);
			}
			100% {
				transform: translate3d(0px, -112px, 390px) rotateZ(0deg) rotateY(0deg) rotateX(-52deg) scaleX(1.28) scaleY(1.34);
				opacity: 1;
			}
		}

		.final-sharp-card {
			position: fixed;
			left: 0;
			top: 0;
			width: 145px;
			height: 225px;
			border-radius: 14px;
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			border: 1px solid rgba(239,190,88,.55);
			box-shadow:
				0 0 26px rgba(255,210,120,.42),
				0 14px 35px rgba(0,0,0,.55);
			opacity: 0;
			z-index: 95;
			pointer-events: none;
			transition: opacity .65s ease;
		}

		.caption {
			position: absolute;
			left: 50%;
			bottom: 10vh;
			transform: translateX(-50%);
			color: rgba(240,220,185,.78);
			text-align: center;
			letter-spacing: .08em;
			text-transform: uppercase;
			font-size: 12px;
			z-index: 90;
			opacity: 0;
			animation: captionFade 12s ease forwards;
		}

		@keyframes captionFade {
			0%,64% { opacity:0; transform:translateX(-50%) translateY(10px); }
			84%,100% { opacity:1; transform:translateX(-50%) translateY(0); }
		}

		.vignette {
			position: absolute;
			inset: 0;
			background: radial-gradient(circle, transparent 42%, rgba(0,0,0,.88) 100%);
			z-index: 80;
			pointer-events: none;
		}