/* =========================================================
   PREMIUM ANIMATIONS — subtelna warstwa ruchu bez zmiany layoutu
   Aktualizacja: 09.05.2026
   ========================================================= */
:root{
  --motion-ease: cubic-bezier(.22,.9,.22,1);
  --motion-fast: 260ms;
  --motion-normal: 760ms;
  --motion-slow: 1100ms;
}

/* Start strony */
body:not(.motion-ready) .motion-reveal,
body:not(.motion-ready) .motion-stagger > *{
  opacity:1;
  transform:none;
}

.motion-ready .motion-reveal,
.motion-ready .motion-stagger > *{
  opacity:0;
  transform:translate3d(0,28px,0);
  transition:
    opacity var(--motion-normal) var(--motion-ease),
    transform var(--motion-normal) var(--motion-ease),
    filter var(--motion-normal) var(--motion-ease);
  will-change:opacity, transform;
}

.motion-ready .motion-reveal.motion-visible,
.motion-ready .motion-stagger.motion-visible > *{
  opacity:1;
  transform:translate3d(0,0,0);
}

.motion-ready .motion-stagger > *:nth-child(1){transition-delay:40ms;}
.motion-ready .motion-stagger > *:nth-child(2){transition-delay:120ms;}
.motion-ready .motion-stagger > *:nth-child(3){transition-delay:200ms;}
.motion-ready .motion-stagger > *:nth-child(4){transition-delay:280ms;}
.motion-ready .motion-stagger > *:nth-child(5){transition-delay:360ms;}
.motion-ready .motion-stagger > *:nth-child(6){transition-delay:440ms;}
.motion-ready .motion-stagger > *:nth-child(7){transition-delay:520ms;}
.motion-ready .motion-stagger > *:nth-child(8){transition-delay:600ms;}

/* Hero — delikatny efekt premium po wejściu */
.motion-ready header .header-content-inner > *{
  opacity:0;
  transform:translate3d(0,24px,0);
  filter:blur(8px);
  transition:
    opacity var(--motion-slow) var(--motion-ease),
    transform var(--motion-slow) var(--motion-ease),
    filter var(--motion-slow) var(--motion-ease);
}
.motion-ready header.motion-visible .header-content-inner > *{
  opacity:1;
  transform:translate3d(0,0,0);
  filter:blur(0);
}
.motion-ready header.motion-visible .header-content-inner > *:nth-child(1){transition-delay:80ms;}
.motion-ready header.motion-visible .header-content-inner > *:nth-child(2){transition-delay:180ms;}
.motion-ready header.motion-visible .header-content-inner > *:nth-child(3){transition-delay:300ms;}
.motion-ready header.motion-visible .header-content-inner > *:nth-child(4){transition-delay:420ms;}
.motion-ready header.motion-visible .header-content-inner > *:nth-child(5){transition-delay:540ms;}
.motion-ready header.motion-visible .header-content-inner > *:nth-child(6){transition-delay:660ms;}
.motion-ready header.motion-visible .header-content-inner > *:nth-child(7){transition-delay:780ms;}

/* Subtelny ruch tła hero */
header{
  background-position:center center;
  animation:heroFloat 18s ease-in-out infinite alternate;
}
@keyframes heroFloat{
  from{background-position:center center;}
  to{background-position:center 46%;}
}

/* Karty portfolio */
.portfolio-box{
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    border-color var(--motion-fast) ease;
}
.portfolio-box:hover,
.portfolio-box:focus{
  transform:translate3d(0,-6px,0);
  box-shadow:0 26px 76px rgba(0,0,0,.46);
}
.portfolio-box::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:linear-gradient(120deg, transparent 20%, rgba(255,255,255,.14) 42%, transparent 62%);
  transform:translateX(-130%);
  transition:transform 900ms var(--motion-ease);
}
.portfolio-box:hover::after{transform:translateX(130%);}

/* Przyciski i badge */
.btn,
.hero-badges span,
.hero-proof div,
.gallery-thumb,
.gallery-thumb-arrow{
  transition:
    transform var(--motion-fast) var(--motion-ease),
    box-shadow var(--motion-fast) var(--motion-ease),
    opacity var(--motion-fast) ease,
    border-color var(--motion-fast) ease,
    background var(--motion-fast) ease;
}
.hero-badges span:hover,
.hero-proof div:hover{
  transform:translate3d(0,-3px,0);
  border-color:rgba(255,255,255,.28);
  background:rgba(255,255,255,.09);
}

/* Sekcja O mnie i galerie */
.about-layout,
.portfolio-gallery{
  transition:transform 360ms var(--motion-ease), box-shadow 360ms var(--motion-ease), border-color 360ms ease;
}
.about-layout:hover,
.portfolio-gallery:hover{
  border-color:rgba(255,255,255,.18);
  box-shadow:0 34px 100px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.08);
}
.about-photo{
  transition:transform 600ms var(--motion-ease), filter 600ms ease;
}
.about-layout:hover .about-photo{
  transform:scale(1.018);
  filter:contrast(1.04) saturate(1.04);
}

.gallery-main-img{
  transition:opacity 260ms ease, transform 520ms var(--motion-ease), filter 520ms ease;
}
.gallery-image-col:hover .gallery-main-img{
  transform:scale(1.014);
  filter:contrast(1.03) saturate(1.03);
}
.gallery-thumb:hover{
  opacity:.92;
  transform:translate3d(0,-2px,0);
}
.gallery-thumb.active{
  box-shadow:0 0 0 2px rgba(240,95,64,.32);
}

/* Kontakt */
#contact .text-center{
  transition:transform var(--motion-fast) var(--motion-ease), opacity var(--motion-fast) ease;
}
#contact .text-center:hover{transform:translate3d(0,-4px,0);}
#contact i,
#contact img{transition:transform 360ms var(--motion-ease), filter 360ms ease;}
#contact .text-center:hover i,
#contact .text-center:hover img{transform:scale(1.08);filter:drop-shadow(0 10px 24px rgba(240,95,64,.24));}

/* Lightbox */
.portfolio-lightbox.active .portfolio-lightbox-content{
  animation:lightboxIn 320ms var(--motion-ease) both;
}
@keyframes lightboxIn{
  from{opacity:0;transform:translate3d(0,20px,0) scale(.985);}
  to{opacity:1;transform:translate3d(0,0,0) scale(1);}
}

/* Mniej ruchu na urządzeniach dotykowych */
@media (hover:none){
  .portfolio-box:hover,
  .portfolio-box:focus,
  .about-layout:hover .about-photo,
  .gallery-image-col:hover .gallery-main-img,
  #contact .text-center:hover{
    transform:none;
  }
}

/* Dostępność — wyłączenie animacji dla użytkowników preferujących mniej ruchu */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
  .motion-ready .motion-reveal,
  .motion-ready .motion-stagger > *,
  .motion-ready header .header-content-inner > *{
    opacity:1;
    transform:none;
    filter:none;
  }
}


/* FORCE PORTFOLIO CARDS RADIUS 8PX */
.portfolio-box,
.portfolio-item,
.portfolio-card,
.portfolio-box img,
.portfolio-item img,
.portfolio-card img,
#portfolio img,
#portfolio .portfolio-box,
#portfolio .portfolio-item,
#portfolio .portfolio-card,
.clients-portfolio img,
.clients-portfolio .portfolio-box,
.clients-portfolio .portfolio-item,
.clients-portfolio .portfolio-card {
    border-radius: 8px !important;
}


/* FORCE THUMBNAILS RADIUS 2PX */
.thumbnail,
.thumbnails img,
.gallery-thumb,
.gallery-thumbnails img,
.thumb,
.thumb img,
.portfolio-thumbnails img,
.portfolio-thumb img,
.swiper-slide img,
.gallery-nav img {
    border-radius: 2px !important;
}


/* FINAL GALLERY THUMB FIX */
.gallery-thumb,
.gallery-thumb img,
.gallery-thumbnails img,
.thumb,
.thumb img,
.swiper-slide,
.swiper-slide img,
.slick-slide img,
.portfolio-gallery-thumb,
.portfolio-gallery-thumb img {
    border-radius: 2px !important;
    overflow: hidden !important;
}

/* thin gray border same as gallery */
.gallery-thumb,
.thumb,
.swiper-slide,
.slick-slide,
.portfolio-gallery-thumb {
    border: 1px solid rgba(120,120,120,0.55) !important;
    box-shadow: none !important;
}

/* remove orange/red border */
.gallery-thumb.active,
.thumb.active,
.swiper-slide-active,
.slick-current,
.slick-active {
    border: 1px solid rgba(120,120,120,0.55) !important;
    box-shadow: none !important;
}


/* portfolio-btn-spacing-fix */
.hero-buttons,
.cta-buttons,
.about-buttons{
display:flex;
gap:24px;
flex-wrap:wrap;
}

@media(max-width:768px){
.hero-buttons,
.cta-buttons,
.about-buttons{
gap:14px;
}
}