/* Dobra 03: O Mapa Secreto da Edição (foto grande + mapa de vidro animado) */
.mx-demo{position:relative}
.mx-stage{position:relative;aspect-ratio:16/10;border-radius:4px;overflow:hidden;border:1px solid var(--line);background:#000;transition:border-color .9s,box-shadow .9s}
.mx-demo.is-finished .mx-stage{border-color:rgba(120,220,255,.6);box-shadow:0 30px 90px rgba(120,220,255,.08)}
.mx-scene{position:absolute;inset:0;transition:opacity .35s ease}
.mx-demo.is-swapping .mx-scene{opacity:0}
.mx-photo{display:block;width:100%;height:100%;object-fit:cover}
.mx-ov{position:absolute;inset:0;pointer-events:none;opacity:0}
.mx-grey{background:rgb(150,162,168)}
.mx-warm,.mx-glow{mix-blend-mode:soft-light}
.mx-vig{background:radial-gradient(ellipse at 50% 48%,transparent 48%,rgba(0,0,0,.8) 100%)}
.mx-chip{position:absolute;left:2.2%;top:3.6%;z-index:6;font:700 9.5px var(--font);letter-spacing:1.9px;color:#fff;background:rgba(8,12,15,.5);border:1px solid rgba(255,255,255,.16);padding:6px 10px;border-radius:2px;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);font-variant-numeric:tabular-nums;line-height:1.5}
.mx-demo.is-finished .mx-chip{border-color:rgba(120,220,255,.6);color:var(--cyan)}
.mx-pager{position:absolute;left:50%;bottom:4%;transform:translateX(-50%);z-index:6;display:flex;gap:6px}
.mx-pager i{position:relative;display:block;width:26px;height:2px;background:rgba(255,255,255,.22);overflow:hidden;border-radius:1px}
.mx-pager b{position:absolute;inset:0;width:0;background:#fff}

/* pontos de melhoria, no estilo dos pontos de foco da câmera */
.mx-af{position:absolute;z-index:3;opacity:0;transform:scale(1.18);transition:opacity .35s,transform .55s cubic-bezier(.2,.8,.2,1)}
.mx-af i{position:absolute;width:10px;height:10px;border:0 solid rgba(255,255,255,.92);transition:border-color .35s}
.mx-af i:nth-child(1){left:0;top:0;border-top-width:1.5px;border-left-width:1.5px}
.mx-af i:nth-child(2){right:0;top:0;border-top-width:1.5px;border-right-width:1.5px}
.mx-af i:nth-child(3){left:0;bottom:0;border-bottom-width:1.5px;border-left-width:1.5px}
.mx-af i:nth-child(4){right:0;bottom:0;border-bottom-width:1.5px;border-right-width:1.5px}
.mx-af b{position:absolute;left:0;bottom:calc(100% + 6px);display:flex;align-items:center;gap:5px;font:700 8.5px var(--font);letter-spacing:1.7px;line-height:1.4;color:#fff;white-space:nowrap;background:rgba(8,12,15,.45);border:1px solid rgba(255,255,255,.14);padding:3px 7px;border-radius:2px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);transition:color .35s,border-color .35s}
.mx-af.is-below b{bottom:auto;top:calc(100% + 6px)}
.mx-af b svg{width:0;height:9px;fill:none;stroke:currentColor;stroke-width:2.2;transition:width .3s}
.mx-af.is-in{opacity:1;transform:scale(1)}
.mx-af.is-ok i{border-color:var(--cyan)}
.mx-af.is-ok b{color:var(--cyan);border-color:rgba(120,220,255,.45)}
.mx-af.is-ok b svg{width:9px}
.mx-af.is-ok{animation:mx-af-ok .5s ease}
@keyframes mx-af-ok{35%{filter:brightness(1.8)}}
.mx-af.is-out{opacity:0;transition:opacity .7s}

/* máscaras da edição localizada */
.mx-lin{position:absolute;left:0;right:0;z-index:2;opacity:0;transition:opacity .5s;pointer-events:none}
.mx-lin::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(120,220,255,.2),rgba(120,220,255,0))}
.mx-lin i{position:absolute;left:0;right:0;height:0;border-top:1px dashed rgba(255,255,255,.6)}
.mx-lin i:nth-child(1){top:0}
.mx-lin i:nth-child(2){top:50%;border-top-style:solid;border-top-color:rgba(255,255,255,.8)}
.mx-lin i:nth-child(3){top:100%}
.mx-lin b,.mx-rad b{position:absolute;top:50%;width:9px;height:9px;margin:-4.5px;border-radius:50%;background:#fff;box-shadow:0 0 0 2px rgba(8,12,15,.45)}
.mx-lin b{left:44%}
.mx-rad b{left:50%}
.mx-rad{position:absolute;z-index:2;border-radius:50%;border:1px solid rgba(255,255,255,.8);background:radial-gradient(closest-side,rgba(120,220,255,.22),rgba(120,220,255,.08) 70%,transparent);opacity:0;transform:scale(.92);transition:opacity .5s,transform .7s cubic-bezier(.2,.8,.2,1);pointer-events:none}
.mx-rad i{position:absolute;width:5px;height:5px;background:#fff;margin:-2.5px}
.mx-rad i:nth-of-type(1){left:50%;top:0}
.mx-rad i:nth-of-type(2){left:100%;top:50%}
.mx-rad i:nth-of-type(3){left:50%;top:100%}
.mx-rad i:nth-of-type(4){left:0;top:50%}
.mx-stage.is-masking .mx-lin{opacity:1}
.mx-stage.is-masking-2 .mx-rad{opacity:1;transform:scale(1)}

/* mapa de vidro sobre a foto */
.mx-map{position:absolute;left:62.8%;top:3.6%;width:35%;aspect-ratio:4/3;z-index:5;border-radius:4px;overflow:hidden;background:rgba(7,11,14,.62);border:1px solid rgba(255,255,255,.14);backdrop-filter:blur(14px) saturate(115%);-webkit-backdrop-filter:blur(14px) saturate(115%);box-shadow:0 20px 50px rgba(0,0,0,.35);opacity:0;transform:translateY(8px);transition:opacity .8s,transform .9s cubic-bezier(.2,.8,.2,1),top 1s cubic-bezier(.65,0,.25,1),left 1s cubic-bezier(.65,0,.25,1)}
.mx-map.is-br{top:54.4%}
.mx-map.is-bl{top:54.4%;left:2.2%}
.mx-demo.is-on .mx-map{opacity:1;transform:none}
.mx-map canvas,.mx-map svg{position:absolute;inset:0;width:100%;height:100%;display:block}
.mx-map svg{transition:opacity .3s}
.mx-demo.is-swapping .mx-map svg{opacity:0}
.mx-map::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(ellipse at 50% 55%,transparent 52%,rgba(7,11,14,.75) 100%)}
.mx-mt{position:absolute;z-index:2;font-size:7.5px;font-weight:700;letter-spacing:1.9px;line-height:1.4;color:rgba(244,245,245,.82)}
.mx-tl{left:12px;top:10px}
.mx-tr{right:12px;top:10px;color:rgba(203,222,235,.5);font-variant-numeric:tabular-nums}
.mx-bl{left:12px;bottom:9px;font-weight:600;letter-spacing:1.3px;color:rgba(203,222,235,.38)}
.mx-br{right:12px;bottom:9px;font-weight:600;letter-spacing:1.3px;color:rgba(203,222,235,.38);font-variant-numeric:tabular-nums}
.mx-map .mx-plan{fill:none;stroke:rgba(244,245,245,.26);stroke-width:1;stroke-dasharray:1 4;stroke-linecap:round}
.mx-map .mx-done{fill:none;stroke:var(--cyan);stroke-width:1.4;stroke-dasharray:5 4;stroke-linecap:round}
.mx-map .mx-wp{fill:rgba(7,11,14,.9);stroke:rgba(244,245,245,.5);stroke-width:1;transition:fill .35s,stroke .35s}
.mx-map .mx-wp.is-hit{fill:var(--cyan);stroke:var(--cyan)}
.mx-map .mx-lbl{font:700 7.5px var(--font);letter-spacing:1.5px;fill:rgba(244,245,245,.5);transition:fill .35s}
.mx-map .mx-lbl.is-hit{fill:rgba(244,245,245,.92)}
.mx-map .mx-end{fill:none;stroke:rgba(244,245,245,.55);stroke-width:1;transition:stroke .35s}
.mx-map .mx-end.is-hit{stroke:var(--cyan)}
.mx-map .mx-arrow{fill:#fff;stroke:rgba(120,220,255,.95);stroke-width:.9;stroke-linejoin:round}

/* provas dos alunos */
.mx-proofs{display:grid;grid-template-columns:repeat(3,1fr);margin-top:44px;border-top:1px solid var(--line)}
.mx-proof{padding:26px 28px 4px 0;margin:0}
.mx-proof + .mx-proof{padding-left:28px;border-left:1px solid var(--line)}
.mx-proof figcaption{font-size:10px;font-weight:700;letter-spacing:2px;color:var(--cyan)}
.mx-proof blockquote{margin:12px 0 0;font-family:var(--display);font-size:clamp(17px,1.7vw,21px);font-weight:600;letter-spacing:-.5px;line-height:1.3}
.mx-proof cite{display:block;margin-top:12px;color:var(--muted);font-size:12px;font-style:normal}

@media(max-width:640px){
  .mx-map,.mx-map.is-br,.mx-map.is-bl{position:relative;left:auto;top:auto;width:100%;aspect-ratio:16/9;margin-top:10px}
  .mx-chip{font-size:8.5px;padding:5px 8px}
  .mx-af i{width:8px;height:8px}
  .mx-af b{font-size:7.5px;padding:2px 6px}
  .mx-proofs{grid-template-columns:1fr;margin-top:36px}
  .mx-proof,.mx-proof + .mx-proof{padding:22px 0;border-left:0}
  .mx-proof + .mx-proof{border-top:1px solid var(--line)}
}
@media(prefers-reduced-motion:reduce){
  .mx-scene,.mx-map,.mx-af,.mx-lin,.mx-rad,.mx-stage{transition:none}
  .mx-af.is-ok{animation:none}
}