.material-symbols-outlined {
  font-variation-settings: 'FILL' 0, 'wght' 300, 'GRAD' 0, 'opsz' 24;
}

.parzenica-mask {
  mask-image: url('https://api.iconify.design/ph:snowflake.svg');
  mask-repeat: no-repeat;
  mask-position: center;
}

/* Enhanced Scroll Fade-in Animation */
.fade-in {
  opacity: 0;
  transform: translateY(40px);
  transition-property: opacity, transform;
  transition-duration: 1s; /* Domyślna wartość, nadpisywana przez JS proporcjonalnie do scrolla */
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-in-down {
  opacity: 0;
  transform: translateY(-40px);
  transition-property: opacity, transform;
  transition-duration: 1s;
  transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1);
  will-change: opacity, transform;
}

.fade-in-down.visible {
  opacity: 1;
  transform: translateY(0);
}

/* Modal Enter Animations */
#room-modal:not(.hidden),
#attractions-modal:not(.hidden),
#galeria-modal:not(.hidden),
#lokalizacja-modal:not(.hidden),
#fullscreen-modal:not(.hidden) {
  animation: modalOverlayIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

/* Animacja dla rozwijanego menu na telefonie */
#mobile-menu:not(.hidden) {
  animation: mobileMenuIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes mobileMenuIn {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#room-modal:not(.hidden)>section,
#room-modal:not(.hidden)>button,
/* Back button */
#attractions-modal:not(.hidden)>section,
#attractions-modal:not(.hidden)>button,
#galeria-modal:not(.hidden)>section,
#galeria-modal:not(.hidden)>button,
#lokalizacja-modal:not(.hidden)>section,
#lokalizacja-modal:not(.hidden)>button {
  animation: modalContentIn 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#fullscreen-modal:not(.hidden)>img {
  animation: zoomIn 0.6s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

#fullscreen-modal:not(.hidden)>button {
  animation: modalOverlayIn 0.8s ease-out forwards;
}

@keyframes modalOverlayIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes modalContentIn {
  from {
    opacity: 0;
    transform: translateY(40px) scale(0.96);
  }

  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

@keyframes zoomIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}