/* --- Kolory --- */
:root {
  --julia: #8c7968;
  --julia-bg: #a69580;
  --arrow: #735b46;
  --bg-top: #d9cdb8;
  --bg-bottom: #fcfcfd;
}

/* --- Font --- */
@font-face {
  font-family: "QuickTrick";
  src: url("fonts/QuickTrick.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

/* --- Reset --- */
html,
body {
  height: 100%;
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- Tło strony --- */
body {
  font-family: "QuickTrick", sans-serif;
  background-image: linear-gradient(to bottom, var(--bg-top), var(--bg-bottom));
  height: 100vh;
  overflow: hidden;
  touch-action: none;
}

/* --- Hero sekcja --- */
.hero {
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* tekst po lewej */
  position: relative;
  transition: transform 0.7s cubic-bezier(0.77, 0, 0.175, 1),
    opacity 0.7s cubic-bezier(0.77, 0, 0.175, 1);
  overflow: hidden; /* zapobiega wychodzeniu tekstu */
}
.hero.slide-up {
  transform: translateY(-100vh);
  opacity: 0;
}
.hero-header {
  display: flex;
  flex-direction: column;
}
.hero-title {
  color: var(--arrow);
  text-align: left;
  text-shadow: 0 2px 16px #735b4630;
  margin-left: 40px;
  font-size: 14vw;
  letter-spacing: 2px;
  line-height: 1;
  padding-top: 0;
  word-break: break-word;
  max-width: 90vw;
  margin-top: 50px;
  margin-bottom: 0;
}
.hero-header .hero-title + .hero-title {
  margin-top: 0;
}
.hero-subtitle {
  color: var(--julia-bg);
  text-align: left;
  margin-left: 50px;
  font-size: 7.3vw;
  line-height: 1;
  text-shadow: 0 2px 16px #735b4630;
  word-break: break-word;
  max-width: 90vw;
  margin-top: 0;
}
.hero-arrow {
  position: absolute;
  left: 50%;
  bottom: 30px;
  transform: translateX(-50%);
  z-index: 100;
}
/* Safari: strzałka wyżej */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-touch-callout: none) {
    .hero-arrow {
      bottom: 80px !important;
    }
  }
}
.arrow-img {
  width: 70px;
  height: 100px;
  max-height: 50%;
  position: relative;
  left: 2%;
}

/* --- Portfolio sekcja --- */
.portfolio-section {
  display: none;
  position: relative;
  height: 100vh;
  max-height: 100vh;
  opacity: 0;
  transition: opacity 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}
.portfolio-section.visible {
  opacity: 1;
}
.portfolio-title {
  text-align: center;
  color: var(--arrow);
  font-size: 150px;
  letter-spacing: 2px;
  text-shadow: 0 2px 16px #735b4630;
  margin-top: 30px;
  padding-top: 50px;
  right: 10px;
}
.portfolio-link {
  text-align: center;
  margin-left: 50px;
  line-height: 80px;
  font-size: 68px;
  color: var(--julia-bg);
}
#foto {
  margin-top: 80px;
}
.corner-link {
  position: fixed;
  bottom: 30px;
  z-index: 200;
  font-size: 6vw;
  line-height: 1;
  text-decoration: none;
  font-weight: bold;
  letter-spacing: 2px;
  text-shadow: 0 2px 16px #735b4630;
  color: var(--arrow);
}
.corner-link.left {
  left: 30px;
}
.corner-link.right {
  right: 30px;
}

/* --- Kontakt sekcja --- */
.kontakt-section {
  display: none;
  position: absolute;
  overflow: hidden;
  top: 100vh;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 300;
  transition: top 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
.kontakt-back {
  position: absolute;
  left: 30px;
  top: 30px;
}
.kontakt-arrow {
  transform: rotate(90deg);
}
.kontakt-title {
  text-align: center;
  color: var(--julia);
  font-size: 150px;
  letter-spacing: 2px;
  text-shadow: 0 2px 16px #735b4630;
  margin-top: 30px;
}
.kontakt-row {
  display: grid;
  grid-template-columns: 300px 1fr;
  align-items: center;
  justify-content: center;
  margin-bottom: 2vw;
  text-align: left;
  width: 100%;
  max-width: 900px;
  margin: 0 auto 2vw auto;
}
.kontakt-label {
  margin: 0;
  font-size: 300%;
  text-align: right;
  padding-right: 3vw;
  color: var(--arrow);
}
.kontakt-value {
  margin: 0;
  font-size: 300%;
  text-align: left;
  color: var(--julia-bg);
}
.kontakt-footer {
  position: absolute;
  bottom: 0;
  width: 100%;
}
.kontakt-footer-text {
  float: none;
  margin: 0;
  padding: 2vw 0;
  text-align: center;
  color: var(--julia-bg);
  font-size: 50px;
}
/* Safari: kontakt footer wyżej */
@media not all and (min-resolution: 0.001dpcm) {
  @supports (-webkit-touch-callout: none) {
    .kontakt-footer-text {
      padding-bottom: 120px !important;
    }
  }
}

/* --- Sekcje O MNIE, FOTOGRAFIA, GRAFIKA --- */
#omnie-section h6 {
  color: #735b46;
  user-select: none;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
}
#omnie-section,
#fotografia-section,
#grafika-section {
  display: none;
  position: absolute;
  top: 100vh;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 300;
  transition: top 0.7s cubic-bezier(0.77, 0, 0.175, 1),
    left 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
#fotografia-section.slide-left,
#grafika-section.slide-right {
  transition: left 0.7s cubic-bezier(0.77, 0, 0.175, 1),
    top 0.7s cubic-bezier(0.77, 0, 0.175, 1);
}
#fotografia-section.active {
  left: 0 !important;
}
#grafika-section.active {
  left: 0 !important;
}

/* --- Bloki w sekcji FOTOGRAFIA --- */
.fotografia-bloki {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-template-rows: repeat(2, 1fr);
  gap: 4vh 8vw;
  width: 98vw;
  max-width: 1500px;
  margin: 5vh auto 5vh auto;
  align-items: stretch;
  height: auto;
  justify-items: stretch;
}
.foto-blok {
  width: 100%;
  max-width: none;
  background: var(--bg-top);
  color: var(--arrow);
  font-size: 2vw;
  font-weight: bold;
  text-align: center;
  padding: 11vh 0;
  border-radius: 20px;
  box-shadow: 0 2px 10px rgba(140, 121, 104, 0.08);
  letter-spacing: 2px;
  transition: background 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
  position: relative;
  overflow: hidden;
}
.foto-blok:hover {
  background: var(--bg-bottom);
}
.foto-blok.dwa,
.foto-blok.trzy,
.foto-blok.cztery,
.foto-blok.piec,
.foto-blok.szesc,
.foto-blok.siedem,
.foto-blok.osiem,
.foto-blok.dziewiec,
.foto-blok.jeden {
  background: var(--bg-top);
  position: relative;
  z-index: 1;
  transition: background 0.5s;
}
.foto-blok.dwa .foto-blok-text,
.foto-blok.trzy .foto-blok-text,
.foto-blok.cztery .foto-blok-text,
.foto-blok.piec .foto-blok-text,
.foto-blok.szesc .foto-blok-text,
.foto-blok.siedem .foto-blok-text,
.foto-blok.osiem .foto-blok-text,
.foto-blok.dziewiec .foto-blok-text,
.foto-blok.jeden .foto-blok-text {
  position: relative;
  z-index: 2;
  transition: opacity 0.5s;
}
.foto-blok.dwa:hover .foto-blok-text,
.foto-blok.trzy:hover .foto-blok-text,
.foto-blok.cztery:hover .foto-blok-text,
.foto-blok.piec:hover .foto-blok-text,
.foto-blok.szesc:hover .foto-blok-text,
.foto-blok.siedem:hover .foto-blok-text,
.foto-blok.osiem:hover .foto-blok-text,
.foto-blok.dziewiec:hover .foto-blok-text,
.foto-blok.jeden:hover .foto-blok-text {
  opacity: 0;
  transition: opacity 0.5s;
}
.foto-blok.dwa::before,
.foto-blok.trzy::before,
.foto-blok.cztery::before,
.foto-blok.piec::before,
.foto-blok.szesc::before,
.foto-blok.siedem::before,
.foto-blok.osiem::before,
.foto-blok.dziewiec::before,
.foto-blok.jeden::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--bg-top);
  opacity: 1;
  z-index: 1;
  transition: none;
  animation: blok-foto-bg-rev 1s forwards;
}
.foto-blok.dwa:hover::before,
.foto-blok.trzy:hover::before,
.foto-blok.cztery:hover::before,
.foto-blok.piec:hover::before,
.foto-blok.szesc:hover::before,
.foto-blok.siedem:hover::before,
.foto-blok.osiem:hover::before,
.foto-blok.dziewiec:hover::before,
.foto-blok.jeden:hover::before {
  animation: blok-foto-bg 1s forwards;
}
.foto-blok.dwa:active::before,
.foto-blok.dwa:focus::before,
.foto-blok.trzy:active::before,
.foto-blok.trzy:focus::before,
.foto-blok.cztery:active::before,
.foto-blok.cztery:focus::before,
.foto-blok.piec:active::before,
.foto-blok.piec:focus::before,
.foto-blok.szesc:active::before,
.foto-blok.szesc:focus::before,
.foto-blok.siedem:active::before,
.foto-blok.siedem:focus::before,
.foto-blok.osiem:active::before,
.foto-blok.osiem:focus::before,
.foto-blok.dziwiec:active::before,
.foto-blok.dziwiec:focus::before,
.foto-blok.jeden:active::before,
.foto-blok.jeden:focus::before {
  animation: blok-foto-bg 1s forwards;
}
.foto-blok.dwa:not(:hover)::before,
.foto-blok.trzy:not(:hover)::before,
.foto-blok.cztery:not(:hover)::before,
.foto-blok.piec:not(:hover)::before,
.foto-blok.szesc:not(:hover)::before,
.foto-blok.siedem:not(:hover)::before,
.foto-blok.osiem:not(:hover)::before,
.foto-blok.dziwiec:not(:hover)::before,
.foto-blok.jeden:not(:hover)::before {
  animation: blok-foto-bg-rev 1s forwards;
}
@keyframes blok-foto-bg {
  0% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    background: url("/zdjecia/portrety/kot.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
}
@keyframes blok-foto-bg-rev {
  0% {
    background: url("/zdjecia/portrety/kot.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
  40% {
    background: url("/zdjecia/portrety/kot.jpg") center center/cover no-repeat;
    filter: blur(30px);
  }
  100% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(60px);
  }
}
.foto-blok.dwa:hover {
  background: transparent;
}
.foto-blok.dwa:hover::after {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
}
@keyframes pokaz-foto {
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

.foto-blok.jeden::before {
  background: var(--bg-top);
  animation: blok-foto-bg-rev-jeden 1s forwards;
}
.foto-blok.jeden:hover::before,
.foto-blok.jeden:active::before,
.foto-blok.jeden:focus::before {
  animation: blok-foto-bg-jeden 1s forwards;
}
@keyframes blok-foto-bg-jeden {
  0% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    background: url("/zdjecia/krajobraz/blok.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
}
@keyframes blok-foto-bg-rev-jeden {
  0% {
    background: url("/zdjecia/krajobraz/blok.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
  40% {
    background: url("/zdjecia/krajobraz/blok.jpg") center center/cover no-repeat;
    filter: blur(30px);
  }
  100% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(60px);
  }
}

.foto-blok.dwa::before {
  background: var(--bg-top);
  animation: blok-foto-bg-rev-dwa 1s forwards;
}
.foto-blok.dwa:hover::before,
.foto-blok.dwa:active::before,
.foto-blok.dwa:focus::before {
  animation: blok-foto-bg-dwa 1s forwards;
}
@keyframes blok-foto-bg-dwa {
  0% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    background: url("/zdjecia/portrety/blok.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
}
@keyframes blok-foto-bg-rev-dwa {
  0% {
    background: url("/zdjecia/portrety/blok.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
  40% {
    background: url("/zdjecia/portrety/blok.jpg") center center/cover no-repeat;
    filter: blur(30px);
  }
  100% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(60px);
  }
}

.foto-blok.trzy::before {
  background: var(--bg-top);
  animation: blok-foto-bg-rev-trzy 1s forwards;
}
.foto-blok.trzy:hover::before,
.foto-blok.trzy:active::before,
.foto-blok.trzy:focus::before {
  animation: blok-foto-bg-trzy 1s forwards;
}
@keyframes blok-foto-bg-trzy {
  0% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    background: url("/zdjecia/reportaz/blok.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
}
@keyframes blok-foto-bg-rev-trzy {
  0% {
    background: url("/zdjecia/reportaz/blok.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
  40% {
    background: url("/zdjecia/reportaz/blok.jpg") center center/cover no-repeat;
    filter: blur(30px);
  }
  100% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(60px);
  }
}

.foto-blok.cztery::before {
  background: var(--bg-top);
  animation: blok-foto-bg-rev-cztery 1s forwards;
}
.foto-blok.cztery:hover::before,
.foto-blok.cztery:active::before,
.foto-blok.cztery:focus::before {
  animation: blok-foto-bg-cztery 1s forwards;
}
@keyframes blok-foto-bg-cztery {
  0% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    background: url("/zdjecia/zwierzeta/blok.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
}
@keyframes blok-foto-bg-rev-cztery {
  0% {
    background: url("/zdjecia/zwierzeta/blok.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
  40% {
    background: url("/zdjecia/zwierzeta/blok.jpg") center center/cover no-repeat;
    filter: blur(30px);
  }
  100% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(60px);
  }
}

.foto-blok.piec::before {
  background: var(--bg-top);
  animation: blok-foto-bg-rev-piec 1s forwards;
}
.foto-blok.piec:hover::before,
.foto-blok.piec:active::before,
.foto-blok.piec:focus::before {
  animation: blok-foto-bg-piec 1s forwards;
}
@keyframes blok-foto-bg-piec {
  0% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    background: url("/zdjecia/ulica/blok.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
}
@keyframes blok-foto-bg-rev-piec {
  0% {
    background: url("/zdjecia/ulica/blok.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
  40% {
    background: url("/zdjecia/ulica/blok.jpg") center center/cover no-repeat;
    filter: blur(30px);
  }
  100% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(60px);
  }
}

.foto-blok.szesc::before {
  background: var(--bg-top);
  animation: blok-foto-bg-rev-szesc 1s forwards;
}
.foto-blok.szesc:hover::before,
.foto-blok.szesc:active::before,
.foto-blok.szesc:focus::before {
  animation: blok-foto-bg-szesc 1s forwards;
}
@keyframes blok-foto-bg-szesc {
  0% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    background: url("/zdjecia/inne/blok.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
}
@keyframes blok-foto-bg-rev-szesc {
  0% {
    background: url("/zdjecia/inne/blok.jpg") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
  40% {
    background: url("/zdjecia/inne/blok.jpg") center center/cover no-repeat;
    filter: blur(30px);
  }
  100% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(60px);
  }
}

.foto-blok.siedem::before {
  background: var(--bg-top);
  animation: blok-foto-bg-rev-siedem 1s forwards;
}
.foto-blok.siedem:hover::before,
.foto-blok.siedem:active::before,
.foto-blok.siedem:focus::before {
  animation: blok-foto-bg-siedem 1s forwards;
}
@keyframes blok-foto-bg-siedem {
  0% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    background: url("/zdjecia/reportaz/zlot/blok.jpg") center center/cover
      no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
}
@keyframes blok-foto-bg-rev-siedem {
  0% {
    background: url("/zdjecia/reportaz/zlot/blok.jpg") center center/cover
      no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
  40% {
    background: url("/zdjecia/reportaz/zlot/blok.jpg") center center/cover
      no-repeat;
    filter: blur(30px);
  }
  100% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(60px);
  }
}

.foto-blok.osiem::before {
  background: var(--bg-top);
  animation: blok-foto-bg-rev-osiem 1s forwards;
}
.foto-blok.osiem:hover::before,
.foto-blok.osiem:active::before,
.foto-blok.osiem:focus::before {
  animation: blok-foto-bg-osiem 1s forwards;
}
@keyframes blok-foto-bg-osiem {
  0% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    background: url("/filmy/krotkometrazowe/bizuteria.png") center center/cover
      no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
}
@keyframes blok-foto-bg-rev-osiem {
  0% {
    background: url("/filmy/krotkometrazowe/bizuteria.png") center center/cover
      no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
  40% {
    background: url("/filmy/krotkometrazowe/bizuteria.png") center center/cover
      no-repeat;
    filter: blur(30px);
  }
  100% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(60px);
  }
}

.foto-blok.dziewiec::before {
  background: var(--bg-top);
  animation: blok-foto-bg-rev-dziewiec 1s forwards;
}
.foto-blok.dziewiec:hover::before,
.foto-blok.dziewiec:active::before,
.foto-blok.dziewiec:focus::before {
  animation: blok-foto-bg-dziewiec 1s forwards;
}
@keyframes blok-foto-bg-dziewiec {
  0% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(0px);
  }
  100% {
    background: url("/filmy/animacje/kotek.png") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
}
@keyframes blok-foto-bg-rev-dziewiec {
  0% {
    background: url("/filmy/animacje/kotek.png") center center/cover no-repeat;
    opacity: 1;
    filter: blur(6px);
  }
  40% {
    background: url("/filmy/animacje/kotek.png") center center/cover no-repeat;
    filter: blur(30px);
  }
  100% {
    background: var(--bg-top);
    opacity: 1;
    filter: blur(60px);
  }
}

/* --- Linki --- */
a {
  text-decoration: none;
  color: inherit;
}

/* --- Responsywność --- */
@media (max-width: 900px) {
  .hero-title,
  .portfolio-title {
    font-size: 8vw;
    max-width: 95vw;
  }
  .hero-subtitle {
    font-size: 4vw;
    max-width: 95vw;
  }
  .portfolio-title {
    font-size: 12vw;
    margin-top: 8vw;
    padding-top: 0;
    text-align: center;
    max-width: 100vw;
    right: 0px;
  }
  .portfolio-link {
    font-size: 10vw;
    margin-left: 0;
    margin-top: 6vw;
    line-height: 1.2;
    text-align: center;
    max-width: 100vw;
  }
  #foto {
    margin-top: 10vw;
  }
  /* Ukryj kreski w portfolio na telefonie/tablecie */
  .portfolio-section > div img {
    display: none !important;
  }
  .portfolio-section > div {
    gap: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}
@media (max-width: 600px) {
  .hero-header {
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    align-items: flex-start;
    justify-content: flex-start;
    padding: 0 0 0 4vw;
    margin: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
  }
  .hero-title {
    font-size: 21vw;
    margin-left: 0;
    margin-top: 16vw;
    margin-bottom: 0;
    text-align: left;
    word-break: break-word;
    white-space: normal;
    max-width: 92vw;
    letter-spacing: 1px;
    line-height: 1.05;
    overflow-wrap: break-word;
  }
  #hero-fotografia {
    font-size: 13vw;
    margin-left: 0;
    margin-top: 4vw;
    margin-bottom: 0;
    text-align: left;
    word-break: break-word;
    white-space: normal;
    max-width: 92vw;
    line-height: 1.05;
    display: block;
  }
  .grafika-inline {
    display: none;
  }
  #hero-grafika {
    font-size: 13vw;
    margin-left: 0;
    margin-top: 4vw;
    margin-bottom: 0;
    text-align: left;
    word-break: break-word;
    white-space: normal;
    max-width: 92vw;
    line-height: 1.05;
    display: block !important;
  }
  .arrow-img {
    width: 16vw;
    height: 22vw;
    left: 0;
    max-width: 70px;
    max-height: 100px;
  }
  .hero-arrow {
    position: fixed;
    left: 50%;
    bottom: 24px;
    transform: translateX(-50%);
    z-index: 100;
    /* zapewnia widoczność na dole ekranu */
  }

  /* Przesunięcie MOJE PORTFOLIO i przycisków w dół */
  .portfolio-section > div {
    margin-top: 18vw !important;
    margin-bottom: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100vw !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .portfolio-title {
    font-size: 14vw;
    margin-top: 0;
    padding-top: 0;
    text-align: center;
    max-width: 100vw;
    margin-left: auto !important;
    margin-right: auto !important;
    display: block;
    width: 100vw;
    justify-content: center;
    align-items: center;
  }

  .corner-link {
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    width: 90vw;
    margin: 0;
    font-size: 12vw;
    text-align: center;
    line-height: 1.2;
    z-index: 200;
    display: block;
    justify-content: center;
    align-items: center;
  }
  .corner-link.left {
    bottom: 20vw;
    right: auto;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;
  }
  .corner-link.right {
    bottom: 5vw;
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    text-align: center;
  }
  .fotografia-bloki {
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: none !important;
    gap: 7vw 0 !important;
    width: 98vw !important;
    max-width: 100vw !important;
    margin: 8vw auto 8vw auto !important;
    align-items: stretch !important;
    justify-items: center !important;
    height: auto !important;
  }
  .foto-blok {
    width: 94vw !important;
    max-width: 94vw !important;
    font-size: 7vw !important;
    padding: 8vw 0 !important;
    margin: 0 auto !important;
    border-radius: 18px !important;
  }

  /* Napis FOTOGRAFIA pod strzałką */
  #fotografia-section .kontakt-back {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* strzałka po lewo */
    justify-content: flex-start !important;
    position: static !important;
    margin-top: 8vw !important;
    margin-bottom: 0 !important;
  }
  #fotografia-section .arrow-img.kontakt-arrow {
    width: 12vw !important;
    height: 16vw !important;
    max-width: 48px !important;
    max-height: 64px !important;
    margin-bottom: 0 !important;
    display: block !important;
    margin-left: 4vw !important; /* odstęp od lewej krawędzi */
    margin-right: 0 !important;
  }
  #fotografia-section .kontakt-title {
    font-size: 17vw !important;
    margin-top: 2vw !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    text-align: center !important;
    display: block !important;
  }
  #fotografia-section {
    overflow: auto;
  }
  /* Napis GRAFIKA pod strzałką */
  #grafika-section .kontakt-back {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* strzałka po lewo */
    justify-content: flex-start !important;
    position: static !important;
    margin-top: 8vw !important;
    margin-bottom: 0 !important;
  }
  #grafika-section .arrow-img.kontakt-arrow {
    width: 12vw !important;
    height: 16vw !important;
    max-width: 48px !important;
    max-height: 64px !important;
    margin-bottom: 0 !important;
    display: block !important;
    margin-left: 4vw !important; /* odstęp od lewej krawędzi */
    margin-right: 0 !important;
  }
  #grafika-section .kontakt-title {
    font-size: 17vw !important;
    margin-top: 2vw !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    text-align: center !important;
    display: block !important;
  }
  /* Napis FILMY pod strzałką */
  #filmy-section .kontakt-back {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* strzałka po lewo */
    justify-content: flex-start !important;
    position: static !important;
    margin-top: 8vw !important;
    margin-bottom: 0 !important;
  }
  #filmy-section .arrow-img.kontakt-arrow {
    width: 12vw !important;
    height: 16vw !important;
    max-width: 48px !important;
    max-height: 64px !important;
    margin-bottom: 0 !important;
    display: block !important;
    margin-left: 4vw !important; /* odstęp od lewej krawędzi */
    margin-right: 0 !important;
  }
  #filmy-section .kontakt-title {
    font-size: 17vw !important;
    margin-top: 2vw !important;
    margin-bottom: 0 !important;
    padding-top: 0 !important;
    text-align: center !important;
    display: block !important;
  }
  #filmy-section {
    overflow: auto;
  }
  /* Napis KONTAKT pod strzałką */
  #kontakt-section .kontakt-back {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* strzałka po lewo */
    justify-content: flex-start !important;
    position: static !important;
    margin-top: 8vw !important;
    margin-bottom: 0 !important;
  }
  #kontakt-section .arrow-img.kontakt-arrow {
    width: 12vw !important;
    height: 16vw !important;
    max-width: 48px !important;
    max-height: 64px !important;
    margin-bottom: 0 !important;
    display: block !important;
    margin-left: 4vw !important; /* odstęp od lewej krawędzi */
    margin-right: 0 !important;
  }
  #kontakt-section .kontakt-title {
    font-size: 17vw !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    text-align: center !important;
    display: block !important;
  }
  #kontakt-section .kontakt-row {
    grid-template-columns: 1fr !important;
    top: 0 !important;
    margin-bottom: 3vw !important;
    width: 100vw !important;
    max-width: 100vw !important;
    padding: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    display: flex !important;
    flex-direction: column !important;
    text-align: center !important;
  }
  #kontakt-section .kontakt-label {
    font-size: 290% !important;
    padding-right: 0 !important;
    text-align: center !important;
    margin-bottom: 0.5vw !important;
    font-weight: bold !important;
  }
  #kontakt-section .kontakt-row:first-of-type {
    margin-top: 8vw !important;
  }
  #kontakt-section .kontakt-value {
    font-size: 180% !important;
    word-break: break-all;
    letter-spacing: 2px;
    text-align: center !important;
    margin-bottom: 2vw !important;
    font-weight: bold !important;
    color: var(--julia-bg) !important;
  }
  #kontakt-section .kontakt-footer-text {
    font-size: 7vw !important;
    padding: 15vw 3vw !important;
    font-weight: bold !important;
    word-break: break-word !important;
    overflow-wrap: break-word !important;
    max-width: 100vw !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    white-space: normal !important;
  }
  #kontakt-section .kontakt-back img[alt="kreska 3"] {
    display: none !important;
  }
  #kontakt-section header {
    top: 20px !important;
    margin-bottom: 0 !important;
  }
  #kontakt-section {
    padding: 0 !important;
    min-height: 100vh !important;
    height: auto !important;
    overflow-y: auto !important;
  }
  /* Napis O MNIE pod strzałką */
  #omnie-section .kontakt-back {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important; /* strzałka po lewo */
    justify-content: flex-start !important;
    position: static !important;
    margin-top: 8vw !important;
    margin-bottom: 0 !important;
  }
  #omnie-section .arrow-img.kontakt-arrow {
    width: 12vw !important;
    height: 16vw !important;
    max-width: 48px !important;
    max-height: 64px !important;
    margin-bottom: 0 !important;
    display: block !important;
    margin-left: 4vw !important; /* odstęp od lewej krawędzi */
    margin-right: 0 !important;
  }
  #omnie-section .kontakt-title {
    font-size: 17vw !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
    text-align: center !important;
    display: block !important;
  }
  #omnie-section .kontakt-back img[alt="kreska 3"] {
    display: none !important;
  }
  #omnie-section img[alt="JM Logo"] {
    display: none !important;
  }
  #omnie-section header {
    top: 20px !important;
    margin-bottom: 0 !important;
  }
  #omnie-section h6 {
    padding-top: 2vw !important;
    margin-top: 0 !important;
    margin-left: 5vw !important;
    margin-right: 5vw !important;
    font-size: 8vw !important;
    color: var(--julia-bg);
    line-height: 1.3 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    -moz-user-select: none !important;
    -ms-user-select: none !important;
  }
  #omnie-section {
    overflow-y: auto !important;
    height: 100vh !important;
  }
  div.safari {
    margin-bottom: 20vw !important;
  }
}
/* --- Na komputerze --- */
@media (min-width: 601px) {
  #hero-grafika {
    display: none !important;
  }
  .grafika-inline {
    display: inline;
  }
}

/* --- Animacje FILMY --- */
#filmy-section {
  /* domyślnie ukryte, pozycja jak inne sekcje */
  display: none;
  position: absolute;
  top: 100vh;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: #fff;
  z-index: 300;
  transition: none;
}

#filmy-section.slide-down-in {
  display: block;
  animation: filmyDownIn 0.7s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}
#filmy-section.slide-down-out {
  display: block;
  animation: filmyDownOut 0.7s cubic-bezier(0.77, 0, 0.18, 1) forwards;
}

@keyframes filmyDownIn {
  from {
    opacity: 0;
    transform: translateY(-100px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}
@keyframes filmyDownOut {
  from {
    opacity: 1;
    transform: translateY(0);
  }
  to {
    opacity: 0;
    transform: translateY(100px);
  }
}

#filmy-section .fotografia-bloki {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  gap: 60px;
  margin-top: 60px;
  width: 100%;
  height: auto;
}

/* --- Ładniejszy podgląd filmu w modalu --- */

.modal-video {
  border-radius: 12px;
  box-shadow: 0 2px 16px #735b4620;
  background: #000;
  margin-bottom: 24px;
  max-width: 90vw;
  max-height: 60vh;
  outline: none;
  border: 2px solid #735b46;
}

#modal-txt-filmy {
  margin-top: 0;
  text-align: center;
  color: #735b46;
  font-size: 18px;
  font-weight: 500;
  padding: 0;
}

/* Modal close button hover effect */
.modal-close-btn:hover {
  background: #f5e9da;
  border-radius: 50%;
  box-shadow: 0 2px 8px #735b4620;
}

img.safari {
  display: none !important;
}
/* Ukryj logo i kreskę 3 na tabletach (600px-900px) */
@media (min-width: 600px) and (max-width: 1200px) {
  #omnie-section img[alt="JM Logo"] {
    display: none !important;
  }
}

/* Blokada rotacji tylko na urządzeniach mobilnych */
@media only screen and (max-width: 900px) and (orientation: landscape) {
  body {
    overflow: hidden !important;
    width: 100vw !important;
    height: 100vh !important;
  }
  #rotation-lock-message {
    display: flex !important;
  }
  #main-content {
    display: none !important;
  }
}
#rotation-lock-message {
  display: none;
  position: fixed;
  z-index: 99999;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  max-width: 100vw;
  max-height: 100vh;
  background: #fcfcfd;
  color: #735b46;
  align-items: center;
  justify-content: center;
  font-size: 6vw;
  text-align: center;
  padding: 0 6vw;
  box-sizing: border-box;
  overflow-wrap: break-word;
  overflow-y: auto;
  word-break: break-word;
}