/* ==========================================================
   PH MARX — Hero da home: vitrine animada (Central de Mídia)
   Parede de fotos em colunas infinitas, inclinada, com destaque
   rotativo. Só transform/opacity; pausa fora da tela.
   ========================================================== */
.hero--vitrine{--vt-gap:12px;--vt-ease:cubic-bezier(.32,.72,0,1);min-height:100svh;align-items:flex-end}
.hero--vitrine .hero-bg{inset:-8% 0}
.hero--vitrine .hero-bg::after{
  z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(0,0,0,.72) 0%,rgba(0,0,0,.18) 20%,rgba(0,0,0,.42) 42%,rgba(0,0,0,.93) 63%,#000 100%)
}
.hero--vitrine .wrap{pointer-events:none}
.hero--vitrine .wrap > *{pointer-events:auto}

/* ---------- parede ---------- */
.vt{position:absolute;inset:0;overflow:hidden;z-index:1}
.vt-zoom{position:absolute;inset:0}
.vt-wall{
  position:absolute;left:50%;top:50%;width:150%;height:150%;
  display:grid;grid-template-columns:repeat(var(--vt-cols,3),1fr);gap:var(--vt-gap);
  transform:translate(-50%,-50%) rotate(-8deg);
  transition:opacity 1.4s var(--vt-ease)
}
.vt-js .vt-wall{opacity:0}
.vt.is-in .vt-wall{opacity:1}
.vt-col{position:relative;overflow:visible;transform:translate3d(calc(var(--mx,0)*var(--k,10)*1px),calc(var(--my,0)*var(--k,10)*1px),0);transition:transform .9s var(--vt-ease)}
.vt-track{display:flex;flex-direction:column;will-change:transform;animation:vtUp var(--dur,60s) linear infinite}
.vt-col:nth-child(even) .vt-track{animation-name:vtDown}
.vt.is-off .vt-track,.vt:not(.is-in) .vt-track{animation-play-state:paused}
@keyframes vtUp{from{transform:translate3d(0,0,0)}to{transform:translate3d(0,-50%,0)}}
@keyframes vtDown{from{transform:translate3d(0,-50%,0)}to{transform:translate3d(0,0,0)}}

.vt-tile{
  position:relative;display:block;margin-bottom:var(--vt-gap);border-radius:16px;overflow:hidden;
  background:#0d0d0e;outline:1px solid rgba(255,255,255,.07);outline-offset:-1px;
  pointer-events:none;-webkit-tap-highlight-color:transparent
}
.vt .vt-tile img{
  width:100%;height:auto;display:block;opacity:1;will-change:auto;
  filter:brightness(.7) saturate(.85);transform:scale(1.02);
  transition:filter .9s var(--vt-ease),transform 1.2s var(--vt-ease)
}
/* entrada: cada foto sobe e acende em cascata */
.vt-js .vt-tile{opacity:0;transform:translateY(46px) scale(.96)}
.vt-tile{transition:opacity 1s var(--vt-ease),transform 1.2s var(--vt-ease),box-shadow .8s var(--vt-ease);transition-delay:calc(var(--i,0)*70ms)}
.vt.is-in .vt-tile{opacity:1;transform:none}
.vt.is-live .vt-tile{transition-delay:0s}

/* destaque rotativo */
.vt .vt-tile.is-hot img{filter:brightness(1) saturate(1.06);transform:scale(1.06)}
.vt-tile.is-hot{box-shadow:0 0 0 1px rgba(94,155,255,.75),0 24px 70px -20px rgba(94,155,255,.55);transition-delay:0s}
.vt-cat{
  position:absolute;left:10px;bottom:10px;z-index:2;display:inline-flex;align-items:center;gap:7px;
  padding:6px 11px 6px 9px;border-radius:999px;background:rgba(0,0,0,.72);border:1px solid rgba(255,255,255,.14);
  font-size:.62rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;color:#fff;
  opacity:0;transform:translateY(8px);transition:opacity .6s var(--vt-ease),transform .7s var(--vt-ease)
}
.vt-cat::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--blue)}
.vt-tile.is-hot .vt-cat{opacity:1;transform:none}

/* ---------- "na vitrine agora" ---------- */
.vt-agora{
  display:inline-flex;align-items:center;gap:10px;margin-top:18px;min-height:40px;padding:0 14px 0 12px;border-radius:999px;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);color:var(--silver);font-size:.78rem;
  text-decoration:none;transition:border-color .4s var(--vt-ease)
}
.vt-agora:hover{border-color:rgba(94,155,255,.6)}
.vt-agora i{width:7px;height:7px;border-radius:50%;background:#ff4d4d;box-shadow:0 0 10px #ff4d4d;animation:vtPisca 1.6s ease-in-out infinite}
.vt-agora b{color:#fff;font-weight:700;display:inline-block;transition:opacity .35s var(--vt-ease),transform .45s var(--vt-ease)}
.vt-agora b.troca{opacity:0;transform:translateY(6px)}
.vt-agora em{font-style:normal;color:var(--blue)}
@keyframes vtPisca{50%{opacity:.35}}

/* ---------- desktop: parede à direita, inclinada em 3D, reage ao mouse ---------- */
@media (min-width:980px){
  .hero--vitrine{min-height:min(100svh,1000px);align-items:center;padding-top:120px;padding-bottom:60px}
  .hero--vitrine .wrap > *{max-width:min(600px,44vw)}
  .hero--vitrine .hero-bg::after{
    background:
      linear-gradient(90deg,#000 0%,rgba(0,0,0,.92) 32%,rgba(0,0,0,.35) 50%,rgba(0,0,0,0) 66%,rgba(0,0,0,.2) 100%),
      linear-gradient(180deg,rgba(0,0,0,.75) 0%,transparent 22%,transparent 78%,#000 100%)
  }
  .hero--vitrine .vt{left:40%;right:0}
  .vt-wall{width:128%;height:175%;transform:translate(-50%,-50%) perspective(2200px) rotateX(10deg) rotateY(-9deg) rotateZ(-6deg)}
  .vt-tile{pointer-events:auto;cursor:pointer}
  .vt .vt-tile:hover img{filter:brightness(1) saturate(1.06);transform:scale(1.06)}
  .vt-tile:hover .vt-cat{opacity:1;transform:none}
  .vt-col:hover .vt-track{animation-play-state:paused}
}
@media (min-width:1500px){.hero--vitrine .vt{left:42%}}

/* ---------- celular: parede inteira atrás do texto ---------- */
@media (max-width:979px){
  .hero--vitrine{padding-top:96px;padding-bottom:calc(86px + env(safe-area-inset-bottom))}
  .vt-agora{display:none}
  .hero--vitrine .hero-bg::after{background:linear-gradient(180deg,rgba(0,0,0,.6) 0%,rgba(0,0,0,.05) 16%,rgba(0,0,0,.2) 34%,rgba(0,0,0,.9) 54%,#000 100%)}
  .vt-wall{--vt-gap:8px;width:150%;height:140%}
  .vt-tile{border-radius:12px}
  .vt-cat{font-size:.56rem;left:7px;bottom:7px;padding:5px 9px 5px 8px}
}

@media (prefers-reduced-motion:reduce){
  .vt-track{animation:none}
  .vt-tile,.vt-wall{transition:none}
  .vt-agora i{animation:none}
}