/* ──────────────────────────────────────────────────────────────────────────
   MegaRide — splash animado (web).  Tudo com prefixo .mr- : nao vaza.
   Nenhuma altura em px: a caixa vem de aspect-ratio.
   ────────────────────────────────────────────────────────────────────────── */
.mr-splash{
  --mr-bg: #01030C;                /* = SPLASH_BG do componente nativo */
  --mr-ratio: 10/16;               /* celular: retrato, a arte preenche a largura */
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: var(--mr-ratio);
  max-height: 92vh;
  max-height: 92svh;
  overflow: hidden;
  background: var(--mr-bg);
  /* leve profundidade atras da arte, para as laterais nao ficarem chapadas */
  background-image: radial-gradient(120% 80% at 50% 38%, #040B1A 0%, var(--mr-bg) 68%);
  contain: layout paint;
  isolation: isolate;
}
@media (min-width: 640px){  .mr-splash{ --mr-ratio: 4/3;   } }
@media (min-width: 1024px){ .mr-splash{ --mr-ratio: 16/10; } }

/* Defende-se do CSS do site (img{max-width:100%;height:auto} e afins). */
.mr-splash img{
  position: absolute;
  display: block;
  margin: 0;
  padding: 0;
  border: 0;
  max-width: none;
  max-height: none;
  min-width: 0;
  min-height: 0;
  object-fit: fill;                /* = resizeMode="stretch" do React Native */
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  opacity: 0;                      /* quadro 0 e escuro; o JS assume daqui */
  backface-visibility: hidden;
}
.mr-splash .mr-root,
.mr-splash .mr-bg,
.mr-splash .mr-logo{ position: absolute; inset: 0; }
.mr-splash .mr-root{ transform-origin: 50% 50%; }
.mr-splash .mr-bg{ transform-origin: 50% 50%; will-change: transform; }

/* As duas bordas em degrade: fade.png (96x4, #01030C com alfa 1 -> 0)
   reproduzido com os stops MEDIDOS do arquivo. */
.mr-splash .mr-fade{
  position: absolute;
  display: block;
  pointer-events: none;
  background-image: linear-gradient(to right,
    rgba(1,3,12,1)     0%,    rgba(1,3,12,.87)  8.4%,  rgba(1,3,12,.745) 16.8%,
    rgba(1,3,12,.627) 25.3%,  rgba(1,3,12,.517) 33.7%, rgba(1,3,12,.415) 42.1%,
    rgba(1,3,12,.325) 50.5%,  rgba(1,3,12,.239) 58.9%, rgba(1,3,12,.164) 67.4%,
    rgba(1,3,12,.101) 75.8%,  rgba(1,3,12,.05)  84.2%, rgba(1,3,12,.015) 92.6%,
    rgba(1,3,12,0)   100%);
}
.mr-splash .mr-fade-r{ transform: scaleX(-1); }

/* Janela do reflexo de luz (recorte diagonal, sem mask) */
.mr-splash .mr-shine{ position: absolute; pointer-events: none; }
.mr-splash .mr-win{ position: absolute; overflow: hidden; }

/* GPU so enquanto roda; devolvida no fim para nao prender memoria de video */
.mr-splash[data-mr-state="playing"] img,
.mr-splash[data-mr-state="playing"] .mr-win{ will-change: transform, opacity; }
.mr-splash[data-mr-state="done"] img,
.mr-splash[data-mr-state="done"] .mr-win,
.mr-splash[data-mr-state="done"] .mr-bg{ will-change: auto; }

/* Sem JS (ou JS quebrado): as camadas NAO sao posicionadas pelo CSS,
   entao o fallback honesto e a foto do plate em cover. O aria-label carrega o resto. */
.mr-splash[data-mr-state="nojs"] img{ display: none; }
.mr-splash[data-mr-state="nojs"] img[data-k="plate"]{
  display: block; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 40%; opacity: 1;
}
.mr-splash[data-mr-state="nojs"] .mr-shine,
.mr-splash[data-mr-state="nojs"] .mr-fade{ display: none; }