#eyvi-wwa,
#eyvi-wwa *,
#eyvi-wwa *::before,
#eyvi-wwa *::after {
  box-sizing: border-box;
}

#eyvi-wwa {
  --vh: 1vh;
  --c-bg: #D9D9D9;
  --c-dark: #262626;
  --c-light: #F5F3ED;
  --c-black: #141414;

  --wwa-frame-max: 1440px;
  /* Figma 1440 px: lewy tekst x=80 px, prawy tekst kończy się 77 px od prawej. */
  --wwa-left-x: max(clamp(32px, 5.556vw, 80px), calc((100vw - 1440px) / 2 + 80px));
  --wwa-right-x: max(clamp(32px, 5.347vw, 77px), calc((100vw - 1440px) / 2 + 77px));
  --wwa-gap: clamp(24px, 2.3vw, 33px);

  --col-c: clamp(260px, 37.43vw, 539px);

  --wwa-text-l-w: clamp(220px, 20.21vw, 291px);
  --wwa-text-r-w: clamp(220px, 20.63vw, 297px);

  position: relative;
  width: 100%;
  overflow: visible;
  background: var(--c-bg);
  font-family: 'Lato', sans-serif;
  -webkit-font-smoothing: antialiased;
  isolation: isolate;
}

/* Elementor / containers fix */
.elementor-widget-container:has(#eyvi-wwa),
.elementor-element:has(#eyvi-wwa),
.elementor-widget-html:has(#eyvi-wwa),
.e-con:has(#eyvi-wwa),
.e-con-inner:has(#eyvi-wwa),
.elementor-section:has(#eyvi-wwa),
.elementor-container:has(#eyvi-wwa),
.elementor-column:has(#eyvi-wwa),
[data-elementor-type]:has(#eyvi-wwa) {
  overflow: visible !important;
  contain: none !important;
}

/*
  Wydłużony driver:
  było około 306vh — animacja była zbyt szybka.
  Teraz sekcja ma więcej scrolla i lepiej eksponuje etapy.
*/
#eyvi-wwa .wwa-driver {
  position: relative;
  /* Prototyp: 3134 px sekcji przy wysokości viewportu 1024 px. */
  height: calc(var(--vh, 1vh) * 306.05);
  min-height: 0;
  overflow: visible;
  background: var(--c-bg);
}

/* Manual pin scene */
#eyvi-wwa .wwa-scene {
  position: absolute;
  top: 0;
  bottom: auto;
  left: 0;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 100svh;
  overflow: hidden;
  background: var(--c-bg);
  isolation: isolate;
  contain: none;
  z-index: 10;
}

#eyvi-wwa .wwa-scene.wwa-fixed {
  position: fixed;
  top: 0;
  bottom: auto;
  z-index: 5000;
}

#eyvi-wwa .wwa-scene.wwa-bottom {
  position: absolute;
  top: auto;
  bottom: 0;
  left: 0;
  width: 100%;
}

@supports (height: 100dvh) {
  #eyvi-wwa .wwa-scene,
  #eyvi-wwa .wwa-scene.wwa-fixed {
    height: 100dvh;
    min-height: 100dvh;
  }
}

/* Background layers */
#eyvi-wwa .wwa-bg-l,
#eyvi-wwa .wwa-bg-d {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

#eyvi-wwa .wwa-bg-l {
  background: var(--c-bg);
  z-index: 0;
}

#eyvi-wwa .wwa-bg-d {
  background: var(--c-dark);
  opacity: 0;
  z-index: 1;
}

#eyvi-wwa .wwa-black-pull {
  position: absolute;
  inset: 0;
  background: var(--c-dark);
  z-index: 2;
  transform: translateY(100%);
  will-change: transform;
  pointer-events: none;
}

/* Full hero video */
#eyvi-wwa .wwa-hero-wrap {
  position: absolute;
  inset: 0;
  z-index: 3;
  overflow: hidden;
  will-change: clip-path;
  background: var(--c-bg);
  transform: translateZ(0);
  backface-visibility: hidden;
}

#eyvi-wwa .wwa-hero-wrap video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  pointer-events: none;
  transform: translateZ(0);
  backface-visibility: hidden;
  background: var(--c-bg);
}

/* Columns */
#eyvi-wwa .wwa-cols {
  position: absolute;
  inset: 0;
  z-index: 4;
  display: grid;
  grid-template-columns: 1fr var(--col-c) 1fr;
  pointer-events: none;
}

#eyvi-wwa .wwa-col {
  position: relative;
  overflow: hidden;
}

#eyvi-wwa .wwa-col-fill {
  position: absolute;
  inset: 0;
  transform: translateY(100%);
  will-change: transform;
}

#eyvi-wwa .wwa-col-l .wwa-col-fill,
#eyvi-wwa .wwa-col-r .wwa-col-fill {
  background: linear-gradient(to top, #262626 0%, #262626 72%, rgba(38,38,38,.92) 86%, transparent 100%);
}

#eyvi-wwa .wwa-col-c .wwa-col-fill {
  background: linear-gradient(to top, #262626 0%, #262626 70%, rgba(38,38,38,.94) 85%, transparent 100%);
}

/* Central mockup */
#eyvi-wwa .wwa-cv-wrap {
  position: absolute;
  top: 0;
  left: 50%;
  width: var(--col-c);
  height: 100%;
  transform: translateX(-50%);
  overflow: hidden;
  z-index: 5;
  clip-path: inset(100% 0 0 0);
  will-change: clip-path;
  background: var(--c-dark);
  backface-visibility: hidden;
}

#eyvi-wwa .wwa-cv-wrap video {
  position: absolute;
  top: 0;
  left: 50%;
  width: 100vw;
  height: 100%;
  min-width: 100vw;
  object-fit: cover;
  display: block;
  pointer-events: none;
  /* Wrapper jest na środku sceny, więc środek kopii filmu pokrywa się 1:1 z hero. */
  transform: translate3d(-50%, 0, 0);
  backface-visibility: hidden;
  background: var(--c-dark);
}

#eyvi-wwa .wwa-cv-neg {
  position: absolute;
  inset: 0;
  background: #fff;
  mix-blend-mode: difference;
  opacity: 1;
  z-index: 6;
  pointer-events: none;
}

/* Hero title */
#eyvi-wwa .wwa-title {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  z-index: 10;
  color: var(--c-light);
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: clamp(38px, 4.45vw, 64px);
  line-height: 1.09;
  text-align: center;
  white-space: nowrap;
  pointer-events: none;
  mix-blend-mode: difference;
}

/* Text blocks
   v9: pozycje boczne dopasowane do makiety 1440 px: lewy tekst x=80, prawy margines=77.
   GSAP zachowuje yPercent: -50, więc teksty pozostają pionowo wyśrodkowane.
   Scroll area odtwarza trzy etapy prototypu: hero / text-left / text-right.
   Centralny negatyw jest drugą, zsynchronizowaną warstwą tego samego pełnego kadru MP4.
*/
#eyvi-wwa .wwa-txt-l,
#eyvi-wwa .wwa-txt-r {
  position: absolute;
  top: 50%;
  z-index: 10;
  opacity: 0;
  pointer-events: none;
  will-change: opacity, transform;
  /* Fallback bez JS: środek tekstu przypada na środek wysokości widoku. */
  transform: translate3d(0, -50%, 0);
}

#eyvi-wwa .wwa-txt-l {
  left: var(--wwa-left-x);
  width: min(
    var(--wwa-text-l-w),
    calc(50vw - (var(--col-c) / 2) - var(--wwa-gap) - var(--wwa-left-x))
  );
  min-width: 180px;
}

#eyvi-wwa .wwa-txt-l-in {
  width: 100%;
  margin: 0;
  color: var(--c-black);
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.11vw, 16px);
  line-height: clamp(24px, 2.22vw, 32px);
  transform: skewX(.57deg);
}

#eyvi-wwa .wwa-txt-r {
  left: auto;
  right: var(--wwa-right-x);
  width: min(
    var(--wwa-text-r-w),
    calc(50vw - (var(--col-c) / 2) - var(--wwa-gap) - var(--wwa-right-x))
  );
  min-width: 180px;
}

#eyvi-wwa .wwa-txt-r-in {
  width: 100%;
  margin-left: auto;
  color: var(--c-light);
  font-family: 'Lato', sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.11vw, 16px);
  line-height: clamp(24px, 2.22vw, 32px);
  text-align: right;
  transform: skewX(.57deg);
}

/* Hint */
#eyvi-wwa .wwa-hint {
  position: absolute;
  left: 50%;
  bottom: 44px;
  transform: translateX(-50%);
  z-index: 20;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  pointer-events: none;
  will-change: opacity;
}

#eyvi-wwa .wwa-hint span {
  font-size: .875rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: #FFFFFF;
  opacity: .4;
  white-space: nowrap;
}

#eyvi-wwa .wwa-hint .arr {
  width: 1px;
  height: 32px;
  background: #FFFFFF;
  opacity: .3;
  animation: eyvi-wwa-arr 1.8s ease-in-out infinite;
}

@keyframes eyvi-wwa-arr {
  0%, 100% {
    transform: scaleY(1);
    opacity: .3;
  }

  50% {
    transform: scaleY(.4);
    opacity: .65;
  }
}

/* Tablet / mobile */
@media (max-width: 850px) {
  #eyvi-wwa {
    --col-c: clamp(120px, 35vw, 133px);
    --wwa-left-x: 20px;
    --wwa-right-x: 20px;
    --wwa-gap: 24px;
    --wwa-text-l-w: min(305px, calc(100vw - 48px));
    --wwa-text-r-w: min(305px, calc(100vw - 48px));
  }

  #eyvi-wwa .wwa-driver {
    /* Na małych ekranach zostaje dłuższy przebieg, aby tekst był czytelny. */
    height: calc(var(--vh, 1vh) * 390);
    min-height: 0;
  }

  #eyvi-wwa .wwa-cols {
    grid-template-columns: 1fr var(--col-c) 1fr;
  }

  #eyvi-wwa .wwa-cv-wrap {
    width: var(--col-c);
  }

  #eyvi-wwa .wwa-title {
    width: 220px;
    font-size: 32px;
    line-height: 42px;
    white-space: normal;
  }

  #eyvi-wwa .wwa-txt-l,
  #eyvi-wwa .wwa-txt-r {
    left: 50%;
    right: auto;
    width: min(305px, calc(100vw - 48px));
    min-width: 0;
    max-width: calc(100vw - 48px);
    transform: translate(-50%, -50%);
  }

  #eyvi-wwa .wwa-txt-l-in {
    width: 100%;
    max-width: 305px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 24px;
    text-align: center;
  }

  #eyvi-wwa .wwa-txt-r-in {
    width: 100%;
    max-width: 305px;
    margin: 0 auto;
    font-size: 15px;
    line-height: 24px;
    text-align: right;
  }

  #eyvi-wwa .wwa-hint {
    bottom: 28px;
  }

  #eyvi-wwa .wwa-hint span {
    font-size: .78rem;
  }

  #eyvi-wwa .wwa-hint .arr {
    height: 28px;
  }
}

@media (max-width: 480px) {
  #eyvi-wwa .wwa-txt-l-in,
  #eyvi-wwa .wwa-txt-r-in {
    max-width: calc(100vw - 48px);
    font-size: 14px;
    line-height: 22px;
  }
}

@media (prefers-reduced-motion: reduce) {
  #eyvi-wwa .wwa-hint .arr {
    animation: none;
  }
}


/* ─────────────────────────────────────────────
   v14 MOBILE / LITE PERFORMANCE
   Dopisane na końcu, żeby nie ruszać desktopowego wyglądu.
   Cel:
   - eyvi-lite/mobile bez pełnoekranowego mix-blend-mode,
   - mniej stałych warstw GPU,
   - WWA nadal zachowuje układ i free-scroll.
───────────────────────────────────────────── */

#eyvi-wwa {
  --eyvi-wwa-css-version: "2026-06-01-wwa-v14-mobile-lite-performance";
}

/*
  Lite mode jest ustawiany w global.js na mobile / słabszych urządzeniach.
  Pełnoekranowe mix-blend-mode:difference nad video jest bardzo ciężkie,
  dlatego w lite wyłączamy negatyw i zostawiamy czytelny tytuł.
*/
html.eyvi-lite #eyvi-wwa .wwa-cv-neg {
  display: none !important;
}

html.eyvi-lite #eyvi-wwa .wwa-title {
  mix-blend-mode: normal !important;
  color: var(--c-light) !important;
}

/*
  Na mobile też zdejmujemy difference z tytułu.
  Centralny efekt dalej działa przez klip/kolumnę video, ale bez kosztownej
  kompozycji całego kadru.
*/
@media (max-width: 850px) {
  #eyvi-wwa .wwa-cv-neg {
    display: none !important;
  }

  #eyvi-wwa .wwa-title {
    mix-blend-mode: normal !important;
    color: var(--c-light) !important;
  }
}

/*
  Zdejmujemy stałe will-change w lite. JS/GSAP nadal animuje elementy,
  ale przeglądarka nie musi trzymać wszystkich warstw GPU cały czas.
*/
html.eyvi-lite #eyvi-wwa .wwa-black-pull,
html.eyvi-lite #eyvi-wwa .wwa-hero-wrap,
html.eyvi-lite #eyvi-wwa .wwa-col-fill,
html.eyvi-lite #eyvi-wwa .wwa-cv-wrap,
html.eyvi-lite #eyvi-wwa .wwa-txt-l,
html.eyvi-lite #eyvi-wwa .wwa-txt-r,
html.eyvi-lite #eyvi-wwa .wwa-hint {
  will-change: auto !important;
}

/*
  Na mobile video ma być stabilne, ale bez dokładania zbędnych transformów
  do całej sceny. Zostawiamy backface-visibility, bo pomaga na Safari.
*/
html.eyvi-lite #eyvi-wwa .wwa-hero-wrap,
html.eyvi-lite #eyvi-wwa .wwa-hero-wrap video,
html.eyvi-lite #eyvi-wwa .wwa-cv-wrap,
html.eyvi-lite #eyvi-wwa .wwa-cv-wrap video {
  transform-style: flat !important;
}

/*
  Mobile: teksty mają być czytelne i nie powinny dostać blendu z tła.
*/
@media (max-width: 850px) {
  #eyvi-wwa .wwa-txt-l,
  #eyvi-wwa .wwa-txt-r {
    z-index: 12;
  }

  #eyvi-wwa .wwa-txt-l-in,
  #eyvi-wwa .wwa-txt-r-in {
    text-shadow: none;
  }
}

/*
  Bardzo małe ekrany: delikatnie krótsze linie, żeby tekst nie łamał się brzydko.
*/
@media (max-width: 374px) {
  #eyvi-wwa .wwa-txt-l,
  #eyvi-wwa .wwa-txt-r {
    width: min(292px, calc(100vw - 36px)) !important;
    max-width: calc(100vw - 36px) !important;
  }

  #eyvi-wwa .wwa-txt-l-in,
  #eyvi-wwa .wwa-txt-r-in {
    max-width: calc(100vw - 36px) !important;
    font-size: 13.5px !important;
    line-height: 21px !important;
  }
}

/*
  Reduced motion: bez animowanej strzałki i bez przejść.
*/
@media (prefers-reduced-motion: reduce) {
  #eyvi-wwa .wwa-black-pull,
  #eyvi-wwa .wwa-hero-wrap,
  #eyvi-wwa .wwa-col-fill,
  #eyvi-wwa .wwa-cv-wrap,
  #eyvi-wwa .wwa-txt-l,
  #eyvi-wwa .wwa-txt-r,
  #eyvi-wwa .wwa-hint,
  #eyvi-wwa .wwa-title {
    transition: none !important;
    animation: none !important;
  }
}



/* ─────────────────────────────────────────────
   WWA v17 — FULL MOBILE STABLE RESTORE
   Pełny bezpieczny override na końcu pełnego wwa.css.
   Cel:
   - przywrócić layout mobile,
   - przywrócić beżowy pierwszy etap,
   - nie używać samego patcha jako pełnego pliku,
   - nie rozwalać pinowania/free-scroll.
───────────────────────────────────────────── */

#eyvi-wwa {
  --eyvi-wwa-css-version: "2026-06-01-wwa-v17-full-mobile-stable";
  --c-bg: #D9D9D9;
  --c-dark: #262626;
  --c-light: #F5F3ED;
  --c-black: #141414;

  position: relative !important;
  display: block !important;
  width: 100% !important;
  overflow: visible !important;
  contain: none !important;
  isolation: isolate !important;
  background: var(--c-bg) !important;
}

/* Wrappery Elementora nie mogą ucinać drivera. */
.elementor-widget-container:has(#eyvi-wwa),
.elementor-element:has(#eyvi-wwa),
.elementor-widget-html:has(#eyvi-wwa),
.e-con:has(#eyvi-wwa),
.e-con-inner:has(#eyvi-wwa),
.elementor-section:has(#eyvi-wwa),
.elementor-container:has(#eyvi-wwa),
.elementor-column:has(#eyvi-wwa),
[data-elementor-type]:has(#eyvi-wwa) {
  overflow: visible !important;
  contain: none !important;
  height: auto !important;
}

/* Driver musi realnie budować wysokość scrolla. */
#eyvi-wwa .wwa-driver {
  position: relative !important;
  height: calc(var(--vh, 1vh) * 306.05) !important;
  min-height: calc(var(--vh, 1vh) * 306.05) !important;
  overflow: visible !important;
  contain: none !important;
  background: var(--c-bg) !important;
}

/* Scena manual pin. */
#eyvi-wwa .wwa-scene {
  position: absolute;
  top: 0;
  left: 0;
  bottom: auto;
  width: 100%;
  height: calc(var(--vh, 1vh) * 100);
  min-height: 100svh;
  overflow: hidden !important;
  background: var(--c-bg) !important;
  isolation: isolate;
  contain: none !important;
  z-index: 10;
}

#eyvi-wwa .wwa-scene.wwa-fixed {
  position: fixed !important;
  top: 0 !important;
  bottom: auto !important;
  z-index: 5000 !important;
}

#eyvi-wwa .wwa-scene.wwa-bottom {
  position: absolute !important;
  top: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 100% !important;
}

/* Tła startowe: beżowy pierwszy etap wraca. */
#eyvi-wwa .wwa-bg-l,
#eyvi-wwa .wwa-hero-wrap,
#eyvi-wwa .wwa-hero-wrap video {
  background: var(--c-bg) !important;
}

#eyvi-wwa .wwa-bg-d,
#eyvi-wwa .wwa-black-pull,
#eyvi-wwa .wwa-cv-wrap,
#eyvi-wwa .wwa-cv-wrap video {
  background: var(--c-dark) !important;
}

/* Kluczowe warstwy wracają na swoje miejsca. */
#eyvi-wwa .wwa-bg-l,
#eyvi-wwa .wwa-bg-d,
#eyvi-wwa .wwa-black-pull,
#eyvi-wwa .wwa-hero-wrap,
#eyvi-wwa .wwa-cols,
#eyvi-wwa .wwa-cv-wrap,
#eyvi-wwa .wwa-title,
#eyvi-wwa .wwa-txt-l,
#eyvi-wwa .wwa-txt-r,
#eyvi-wwa .wwa-hint {
  pointer-events: none;
}

/* Full video. */
#eyvi-wwa .wwa-hero-wrap {
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
  overflow: hidden !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

#eyvi-wwa .wwa-hero-wrap video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
  transform: translateZ(0);
  backface-visibility: hidden;
}

/* Mobile reset layout. */
@media (max-width: 850px) {
  #eyvi-wwa {
    --col-c: clamp(120px, 35vw, 133px);
    --wwa-left-x: 20px;
    --wwa-right-x: 20px;
    --wwa-gap: 24px;
    --wwa-text-l-w: calc(100vw - 48px);
    --wwa-text-r-w: calc(100vw - 48px);
    overflow: visible !important;
    background: var(--c-bg) !important;
  }

  #eyvi-wwa .wwa-driver {
    height: calc(var(--vh, 1vh) * 390) !important;
    min-height: calc(var(--vh, 1vh) * 390) !important;
    overflow: visible !important;
    background: var(--c-bg) !important;
  }

  #eyvi-wwa .wwa-scene {
    width: 100vw !important;
    height: calc(var(--vh, 1vh) * 100) !important;
    min-height: 100svh !important;
    overflow: hidden !important;
    background: var(--c-bg) !important;
  }

  @supports (height: 100dvh) {
    #eyvi-wwa .wwa-scene,
    #eyvi-wwa .wwa-scene.wwa-fixed {
      height: 100dvh !important;
      min-height: 100dvh !important;
    }
  }

  #eyvi-wwa .wwa-cols {
    position: absolute !important;
    inset: 0 !important;
    z-index: 4 !important;
    display: grid !important;
    grid-template-columns: 1fr var(--col-c) 1fr !important;
  }

  #eyvi-wwa .wwa-cv-wrap {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: var(--col-c) !important;
    height: 100% !important;
    transform: translateX(-50%) !important;
    overflow: hidden !important;
    z-index: 5 !important;
    background: var(--c-dark) !important;
    backface-visibility: hidden;
  }

  #eyvi-wwa .wwa-cv-wrap video {
    position: absolute !important;
    top: 0 !important;
    left: 50% !important;
    width: 100vw !important;
    height: 100% !important;
    min-width: 100vw !important;
    object-fit: cover !important;
    transform: translate3d(-50%, 0, 0) !important;
    background: var(--c-dark) !important;
  }

  /* Mobile/lite bez difference, ale tytuł zostaje czytelny. */
  #eyvi-wwa .wwa-cv-neg {
    display: none !important;
  }

  #eyvi-wwa .wwa-title {
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    width: 220px !important;
    transform: translate(-50%, -50%) !important;
    z-index: 10 !important;
    color: var(--c-light) !important;
    font-size: 32px !important;
    line-height: 42px !important;
    white-space: normal !important;
    text-align: left !important;
    mix-blend-mode: normal !important;
  }

  #eyvi-wwa .wwa-txt-l,
  #eyvi-wwa .wwa-txt-r {
    position: absolute !important;
    left: 50% !important;
    right: auto !important;
    top: 50% !important;
    width: calc(100vw - 48px) !important;
    max-width: 305px !important;
    min-width: 0 !important;
    transform: translate(-50%, -50%) !important;
    z-index: 12 !important;
    opacity: 0;
  }

  #eyvi-wwa .wwa-txt-l-in,
  #eyvi-wwa .wwa-txt-r-in {
    width: 100% !important;
    max-width: 305px !important;
    margin: 0 auto !important;
    font-size: 15px !important;
    line-height: 24px !important;
    transform: skewX(.57deg);
  }

  #eyvi-wwa .wwa-txt-l-in {
    color: var(--c-black) !important;
    text-align: center !important;
  }

  #eyvi-wwa .wwa-txt-r-in {
    color: var(--c-light) !important;
    text-align: right !important;
  }

  #eyvi-wwa .wwa-hint {
    bottom: 28px !important;
    z-index: 20 !important;
  }
}

@media (max-width: 480px) {
  #eyvi-wwa .wwa-txt-l,
  #eyvi-wwa .wwa-txt-r {
    width: calc(100vw - 48px) !important;
    max-width: calc(100vw - 48px) !important;
  }

  #eyvi-wwa .wwa-txt-l-in,
  #eyvi-wwa .wwa-txt-r-in {
    max-width: calc(100vw - 48px) !important;
    font-size: 14px !important;
    line-height: 22px !important;
  }
}
/* ─────────────────────────────────────────────
   WWA v18 CSS ADDON — VIEWPORT VIDEO / BEIGE FLASH SAFETY
   Dopisz na końcu CSS sekcji Who We Are.
   JS v18 robi priming pierwszej klatki; ten addon usuwa beżowy fallback,
   gdy przeglądarka jeszcze nie zdąży wyrenderować pierwszego kadru.
───────────────────────────────────────────── */
#eyvi-wwa {
  --eyvi-wwa-css-version-v18: "2026-06-02-wwa-v18-audit-fixed";
}

#eyvi-wwa .wwa-hero-wrap,
#eyvi-wwa .wwa-cv-wrap,
#eyvi-wwa .wwa-hero-wrap video,
#eyvi-wwa .wwa-cv-wrap video {
  background: #121212 !important;
}

#eyvi-wwa[data-eyvi-wwa-video-visible="false"] video {
  animation-play-state: paused !important;
}

#eyvi-wwa .wwa-hero-wrap video,
#eyvi-wwa .wwa-cv-wrap video {
  object-fit: cover !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}


/* EYVI Plugin v1.2 — Elementor editable WWA driver */
#eyvi-wwa .wwa-driver {
  height: calc(var(--vh, 1vh) * var(--eyvi-wwa-driver-vh, 306.05)) !important;
  min-height: calc(var(--vh, 1vh) * var(--eyvi-wwa-driver-vh, 306.05)) !important;
}
@media (max-width: 850px) {
  #eyvi-wwa .wwa-driver {
    height: calc(var(--vh, 1vh) * var(--eyvi-wwa-driver-mobile-vh, var(--eyvi-wwa-driver-vh, 390))) !important;
    min-height: calc(var(--vh, 1vh) * var(--eyvi-wwa-driver-mobile-vh, var(--eyvi-wwa-driver-vh, 390))) !important;
  }
}

/* EYVI plugin v1.3.2 — Elementor font/position controls */
#eyvi-wwa {
  --eyvi-wwa-title-x: 0px;
  --eyvi-wwa-title-y: 0px;
  --eyvi-wwa-left-x-offset: 0px;
  --eyvi-wwa-left-y-offset: 0px;
  --eyvi-wwa-right-x-offset: 0px;
  --eyvi-wwa-right-y-offset: 0px;
}

#eyvi-wwa .wwa-title {
  margin-left: var(--eyvi-wwa-title-x, 0px);
  margin-top: var(--eyvi-wwa-title-y, 0px);
}

#eyvi-wwa .wwa-txt-l {
  margin-left: var(--eyvi-wwa-left-x-offset, 0px);
  margin-top: var(--eyvi-wwa-left-y-offset, 0px);
}

#eyvi-wwa .wwa-txt-r {
  margin-right: var(--eyvi-wwa-right-x-offset, 0px);
  margin-top: var(--eyvi-wwa-right-y-offset, 0px);
}