@font-face {
  font-family: "BolidaBrutVF";
  font-display: auto;
  src: url("./BolidaBrutVF.woff2") format("woff2"),
    url("./BolidaBrutVF.woff") format("woff");
  font-weight: normal;
}



:root {
  --card-width: 70vw;
  --card-height: 15vh;
  --carousel-radius: 50vh; /* Adjust distance of cards from center */
}

body {
  margin: 0;
  background-color: #111;
  color: white;
  font-family: "BolidaBrutVF",sans-serif;
  overflow-x: hidden;
}
a{
  color: blue
}
#roller-section {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 4rem 0;
  height: 100vh !important; /* Pinning height */
  overflow: hidden;
}
#roller-section:before {
  content:"";
  width:100vw;
  height: 15vh;
  background: linear-gradient(
180deg, #111 30%, transparent 90%);
  position:absolute;
  top:0;
  z-index: 1;
}
#roller-section:after {
  content:"";
  width:100vw;
  height: 20vh;
  background: linear-gradient(0deg, #111 30%, transparent 90%);
  position:absolute;
  bottom:0;
  z-index: 1;
}

/* 3D Container Setup */
.roller-container {
  width: 100%;
  height: var(--card-height);
  height:100vh;
  position: relative;
  perspective: 300px; /* Essential for 3D effect */
  display: flex;
  justify-content: center;
  align-items: center;
  transform: scale(1.7);
}

#roller {
  width: var(--card-width);
  height: var(--card-height);
  position: absolute;
  transform-style: preserve-3d;
  /* Initial rotation can be set here or via JS */
  transform: translateZ(calc(var(--carousel-radius) * -1)); 
}

.roller__part {
  position: absolute;
  width: var(--card-width);
  height: var(--card-height);
  left: 0;
  top: 0;
  border: 0px solid rgba(255, 255, 255, 0.1);
  /* Backface visibility: hidden makes back of cards invisible when spinning */
  backface-visibility: hidden;
  line-height: var(--card-height);
  text-align: center;
  font-feature-settings: "ss07", "ss01", "ss02", "ss03";
  word-break: keep-all;
  white-space: nowrap;
  transition: all .4s ease-in-out
}


.pin-spacer {
height: 100vh !important;
}




.roller__part span:nth-child(1) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) .1s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(1) {
  animation-play-state: running;
}
.roller__part span:nth-child(2) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) .2s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(2) {
  animation-play-state: running;
}
.roller__part span:nth-child(3) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) .3s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(3) {
  animation-play-state: running;
}
.roller__part span:nth-child(4) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) .4s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(4) {
  animation-play-state: running;
}
.roller__part span:nth-child(5) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) .5s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(5) {
  animation-play-state: running;
}
.roller__part span:nth-child(6) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) .6s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(6) {
  animation-play-state: running;
}
.roller__part span:nth-child(7) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) .7s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(7) {
  animation-play-state: running;
}
.roller__part span:nth-child(8) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) .8s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(8) {
  animation-play-state: running;
}
.roller__part span:nth-child(9) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) .9s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(9) {
  animation-play-state: running;
}
.roller__part span:nth-child(10) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) 1s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(10) {
  animation-play-state: running;
}
.roller__part span:nth-child(11) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) 1.1s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(11) {
  animation-play-state: running;
}
.roller__part span:nth-child(12) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) 1.2s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(12) {
  animation-play-state: running;
}
.roller__part span:nth-child(13) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) 1.3s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(13) {
  animation-play-state: running;
}
.roller__part span:nth-child(14) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) 1.4s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(14) {
  animation-play-state: running;
}
.roller__part span:nth-child(15) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) 1.5s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(15) {
  animation-play-state: running;
}
.roller__part span:nth-child(16) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) 1.6s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(16) {
  animation-play-state: running;
}
.roller__part span:nth-child(17) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) 1.7s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(17) {
  animation-play-state: running;
}
.roller__part span:nth-child(18) {
  font-variation-settings: var(--wght), var(--wdth), var(--ital);
  animation: weights 7.2s cubic-bezier(0.4, 0, 1, 1) 1.8s infinite reverse; 
  animation-play-state: paused;
}
.roller__part:hover span:nth-child(18) {
  animation-play-state: running;
}

@keyframes weights { 
  0% { font-variation-settings: var(--wght), var(--wdth), var(--ital)}
 20% { font-variation-settings: 'wght' 900, 'wdth' var(--wdth) , 'ital' 0; }
 45% { font-variation-settings: 'wght' 200, 'wdth' 100 , 'ital' 0; }
 50% { font-variation-settings: 'wght' 200, 'wdth' 100 , 'ital' 100; }
 80% { font-variation-settings: 'wght' 900, 'wdth' var(--wdth) , 'ital' 100; }
 90% { font-variation-settings: 'wght' 200, 'wdth' var(--wdth) , 'ital' 100; }
100% { font-variation-settings: var(--wght), var(--wdth), var(--ital)}
}