html { scroll-behavior: auto !important; /* desativa o smooth nativo do navegador */ }

:root {
  --color-primary: #ffffff;
  --card-width: 430px;
  --card-height: 610px;
  --card-border-radius: 15px;
  /* === Variáveis globais reutilizadas no CSS DOT === */
  --color-dot: #353535; /* Cor padrão dos símbolos */
  --transition-fast: 0.15s ease; /* Duração/easing das transições */ 
}

*,
*::after,
*::before {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.carousel-container {
  width: 100%;
  height: 90vh;
  position: relative;
  left: 0;
  top: 0;
  user-select: none;
  overflow: hidden;
  display: flex;
  justify-content: center;
  align-items: center;
  perspective: 2500px;
}

.carousel-items {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  transform-origin: center center;
  user-select: none;
}

.carousel-item {
  position: absolute;
  width: var(--card-width);
  height: var(--card-height);
  border-radius: var(--card-border-radius);
  overflow: hidden;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  transform: translate(-50%, -50%);
  transform-origin: center center;
  user-select: none;
  cursor: pointer;
  background-size: cover;
  background-position: center;
}

@media (max-width: 768px) {
  
}
@media (max-width: 430px) {
  .carousel-container { height: 70vh; }
}

/* BACKGROUND DOT */

#dotGrid,
.dot-grid-host,
[data-dot-grid] {
  position: relative;
}

#dotGrid .dot-grid-layer,
.dot-grid-host .dot-grid-layer,
[data-dot-grid] .dot-grid-layer {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: hidden;
  pointer-events: none;
}

#dotGrid .dot-grid-layer .dot,
.dot-grid-host .dot-grid-layer .dot,
[data-dot-grid] .dot-grid-layer .dot {
  position: absolute;
  font-size: 10px;
  color: var(--color-dot);
  transition: all var(--transition-fast);
  will-change: transform, color;
}

/* THUMB HOVER */
[data-thumb-hover],
.thumb-hover {
  position: relative;
  /*display: inline-block;
  overflow: hidden;*/
}

[data-thumb-hover] img,
.thumb-hover img {
  display: block;
  width: 100%;
  height: auto;
  transition: transform 0.35s ease;
  will-change: transform;
}

.cursor-tag {
  position: fixed;
  top: 0;
  left: 0;
  transform: translate(-50%, -50%) scale(0.9);
  padding: 10px 20px;
  border-radius: 999px;
  background: rgba(5, 236, 4, 1);
  color: #000000;
  font-family: "Fragment Mono", Sans-serif;
  font-size: 0.7em;
  font-weight: 400;
  text-transform: uppercase;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.25s ease;
  z-index: 9999;
}

.cursor-tag.is-visible {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}

.cursor-dot {
  position: fixed;
  width: 25px;
  height: 25px;
  border-radius: 50%;
  background: rgba(5, 236, 4, 1);
  pointer-events: none;
  transform: translate(-50%, -50%);
  transition: opacity 0.2s ease, background 0.2s ease;
  mix-blend-mode: difference;
  z-index: 10000;
}