@import url('https://fonts.googleapis.com/css2?family=Dosis:wght@600;800&display=swap');
:root
{
   --other_text_width : 0;
}

.spotlightSection {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
    min-height: 270vh;
    height: auto;
    position: relative;
    background: transparent;
    box-sizing: border-box;
    overflow-x: hidden;
    padding-bottom: 10px;
    padding-top: 10px;
}
.spotlightSection::-webkit-scrollbar
{
  display: none;
}

.visuMagicContainer
{
    width: 100%;
    background-color: transparent;
}
.descriptionImage
{
  position: absolute;
  height: 90px;
  transform: scale(0.8) rotate(-5deg);
  opacity: 0.4;
  width: 600px;
  top: 60px;
  left: 10px;
  background: url(https://firebasestorage.googleapis.com/v0/b/videolize-3563f.appspot.com/o/visumagicDescriptionImage.png?alt=media&token=16e5f5dc-3216-4f41-9671-e40409747876);
  background-repeat: no-repeat;
  background-size: contain;
}
.visuMagicTextContainerShadow
{
    position: absolute;
    height: 400px;
    width: 450px;
    left: 50%;
    top: 5%;
    transform: translateX(-50%);
    z-index: 1;
    background: linear-gradient(180deg, #000000, #181818);
    overflow: hidden;
}
.visuMagicText
{
    position: relative;
    top: 0%;
    left: 50%;
    transform: translateX(-50%);
    font-size: 4em;
    text-align: center;
    margin-bottom: 2px;
    font-family: 'Salsa', cursive;
    color: #fff;
    background-color: transparent;
}
.visuMagicDesc
{
    position: relative;
    top: 0px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 2em;
    text-align: center;
    color: #8d8d8dea;
    font-family: 'Source Code Pro', monospace;
     margin-bottom: 2px;
}

.redirectSocial
{
    position: relative;
    padding-left: 30px;
    height: 40px;
    width: 200px;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    backdrop-filter: blur(14px);
    background-color: #18181831;
    z-index: 100;
    backdrop-filter: blur(15px);
    border-radius: 10px;
    border: 1px solid #474646;
    cursor: pointer;
    z-index: 12;
    transform-origin: center;
    border-radius: 25px;

}
.redirectSocial span
{
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    color: #fff;
    font-family: 'Source Code Pro', monospace;
    pointer-events: none;   
}
.redirectSocial span:nth-child(1)
{
    height: 20px;
    width: 20px;
    background-size: cover;
    pointer-events: none;
    left: 10%;
    top: 52%;
    font-size: 21px;
    color: #7B61FF;
}
.redirectSocial span:nth-child(2)
{
    left: 30%;
    font-weight: bolder;
}

#wand {
    position: absolute;
    width: 55px;
    height: 600px;
    background-image: linear-gradient(90deg,#0c0c0c,#1d1a1f);
    opacity: 100%;
    left: 50%;
    top: 1%;
    rotate: 90deg;
    z-index: 100;
    border-radius : 10px;
    cursor: pointer;
    overflow: hidden;
    z-index: 100;
    
    
  }  #wand > .cap
  {
   height: 20%;
   width: 100%;
   background-color: #fff;


 }
 #wand .wand-streak
 {
    position: relative;
    height: 4px;
    rotate: 90deg;
    filter: blur(8px);
    width: 430px;
    border-radius: 25px;
    left: -190px;
    top: 50%;
    background-image: linear-gradient(91deg,#000,#fff 31%);
    z-index: 100;
 }


 .wandparticleBackdrop
 {
    position: relative;
    overflow: hidden;
    top:  -20px;
    height: 250px;
    width: 100%;
    margin: auto 0;
    transform:  scale(1.2);
    background: url(https://firebasestorage.googleapis.com/v0/b/videolize-3563f.appspot.com/o/wandsparkle.png?alt=media&token=af5efc56-407f-4cbd-8992-a38d6db30a73);
    background-size: contain;
    background-repeat: no-repeat;
    overflow: hidden;
    background-position: center;
    z-index: 2;
 }
 .particlesWand
 {
    position: absolute;
    height: 100px;
    background: transparent;
    width: 250px;
    top: 150px;
    left: 50%;
    transform: translateX(-50%);
    transform-origin: center;
    z-index: 50;
 }



 /* Magic Tiles Grid Layout */
.magicTilesGrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  grid-auto-rows: minmax(320px, auto);
  gap: 32px;
  position: relative;
  top: 10px;
  width: 100%;
  margin: -30px 0;
  padding: 0 24px;
  z-index: 10;
  box-sizing: border-box;
}

.magicTile {
  background: #1D1C20;
  border-radius: 25px;
  border: 1px solid #413e47;
  box-shadow: 0 4px 32px rgba(21,21,22,0.3);
  padding: 32px 24px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  position: relative;
  min-height: 320px;
  overflow: hidden;
  user-select: none;
}


  #tiles {
   display: flex;
 }
 


.magicTile.wide {
  grid-column: span 2;
}

.magicTile.tall {
  grid-row: span 2;
}

.magicTile .headingText {
  font-size: 1.5em;
  font-family: 'Source Code Pro', monospace;
  color: #fff;
  margin-bottom: 12px;
  font-weight: 700;
  z-index: 10;
}

.magicTile .descriptionText {
  font-size: 1em;
  color: #A4A4A4;
  font-family: 'Source Code Pro', monospace;
  margin-bottom: 18px;
  z-index: 10;
}


.ruler-wrapper {
  position: relative;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: 80px;
  width: 90%;
  background: #222;
  border-radius: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
  justify-content: center;
}

.ruler {
  display: flex;
  width: 90%;
  height: 100%;
  gap: 6px;
  align-items: center;
  justify-content: space-between;
}

.tick {
  flex: 0 0 2px;
  height: 20px;
  background: #888;
  opacity: 0.4;
}

.tick.strong {
  height: 40px;
  background: #aaa;
  opacity: 0.8;
}

.marker {
  position: absolute;
  width: 6px;
  height: 50px;
  background: #ff4d4d;
  top: 50%;
  transform: translateY(-50%);
  border-radius: 3px;
  box-shadow: 0 0 10px #ff4d4d88;
  z-index: 10;
}

.time-pop {
    position: absolute;
    color: #fff;
    padding: 4px 10px;
    font-size: 1.3em;
    border-radius: 6px;
    pointer-events: none;
    transform: translateY(0) scale(0.8) rotate(-20deg);
    font-family: 'Courier New', Courier, monospace;
    opacity: 1;
    transition: transform 1s cubic-bezier(0.22, 1, 0.36, 1), opacity 1s ease-out;
    z-index: 20;
}   
 
.tileIconSVG {
 position: absolute;
   height: 260px;
   width: 460px; /*variable*/
   background: url(https://firebasestorage.googleapis.com/v0/b/videolize-3563f.appspot.com/o/tileIconSVG.jpg?alt=media&token=97d3f47e-d788-49a6-b2ac-ff10f792822f);
   background-size: cover;
   transform-origin: center;
   overflow: hidden;
   transition: width 0.5s ease;
   left: 1%;
   top: 35%;
}

#wandVisuMagicTwo {
   width: 7vmin;
   aspect-ratio: 1 / 10;
   background: linear-gradient(
     to right, 
     rgb(26 24 28) 10%, 
     rgb(42 40 44) 45% 55%, 
     rgb(26 24 28) 90%
   );
   position: absolute;
   left: 450px; /*50 450 600*/
   top: 108px; /*100 120
   */
   translate: -50%;
   rotate: 1deg;
   z-index: 100;
   border-radius: 2vmin;
   box-shadow: 0vmin 1vmin 4vmin rgb(0 0 0 / 80%);
   box-shadow: -45px 5px 50px #000,
    -45px 5px 70px #000,
    -30px 5px 10px #00000083,
    -25px 5px 10px #00000083;
   overflow: hidden; 
 }

#wandVisuMagicTwo > .capVisuMagicTwo
   {
    height: 20%;
    width: 100%;
   background: linear-gradient(
  to right,
  rgb(212 221 236) 10%,
  rgb(255 255 255) 45% 55%,
  rgb(212 221 236) 90%
);

  }



.magicTile .tilesImages {
  display: flex;
  gap: 12px;
}

.magicTile .tilesImages {
  display: flex;
  flex-direction: column;
  gap: 18px;
  justify-content: center;
  align-items: center;
}

.magicTile .tilesImages .tile {
  width: 250px;
  height: 250px;
  border-radius: 12px;
  overflow: hidden;
  background: #222;
  box-shadow: 0 2px 8px #0003;
  display: flex;
  align-items: center;
  justify-content: center;
}

.magicTile .tilesImages .tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


 #wandVisuMagic {
   width: 7vmin;
   aspect-ratio: 1 / 10;
   background: linear-gradient(
     to right, 
     rgb(26 24 28) 10%, 
     rgb(42 40 44) 45% 55%, 
     rgb(26 24 28) 90%
   );
   position: absolute;
   left: 450px; /*50 570*/
   top: 120px; /*100 120
   */
   translate: -50%;
   rotate: -3deg;
   z-index: 100;
   border-radius: 2vmin;
   box-shadow: 0vmin 1vmin 4vmin rgb(0 0 0 / 80%);
   overflow: hidden; 
 }

#wandVisuMagic > .capVisuMagic
   {
    height: 20%;
    width: 100%;
   background: linear-gradient(
  to right,
  rgb(212 221 236) 10%,
  rgb(255 255 255) 45% 55%,
  rgb(212 221 236) 90%
);

  }


  #original{
  
   position: absolute;
   left: 5%;
   right: 0;
   top: 50%;
   transform: translateY(-50%);
   white-space: nowrap;
   overflow: hidden;    
   font-family: 'Dosis', sans-serif;
   font-weight: 700;
   font-size: 9em;
   z-index: 0;
   background: linear-gradient(to bottom, #2E2E33 75%, #080808);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;
   
   transition: 0.5s;
 }
 
  #other
{
  position: absolute;
  transition: left 2s ease-in-out;
  background-position: left top;
  -webkit-transition: width .2s;
  transform-origin: left;
  top: 50%;
  transform: translateY(-50%);
  left: 6px;
  filter: drop-shadow(0 0 10px #000);
  white-space: nowrap;
  overflow: hidden;    
  font-family: 'Dosis', monospace;  
  font-size: 8em;
  background: linear-gradient(to bottom, #cacaca 75%, #464545);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  width: 400px;
  
}

 .mask
{
  position: absolute;
  width: 400px;
  height: 160px;
  top: 37%;
  left: 5%;
  background: #1D1C20; /*0c0c0e*/
  border-radius: 50px;
  z-index: 3;

}

 #wandVisuMagic {
   width: 7vmin;
   aspect-ratio: 1 /10;
   background: linear-gradient(
     to right, 
     rgb(26 24 28) 10%, 
     rgb(42 40 44) 45% 55%, 
     rgb(26 24 28) 90%
   );
   position: absolute;
   left: 450px; /*50 570*/
   top: 120px; /*100 120
   */
   translate: -50%;
   rotate: -3deg;
   z-index: 100;
   border-radius: 2vmin;
   box-shadow: 0vmin 1vmin 4vmin rgb(0 0 0 / 80%);
   overflow: hidden; 
 }

#wandVisuMagic > .capVisuMagic
   {
    height: 20%;
    width: 100%;
   background: linear-gradient(
  to right,
  rgb(212 221 236) 10%,
  rgb(255 255 255) 45% 55%,
  rgb(212 221 236) 90%
);

  }

  #starshine {
   position: absolute;
   top: 50%;
   transform: translateY(-50%);
   left: 5%;
   width: 90%;
   height: 150px;
   z-index: 1;
   overflow: hidden;
 
   background: transparent;
 }    

 
.book
{
   position: relative;
   width: 177px;
   top: 60px;
   left: 50%;
   height: 260px;
   transform-origin: center;
   box-shadow: 20px 20px 20px #111;
   transform-style: preserve-3d;
   user-select: none;
   transition: 0.5s;
   overflow: visible;
   transform: translateX(-50%) scale(0.8) rotateY(35deg);
}

.book::before
{
   content: '';
   position: absolute;
   width: 50px;
   height: 100%;
   transform-origin: left;
   background: url(https://firebasestorage.googleapis.com/v0/b/videolize-3563f.appspot.com/o/side.jpg?alt=media&token=4e396096-5b4e-4802-9907-9a414ad61282);
   background-repeat: no-repeat;
   background-position: center;
   transform: rotateY(90deg);
}

.book::after {
  content: '';
  position: absolute;
  width: 177px;
  height: 260px;
  left: 0;
  top: 0;
  transform-origin: center;
  background: url(https://firebasestorage.googleapis.com/v0/b/videolize-3563f.appspot.com/o/back.jpg?alt=media&token=48cbbdd7-015a-4230-a2e6-8738504657b3);
  background-repeat: no-repeat;
  background-position: center;
  backface-visibility: hidden;
  transform: rotateY(180deg) translateZ(0px);
}

 .book:hover
{
  transform: translateX(-50%) scale(1) rotateY(180deg);
}
.book img {
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
  object-fit: contain;
  background-size: contain;
  background-repeat: no-repeat;
  backface-visibility: hidden;
  transform: rotateY(0deg);
}
.timeline {
  height: 500px;
  left: 0;                
  overflow-y: auto;            
  overflow-x: hidden;
  padding-left: 20px;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 20px;                    /* Vertical gap between timeline items */
  z-index: 2;
  scroll-behavior: smooth;
  top: 80px;
}
.timeline {
  scrollbar-width: thin;
  scrollbar-color: #7B61FF #232228;
}

/* Webkit browsers */
.timeline::-webkit-scrollbar {
  width: 10px;
  background: #232228;
  border-radius: 8px;
}

.timeline::-webkit-scrollbar-thumb {
  background: linear-gradient(135deg, #7B61FF 60%, #413e47 100%);
  border-radius: 8px;
  box-shadow: 0 2px 8px #7B61FF33;
}

.timeline::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(135deg, #a18aff 60%, #7B61FF 100%);
}

.timeline::-webkit-scrollbar-track {
  background: #232228;
  border-radius: 8px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 0;
  width: 4px;
  height: 100%;
  background: linear-gradient(180deg, #7B61FF 0%, #413e47 100%);
  border-radius: 2px;
  opacity: 0.7;
  z-index: 0;
}

.timeline-item {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  position: relative;
  z-index: 1;
  margin-bottom: 20px;
}

.timeline-dot {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 6px;
  background: linear-gradient(135deg, #7B61FF 60%, #fff 100%);
  border: 3px solid #1D1C20;
  border-radius: 50%;
  box-shadow: 0 0 12px #7B61FF88, 0 2px 8px #0004;
  z-index: 2;
}

.timeline-content {
  background: #232228;
  border-radius: 14px;
  padding: 16px 22px;
  box-shadow: 0 2px 12px #0002;
  border: 1px solid #413e47;
  min-width: 220px;
  max-width: 420px;
  z-index: 1;
}

.timeline-title {
  font-family: 'Dosis', sans-serif;
  font-size: 1.3em;
  font-weight: 800;
  color: #ffc;
  margin-bottom: 4px;
  letter-spacing: 1px;
  text-shadow: 0 2px 8px #7B61FF33;
}

.timeline-content p {
  font-family: 'Source Code Pro', monospace;
  color: #A4A4A4;
  font-size: 1em;
  margin: 0;
  line-height: 1.5;
}


  .tileforPSBacklit
 {
  position: absolute;
  height: 100%;
  filter: blur(45px) brightness(0.5) saturate(2);
  width: 100%;
  background: #5411da;
  top: 0%;
  left: 0%;
  border-radius: 30px;
  box-shadow: inset 0 0 5px #111, 
  inset 0 0 20px #222,
  inset 0 0 40px #333;
  overflow: hidden;
  transition: 0.5s;
  opacity: 0;
  border: 2px solid #111;
 }
  .tileforPSBacklitParticles
 {
  position: absolute;
  height: 100%;
  width: 100%;
  background: transparent;
  top: 0%;
  left: 0%;
  border-radius: 30px;
  overflow: hidden;
  transition: 0.5s;
  opacity: 0;
 }
  .tileforPS
 {
  position: absolute;
  height: 250px;
  width: 100%;
  background: #39383B;
  top: 35%;
  left: 10%;
  border-radius: 30px;
  box-shadow: -20px 0 40px #080808,  
  inset -5px 3px 7px #6d6c6e;
  overflow: hidden;
 }
  .tileforPS::before
 {
  content: '';
  position: absolute;
  height: 100%;
  width: 50%;
  top: 0;
  left: 55%;
  background: #252428;
  box-shadow:  inset -5px 3px 7px #6d6c6e;
 

 }

  .tileforPS::after
 {
  content: '';
  position: absolute;
  height: 100%;
  width: 5px;
  top: 0;
  left: 55%;
  background: #0c0b0c;
  z-index: 10;
  box-shadow:  inset 0px 2px 2px #6d6c6e;
 }
  
  .tileforPS .layer1,
  .tileforPS .layer2,
  .tileforPS .layer3,
  .tileforPS .layer4
 {
    position: absolute;
    padding-left: 10px;
    height: 40px;
    left: 3%;
    top: 8%;
    width: 50%;
    transition: 0.25s;
    background-color: transparent;
    color: #c9c9c9;
    font-family: 'Source Code Pro', monospace;
    font-size: 20px;
    font-weight: 700;
    justify-content: center;
    vertical-align: middle;
    cursor: pointer;
    
 }
  .tileforPS .layer1:hover,
  .tileforPS .layer2:hover,
  .tileforPS .layer3:hover,
  .tileforPS .layer4:hover
 {
  background: #5a5a5a;
 }

  .tileforPS .layer2
{
  left: 5%;
  top: 28%;
  font-size: 20px;
  width: 260px;
}
 .tileforPS .layer3
{
  left: 5%;
  top: 48%;
  font-size: 20px;
  width: 260px;
}

 .tileforPS .layer4
{
  left: 3%;
  top: 70%;
  font-size: 20px;
}


  .tileforPS .layer1 ion-icon,
  .tileforPS .layer2 ion-icon,
  .tileforPS .layer3 ion-icon,
  .tileforPS .layer4 ion-icon
 {
  position: relative;
  top: 45%;
  transform: translateY(-50%);
  font-size: 25px;
  margin-right: 5px;

 }
  .layerTranslate
 {
  position: absolute;
  height: 170px;
  width: 40%;
  top: 25%;
  left: 60%;
  background: url(https://firebasestorage.googleapis.com/v0/b/videolize-3563f.appspot.com/o/psMoonTmp.png?alt=media&token=a3a2ca90-61a6-41bc-8780-882ef4fc23b5);
  background-size: cover;
  border: 2px solid #ffc;
  border-radius: 10px;
  background-repeat: no-repeat;
 }
  #wandVisuMagicThree {
  width: 7vmin;
  aspect-ratio: 1 / 10;
  background: linear-gradient(
    to right, 
    rgb(26 24 28) 10%, 
    rgb(42 40 44) 45% 55%, 
    rgb(26 24 28) 90%
  );
  position: absolute;
  left: 200px; 
  top: 40px; 
  transition: 0.25s;
  rotate: 3deg;
  z-index: 100;
  border-radius: 2vmin;
  box-shadow: 0vmin 1vmin 4vmin rgb(0 0 0 / 80%);
  overflow: hidden; 
}
#wandVisuMagicThree:hover
{
  top: 20px;
}
 #wandVisuMagicThree > .capVisuMagicThree
  {
   height: 20%;
   width: 100%;
  background: linear-gradient(
 to right,
 rgb(212 221 236) 10%,
 rgb(255 255 255) 45% 55%,
 rgb(212 221 236) 90%
);

 }
 :focus #wandVisuMagicThree
 {
  animation: shake 1s linear forwards;
 }
 @keyframes shake {
  0%
  {
    rotate: 0deg;
  }
  25%
  {
    rotate: 6deg;
  }
  50%
  {
    rotate:3deg;
  }
  100%
  {
    rotate:3deg;
  }
 }



/* Responsive tweaks */
@media (max-width: 900px) {
  .magicTilesGrid {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 0 8px;
  }
  .magicTile.wide, .magicTile.tall {
    grid-column: span 1;
    grid-row: span 1;
  }
}