/* =========================================================
   ULTRA PREMIUM HERO + MOTION TYPOGRAPHY
   Warstwa efektów bez zmiany struktury strony
   Aktualizacja: 09.05.2026
   ========================================================= */
:root{
  --ultra-motion-ease:cubic-bezier(.18,.84,.28,1);
  --ultra-glow:rgba(240,95,64,.22);
  --ultra-glow-soft:rgba(255,255,255,.10);
}

/* HERO — cinematic glow / premium depth */
header{
  position:relative;
  overflow:hidden;
  isolation:isolate;
}

header::before{
  z-index:0;
}

header::after{
  z-index:1;
}

header .header-content{
  position:relative;
  z-index:3;
}

header .header-content-inner{
  position:relative;
  z-index:4;
}

header .header-content::before,
header .header-content::after{
  content:"";
  position:absolute;
  pointer-events:none;
  border-radius:999px;
  filter:blur(34px);
  opacity:.72;
  z-index:1;
  transform:translate3d(0,0,0);
}

header .header-content::before{
  width:42vw;
  height:42vw;
  min-width:360px;
  min-height:360px;
  left:-12vw;
  top:12%;
  background:radial-gradient(circle, var(--ultra-glow) 0%, rgba(240,95,64,.08) 36%, transparent 68%);
  animation:heroGlowLeft 16s var(--ultra-motion-ease) infinite alternate;
}

header .header-content::after{
  width:34vw;
  height:34vw;
  min-width:260px;
  min-height:260px;
  right:-10vw;
  bottom:6%;
  background:radial-gradient(circle, rgba(255,255,255,.13) 0%, rgba(255,255,255,.045) 38%, transparent 70%);
  animation:heroGlowRight 18s var(--ultra-motion-ease) infinite alternate;
}

@keyframes heroGlowLeft{
  0%{transform:translate3d(-2%,2%,0) scale(.96);opacity:.50;}
  100%{transform:translate3d(8%,-5%,0) scale(1.08);opacity:.82;}
}

@keyframes heroGlowRight{
  0%{transform:translate3d(4%,0,0) scale(1);opacity:.38;}
  100%{transform:translate3d(-6%,-8%,0) scale(1.13);opacity:.68;}
}

/* Delikatna warstwa światła za nagłówkiem */
.hero-premium-label,
header h1,
.hero-lead,
.hero-proof,
.hero-badges,
.hero-actions,
.hero-scroll-hint{
  position:relative;
  z-index:5;
}

header h1{
  text-shadow:0 18px 70px rgba(0,0,0,.62), 0 0 42px rgba(240,95,64,.12);
}

header h1::after{
  content:"";
  display:block;
  width:min(420px, 74vw);
  height:1px;
  margin:24px auto 0;
  background:linear-gradient(90deg, transparent, rgba(240,95,64,.68), rgba(255,255,255,.26), transparent);
  transform-origin:center;
  animation:heroLinePulse 4.8s ease-in-out infinite;
}

@keyframes heroLinePulse{
  0%,100%{opacity:.52;transform:scaleX(.84);}
  50%{opacity:1;transform:scaleX(1);}
}

.hero-scroll-hint::after{
  content:"";
  display:block;
  width:1px;
  height:34px;
  margin:12px auto 0;
  background:linear-gradient(180deg, rgba(255,255,255,.72), transparent);
  animation:scrollHintLine 1.8s ease-in-out infinite;
}

@keyframes scrollHintLine{
  0%{transform:scaleY(.35);opacity:.25;}
  50%{transform:scaleY(1);opacity:.86;}
  100%{transform:scaleY(.35);opacity:.25;}
}

/* Motion typography — eleganckie odsłanianie nagłówków */
.motion-type{
  overflow:hidden;
}

.motion-type .motion-word{
  display:inline-block;
  overflow:hidden;
  vertical-align:baseline;
  padding:.02em .015em;
  margin:-.02em -.015em;
}

.motion-type .motion-word-inner{
  display:inline-block;
  transform:translate3d(0,112%,0) rotate(2.5deg);
  opacity:0;
  filter:blur(8px);
  transition:
    transform 820ms var(--ultra-motion-ease),
    opacity 760ms ease,
    filter 760ms ease;
  will-change:transform, opacity, filter;
}

.motion-type.motion-type-visible .motion-word-inner{
  transform:translate3d(0,0,0) rotate(0);
  opacity:1;
  filter:blur(0);
}

.motion-type .motion-word:nth-child(1) .motion-word-inner{transition-delay:40ms;}
.motion-type .motion-word:nth-child(2) .motion-word-inner{transition-delay:110ms;}
.motion-type .motion-word:nth-child(3) .motion-word-inner{transition-delay:180ms;}
.motion-type .motion-word:nth-child(4) .motion-word-inner{transition-delay:250ms;}
.motion-type .motion-word:nth-child(5) .motion-word-inner{transition-delay:320ms;}
.motion-type .motion-word:nth-child(6) .motion-word-inner{transition-delay:390ms;}
.motion-type .motion-word:nth-child(7) .motion-word-inner{transition-delay:460ms;}
.motion-type .motion-word:nth-child(8) .motion-word-inner{transition-delay:530ms;}
.motion-type .motion-word:nth-child(9) .motion-word-inner{transition-delay:600ms;}
.motion-type .motion-word:nth-child(10) .motion-word-inner{transition-delay:670ms;}

/* Hero label — premium shimmer */
.hero-premium-label{
  background-image:linear-gradient(90deg, rgba(255,255,255,.72), #fff, rgba(240,95,64,.92), #fff, rgba(255,255,255,.72));
  background-size:260% auto;
  -webkit-background-clip:text;
  background-clip:text;
  color:#FFF;
}

@keyframes labelShimmer{
  0%,18%{background-position:0% center;}
  48%,100%{background-position:100% center;}
}

/* Premium hover tylko dla urządzeń z kursorem */
@media (hover:hover){
  header .btn:hover{
    transform:translate3d(0,-3px,0);
    box-shadow:0 18px 48px rgba(240,95,64,.26);
  }
  header .btn-ghost:hover{
    box-shadow:0 18px 48px rgba(255,255,255,.12);
  }
}

@media (max-width:767px){
  header .header-content::before{
    width:92vw;
    height:92vw;
    left:-42vw;
    top:16%;
    opacity:.48;
  }
  header .header-content::after{
    width:70vw;
    height:70vw;
    right:-38vw;
    bottom:10%;
    opacity:.38;
  }
  header h1::after{
    margin-top:18px;
  }
}

@media (prefers-reduced-motion: reduce){
  header,
  header .header-content::before,
  header .header-content::after,
  header h1::after,
  .hero-scroll-hint::after,
  .hero-premium-label{
    animation:none !important;
  }
  .motion-type .motion-word-inner{
    transform:none !important;
    opacity:1 !important;
    filter:none !important;
    transition:none !important;
  }
}

/* =========================================================
   FIX v6.6 — widoczny napis hero ponad warstwami animacji
   ========================================================= */
header .header-content .header-content-inner h1,
header .header-content .header-content-inner h1.motion-type{
  position:relative;
  z-index:30;
  color:#E2E2E2;
  opacity:1;
  visibility:visible;
  text-shadow:0 18px 70px rgba(0,0,0,.72), 0 2px 18px rgba(0,0,0,.55), 0 0 42px rgba(240,95,64,.16);
}

/* Nagłówek hero ma być czytelny natychmiast — animacje nie mogą go ukrywać */
header h1.motion-type .motion-word-inner{
  opacity:1;
  visibility:visible;
  filter:none;
}

body:not(.motion-ready) header h1,
body:not(.motion-ready) header h1 .motion-word-inner{
  opacity:1;
  visibility:visible;
  filter:none;
  transform:none;
}


/* =========================================================
   v6.6 FINAL FIX
   Statyczny napis: "Portfolio graficzne / print / digital / 3D / Foto"
   Wyłączona animacja / shimmer / reveal dla .hero-premium-label
   ========================================================= */
.hero-premium-label,
.hero-premium-label *,
.hero-premium-label::before,
.hero-premium-label::after{
    animation: none !important;
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
    filter: none !important;
}

.hero-premium-label{
    visibility: visible !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.035)) !important;
    background-size: auto !important;
    -webkit-background-clip: border-box !important;
    background-clip: border-box !important;
}


/* === POPRAWKA v6.6: miniatury galerii + menu mobile ===
   Tylko aktualnie wyświetlana miniatura ma pomarańczową obwódkę. */
.portfolio-gallery .gallery-thumb,
.portfolio-gallery .gallery-thumb:hover,
.portfolio-gallery .gallery-thumb:focus,
.portfolio-gallery .gallery-thumb:active {
    border-color: transparent !important;
    box-shadow: none !important;
    outline: none !important;
}

.portfolio-gallery .gallery-thumb.active,
.portfolio-gallery .gallery-thumb.active:hover,
.portfolio-gallery .gallery-thumb.active:focus,
.portfolio-gallery .gallery-thumb.active:active {
    border-color: #f05f40 !important;
    box-shadow: 0 0 0 1px rgba(240, 95, 64, 0.35) !important;
    outline: none !important;
}

.portfolio-gallery .gallery-thumb:not(.active) img {
    border-radius: 8px;
}

@media (max-width: 767px) {
    #mainNav .navbar-collapse,
    #mainNav .navbar-collapse.collapse.in {
        background: rgba(18, 18, 18, 0.96) !important;
        border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
    }

    #mainNav .navbar-collapse .nav > li > a,
    #mainNav .navbar-collapse .nav > li > a:focus,
    #mainNav .navbar-collapse .nav > li > a:hover {
        color: #d6d6d6 !important;
    }
}


/* === FIX BLUE ACTIVE/FOCUS BUTTONS 2026-05-14 ===
   Ten plik jest ładowany jako ostatni, dlatego tutaj nadpisujemy Bootstrap.
   Dotyczy przytrzymania przycisku / focus / active, żeby nie robił się niebieski. */
html, body, a, button, .btn {
    -webkit-tap-highlight-color: transparent !important;
}

.btn,
.btn:focus,
.btn:active,
.btn:active:focus,
.btn.active,
.btn.active:focus,
a:focus,
a:active,
button:focus,
button:active {
    outline: none !important;
}

.btn-primary,
.btn-primary:hover,
.btn-primary:focus,
.btn-primary.focus,
.btn-primary:active,
.btn-primary.active,
.btn-primary:active:hover,
.btn-primary.active:hover,
.btn-primary:active:focus,
.btn-primary.active:focus,
.btn-primary:active.focus,
.btn-primary.active.focus,
.open > .dropdown-toggle.btn-primary,
.open > .dropdown-toggle.btn-primary:hover,
.open > .dropdown-toggle.btn-primary:focus,
.open > .dropdown-toggle.btn-primary.focus {
    color: #ffffff !important;
    border-color: #f05f40 !important;
    background-color: #f05f40 !important;
    background-image: linear-gradient(135deg,#ff744d 0%,#f05f40 48%,#c83a28 100%) !important;
    box-shadow: 0 18px 48px rgba(240,95,64,.26), 0 12px 38px rgba(0,0,0,.34) !important;
}

.btn-default.btn-ghost,
.btn-default.btn-ghost:hover,
.btn-default.btn-ghost:focus,
.btn-default.btn-ghost.focus,
.btn-default.btn-ghost:active,
.btn-default.btn-ghost.active,
.btn-default.btn-ghost:active:hover,
.btn-default.btn-ghost.active:hover,
.btn-default.btn-ghost:active:focus,
.btn-default.btn-ghost.active:focus,
.btn-default.btn-ghost:active.focus,
.btn-default.btn-ghost.active.focus {
    color: #ffffff !important;
    border: 1px solid rgba(255,255,255,.22) !important;
    background: rgba(255,255,255,.055) !important;
    box-shadow: inset 0 1px 0 rgba(255,255,255,.08), 0 14px 36px rgba(0,0,0,.28) !important;
}

.portfolio-gallery .next-category .btn-primary,
.portfolio-gallery .next-category .btn-primary:hover,
.portfolio-gallery .next-category .btn-primary:focus,
.portfolio-gallery .next-category .btn-primary:active,
.next-category .btn-primary,
.next-category .btn-primary:hover,
.next-category .btn-primary:focus,
.next-category .btn-primary:active {
    color: #ffffff !important;
    border-color: #f05f40 !important;
    background-color: #f05f40 !important;
    background-image: linear-gradient(135deg,#ff744d 0%,#f05f40 48%,#c83a28 100%) !important;
    box-shadow: 0 18px 48px rgba(240,95,64,.26), 0 12px 38px rgba(0,0,0,.34) !important;
}


/* 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;
}
}