/* ============================================================
   OVERTURE — abertura da página
   Quatro peças de quebra-cabeça — uma cor da marca cada — chegam
   soltas e se encaixam num tabuleiro 2×2 (geometria oficial:
   assets/plogo-*.svg, a mesma do herói 3D). Só depois de todas
   travadas o bloco dá lugar à logomarca construída, que então voa
   inteira para o lugar definitivo do brasão no cabeçalho.
   ============================================================ */

html.ov-loading, html.ov-loading body { overflow: hidden !important; }
html.ov-loading .nav .brand { opacity: 0; }
html.ov-loading .wa-float,
html.ov-loading .novel-rail { opacity: 0; }

.overture { position: fixed; inset: 0; z-index: 1200; display: none; }
html.ov-loading .overture,
html.ov-exiting .overture { display: block; }
html.ov-exiting { overflow: hidden !important; }
html.ov-exiting .overture { pointer-events: none; }

.ov-veil {
  position: absolute; inset: 0;
  background:
    radial-gradient(120% 90% at 50% 42%, #FDFBF7 0%, var(--bone, #F7F4EF) 58%, #F1EBE1 100%);
  will-change: opacity;
}

/* -------- brasão -------- */
.ov-mark {
  --s: clamp(132px, 25vmin, 196px);
  position: fixed;
  width: var(--s); height: var(--s);
  left: calc(50% - var(--s) / 2);
  top: calc(50% - var(--s) / 2);
  border-radius: 50%;
  transform-origin: 50% 50%;
  will-change: transform;
}
.ov-halo {
  position: absolute; inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,146,118,.16) 0%, rgba(27,146,118,0) 68%);
  opacity: 0;
}
.ov-ring {
  position: absolute; inset: 0;
  border-radius: 50%;
  box-shadow: 0 0 0 1.5px rgba(22,32,43,.14);
  opacity: 0;
}
/* -------- tabuleiro: os contornos das quatro peças, ainda vazios -------- */
.ov-plate {
  position: absolute;
  left: -8%; top: -8%; width: 116%; height: 116%;
  background-image: url("assets/plogo-board.svg");
  background-size: 100% 100%;
  background-repeat: no-repeat;
  opacity: 0;
}

/* -------- as quatro peças: uma cor da marca cada --------
   viewBox 264 com corpo 32→232, então cada peça mede 66% da marca
   e recua 8% — os encaixes ficam para fora e se completam no grid. */
.ov-q {
  position: absolute;
  width: 66%; height: 66%;
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  filter: drop-shadow(0 3px 6px rgba(22,32,43,.18));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}
.ov-q[data-q="tl"] {
  left: -8%; top: -8%;
  background: var(--teal, #1B9276);
  -webkit-mask-image: url("assets/plogo-tl.svg"); mask-image: url("assets/plogo-tl.svg");
}
.ov-q[data-q="tr"] {
  left: 42%; top: -8%;
  background: var(--amber, #E0962A);
  -webkit-mask-image: url("assets/plogo-tr.svg"); mask-image: url("assets/plogo-tr.svg");
}
.ov-q[data-q="bl"] {
  left: -8%; top: 42%;
  background: var(--coral, #E0524C);
  -webkit-mask-image: url("assets/plogo-bl.svg"); mask-image: url("assets/plogo-bl.svg");
}
.ov-q[data-q="br"] {
  left: 42%; top: 42%;
  background: var(--purple, #6E4BA6);
  -webkit-mask-image: url("assets/plogo-br.svg"); mask-image: url("assets/plogo-br.svg");
}

/* -------- a logomarca construída: entra só depois do bloco travar -------- */
.ov-logo {
  position: absolute; inset: 0;
  border-radius: 50%;
  background-image: var(--ov-logo);
  background-size: 116% 116%;
  background-position: center;
  background-repeat: no-repeat;
  box-shadow: 0 2px 10px rgba(22,32,43,.07), 0 18px 44px rgba(22,32,43,.10);
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* -------- assinatura + progresso -------- */
.ov-foot {
  position: fixed;
  left: 50%; transform: translateX(-50%);
  top: calc(50% + clamp(132px, 25vmin, 196px) / 2 + clamp(1.6rem, 4vmin, 2.6rem));
  display: grid; justify-items: center; gap: clamp(1.1rem, 3vmin, 1.7rem);
  text-align: center;
  width: min(88vw, 30rem);
}
.ov-word { display: grid; justify-items: center; gap: .42rem; }
.ov-word b {
  font-family: var(--serif, Georgia, serif);
  font-weight: 600;
  font-size: clamp(1.12rem, 3.2vmin, 1.5rem);
  letter-spacing: -.012em;
  color: var(--ink, #16202B);
  line-height: 1;
}
.ov-word span {
  font-family: var(--sans, system-ui, sans-serif);
  font-size: clamp(.6rem, 1.5vmin, .7rem);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--ink-soft, #455260);
  line-height: 1;
}
.ov-word b, .ov-word span { opacity: 0; }

.ov-bar {
  position: relative;
  width: clamp(76px, 16vmin, 104px);
  height: 2px;
  border-radius: 2px;
  background: rgba(22,32,43,.11);
  overflow: hidden;
  opacity: 0;
}
.ov-bar i {
  position: absolute; inset: 0 auto 0 0;
  width: 100%;
  border-radius: 2px;
  background: var(--teal, #1B9276);
  transform: scaleX(0);
  transform-origin: 0 50%;
}

@media (prefers-reduced-motion: reduce) {
  .ov-q, .ov-logo, .ov-mark, .ov-veil { will-change: auto; }
}