/* Podstawowe style */
html { 
  scroll-behavior: smooth; 
}

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

h1, h2, h3 {
  font-family: 'allotrope', Georgia, 'Times New Roman', serif;
}

.font-montserrat {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

/* Animacje */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    transform: translateX(-50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    transform: translateX(50px);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes scaleIn {
  from {
    opacity: 0;
    transform: scale(0.9);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes scroll-left {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes scroll-right {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

@keyframes fadeIn {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

@keyframes fadeOut {
  0% { opacity: 1; transform: scale(1) translateX(0); }
  100% { opacity: 0; transform: scale(0.9) translateX(-40px); }
}

@keyframes scroll-down-animation {
  0% {
    transform: translateY(0);
    opacity: 0;
  }
  40% {
    opacity: 1;
  }
  80% {
    transform: translateY(20px);
    opacity: 0;
  }
  100% {
    opacity: 0;
  }
}

/* Klasy animacji */
.animate-fadeInUp {
  opacity: 0;
  animation: fadeInUp 0.8s ease forwards;
}

.animate-fadeInRight {
  opacity: 0;
  animation: fadeInRight 0.8s ease forwards;
}

.animate-fadeInLeft {
  opacity: 0;
  animation: fadeInLeft 0.8s ease forwards;
}

.animate-scaleIn {
  opacity: 0;
  animation: scaleIn 1s ease forwards;
}

.fade-in {
  animation: fadeIn 0.5s forwards;
}

.fade-out {
  animation: fadeOut 0.5s forwards;
}

/* Opóźnienia animacji */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }
.delay-600 { animation-delay: 0.6s; }
.delay-700 { animation-delay: 0.7s; }

/* Style dla sliderów */
.snap-x {
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
}

.snap-start {
  scroll-snap-align: start;
}

.indicator {
  transition: all 0.3s ease-in-out;
}

.indicator.active {
  background-color: #d11919 !important;
  padding-left: 2rem;
  padding-right: 2rem;
}

.slider-button {
  transition: transform 0.2s ease-in-out;
}

.slider-button:active {
  transform: scale(0.95);
}

/* Style dla scrollowania */
.scroll-container {
  display: flex;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}

.scroll-content {
  display: flex;
  animation: scroll-left 20s linear infinite;
}

.scroll-content-reverse {
  display: flex;
  animation: scroll-right 20s linear infinite;
}

/* Style dla fade efektu obrazów */
.fade {
  opacity: 0;
  transition: opacity 1s ease-in-out;
  z-index: 1;
}

.fade.active {
  opacity: 1;
  z-index: 2;
}

/* Style dla przycisku scroll-down */
.scroll-down {
  width: 30px;
  height: 50px;
  border: 1px solid #afafaf;
  border-radius: 20px;
  background: transparent;
  cursor: pointer;
  outline: none;
  position: relative;
}

.scroll-down:before {
  position: absolute;
  top: 10px;
  left: 50%;
  content: '';
  width: 4px;
  height: 4px;
  margin-left: -2px;
  background-color: #575757;
  border-radius: 100%;
  animation: scroll-down-animation 2s infinite;
}

/* Style dla akordeonów */
.accordion-container {
  opacity: 0;
  transform: translateY(200px);
  transition: opacity 0.5s ease-out, transform 0.5s ease-out;
}

.accordion-container.animate-in {
  opacity: 1;
  transform: translateY(0);
}

/* Efekt shine */
.shine-effect {
  position: absolute;
  top: 0;
  left: -100%;
  width: 50%;
  height: 100%;
  background: linear-gradient(
    to right,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  transform: skewX(-25deg);
  pointer-events: none;
}

/* Style dla animacji literek */
.letter {
  display: inline-block;
  transition: all 0.2s ease;
}

.letter-hidden {
  opacity: 0;
  transform: translateY(10px);
}

/* Style dla heksagonów */
.hexagons-container {
  position: relative;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  height: 330px;
  width: 450px;
}

.hexagon-wrapper {
  margin: 0 8px;
  width: 105px;
  height: 120px;
  position: relative;
}

.hexagon-wrapper[style*="position: absolute"] .hexagon .hook {
  opacity: 0.6;
}

.hexagon {
  position: relative;
  width: 100%;
  height: 100%;
  transition: all 0.3s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.hook {
  position: absolute;
  width: 100%;
  height: 50%;
  top: 25%;
  background-color: white;
  transition: all 0.3s ease;
  z-index: 1;
  border-radius: 5% / 20%;
  filter: drop-shadow(0 4px 6px rgba(0, 0, 0, 0.1));
}

.hook:before,
.hook:after {
  content: '';
  position: absolute;
  width: 100%;
  height: 100%;
  background-color: inherit;
  top: 0;
  left: 0;
  transition: inherit;
  border-radius: inherit;
}

.hook:before {
  transform: rotate(60deg);
}

.hook:after {
  transform: rotate(-60deg);
}

.active .hook,
.active .hook:before,
.active .hook:after {
  background-color: #d11919;
  filter: drop-shadow(0 4px 8px rgba(209, 25, 25, 0.24));
}

.icon {
  width: 44px;
  height: 44px;
  z-index: 10;
  position: relative;
  transition: all 0.5s cubic-bezier(0.25, 0.1, 0.25, 1);
  will-change: transform, opacity;
  filter: brightness(0) saturate(100%) invert(71%) sepia(13%) saturate(320%) hue-rotate(185deg) brightness(87%) contrast(84%);
}

.active .icon {
  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(0deg) brightness(100%) contrast(100%);
}

.captions-container {
  min-height: 80px;
  min-width: 300px;
  position: relative;
  left: 50%;
  transform: translateX(-50%);
}

/* Media queries */
@media (max-width: 768px) {
  .slider-container {
    height: 300px;
  }
}

/* Efekt blur */
.background-blur {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: radial-gradient(circle at center, rgba(255,255,255,0.3) 0%, rgba(240,245,255,0) 70%);
  pointer-events: none;
}







/* Portfolio Lightbox Styles */
.portfolio-img {
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.portfolio-img:hover {
  transform: translateY(-5px) scale(1.02);
  box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1);
  cursor: pointer;
}

#image-modal {
  opacity: 0;
  transition: opacity 0.3s ease;
}

#image-modal.opacity-100 {
  opacity: 1;
}

#modal-image {
  max-height: 80vh;
  object-fit: contain;
  transform: scale(0.95);
  transition: transform 0.3s ease;
}

#image-modal.opacity-100 #modal-image {
  transform: scale(1);
}

/* Loading animation for images */
@keyframes modalImageLoading {
  0% { opacity: 0; }
  100% { opacity: 1; }
}

#modal-image[src] {
  animation: modalImageLoading 0.3s ease-in-out;
}