/* Oni Intro — écran de chargement (front) */
#oni-intro {
	position: fixed;
	inset: 0;
	z-index: var(--oni-z, 999999);
	background: var(--oni-bg, #0d1f26);
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	overflow: hidden;
	will-change: transform, opacity, clip-path;
}

#oni-intro::before {
	content: "";
	position: absolute;
	inset: 0;
	background: var(--oni-bg-img, none) center center / cover no-repeat;
	opacity: var(--oni-bg-opacity, 0.2);
	pointer-events: none;
}

/* --- Logo : animation pilotée par [data-logo-anim] --- */
#oni-intro-logo {
	width: var(--oni-logo-w, 240px);
	max-width: 80vw;
	height: auto;
	opacity: 0;
	z-index: 2;
	animation-duration: var(--oni-logo-appear, 1400ms);
	animation-timing-function: cubic-bezier(.19, 1, .22, 1);
	animation-fill-mode: both;
	animation-name: oniLogoZoom;
}
#oni-intro[data-logo-anim="zoom-out"]   #oni-intro-logo { animation-name: oniLogoZoomOut; }
#oni-intro[data-logo-anim="fade"]       #oni-intro-logo { animation-name: oniLogoFade; }
#oni-intro[data-logo-anim="fade-up"]    #oni-intro-logo { animation-name: oniLogoFadeUp; }
#oni-intro[data-logo-anim="fade-down"]  #oni-intro-logo { animation-name: oniLogoFadeDown; }
#oni-intro[data-logo-anim="fade-left"]  #oni-intro-logo { animation-name: oniLogoFadeLeft; }
#oni-intro[data-logo-anim="fade-right"] #oni-intro-logo { animation-name: oniLogoFadeRight; }
#oni-intro[data-logo-anim="blur"]       #oni-intro-logo { animation-name: oniLogoBlur; }
#oni-intro[data-logo-anim="bounce"]     #oni-intro-logo { animation-name: oniLogoBounce; }
#oni-intro[data-logo-anim="rotate"]     #oni-intro-logo { animation-name: oniLogoRotate; }
#oni-intro[data-logo-anim="flip-x"]     #oni-intro-logo { animation-name: oniLogoFlipX; }
#oni-intro[data-logo-anim="flip-y"]     #oni-intro-logo { animation-name: oniLogoFlipY; }
#oni-intro[data-logo-anim="drop"]       #oni-intro-logo { animation-name: oniLogoDrop; }
#oni-intro[data-logo-anim="skew"]       #oni-intro-logo { animation-name: oniLogoSkew; }

/* --- Barre --- */
#oni-intro-bar-wrap {
	width: var(--oni-bar-w, 220px);
	max-width: 70vw;
	height: var(--oni-bar-h, 2px);
	margin-top: 25px;
	position: relative;
	overflow: hidden;
	border-radius: 2px;
	background: var(--oni-track, rgba(255, 255, 255, .1));
	z-index: 2;
	-webkit-mask-image: var(--oni-mask, none);
	-webkit-mask-repeat: no-repeat;
	-webkit-mask-size: cover;
	-webkit-mask-position: center;
	mask-image: var(--oni-mask, none);
	mask-repeat: no-repeat;
	mask-size: cover;
	mask-position: center;
}
#oni-intro-bar {
	position: absolute;
	top: 0;
	left: 0;
	width: 0%;
	height: 100%;
	background: var(--oni-bar, #ffbe7a);
}

/* --- Sortie : animation pilotée par [data-exit] --- */
#oni-intro.oni-exit {
	animation-duration: var(--oni-exit, 1200ms);
	animation-timing-function: cubic-bezier(.7, 0, .3, 1);
	animation-fill-mode: forwards;
	animation-name: oniExitFadeZoom;
	pointer-events: none;
}
#oni-intro.oni-exit[data-exit="fade"]        { animation-name: oniExitFade; }
#oni-intro.oni-exit[data-exit="zoom-in"]     { animation-name: oniExitZoomIn; }
#oni-intro.oni-exit[data-exit="zoom-out"]    { animation-name: oniExitZoomOut; }
#oni-intro.oni-exit[data-exit="slide-up"]    { animation-name: oniExitSlideUp; }
#oni-intro.oni-exit[data-exit="slide-down"]  { animation-name: oniExitSlideDown; }
#oni-intro.oni-exit[data-exit="slide-left"]  { animation-name: oniExitSlideLeft; }
#oni-intro.oni-exit[data-exit="slide-right"] { animation-name: oniExitSlideRight; }
#oni-intro.oni-exit[data-exit="blur"]        { animation-name: oniExitBlur; }
#oni-intro.oni-exit[data-exit="rotate"]      { animation-name: oniExitRotate; }
#oni-intro.oni-exit[data-exit="iris"]        { animation-name: oniExitIris; }
#oni-intro.oni-exit[data-exit="wipe-up"]     { animation-name: oniExitWipeUp; }
#oni-intro.oni-exit[data-exit="wipe-down"]   { animation-name: oniExitWipeDown; }

/* ================= KEYFRAMES — entrées logo ================= */
@keyframes oniLogoZoom      { 0% { opacity: 0; transform: scale(.7); }  100% { opacity: 1; transform: scale(1); } }
@keyframes oniLogoZoomOut   { 0% { opacity: 0; transform: scale(1.25); } 100% { opacity: 1; transform: scale(1); } }
@keyframes oniLogoFade      { 0% { opacity: 0; } 100% { opacity: 1; } }
@keyframes oniLogoFadeUp    { 0% { opacity: 0; transform: translateY(40px); }  100% { opacity: 1; transform: translateY(0); } }
@keyframes oniLogoFadeDown  { 0% { opacity: 0; transform: translateY(-40px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes oniLogoFadeLeft  { 0% { opacity: 0; transform: translateX(-50px); } 100% { opacity: 1; transform: translateX(0); } }
@keyframes oniLogoFadeRight { 0% { opacity: 0; transform: translateX(50px); }  100% { opacity: 1; transform: translateX(0); } }
@keyframes oniLogoBlur      { 0% { opacity: 0; filter: blur(18px); transform: scale(1.05); } 100% { opacity: 1; filter: blur(0); transform: scale(1); } }
@keyframes oniLogoBounce    { 0% { opacity: 0; transform: scale(.3); } 50% { opacity: 1; transform: scale(1.08); } 70% { transform: scale(.96); } 100% { opacity: 1; transform: scale(1); } }
@keyframes oniLogoRotate    { 0% { opacity: 0; transform: rotate(-15deg) scale(.8); } 100% { opacity: 1; transform: rotate(0) scale(1); } }
@keyframes oniLogoFlipX     { 0% { opacity: 0; transform: perspective(600px) rotateX(90deg); } 100% { opacity: 1; transform: perspective(600px) rotateX(0); } }
@keyframes oniLogoFlipY     { 0% { opacity: 0; transform: perspective(600px) rotateY(90deg); } 100% { opacity: 1; transform: perspective(600px) rotateY(0); } }
@keyframes oniLogoDrop      { 0% { opacity: 0; transform: translateY(-120px); } 60% { opacity: 1; transform: translateY(12px); } 100% { opacity: 1; transform: translateY(0); } }
@keyframes oniLogoSkew      { 0% { opacity: 0; transform: skewX(18deg) translateX(40px); } 100% { opacity: 1; transform: skewX(0) translateX(0); } }

/* ================= KEYFRAMES — sorties ================= */
@keyframes oniExitFadeZoom  { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.05); } }
@keyframes oniExitFade      { 0% { opacity: 1; } 100% { opacity: 0; } }
@keyframes oniExitZoomIn    { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(.85); } }
@keyframes oniExitZoomOut   { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(1.3); } }
@keyframes oniExitSlideUp   { 0% { transform: translateY(0); } 100% { transform: translateY(-100%); } }
@keyframes oniExitSlideDown { 0% { transform: translateY(0); } 100% { transform: translateY(100%); } }
@keyframes oniExitSlideLeft { 0% { transform: translateX(0); } 100% { transform: translateX(-100%); } }
@keyframes oniExitSlideRight{ 0% { transform: translateX(0); } 100% { transform: translateX(100%); } }
@keyframes oniExitBlur      { 0% { opacity: 1; filter: blur(0); } 100% { opacity: 0; filter: blur(20px); } }
@keyframes oniExitRotate    { 0% { opacity: 1; transform: rotate(0) scale(1); } 100% { opacity: 0; transform: rotate(8deg) scale(1.1); } }
@keyframes oniExitIris      { 0% { clip-path: circle(150% at 50% 50%); } 100% { clip-path: circle(0% at 50% 50%); } }
@keyframes oniExitWipeUp    { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(0 0 100% 0); } }
@keyframes oniExitWipeDown  { 0% { clip-path: inset(0 0 0 0); } 100% { clip-path: inset(100% 0 0 0); } }

@media (prefers-reduced-motion: reduce) {
	#oni-intro-logo { animation-duration: .1ms !important; }
}