/* ======================================================
   CAMADA DE FOTOS
====================================================== */

.photo-layer{
  min-height:100vh;
  background:#000;

  display:flex;
  align-items:center;
  justify-content:center;

  overflow:hidden;
}


/* ======================================================
   CONTAINER
====================================================== */

.photo-container{
  width:100%;
  max-width:1400px;
  margin:auto;

  overflow:hidden;
}


/* ======================================================
   CARROSSEL
====================================================== */

.carousel{
  width:100%;
  position:relative;
}


/* ======================================================
   TRACK (linha das imagens)
====================================================== */

.carousel-track{

  display:flex;
  align-items:center;

  gap:50px;

  transition:transform .6s cubic-bezier(.22,.61,.36,1);

}


/* ======================================================
   SLIDES
====================================================== */

.carousel-slide{

  flex:0 0 auto;

  width:420px;
  height:60vh;

  border-radius:20px;
  overflow:hidden;

  opacity:.5;
  transform:scale(.8);

  transition:
  transform .6s cubic-bezier(.22,.61,.36,1),
  opacity .6s ease;

}


/* ======================================================
   SLIDE ATIVO (CENTRAL)
====================================================== */

.carousel-slide.is-active{

  opacity:1;
  transform:scale(1);

}


/* ======================================================
   IMAGEM
====================================================== */

.carousel-slide img{

  width:100%;
  height:100%;

  object-fit:cover;
  display:block;

}


/* ======================================================
   MOBILE
====================================================== */

@media (max-width:768px){

.carousel-slide{

  width:220px;
  height:320px;

}

.carousel-track{

  gap:30px;

}

}


/* ======================================================
   ITERAÇÃO DO USUARIO COM AS IMAGENS
====================================================== */

/* evita seleção de imagem ao arrastar */
.carousel {
  touch-action: pan-y;
  user-select: none;
}

/* cursor de arrastar no desktop */
.carousel-track {
  cursor: grab;
}

.carousel-track:active {
  cursor: grabbing;
}


/* ======================================================
   BOTÕES DO CARROSSEL (DESKTOP PREMIUM)
====================================================== */

.carousel-btn{

  position:absolute;
  top:50%;
  transform:translateY(-50%);

  width:62px;
  height:62px;

  border-radius:50%;

  border:1px solid rgba(255,255,255,.15);

  background:linear-gradient(
    135deg,
    rgba(255, 120, 160, 0.25),
    rgba(255,255,255,0.05)
  );

  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);

  display:flex;
  align-items:center;
  justify-content:center;

  cursor:pointer;

  z-index:5;

  transition:
    transform .25s ease,
    box-shadow .25s ease,
    background .25s ease;

}


/* ======================================================
   POSIÇÃO
====================================================== */

.carousel-btn.prev{
  left:20px;
}

.carousel-btn.next{
  right:20px;
}


/* ======================================================
   SETA (USANDO PSEUDO ELEMENTO)
====================================================== */

.carousel-btn::before{

  content:"";

  width:12px;
  height:12px;

  border-top:2px solid #ff7aa2;
  border-right:2px solid #ff7aa2;

  transform:rotate(45deg);

}

/* seta esquerda */
.carousel-btn.prev::before{
  transform:rotate(-135deg);
}

/* seta direita */
.carousel-btn.next::before{
  transform:rotate(45deg);
}


/* ======================================================
   HOVER (VIDA)
====================================================== */

.carousel-btn:hover{

  transform:translateY(-50%) scale(1.08);

  background:linear-gradient(
    135deg,
    rgba(255, 120, 160, 0.4),
    rgba(255,255,255,0.08)
  );

  box-shadow:
    0 0 18px rgba(255, 120, 160, 0.35),
    0 8px 25px rgba(0,0,0,0.4);

}


/* ======================================================
   ACTIVE (CLIQUE)
====================================================== */

.carousel-btn:active{
  transform:translateY(-50%) scale(0.95);
}


/* ======================================================
   MOBILE — ESCONDE
====================================================== */

@media (max-width:768px){
  .carousel-btn{
    display:none;
  }
}