/* ANIMATIONS */
/*table of contents in style.css (main style file*/


/* TEXT */

.text-link:hover {
    text-decoration: underline;
}


/* TILES */

.tile:hover {
    opacity: 80%;
    background-color: #1073b1;
}

.tile-social:hover {
    grid-row: 3;
}

.tile-social#me:hover {
    grid-column: 1;
    background-color: #eeeeee;
}

.tile-social#facebook:hover {
    grid-column: 2;
    background-color: #2436b1;
}

.tile-social#linkedin:hover {
    grid-column: 3;
    background-color: #0055b2;
}

.tile-social#mail:hover {
    grid-column: 4;
    background-color: #b60101;
}

/* @keyframes animations */

@keyframes tileAppear {
    from {
        transform: scale(0.5);
        opacity: 0;
    }
    to {
        transform: scale(1);
        opacity: 1;
    }
}

.animate {
    animation-name: tileAppear;
    animation-duration: 0.3s;
    animation-fill-mode: both;
}

.tiles a, .description * {
    animation-name: tileAppear;
    animation-duration: 0.5s; 
    animation-fill-mode: both;
}

.tiles a:nth-child(1) {
    animation-delay: 0.7s; 
}

.tiles a:nth-child(2) {
    animation-delay: 0.8s; 
}

.tiles a:nth-child(3) {
    animation-delay: 0.9s; 
}

.tiles a:nth-child(4) {
    animation-delay: 1s; 
}

.tiles a:nth-child(5) {
    animation-delay: 1.1s; 
}

.description > div:nth-child(1) {
    animation-delay: 0.6s; 
}

.description a:nth-child(2) {
    animation-delay: 0.7s; 
}

.description a:nth-child(3) {
    animation-delay: 0.9s; 
}

.description a:nth-child(4) {
    animation-delay: 1.1s; 
}

.description a:nth-child(5) {
    animation-delay: 1.3s; 
}

#cursor {
    
    position: absolute;
    transform: translate(-50%, -50%);
    pointer-events: none;
    z-index: 9999; 
    border-radius: 50%;
    box-shadow: 0 0 15px 10px rgba(255, 255, 255, 0.5); /* Dodaj cień */
}

.reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.6s ease-out, transform 0.6s ease-out;
  }
  
  .reveal.active {
    opacity: 1;
    transform: translateY(0px);
  }

  

  @keyframes backgroundAnimation {
    0% {
      background-color: #000000; 
    }
    50% {
      background-color: #000075;
    }
    100% {
      background-color: #000000; 
    }
  }
  
  
  
  
  .typewriter {
    font-family: monospace;
    position: relative; 
  }
  
  .typewriter::after {
    content: '';
    display: inline-block; 
    width: 2px;
    height: 1em; 
    background-color: black;
    position: absolute;
    right: 0;
    animation: blink 1s step-end infinite;
  }
  
  @keyframes blink {
    50% {
      background-color: transparent;
    }
  }
  
  
  
  @keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
  }
  
  .reveal {
    opacity: 0;
    transition: opacity 1.5s ease-out, transform 1s ease-out;
    transform: translateY(20px);
  }
  
  .reveal.visible {
    opacity: 1;
    transform: translateY(0px);
  }