/* ---------------------------------------------------------
   showcase.css — janela de apresentação (streamers do momento)
   Usa as variáveis de cor do styles.css do site (--bg, --text,
   --yellow...). Se alguma faltar, vale o valor de reserva.
   --------------------------------------------------------- */

.showcase{
  background:var(--bg,#0b0c10);
  padding:56px 0 0;
}

.showcase-head{
  width:min(1180px, calc(100% - 64px));
  margin:0 auto 28px;
}

.showcase-title{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  font-size:clamp(2rem, 5vw, 3.6rem);
  line-height:1;
  letter-spacing:0.5px;
  max-width:15em;
  text-wrap:balance;
  color:var(--text,#f5f3ee);
}

/* ---------- PALCO (16:9, de ponta a ponta) ---------- */

.showcase-stage{
  position:relative;
  width:100%;
  aspect-ratio:16 / 9;
  background:#000;
  overflow:hidden;
  isolation:isolate;
  color:var(--text,#f5f3ee);
}

.showcase-slides{ position:absolute; inset:0; touch-action:pan-y; }

.showcase-slide{
  position:absolute;
  inset:0;
  opacity:0;
  transition:opacity .7s ease;
}

.showcase-slide.is-active{ opacity:1; z-index:1; }
.showcase-slide.is-leaving{ z-index:0; }

.showcase-slide img,
.showcase-slide video{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* deslize bem leve só nas fotos, na duração do slide */
.showcase-slide.is-active img,
.showcase-slide.is-leaving img{
  animation:showcase-drift var(--dur, 6500ms) linear both;
}

@keyframes showcase-drift{
  from{ transform:scale(1); }
  to{ transform:scale(1.06); }
}

/* escurece a base pra legenda ficar legível */
.showcase-scrim{
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:linear-gradient(to top,
    rgba(11,12,16,.92) 0%,
    rgba(11,12,16,.55) 26%,
    rgba(11,12,16,0) 58%);
}

/* faixa de cor que cruza a tela na troca, igual canal de TV */
.showcase-sweep{
  position:absolute;
  top:0; bottom:0; left:0;
  width:14%;
  z-index:3;
  pointer-events:none;
  opacity:0;
  background:var(--gradient, linear-gradient(90deg,#ff2e63,#ffd23f,#00d9c0,#7b5cff));
  clip-path:polygon(14% 0, 100% 0, 86% 100%, 0 100%);
  transform:translateX(-110%);
}

.showcase-sweep.run{ animation:showcase-sweep .9s cubic-bezier(.65,0,.25,1); }

@keyframes showcase-sweep{
  0%{ opacity:.95; transform:translateX(-110%); }
  100%{ opacity:.95; transform:translateX(780%); }
}

/* ---------- LEGENDA ---------- */

.showcase-caption{
  position:absolute;
  z-index:4;
  left:clamp(20px, 4vw, 56px);
  right:clamp(20px, 4vw, 56px);
  bottom:clamp(44px, 6vw, 66px);
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  flex-wrap:wrap;
  pointer-events:none;
}

.showcase-caption > *{ pointer-events:auto; }

.showcase-caption.is-in .showcase-name,
.showcase-caption.is-in .showcase-meta{
  animation:showcase-caption-in .6s ease both;
}

.showcase-caption.is-in .showcase-meta{ animation-delay:.08s; }

@keyframes showcase-caption-in{
  from{ opacity:0; transform:translateY(10px); }
  to{ opacity:1; transform:translateY(0); }
}

.showcase-name{
  font-family:'Anton', sans-serif;
  text-transform:uppercase;
  font-size:clamp(1.8rem, 4.2vw, 3.2rem);
  line-height:1;
  letter-spacing:0.5px;
}

.showcase-meta{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:10px;
  font-size:.98rem;
  color:rgba(245,243,238,.88);
}

.showcase-handle{ font-weight:600; }

.showcase-platform{
  border:1px solid rgba(245,243,238,.4);
  border-radius:999px;
  padding:3px 11px;
  font-size:.78rem;
}

.showcase-link{
  background:var(--yellow,#ffd23f);
  color:#111;
  font-weight:600;
  font-size:.92rem;
  padding:11px 22px;
  border-radius:999px;
  text-decoration:none;
  transition:transform .15s ease;
}

.showcase-link:hover{ transform:translateY(-2px); }
.showcase-link[hidden]{ display:none; }

/* ---------- BARRAS DE PROGRESSO (também navegam) ---------- */

.showcase-progress{
  position:absolute;
  z-index:5;
  left:clamp(20px, 4vw, 56px);
  right:clamp(20px, 4vw, 56px);
  bottom:14px;
  display:flex;
  gap:6px;
}

.showcase-seg{
  position:relative;
  flex:1;
  height:20px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}

.showcase-seg::before,
.showcase-seg i{
  content:"";
  position:absolute;
  left:0;
  top:8px;
  height:3px;
  border-radius:2px;
}

.showcase-seg::before{ right:0; background:rgba(245,243,238,.28); }

.showcase-seg i{
  width:100%;
  background:var(--yellow,#ffd23f);
  transform:scaleX(0);
  transform-origin:left;
}

.showcase-seg.is-done i{ transform:scaleX(1); }
.showcase-seg[hidden]{ display:none; }

/* ---------- BOTÕES ---------- */

.showcase-btn{
  position:absolute;
  z-index:6;
  display:grid;
  place-items:center;
  width:48px;
  height:48px;
  border-radius:50%;
  border:1px solid rgba(245,243,238,.28);
  background:rgba(11,12,16,.55);
  backdrop-filter:blur(6px);
  color:var(--text,#f5f3ee);
  cursor:pointer;
  opacity:0;
  transition:opacity .2s ease, background .15s ease;
}

.showcase-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round; }
.showcase-btn:hover{ background:rgba(11,12,16,.8); }

.showcase-stage:hover .showcase-btn,
.showcase-stage:focus-within .showcase-btn{ opacity:1; }

@media (hover:none){
  .showcase-btn{ opacity:.85; }
}

.showcase-prev{ left:16px; top:50%; transform:translateY(-50%); }
.showcase-next{ right:16px; top:50%; transform:translateY(-50%); }
.showcase-pause{ top:16px; right:16px; width:40px; height:40px; }

.showcase-pause .i-play{ display:none; }
.showcase-stage.is-paused .showcase-pause .i-play{ display:block; }
.showcase-stage.is-paused .showcase-pause .i-pause{ display:none; }

.showcase.is-single .showcase-prev,
.showcase.is-single .showcase-next,
.showcase.is-single .showcase-pause,
.showcase.is-single .showcase-progress{ display:none; }

.showcase-btn:focus-visible,
.showcase-seg:focus-visible,
.showcase-link:focus-visible{
  outline:2px solid var(--cyan,#00d9c0);
  outline-offset:2px;
}

/* ---------- CELULAR ---------- */

@media (max-width:640px){
  .showcase{ padding-top:40px; }
  .showcase-head{ width:calc(100% - 40px); }

  /* no celular troca-se arrastando o dedo ou tocando nas barras */
  .showcase-prev,
  .showcase-next{ display:none; }
  .showcase-pause{ top:10px; right:10px; width:36px; height:36px; opacity:.85; }

  .showcase-scrim{
    background:linear-gradient(to top,
      rgba(11,12,16,.95) 0%,
      rgba(11,12,16,.7) 38%,
      rgba(11,12,16,0) 70%);
  }
  .showcase-caption{ bottom:30px; gap:10px; }
  .showcase-name{ font-size:1.25rem; }
  .showcase-meta{ margin-top:6px; font-size:.8rem; gap:8px; }
  .showcase-platform{ font-size:.7rem; padding:2px 8px; }
  .showcase-link{ padding:8px 14px; font-size:.8rem; }
  .showcase-progress{ bottom:6px; }
}

/* ---------- MOVIMENTO REDUZIDO ---------- */

@media (prefers-reduced-motion: reduce){
  .showcase-slide{ transition:none; }
  .showcase-slide.is-active img,
  .showcase-slide.is-leaving img{ animation:none; }
  .showcase-sweep.run{ animation:none; }
  .showcase-caption.is-in .showcase-name,
  .showcase-caption.is-in .showcase-meta{ animation:none; }
}