/* R85 — transição rápida de página. Não espera imagens, fontes ou sincronização. */
:root{
  --iz-transition-red:#d52c39;
  --iz-transition-red-dark:#5f0d17;
  --iz-transition-gold:#d8b24a;
  --iz-transition-bg:#05070a;
  --iz-transition-enter-ms:420ms;
  --iz-transition-exit-ms:170ms;
}

html.iz-transition-boot,
html.iz-transition-out,
html.iz-transition-boot body,
html.iz-transition-out body{overflow:hidden!important}

#iz-page-transition{
  position:fixed;
  inset:0;
  z-index:2147483500;
  display:block;
  overflow:hidden;
  isolation:isolate;
  background:var(--iz-transition-bg);
  color:#fff;
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  contain:layout paint style;
}

#iz-page-transition .iz-transition-backdrop{
  position:absolute;
  inset:-22px;
  z-index:-4;
  background:
    linear-gradient(112deg,rgba(2,7,10,.96),rgba(5,12,17,.88) 54%,rgba(31,5,10,.92)),
    var(--iz-app-wallpaper,url('/assets/img/insanez-ui/app-wallpaper.webp')) center/cover no-repeat;
  filter:saturate(.82) contrast(1.08);
  transform:scale(1.02);
}

#iz-page-transition .iz-transition-vignette{
  position:absolute;
  inset:0;
  z-index:-3;
  background:
    radial-gradient(circle at 50% 48%,rgba(213,44,57,.20),transparent 31%),
    linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.014) 1px,transparent 1px);
  background-size:auto,36px 36px,36px 36px;
  box-shadow:inset 0 0 190px rgba(0,0,0,.90);
}

.iz-transition-panel{
  position:absolute;
  top:-13%;
  bottom:-13%;
  width:61%;
  z-index:-1;
  will-change:transform;
  backface-visibility:hidden;
  background:
    linear-gradient(112deg,rgba(255,255,255,.035),transparent 24%),
    linear-gradient(145deg,rgba(13,17,22,.985),rgba(4,6,9,.995));
  box-shadow:0 0 48px rgba(0,0,0,.72),inset 0 0 0 1px rgba(255,255,255,.035);
}

.iz-transition-panel::before{
  content:"";
  position:absolute;
  top:0;
  bottom:0;
  width:4px;
  background:linear-gradient(180deg,transparent 2%,var(--iz-transition-red) 28%,#f25560 50%,var(--iz-transition-red) 72%,transparent 98%);
  box-shadow:0 0 26px rgba(213,44,57,.88),0 0 70px rgba(213,44,57,.30);
}

.iz-transition-panel--left{
  left:-8%;
  transform:translate3d(-115%,0,0) skewX(-7deg);
  transform-origin:right center;
}
.iz-transition-panel--left::before{right:-2px}

.iz-transition-panel--right{
  right:-8%;
  transform:translate3d(115%,0,0) skewX(-7deg);
  transform-origin:left center;
}
.iz-transition-panel--right::before{left:-2px}

.iz-transition-core{
  position:absolute;
  left:50%;
  top:50%;
  width:min(390px,78vw);
  display:grid;
  justify-items:center;
  gap:13px;
  transform:translate3d(-50%,-50%,0) scale(.94);
  opacity:0;
  will-change:transform,opacity;
  text-align:center;
}

.iz-transition-logo{
  display:block;
  width:min(270px,68vw);
  max-height:108px;
  object-fit:contain;
  filter:drop-shadow(0 14px 25px rgba(0,0,0,.74)) drop-shadow(0 0 20px rgba(213,44,57,.16));
}

.iz-transition-scan{
  position:relative;
  display:block;
  width:min(330px,72vw);
  height:2px;
  overflow:hidden;
  background:linear-gradient(90deg,transparent,rgba(213,44,57,.22) 15%,rgba(213,44,57,.78) 50%,rgba(213,44,57,.22) 85%,transparent);
  box-shadow:0 0 16px rgba(213,44,57,.46);
}
.iz-transition-scan::after{
  content:"";
  position:absolute;
  top:-2px;
  bottom:-2px;
  width:23%;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.92),transparent);
  filter:blur(.2px);
  transform:translateX(-130%);
}

.iz-transition-caption{
  color:#aeb6be;
  font:800 9px/1 'Inter',sans-serif;
  letter-spacing:.24em;
  text-transform:uppercase;
  text-shadow:0 2px 8px #000;
}

/* Primeiro quadro do HTML novo: a tela já nasce fechada, sem piscar o conteúdo. */
html.iz-transition-boot #iz-page-transition{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
html.iz-transition-boot .iz-transition-panel--left,
html.iz-transition-boot .iz-transition-panel--right{
  transform:translate3d(0,0,0) skewX(-7deg);
}
html.iz-transition-boot .iz-transition-core{
  opacity:1;
  transform:translate3d(-50%,-50%,0) scale(1);
}

/* Entrada: abre a transição imediatamente após o HTML estar pronto. */
html.iz-transition-enter #iz-page-transition{
  opacity:1;
  visibility:visible;
  pointer-events:none;
  animation:izTransitionOverlayOut var(--iz-transition-enter-ms) linear both;
}
html.iz-transition-enter .iz-transition-panel--left{
  animation:izTransitionLeftOpen var(--iz-transition-enter-ms) cubic-bezier(.72,0,.18,1) both;
}
html.iz-transition-enter .iz-transition-panel--right{
  animation:izTransitionRightOpen var(--iz-transition-enter-ms) cubic-bezier(.72,0,.18,1) both;
}
html.iz-transition-enter .iz-transition-core{
  animation:izTransitionCoreOut 300ms cubic-bezier(.4,0,.2,1) both;
}
html.iz-transition-enter .iz-transition-scan::after{
  animation:izTransitionScan 360ms ease-out both;
}

/* Saída: fecha rápido antes de trocar de página. */
html.iz-transition-out #iz-page-transition{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
}
html.iz-transition-out .iz-transition-panel--left{
  animation:izTransitionLeftClose var(--iz-transition-exit-ms) cubic-bezier(.55,0,.25,1) both;
}
html.iz-transition-out .iz-transition-panel--right{
  animation:izTransitionRightClose var(--iz-transition-exit-ms) cubic-bezier(.55,0,.25,1) both;
}
html.iz-transition-out .iz-transition-core{
  animation:izTransitionCoreIn var(--iz-transition-exit-ms) ease-out both;
}
html.iz-transition-out .iz-transition-scan::after{
  animation:izTransitionScan var(--iz-transition-exit-ms) linear both;
}

@keyframes izTransitionLeftOpen{
  from{transform:translate3d(0,0,0) skewX(-7deg)}
  to{transform:translate3d(-115%,0,0) skewX(-7deg)}
}
@keyframes izTransitionRightOpen{
  from{transform:translate3d(0,0,0) skewX(-7deg)}
  to{transform:translate3d(115%,0,0) skewX(-7deg)}
}
@keyframes izTransitionLeftClose{
  from{transform:translate3d(-115%,0,0) skewX(-7deg)}
  to{transform:translate3d(0,0,0) skewX(-7deg)}
}
@keyframes izTransitionRightClose{
  from{transform:translate3d(115%,0,0) skewX(-7deg)}
  to{transform:translate3d(0,0,0) skewX(-7deg)}
}
@keyframes izTransitionCoreOut{
  0%{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
  46%{opacity:.86;transform:translate3d(-50%,-50%,0) scale(1.025)}
  100%{opacity:0;transform:translate3d(-50%,-50%,0) scale(1.08)}
}
@keyframes izTransitionCoreIn{
  from{opacity:0;transform:translate3d(-50%,-50%,0) scale(.92)}
  to{opacity:1;transform:translate3d(-50%,-50%,0) scale(1)}
}
@keyframes izTransitionOverlayOut{
  0%,78%{opacity:1}
  100%{opacity:0}
}
@keyframes izTransitionScan{
  from{transform:translateX(-130%)}
  to{transform:translateX(460%)}
}

@media(max-width:560px){
  .iz-transition-panel{width:68%}
  .iz-transition-panel--left{left:-16%}
  .iz-transition-panel--right{right:-16%}
  .iz-transition-logo{width:min(232px,70vw)}
  .iz-transition-caption{font-size:8px;letter-spacing:.20em}
}

@media(prefers-reduced-motion:reduce){
  :root{--iz-transition-enter-ms:120ms;--iz-transition-exit-ms:80ms}
  html.iz-transition-enter .iz-transition-panel--left,
  html.iz-transition-enter .iz-transition-panel--right,
  html.iz-transition-enter .iz-transition-core,
  html.iz-transition-enter .iz-transition-scan::after,
  html.iz-transition-out .iz-transition-panel--left,
  html.iz-transition-out .iz-transition-panel--right,
  html.iz-transition-out .iz-transition-core,
  html.iz-transition-out .iz-transition-scan::after{animation:none!important}
  html.iz-transition-enter #iz-page-transition{animation:izTransitionOverlayOut 120ms linear both}
  html.iz-transition-out #iz-page-transition{opacity:1}
}

@media print{#iz-page-transition{display:none!important}}