/* ═══════════════════════════════════════════════
   muhpan — CSS da apresentação
   Extraído de apresentacoes/muhpan/index.html
   Ordem dos blocos preservada (cascata idêntica)
   ═══════════════════════════════════════════════ */

/* ═══ bloco extraído de index.html (era <style id="vt-chrome-perf">) ═══ */
/* Apresentações: nav com cartão branco sem backdrop-blur (desempenho no scroll
   sobre imagens grandes) e visível desde o início. */
nav.nav-scrolled{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(255,255,255,.98)}

/* ═══ bloco extraído de index.html ═══ */
:root{
  --oliva:#b8ba27;
  --oliva-claro:#cdcf55;
  --oliva-escuro:#585a29;
  --carvao:#16160f;
  --branco:#ffffff;
  --papel:#f4f3e6;
  --tinta:#1d1d12;
  --tinta-suave:#55552f;
  --ease:cubic-bezier(.22,.8,.24,1);
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Archivo',sans-serif;
  color:var(--tinta);
  background:var(--papel);
  overflow-x:hidden;
}
::selection{background:var(--carvao);color:var(--oliva)}

/* ---------- deck ---------- */
main{height:100dvh;overflow-y:auto;scroll-snap-type:none}
section.slide{
  min-height:100dvh;scroll-snap-align:start;
  position:relative;display:flex;overflow:hidden;
}

/* ---------- revelação ---------- */
.rv{opacity:0;transform:translateY(34px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.slide.on .rv{opacity:1;transform:none}
.slide.on .rv.d1{transition-delay:.12s}
.slide.on .rv.d2{transition-delay:.24s}
.slide.on .rv.d3{transition-delay:.38s}
.slide.on .rv.d4{transition-delay:.52s}

.img-reveal{
  overflow:hidden;clip-path:inset(0 100% 0 0);
  transition:clip-path 1.2s var(--ease);
}
.slide.on .img-reveal{clip-path:inset(0 0 0 0)}
.slide.on .img-reveal.d1{transition-delay:.15s}
.slide.on .img-reveal.d2{transition-delay:.3s}
.img-reveal img{display:block;transform:scale(1.05);transition:transform 1.6s var(--ease)}
.slide.on .img-reveal img{transform:scale(1)}

/* ---------- elementos gráficos oficiais (raster com alpha) ---------- */
.elemento{display:block;image-rendering:auto}
.orn-wrap{position:absolute;pointer-events:none;will-change:transform}
.orn{
  display:block;opacity:.9;
  animation:flutuar-orn 7s ease-in-out infinite;
}
.orn.o2{animation-duration:9s;animation-delay:1.2s}
.orn.o3{animation-duration:8s;animation-delay:.6s}
@keyframes flutuar-orn{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-14px) rotate(-2deg)}}

/* faixa-marquee de grafismos */
.friso{overflow:hidden;white-space:nowrap;pointer-events:none;user-select:none}
.friso .trilho{display:inline-flex;align-items:center;gap:3.4rem;animation:rolar 30s linear infinite;padding-right:3.4rem}
.friso img{height:46px;width:auto;display:block}
@keyframes rolar{to{transform:translateX(-50%)}}

/* ---------- rótulos ---------- */
.eyebrow{
  font-size:.72rem;letter-spacing:.3em;text-transform:uppercase;
  font-weight:700;display:flex;align-items:center;gap:14px;color:var(--tinta);
}
.eyebrow::before{content:"";width:34px;height:3px;background:var(--carvao);flex:none}
.eyebrow.claro{color:var(--oliva)}
.eyebrow.claro::before{background:var(--oliva)}
h1.rupestre, h2.rupestre{
  font-family:'Amatic SC',cursive;font-weight:700;
  letter-spacing:.03em;line-height:.95;
}
h2.rupestre{font-size:clamp(2.6rem,5.4vw,4.4rem);margin-top:.7rem}
.cab{
  display:flex;justify-content:space-between;align-items:flex-end;gap:2rem;flex-wrap:wrap;
  max-width:1400px;width:100%;margin:0 auto 3.5vh;
}
.cab p{max-width:30rem;font-size:.94rem;line-height:1.65;color:var(--tinta-suave)}

/* ---------- painéis ---------- */
.painel{
  border-radius:12px;overflow:hidden;
  box-shadow:0 34px 80px -28px rgba(22,22,15,.5);
  background:#fff;display:flex;justify-content:center;
  cursor:zoom-in;position:relative;
}
.painel img{width:auto;max-width:100%;max-height:62vh;display:block;object-fit:contain}
.painel::after{
  content:"⛶ ampliar";position:absolute;right:12px;bottom:10px;
  font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700;
  background:var(--carvao);color:var(--oliva);padding:.4rem .7rem;border-radius:100px;
  opacity:0;transition:opacity .3s;
}
.painel:hover::after{opacity:1}

/* ---------- 01 capa ---------- */
#s1{background:var(--oliva);align-items:center;justify-content:center;flex-direction:column}
.logo-capa{
  width:min(480px,60vw);display:block;margin:0 auto 2.6vh;
  filter:drop-shadow(0 14px 30px rgba(22,22,15,.25));
}
.capa{position:relative;z-index:2;text-align:center;padding:0 6vw;max-width:1100px}
.capa .eyebrow{justify-content:center}
.capa .eyebrow::after{content:"";width:34px;height:3px;background:var(--carvao)}
.capa .comp-wrap{display:block;will-change:transform}
.capa .composicao{width:min(360px,52vw);display:block;margin:2.2vh auto 0}
h1.rupestre{
  font-size:clamp(2.8rem,7.2vw,5.4rem);color:var(--branco);
  text-shadow:0 2px 0 rgba(22,22,15,.18);
  margin:1.2vh 0 1.6vh;
}
h1.rupestre .linha{display:block;overflow:hidden}
h1.rupestre .linha i{font-style:normal;display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease)}
.slide.on h1.rupestre .linha:nth-child(1) i{transform:none;transition-delay:.15s}
.slide.on h1.rupestre .linha:nth-child(2) i{transform:none;transition-delay:.3s}
.capa .sub{
  font-weight:600;text-transform:uppercase;letter-spacing:.18em;
  font-size:clamp(.78rem,1.4vw,.95rem);color:var(--carvao);
}
.capa .meta{
  margin-top:2vh;display:flex;gap:2.2rem;justify-content:center;flex-wrap:wrap;
  font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;color:var(--tinta);opacity:.7;
}
.scroll-hint{
  position:absolute;bottom:18px;left:50%;transform:translateX(-50%);
  font-size:.64rem;letter-spacing:.3em;text-transform:uppercase;color:var(--carvao);opacity:.75;
  animation:flutua 2.6s ease-in-out infinite;z-index:2;
}
@keyframes flutua{0%,100%{transform:translate(-50%,0)}50%{transform:translate(-50%,8px)}}

/* ---------- 02 o projeto ---------- */
#s2{background:var(--papel);align-items:center}
#s2 .duas{
  display:grid;grid-template-columns:1fr 1fr;gap:5vw;align-items:center;
  max-width:1360px;width:100%;margin:0 auto;padding:7vh 5vw;
}
#s2 .txt p{font-size:1rem;line-height:1.75;color:var(--tinta-suave);max-width:31rem;margin-top:1.3rem}
#s2 .fatos{margin-top:2.2rem;display:grid;grid-template-columns:1fr 1fr;gap:1.1rem 1.6rem;max-width:30rem}
.fato small{display:block;font-size:.62rem;letter-spacing:.22em;text-transform:uppercase;color:var(--oliva-escuro);font-weight:800;margin-bottom:.3rem}
.fato span{font-size:.9rem;font-weight:500}
#s2 .painel img{max-height:78vh}

/* ---------- 03 as formas ---------- */
#s3{background:var(--carvao);color:var(--branco);flex-direction:column;justify-content:center;padding:7vh 5vw}
#s3 .cab p{color:rgba(255,255,255,.9)}
#s3 h2{color:var(--branco)}
#s3 h2 em{font-style:normal;color:var(--oliva)}
.formas{
  display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;
  max-width:1300px;width:100%;margin:0 auto;
}
.formas figure{text-align:center}
.formas .quadro{
  aspect-ratio:1;background:var(--oliva);border-radius:14px;
  display:flex;align-items:center;justify-content:center;padding:13%;
  box-shadow:0 22px 50px -22px rgba(0,0,0,.7);
  transition:transform .4s var(--ease),box-shadow .4s var(--ease);
}
.formas figure:hover .quadro{transform:translateY(-6px);box-shadow:0 30px 60px -22px rgba(184,186,39,.35)}
.formas .elemento{max-width:100%;max-height:100%;object-fit:contain}
.formas figcaption{
  margin-top:1rem;font-family:'Amatic SC',cursive;font-weight:700;
  font-size:1.8rem;letter-spacing:.06em;color:#fff;
}

/* ---------- 04 textura & paleta ---------- */
#s4{background:var(--oliva);flex-direction:column;justify-content:center;padding:7vh 5vw}
#s4 .cab p{color:var(--carvao)}
#s4 .faixa{
  position:relative;z-index:1;
  max-width:1400px;width:100%;margin:0 auto 3.5vh;border-radius:12px;overflow:hidden;
  box-shadow:0 30px 70px -26px rgba(22,22,15,.55);cursor:zoom-in;
}
#s4 .faixa img{width:100%;display:block}
#s4 .baixo{
  display:grid;grid-template-columns:1.1fr .9fr;gap:4vw;align-items:center;
  max-width:1400px;width:100%;margin:0 auto;
}
#s4 .baixo p{font-size:.98rem;line-height:1.7;color:var(--tinta);opacity:.85;max-width:32rem;margin-top:1.2rem}
.swatches{display:flex;gap:.9rem;flex-wrap:wrap;margin-top:1.8rem}
.sw{
  width:96px;aspect-ratio:1/1.15;border-radius:10px;position:relative;
  transform:translateY(30px);opacity:0;transition:transform .8s var(--ease),opacity .8s var(--ease);
  border:1.5px solid rgba(22,22,15,.25);
}
.slide.on .sw{transform:none;opacity:1}
.sw span{
  position:absolute;left:8px;bottom:8px;font-size:.6rem;letter-spacing:.06em;font-weight:700;
  background:rgba(22,22,15,.65);color:#fff;padding:.2rem .4rem;border-radius:6px;
}
#s4 .selo{
  border-radius:12px;overflow:hidden;box-shadow:0 24px 60px -22px rgba(22,22,15,.5);
  background:#fff;cursor:zoom-in;max-width:340px;justify-self:end;
  position:relative;z-index:3;
  align-self:start;
  margin-right:clamp(80px,10vw,150px);
  margin-top:-14vh; /* sobre a imagem principal, como foto de perfil */
  border:6px solid #fff;
  box-shadow:0 30px 70px -18px rgba(22,22,15,.6);
}
#s4 .selo img{width:100%;display:block}

/* ---------- 05 o museu ---------- */
#s5{background:var(--papel);align-items:center}
#s5 .duas{
  display:grid;grid-template-columns:.9fr 1.1fr;gap:5vw;align-items:center;
  max-width:1300px;width:100%;margin:0 auto;padding:7vh 5vw;
}
#s5 .txt p{font-size:1rem;line-height:1.75;color:var(--tinta-suave);max-width:30rem;margin-top:1.3rem}
#s5 .painel img{max-height:58vh;width:100%;object-fit:cover}
.logo-muhpan{width:min(280px,60vw);display:block;margin-top:2.6rem;padding-top:2rem;border-top:1px solid rgba(29,29,18,.15)}

/* ---------- 06 encerramento ---------- */
#s6{background:var(--carvao);color:var(--branco);align-items:center;justify-content:center;text-align:center}
#s6 .friso{position:absolute;left:0;right:0;top:6vh;opacity:.55}
.fim{position:relative;z-index:2;padding:0 6vw;max-width:1080px}
.fim .eyebrow{justify-content:center}
.fim .eyebrow::after{content:"";width:34px;height:3px;background:var(--oliva)}
.fim h2{
  font-family:'Amatic SC',cursive;font-weight:700;
  font-size:clamp(2.6rem,6vw,5rem);line-height:1;margin:2.4vh 0 3.5vh;
}
.fim h2 em{font-style:normal;color:var(--oliva)}
.creditos{
  display:grid;grid-template-columns:repeat(4,1fr);gap:1.8rem;
  padding-top:2.4rem;border-top:1px solid rgba(255,255,255,.16);text-align:left;
}
.creditos small{display:block;font-size:.6rem;letter-spacing:.24em;text-transform:uppercase;color:var(--oliva);font-weight:800;margin-bottom:.5rem}
.creditos span{font-size:.84rem;line-height:1.5;opacity:.85}

/* ---------- lightbox ---------- */
#lightbox{
  position:fixed;inset:0;background:rgba(22,22,15,.95);z-index:100;
  display:none;align-items:center;justify-content:center;padding:3vh 3vw;cursor:zoom-out;
}
#lightbox.aberto{display:flex}
#lightbox img{max-width:96vw;max-height:92vh;object-fit:contain;border-radius:8px}
#lightbox .fechar{
  position:absolute;top:18px;right:22px;
  font-size:.72rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700;
  color:var(--oliva);background:none;border:1.5px solid var(--oliva);border-radius:100px;
  padding:.5rem 1rem;cursor:pointer;
}

/* ---------- navegação ---------- */
.dots{position:fixed;right:22px;top:50%;transform:translateY(-50%);display:flex;flex-direction:column;gap:12px;z-index:50;color:var(--carvao)}
.dots.claro{color:var(--branco)}
.dots button{width:9px;height:9px;border-radius:50%;border:none;cursor:pointer;background:currentColor;opacity:.3;transition:.3s var(--ease);padding:0}
.dots button.ativo{opacity:1;transform:scale(1.5)}
.contador{position:fixed;left:26px;bottom:22px;z-index:50;font-size:.72rem;letter-spacing:.24em;font-weight:700;color:var(--carvao);transition:color .4s}
.contador.claro{color:var(--branco)}
.barra{position:fixed;left:0;top:0;height:3px;width:0;background:var(--carvao);z-index:60;transition:width .25s linear}

/* ---------- responsivo ---------- */
@media (max-width:900px){
  section.slide{min-height:100dvh;height:auto}
  main{scroll-snap-type:none}
  #s2 .duas,#s5 .duas{grid-template-columns:1fr;gap:2.6rem;padding:9vh 7vw}
  .formas{grid-template-columns:repeat(2,1fr);gap:1.4rem}
  #s4 .baixo{grid-template-columns:1fr;gap:2.4rem}
  #s4 .selo{justify-self:start}
  .creditos{grid-template-columns:1fr 1fr;gap:1.4rem}
  .dots{display:none}
  .painel img{max-height:none!important;width:100%!important}
  #s1 .friso{bottom:7vh}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .rv,.img-reveal,.sw,h1.rupestre .linha i{opacity:1!important;transform:none!important;clip-path:none!important}
  .orn{animation:none!important}
}