/* M4.mov — logo M4 ● MOV (e bloco/símbolo): cores, intro (1ª visita) e hover do menu */
:root{--m4-red:#D22F27}
.m4-svg{display:block;width:100%;height:auto;overflow:visible}
.m4-svg .m4-ink{fill:currentColor;stroke:currentColor;stroke-width:3;stroke-linejoin:round}
.m4-svg .m4-acc{fill:var(--m4-red);stroke:var(--m4-red);stroke-width:3;stroke-linejoin:round}

/* ---------- logo do menu ---------- */
.m4-logo{display:inline-block;width:150px;color:#fff;line-height:0;text-decoration:none}
.m4-svg .m4-dot{transform-box:fill-box;transform-origin:center}
/* hover: o ponto vira REC — cresce um pouco e pisca */
.m4-logo .m4-dot{transition:transform .35s cubic-bezier(.2,.8,.2,1)}
.m4-logo:hover .m4-dot,.m4-logo:focus-visible .m4-dot{transform:scale(1.18);animation:m4-rec 1s ease-in-out .1s infinite}
@keyframes m4-rec{0%,100%{opacity:1}45%{opacity:.25}}

/* ---------- intro ---------- */
html.m4-intro{overflow:hidden}
/* cobre a página até o JS montar a intro; some sozinho se algo falhar */
html.m4-intro::after{content:"";position:fixed;inset:0;background:#000;z-index:9998;animation:m4-out 0s linear 2.6s forwards}
@keyframes m4-out{to{visibility:hidden}}
html.m4-intro-run::after{content:none}

.m4-intro-ov{position:fixed;inset:0;z-index:9999;background:#000;color:#fff;display:grid;place-items:center;cursor:pointer;
  animation:m4-lift .5s cubic-bezier(.75,0,.2,1) 1s forwards}
.m4-intro-logo{width:min(78vw,620px)}
@keyframes m4-lift{to{transform:translateY(-100%)}}

/* letras sobem de baixo da linha de corte */
.m4-intro-ov .m4-m,.m4-intro-ov .m4-4,.m4-intro-ov .m4-mov-m,.m4-intro-ov .m4-mov-o,.m4-intro-ov .m4-mov-v{
  transform:translateY(112px);animation:m4-rise .42s cubic-bezier(.2,.8,.2,1) forwards}
.m4-intro-ov .m4-4{animation-delay:.07s}
.m4-intro-ov .m4-mov-m{animation-delay:.42s}
.m4-intro-ov .m4-mov-o{animation-delay:.48s}
.m4-intro-ov .m4-mov-v{animation-delay:.54s}
@keyframes m4-rise{to{transform:none}}

/* o ponto surge branco e acende em vermelho (REC) quando o visor trava o foco */
.m4-intro-ov .m4-dot{transform:scale(0);animation:m4-pop .34s cubic-bezier(.3,1.6,.5,1) .26s forwards,m4-recon .34s linear .64s forwards}
@keyframes m4-pop{to{transform:none}}
.m4-intro-ov .m4-dot.m4-acc{fill:currentColor;stroke:currentColor}
@keyframes m4-recon{
  0%{fill:currentColor;stroke:currentColor}
  30%{fill:var(--m4-red);stroke:var(--m4-red);opacity:1}
  55%{opacity:.35}
  100%{fill:var(--m4-red);stroke:var(--m4-red);opacity:1}}

/* ---------- visor de câmera na intro ---------- */
.m4-intro-logo{position:relative;--m4-hx:40px;--m4-hy:30px}
@media (max-width:600px){.m4-intro-logo{--m4-hx:14px;--m4-hy:26px}}
/* foco: desfocado -> nítido, com leve respiração de zoom */
.m4-intro-ov .m4-svg{animation:m4-focus .7s cubic-bezier(.2,.8,.2,1) .05s both}
@keyframes m4-focus{from{filter:blur(8px);transform:scale(1.05)}to{filter:blur(0);transform:none}}
/* cantos do visor: saem da borda da tela, enquadram a logo, travam o foco e somem */
.m4-hud{position:absolute;pointer-events:none;top:calc(var(--m4-hy) * -1);bottom:calc(var(--m4-hy) * -1);left:calc(var(--m4-hx) * -1);right:calc(var(--m4-hx) * -1);
  animation:m4-frame .58s cubic-bezier(.65,0,.35,1) .02s both,m4-lock .16s ease-in-out .62s 1,m4-hudout .18s ease-in .84s forwards}
@keyframes m4-frame{
  from{opacity:0;top:calc(24px - 50vh + 50%);bottom:calc(24px - 50vh + 50%);left:calc(24px - 50vw + 50%);right:calc(24px - 50vw + 50%)}
  25%{opacity:1}
  to{opacity:1}}
@keyframes m4-lock{50%{top:calc(var(--m4-hy) * -1 + 7px);bottom:calc(var(--m4-hy) * -1 + 7px);left:calc(var(--m4-hx) * -1 + 7px);right:calc(var(--m4-hx) * -1 + 7px)}}
@keyframes m4-hudout{to{opacity:0;transform:scale(1.04)}}
.m4-c{position:absolute;width:26px;height:26px;border:0 solid currentColor}
.m4-tl{top:0;left:0;border-top-width:2px;border-left-width:2px;border-top-left-radius:4px}
.m4-tr{top:0;right:0;border-top-width:2px;border-right-width:2px;border-top-right-radius:4px}
.m4-br{bottom:0;right:0;border-bottom-width:2px;border-right-width:2px;border-bottom-right-radius:4px}
.m4-bl{bottom:0;left:0;border-bottom-width:2px;border-left-width:2px;border-bottom-left-radius:4px}
.m4-c{animation:m4-blink .1s steps(1) .62s 2}
@keyframes m4-blink{50%{opacity:.25}}
/* REC, timecode e dados da câmera */
.m4-rec,.m4-tc,.m4-meta{position:absolute;font:600 11px/1 Poppins,"Open Sans",system-ui,sans-serif;letter-spacing:.16em;white-space:nowrap;
  animation:m4-in .2s ease-out .4s both}
.m4-rec,.m4-tc{bottom:100%;margin-bottom:12px}
.m4-rec{left:0;display:flex;align-items:center;gap:8px}
.m4-rec::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--m4-red);animation:m4-rec .5s steps(1) .45s infinite}
.m4-tc{right:0;font-variant-numeric:tabular-nums}
.m4-meta{top:100%;margin-top:12px;font-weight:500;font-size:10px;opacity:.65}
.m4-ml{left:0}.m4-mr{right:0}
@keyframes m4-in{from{opacity:0;transform:translateY(6px)}}
.m4-meta{animation-name:m4-in-dim}
@keyframes m4-in-dim{from{opacity:0;transform:translateY(-6px)}to{opacity:.65}}

/* clique / Esc: pula direto para a saída */
.m4-intro-ov.m4-intro-skip,.m4-intro-ov.m4-intro-skip *{animation-delay:0s!important;animation-duration:.01s!important}
.m4-intro-ov.m4-intro-skip{animation:m4-lift .35s cubic-bezier(.75,0,.2,1) forwards!important}

@media (prefers-reduced-motion:reduce){
  html.m4-intro::after,.m4-intro-ov{display:none}
  .m4-logo .m4-dot{transition:none}
  .m4-logo:hover .m4-dot,.m4-logo:focus-visible .m4-dot{transform:none;animation:none}
}