/* ╔══════════════════════════════════════════════════════════════════════════╗
   ║                                                                          ║
   ║   MORIN - ABERTURA COMEMORATIVA 4 DE JULHO (250 anos) - v3 "250 3D"       ║
   ║                                                                          ║
   ║   Fundo em gradiente com as cores americanas (transparente, o site       ║
   ║   aparece atras), DOIS riscos de luz correndo rumo a marca, um "250"      ║
   ║   gigante em 3D translucido ao fundo, e a marca comemorativa surgindo     ║
   ║   INTEIRA de forma organica (varredura de luz + foco), sem pedacinhos.    ║
   ║   Fogos de 4 de Julho ao fundo. Depois a logo voa ate o header.           ║
   ║                                                                          ║
   ║   Anima so transform/opacity/mask -> sem layout shift (CLS).             ║
   ║   AJUSTE: variaveis abaixo.                                              ║
   ║                                                                          ║
   ╚══════════════════════════════════════════════════════════════════════════╝ */

:root {
  --mj4-navy:  #0A2540;
  --mj4-gold:  #C09A5D;
  --mj4-blue:  #004687;
  --mj4-blue-glow: #2f8fff;
  --mj4-red:   #D7192A;
  /* AJUSTE: quanto o site escurece atras (menor = site mais visivel) */
  --mj4-dim:   0.62;
  --mj4-blur:  4px;
  /* AJUSTE: largura do logo no palco (+15% sobre o original 300/60/600) */
  --mj4-lockup-w: clamp(345px, 69vw, 690px);
}

#mj4-root {
  position: fixed; inset: 0; z-index: 2147483000; display: none;
  overflow: hidden; -webkit-tap-highlight-color: transparent; contain: layout style paint;
  color: #fff;
}
#mj4-root.is-active { display: block; }
html.mj4-lock, html.mj4-lock body { overflow: hidden !important; }

/* Fundo: gradiente cores americanas + desfoque do site (transparente) */
#mj4-scrim {
  position: absolute; inset: 0; opacity: 0; will-change: opacity;
  background:
    radial-gradient(circle at 18% 20%, rgba(0,70,135,.42), rgba(0,70,135,0) 34%),
    radial-gradient(circle at 84% 20%, rgba(215,25,42,.34), rgba(215,25,42,0) 36%),
    radial-gradient(ellipse at 50% 116%, rgba(255,255,255,.10), transparent 42%),
    linear-gradient(120deg, rgba(2,10,26,.52), rgba(4,20,48,.34) 46%, rgba(5,10,22,.55));
  -webkit-backdrop-filter: blur(var(--mj4-blur)) brightness(calc(1 - var(--mj4-dim) * 0.5)) saturate(1.1);
  backdrop-filter: blur(var(--mj4-blur)) brightness(calc(1 - var(--mj4-dim) * 0.5)) saturate(1.1);
}
/* piso em perspectiva (profundidade sutil) */
#mj4-scrim::before {
  content: ""; position: absolute; inset: -14%;
  background:
    linear-gradient(90deg, rgba(255,255,255,.05) 1px, transparent 1px) 0 0 / 84px 84px,
    linear-gradient(0deg, rgba(255,255,255,.04) 1px, transparent 1px) 0 0 / 84px 84px;
  opacity: .3; transform: perspective(900px) rotateX(58deg) translateY(10vh); transform-origin: 50% 100%;
}

/* fogos + riscos: ACIMA do "250" (fundo) e ABAIXO da marca (que revela por cima) */
#mj4-fw { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; display: block; z-index: 2; }

/* Palco com perspectiva para o 3D do "250" */
#mj4-stage { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; perspective: 1300px; z-index: 4; }

/* ── "250" gigante em 3D, translucido, ao fundo ─────────────────────────── */
#mj4-250 {
  position: absolute; width: min(96vw, 1280px); height: auto; overflow: visible;
  transform: translateY(-2vh) rotateX(14deg) rotateZ(-1deg); transform-origin: 50% 54%;
  opacity: 0; z-index: 1; pointer-events: none;
  filter: drop-shadow(0 0 26px rgba(60,130,255,.22)) drop-shadow(0 30px 60px rgba(0,0,0,.36));
}
#mj4-250 text {
  font-family: Impact, Haettenschweiler, "Arial Narrow Bold", "Arial Black", sans-serif;
  font-size: 520px; font-weight: 900; letter-spacing: -30px; text-anchor: middle;
}
#mj4-250 .mj4-250-depth { fill: rgba(3,12,32,.30); stroke: rgba(120,170,255,.10); stroke-width: 2; }
#mj4-250 .mj4-250-fill  { fill: url(#mj4GlassGrad); opacity: .34; }
#mj4-250 .mj4-250-stroke{ fill: none; stroke: url(#mj4ChromeGrad); stroke-width: 4.5; stroke-linejoin: round; stroke-linecap: round; }
#mj4-250 .mj4-250-hot   { fill: none; stroke: url(#mj4HotGrad); stroke-width: 2; stroke-linejoin: round; filter: url(#mj4Glow); opacity: .8; }
#mj4-250 .mj4-250-sheen { fill: url(#mj4SheenGrad); mix-blend-mode: screen; opacity: 0; }

/* ── Os DOIS riscos de luz rumo a marca ────────────────────────────────── */
.mj4-streak {
  position: absolute; left: 50%; top: 46%; z-index: 2; pointer-events: none; border-radius: 999px;
  height: clamp(8px, 1.1vw, 16px); width: clamp(240px, 34vw, 620px);
  filter: blur(.3px) drop-shadow(0 0 18px rgba(255,255,255,.4));
  opacity: 0; transform-origin: 50% 50%;
}
#mj4-streak-a { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.9) 40%, rgba(215,25,42,.95) 72%, rgba(255,255,255,0)); }
#mj4-streak-b { background: linear-gradient(90deg, rgba(255,255,255,0), rgba(62,116,230,.95) 30%, rgba(255,255,255,.9) 62%, rgba(255,255,255,0)); }

/* clarao no encontro dos riscos (ignicao da marca) */
#mj4-flash {
  position: absolute; left: 50%; top: 50%; z-index: 5; width: 40vmax; height: 40vmax; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle, rgba(255,255,255,.95), rgba(255,244,214,.5) 22%, rgba(255,255,255,0) 60%);
  opacity: 0; transform: scale(.2); mix-blend-mode: screen; will-change: transform, opacity;
}

/* ── A marca (revelada INTEIRA, organica) ──────────────────────────────── */
#mj4-lockup { position: relative; z-index: 6; width: var(--mj4-lockup-w); aspect-ratio: 657.21 / 348.76; will-change: transform, opacity, filter; }
#mj4-vec { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
  /* varredura organica: a mascara revela a logo inteira da esquerda pra direita */
  --rev: 0;
  -webkit-mask-image: linear-gradient(100deg, #000 calc(var(--rev) * 150% - 40%), rgba(0,0,0,0) calc(var(--rev) * 150%));
  mask-image: linear-gradient(100deg, #000 calc(var(--rev) * 150% - 40%), rgba(0,0,0,0) calc(var(--rev) * 150%));
}
#mj4-vec [data-l] { will-change: auto; }

/* varredura especular (gloss) que atravessa a logo pronta */
#mj4-shine {
  position: absolute; inset: 0; pointer-events: none; opacity: 0; mix-blend-mode: screen; --x: -30%;
  background: linear-gradient(100deg, rgba(255,255,255,0) calc(var(--x) - 10%), rgba(255,253,246,.8) var(--x), rgba(255,255,255,0) calc(var(--x) + 10%));
  will-change: opacity, background;
}

#mj4-skip {
  position: absolute; right: max(18px, env(safe-area-inset-right)); bottom: max(18px, env(safe-area-inset-bottom));
  z-index: 20; font: 600 13px/1 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; letter-spacing: .02em;
  color: #fff; background: rgba(10,37,64,.55); border: 1px solid rgba(255,255,255,.28); border-radius: 999px;
  padding: 9px 16px; cursor: pointer; opacity: 0; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  transition: background .2s, border-color .2s; pointer-events: auto;
}
#mj4-skip:hover { background: rgba(10,37,64,.82); border-color: var(--mj4-gold); }
#mj4-skip:focus-visible { outline: 2px solid var(--mj4-gold); outline-offset: 2px; }

#mj4-flyer { position: fixed; top: 0; left: 0; z-index: 2147483001; pointer-events: none; will-change: transform, opacity; }
#mj4-flyer svg, #mj4-flyer img { display: block; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) { #mj4-root { display: none !important; } }