/*
Theme Name: Kancelaria Noworolnik
Theme URI: https://twojadomena.pl
Author: Emil Owczarek
Author URI: https://twojportfolio.dev
Description: Dedykowany motyw WordPress stworzony dla kancelarii prawnej Pawła Noworolnika.
Version: 1.0.0
Text Domain: kancelaria
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Tags: law, kancelaria, business, responsive
*/

/* Font Helvetica Neue */
@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('./assets/fonts/HelveticaNeue.otf') format('opentype');
}

@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('./assets/fonts/HelveticaNeueMedium.otf') format('opentype');
}

@font-face {
  font-family: 'Helvetica Neue';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('./assets/fonts/HelveticaNeueBold.otf') format('opentype');
}



@keyframes sectionRise {
    0% {
        opacity: 0;
        transform: translate3d(0, 32px, 0);
    }
    100% {
        opacity: 1;
        transform: translate3d(0, 0, 0);
    }
}

.section-rise {
    position: relative;
}
 
.rise-child {
    opacity: 1;
    transform: none;
}

.js .rise-child {
    opacity: 0;
    transform: translate3d(0, 32px, 0);
    will-change: transform, opacity;
}

.js .section-rise.is-visible .rise-child {
    animation: sectionRise 0.9s cubic-bezier(0.19, 1, 0.22, 1) forwards;
    animation-delay: var(--rise-delay, 0.25s);
} 

[data-accordion-icon] {
    position: relative;
  }
  
  [data-accordion-icon] .accordion-line {
    position: absolute;
    left: 50%;
    top: 50%;
    background-color: currentColor;
    border-radius: 9999px;
    pointer-events: none;
  }
  
  [data-accordion-icon] .accordion-line--horizontal {
    width: 16px;
    height: 1px;
    transform: translate(-50%, -50%);
  }
  
  [data-accordion-icon] .accordion-line--vertical {
    width: 1px;
    height: 16px;
    transform: translate(-50%, -50%);
    transition: transform 0.2s ease;
  }
  
  [data-accordion-item].is-open [data-accordion-icon] .accordion-line--vertical {
    transform: translate(-50%, -50%) scaleY(0);
  }


   [data-accordion-item] [data-accordion-content] {
    display: grid; 
    grid-template-rows: 0fr;
    transition: grid-template-rows 300ms cubic-bezier(0.4, 0, 0.2, 1);

    p {
        padding: 0 24px 24px;
    }

    > div {
        overflow: hidden;
    }
}

[data-accordion-item].is-open [data-accordion-content] {
    grid-template-rows: 1fr;
}

/* Delikatna korekcja barwna i kontrastu pod ciepłe, czerwone tło */
.person-img{
    filter:
      saturate(1.05)
      contrast(1.06)
      brightness(0.98)
      hue-rotate(-6deg);
    /* miękki cień, ale krótki – długi cień wygląda sztucznie */
    filter: drop-shadow(0 24px 32px rgba(0,0,0,.45));
  }

  /* Kontener do masek i „kontakt z ziemią” */
  .person-wrap{
    position: relative;
    isolation: isolate; /* żeby blend/overlay nie wpływał na resztę */
  }

  
  /* Kontakt z podłożem: eliptyczny cień pod stopami */
  .person-wrap::after{
    content:"";
    position:absolute; left:50%; bottom:-8px; transform:translateX(-10%);
    width:min(52%,520px); height:42px;
    background: radial-gradient(50% 100% at 50% 50%, rgba(0,0,0,.45) 0%, rgba(0,0,0,0) 75%);
    filter: blur(6px);
    pointer-events:none;
    z-index:-1;
  }
  
  /* Miękkie wygaszenie krawędzi PNG (usuwa „ostre wycięcie”) – działa w nowoczesnych przeglądarkach */
  @supports (mask-image: linear-gradient(#000, #000)) {
    .person-img{
      -webkit-mask-image: radial-gradient(140% 140% at 60% 40%, #000 60%, rgba(0,0,0,0) 100%);
              mask-image: radial-gradient(140% 140% at 60% 40%, #000 60%, rgba(0,0,0,0) 100%);
      /* mask wygasza skrajne piksele; wartości możesz wyklikać */
    }
  }
  
  /* Opcjonalnie: blend, jeśli PNG jest zbyt „płaskie” vs tło.
     Używaj oszczędnie – różne przeglądarki różnie liczą.
  */

.not-splide ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
}

.mask-line {
  display: inline-block;
  white-space: nowrap;
  overflow: hidden;
  padding-left: 10px;
  mask-image: linear-gradient(to right, black 100%, transparent 100%);
  mask-size: 0% 100%;
  mask-repeat: no-repeat;
  -webkit-mask-image: linear-gradient(to right, black 100%, transparent 100%);
  -webkit-mask-size: 0% 100%;
  -webkit-mask-repeat: no-repeat;
  animation: revealMask 2s ease-in forwards;
  animation-delay: var(--delay, 0s);
}

.hero-subtext {
  font-family: 'Tangerine', cursive;
  font-size: clamp(2.25rem, 4vw, 3.75rem);
  font-weight: 700;
  letter-spacing: 0.04em;
}

.hero-subtext .mask-line {
  padding-left: 0;
}

:lang(uk) .hero-subtext {
  font-family: 'Bad Script', cursive;
}

.kc-flag-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1rem;
  border-radius: 2px;
  overflow: hidden;
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.22);
  opacity: 0.55;
  transition: opacity 0.2s ease, transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
  padding: 0;
}

.kc-flag-btn > svg {
  width: 100%;
  height: 100%;
  display: block;
}

.kc-flag-btn:hover {
  opacity: 1;
  transform: scale(1.08);
  border-color: rgba(255, 255, 255, 0.5);
}

.kc-flag-btn:focus-visible {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
  opacity: 1;
}

.kc-flag-btn.is-active {
  opacity: 1;
  border-color: rgba(255, 255, 255, 0.85);
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.25);
  cursor: default;
  pointer-events: none;
}

.kc-flag-btn--lg {
  width: 2rem;
  height: 1.35rem;
  border-radius: 3px;
}

@media (min-width: 1024px) {
  .hero-text-col { flex: 1.1; }
  .hero-img-col  { flex: 0.9; }
  :lang(fr) .hero-heading,
  :lang(de) .hero-heading { white-space: nowrap; }
}

@keyframes revealMask {
  from {
    mask-size: 0% 100%;
    -webkit-mask-size: 0% 100%;
  }
  to {
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
  }
}

@media (prefers-reduced-motion: reduce) {
  .mask-line {
    animation: none;
    mask-size: 100% 100%;
    -webkit-mask-size: 100% 100%;
  }
}

.primary-menu a {
  color: rgba(255, 255, 255, 0.8);
  transition: color 0.2s ease;
}

.primary-menu a:hover {
  color: #fff;
}
  @media (min-width: 1024px){
    .person-img{
      mix-blend-mode: normal; /* ewentualnie multiply przy bardzo jasnym PNG */
    }
  }

  @media (prefers-reduced-motion: reduce){
    .person-img{
      animation: none;
      opacity: 1;
      transform: none;
    }

    .section-rise,
    .section-rise.is-visible,
    .rise-child,
    .section-rise.is-visible .rise-child,
    .js .rise-child,
    .js .section-rise.is-visible .rise-child{
      animation: none;
      opacity: 1;
      transform: none;
    }
  }

  html {
    /* Rezerwuje miejsce na scrollbar permanentnie — zapobiega przeskokowi układu
       gdy coś ustawia overflow:hidden na html/body (np. otwarcie chatbota, mobile menu). */
    scrollbar-gutter: stable;
  }

  html:not(.has-lenis) {
    scroll-behavior: smooth;
  }

  body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
    /* opacity: 0; */
    transition: opacity 0.6s ease-in-out;
  }

  body.loaded {
    opacity: 1;
  }

  /**
   * Rich text output inside the team member template should keep the editor spacing.
   * Tailwind resets paragraph margins, so we restore them here.
   */
  .single-team-richtext {
    line-height: 1.75;
  }

  .single-team-richtext :where(p, ul, ol, blockquote, figure) {
    margin-top: 0;
    margin-bottom: 1.25rem;
  }

  .single-team-richtext :where(h2, h3, h4, h5, h6) {
    margin: 2rem 0 1rem;
    font-weight: 600;
    line-height: 1.3;
  }

  .single-team-richtext :where(ul, ol) {
    padding-left: 1.5rem;
  }

  .single-team-richtext li + li {
    margin-top: 0.5rem;
  }

  .single-team-richtext br {
    content: "";
    display: block;
    margin-bottom: 0.5rem;
  }
  #kontakt {
    scroll-margin-top: -50px; /* dopasuj do wysokości nagłówka */
  }

  /* Splide arrow overrides */
  .splide__arrows .splide__arrow {
    background: transparent !important;
    border: none;
    box-shadow: none;
    color: #7a0a0a;
  }

  .splide__arrows .splide__arrow:hover,
  .splide__arrows .splide__arrow:focus {
    background: transparent;
    color: #991b1b;
  }

  .splide__arrows .splide__arrow svg {
    fill: none;
    stroke: currentColor;
    height: 1rem;
    width: 2.6rem;
  }
  
/* .prose p {
    margin: 15px 0;
  } */

/* ── Experience slider — Ken Burns ────────────────────────── */
@keyframes kenburns {
  0%   { transform: scale(1)    translate(0, 0); }
  100% { transform: scale(1.08) translate(-2%, 1%); }
}
.kb-animate {
  animation: kenburns 4s ease-in-out forwards;
}

/* ── Team slider phantom slides ──────────────────────────── */
.splide__slide--phantom {
  visibility: hidden;
  pointer-events: none;
}
@media (max-width: 639px) {
  /* On mobile (perPage=1) hide phantom completely so it's not an extra swipe */
  .splide__slide--phantom { display: none; }
}

/* ═══════════════════════════════════════════════════════════
   MODERN MOTION — elegant, performant, reduced-motion safe
   ═══════════════════════════════════════════════════════════ */

/* 2. Image reveal on scroll (clip-path unveil) ─────────── */
/* JS-driven via IntersectionObserver — unika konfliktów z kenburns / splide transforms. */
/* Domyślnie widoczne (fallback bez JS). Ukryte tylko gdy html.js aktywne. */
.js .img-reveal {
  clip-path: inset(0 0 100% 0);
  opacity: 0;
  transition: clip-path 1.2s cubic-bezier(0.22, 1, 0.36, 1),
              opacity   0.8s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path, opacity;
}
.js .img-reveal.is-revealed {
  clip-path: inset(0 0 0 0);
  opacity: 1;
  will-change: auto;
}

/* 2b. Shine sweep — subtelne światło przechodzące po galerii ─ */
/* Steruj indeksem przez inline style="--shine-i: N" (0, 1, 2, ...). */
.shine-sweep {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}
.shine-sweep::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  /* Węższy pasek (56% W), ostrzejszy peak (alpha 0.10), miękkie outer stops. */
  background: linear-gradient(
    115deg,
    transparent 22%,
    rgba(255, 255, 255, 0.02) 36%,
    rgba(255, 255, 255, 0.06) 44%,
    rgba(255, 255, 255, 0.10) 50%,
    rgba(255, 255, 255, 0.06) 56%,
    rgba(255, 255, 255, 0.02) 64%,
    transparent 78%
  );
  transform: translateX(-180%);
  mix-blend-mode: plus-lighter;
  animation: shineSweep 20s linear infinite;
  /* Stagger = czas przejścia peaku przez 1 obrazek = 100%/72% ≈ 1.4s.
     Przy sweep 5s i zakresie 360% prędkość = 72% W/s → peak-cross 1.39s. */
  animation-delay: calc(var(--shine-i, 0) * 1.4s);
}
/* Podczas hover team card (widoczna ciemna nakładka) shine byłby wizualnie zbyt jasny — wyciszamy */
.group:hover .shine-sweep::after,
.shine-sweep:hover::after {
  opacity: 0.25;
}
@keyframes shineSweep {
  /* Forward-only pass (L → R) w 25% cyklu (5s z 20s), potem pauza poza widokiem */
  0%    { transform: translateX(-180%); }
  25%   { transform: translateX(180%);  }
  100%  { transform: translateX(180%);  }
}
@media (prefers-reduced-motion: reduce) {
  .shine-sweep::after {
    animation: none;
    opacity: 0;
  }
}

/* 4. Primary-menu animated underline ───────────────────── */
.primary-menu > li > a,
.primary-menu li.menu-item > a {
  position: relative;
  display: inline-block;
}
.primary-menu > li > a::after,
.primary-menu li.menu-item > a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.5s cubic-bezier(0.65, 0, 0.35, 1);
}
.primary-menu > li > a:hover::after,
.primary-menu > li > a:focus-visible::after,
.primary-menu li.menu-item > a:hover::after,
.primary-menu li.menu-item > a:focus-visible::after {
  transform: scaleX(1);
}

/* 5. Scroll progress indicator (top bar) ───────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, #700505 0%, #c11a1a 100%);
  transform-origin: left center;
  transform: scaleX(0);
  z-index: 9999;
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .scroll-progress {
    animation: scrollProgress linear both;
    animation-timeline: scroll(root);
  }
}
@keyframes scrollProgress {
  0%   { transform: scaleX(0); }
  100% { transform: scaleX(1); }
}

/* 7. Location map — clip-path reveal (left → right) ───── */
.js .location-map-wrapper {
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.js .section-rise.is-visible .location-map-wrapper {
  clip-path: inset(0 0 0 0);
}

/* 6. Lenis integration ─────────────────────────────────── */
html.has-lenis {
  scroll-behavior: auto;
}
html.has-lenis.lenis-smooth {
  scroll-behavior: auto !important;
}
.lenis.lenis-smooth [data-lenis-prevent] {
  overscroll-behavior: contain;
}

/* Reduced-motion overrides ─────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .img-reveal,
  .img-reveal.is-revealed {
    clip-path: none;
    opacity: 1;
    transform: none;
    transition: none;
    animation: none;
  }
  .scroll-progress {
    animation: none;
    transform: scaleX(0);
  }
  .location-map-wrapper,
  .js .location-map-wrapper,
  .js .section-rise.is-visible .location-map-wrapper {
    clip-path: none;
    transition: none;
  }
}