/* assets/css/styles.css */

/* ===== Reset ===== */
*{margin:0;padding:0;box-sizing:border-box}

:root{
  --pearl:#f2efea;
  --muted:#9aa7a0;
  --green:#1f3a30;
  --ease:cubic-bezier(0.22, 0.61, 0.36, 1);

  --ui:-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --display:"Space Grotesk", var(--ui);
  /* Linie pod dużym display: ta sama rodzina + ciaśniejszy rytm niż zwykły UI */
  --display-sub-font: var(--display);
  --display-sub-weight: 400;
  --display-sub-tracking: -0.014em;
  --display-sub-lh: 1.58;
}

html{
  scroll-behavior:smooth;
  overflow-x:hidden;
}

body{
  font-family:var(--ui);
  color:var(--pearl);
  background:#000;
  min-height:100vh;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

/* Background — z-index 0 + treść w .pageRoot (z-index 1): na Safari ujemny z-index + 3D/perspective na rodzeństwie powoduje „skakanie” tła */
.siteBg{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  z-index:0;
  pointer-events:none;
  opacity:1;
  transition: opacity 1.2s var(--ease) 0.2s;
}

.pageRoot{
  position:relative;
  z-index:1;
  isolation:isolate;
}

.siteBg::before,
.siteBg::after{
  content:"";
  position:absolute;
  inset:0;
}

.siteBg::before{
  background: url("../img/tlo.svg") center/cover no-repeat;
  filter: grayscale(1) contrast(1.05) brightness(0.9);
}

.siteBg::after{
  background:
    linear-gradient(rgba(31,58,48,0.55), rgba(31,58,48,0.55)),
    url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='6' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.35'/%3E%3C/svg%3E");
  background-blend-mode: multiply, normal;
}

/* Mobile / touch: lżejsze tło; tło nie fixed (iOS mniej „skacze” przy 3D/perspective obok) */
@media (max-width:900px),(hover:none) and (pointer:coarse){
  html{
    overscroll-behavior-y:none;
  }
  body{
    position:relative;
    overscroll-behavior-y:none;
  }
  .siteBg{
    position:absolute;
    inset:0;
    height:auto;
  }
  .pageRoot{
    isolation:auto;
  }
  .siteBg::before{
    filter:grayscale(1) brightness(0.9);
  }
  .siteBg::after{
    background:rgba(31,58,48,0.58);
    background-blend-mode:normal;
  }
}

body::before{
  content:none;
}

body::after{
  content:none !important;
}

body.viewer-open .siteBg{
  opacity:0;
}

a{ color:inherit; }

:focus-visible{
  outline: 2px solid rgba(242,239,234,0.65);
  outline-offset: 4px;
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce){
  *{ scroll-behavior:auto !important; }
  *{ transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

/* ===== TOP NAV ===== */
.topNav{
  position:fixed;
  top:0; left:0;
  width:100%;
  z-index:2100;
  padding:18px;
  pointer-events:none;
}

.topNav__inner{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:18px;
  max-width:1520px;
  margin:0 auto;
  position:relative;
  z-index:1;
  pointer-events:auto;
}

.topNav__brand{
  display:inline-flex;
  align-items:center;
  gap:10px;
  text-decoration:none;
}

.topNav__logo{
  width:128px;
  height:128px;
  display:block;
  object-fit:contain;
  opacity:1;
  filter:
    sepia(0.26) saturate(0.34) brightness(0.9) contrast(1.02)
    drop-shadow(0 12px 10px rgba(0,0,0,0.78));
  transition: transform 180ms ease, opacity 180ms ease, filter 180ms ease;
}
.topNav__brand:hover .topNav__logo{
  transform: translateY(-1px) scale(1.14) rotate(10deg);
  opacity:1;
  filter:
    sepia(0.26) saturate(0.34) brightness(0.9) contrast(1.02)
    drop-shadow(0 12px 12px rgba(0,0,0,0.58));
}

.topNav__right{
  display:flex;
  align-items:center;
  gap:18px;
  position:relative;
}

/* Blur footprint matches nav tint gradient (270deg, same stops) */
.topNav__right::before{
  content:"";
  position:absolute;
  top:50%;
  right:-140px;
  width:calc(100% + 360px);
  height:62px;
  transform:translateY(-50%);
  background:transparent;
  backdrop-filter:blur(10px) saturate(1.06);
  -webkit-backdrop-filter:blur(10px) saturate(1.06);
  mask-image:linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.42) 14%, rgba(0,0,0,1) 34%, rgba(0,0,0,0.92) 56%, rgba(0,0,0,0.35) 78%, transparent 100%);
  -webkit-mask-image:linear-gradient(270deg, transparent 0%, rgba(0,0,0,0.42) 14%, rgba(0,0,0,1) 34%, rgba(0,0,0,0.92) 56%, rgba(0,0,0,0.35) 78%, transparent 100%);
  mask-repeat:no-repeat;
  -webkit-mask-repeat:no-repeat;
  pointer-events:none;
  z-index:-2;
}

/* Tint layer: unchanged gradient, no mask */
.topNav__right::after{
  content:"";
  position:absolute;
  top:50%;
  right:-140px;
  width:calc(100% + 360px);
  height:62px;
  transform:translateY(-50%);
  background:linear-gradient(270deg, rgba(7,10,8,0) 0%, rgba(7,10,8,0.22) 14%, rgba(7,10,8,0.52) 34%, rgba(7,10,8,0.48) 56%, rgba(7,10,8,0.18) 78%, rgba(7,10,8,0) 100%);
  pointer-events:none;
  z-index:-1;
}

@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  .topNav__right::before{
    display:none;
  }
}

.topNav__links{
  display:flex;
  align-items:center;
  gap:56px;
}

.topNav__link{
  display:inline-block;
  position:relative;
  font-family: var(--display);
  font-size:24px;
  line-height:1.05;
  letter-spacing:0.06em;
  font-weight:400;
  color:rgba(242,239,234,0.94);
  text-decoration:none;
  text-shadow: 0 2px 20px rgba(0,0,0,0.55);
  padding:6px 0;
  transition: opacity 110ms ease, transform 110ms ease, color 110ms ease;
}

.topNav__link:hover{
  opacity:1;
  transform:translateY(-1px) scale(1.03);
}

.topNav__link:active{ transform:translateY(0px); }

.topNav__link--active{
  opacity:1;
  color: rgba(255,250,242,0.98);
  letter-spacing: 0.08em;
  font-weight:500;
}

.topNav__link--active::after{
  content:"";
  position:absolute;
  left:0;
  right:0;
  bottom:-4px;
  height:1px;
  background: linear-gradient(90deg, rgba(242,239,234,0) 0%, rgba(242,239,234,0.78) 22%, rgba(242,239,234,0.96) 50%, rgba(242,239,234,0.78) 78%, rgba(242,239,234,0) 100%);
  opacity:0.92;
  transform:scaleX(1.04);
}

/* Language switch */
.langSwitch{
  display:flex;
  gap:6px;
  padding:6px;
  border-radius:999px;
  background: rgba(15,28,23,0.55);
  border:1px solid rgba(242,239,234,0.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.langBtn{
  appearance:none;
  border:none;
  cursor:pointer;
  user-select:none;

  height:30px;
  min-width:40px;
  padding:0 10px;
  border-radius:999px;

  font-family:inherit;
  font-size:12px;
  letter-spacing:0.10em;
  font-weight:300;

  color: rgba(242,239,234,0.88);
  background: rgba(242,239,234,0.06);
  border: 1px solid rgba(242,239,234,0.16);

  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}
.langBtn:hover{
  transform: translateY(-1px);
  background: rgba(242,239,234,0.12);
  border-color: rgba(242,239,234,0.28);
}
.langBtn:active{ transform: translateY(0px) scale(0.98); }

.langBtn[aria-pressed="true"]{
  background: rgba(242,239,234,0.16);
  border-color: rgba(242,239,234,0.36);
  color: rgba(242,239,234,0.96);
}


@media (max-width:520px){
  .topNav{ padding:14px 12px; }
  .topNav__links{ gap:28px; }
  .topNav__link{ font-size:16px; letter-spacing:0.09em; }

  .topNav__right{ gap:10px; }
  .topNav__right::before,
  .topNav__right::after{
    height:44px;
    right:-42px;
    width:calc(100% + 128px);
  }
  .topNav__right::before{
    backdrop-filter:blur(8px) saturate(1.05);
    -webkit-backdrop-filter:blur(8px) saturate(1.05);
  }
  .langSwitch{ padding:5px; gap:5px; }
  .langBtn{ height:28px; min-width:36px; font-size:11px; padding:0 9px; }
}

@media (max-width:900px){
  .topNav{
    padding:14px 12px;
  }

  .topNav__inner{
    align-items:flex-start;
    min-width:0;
  }

  .topNav__links{
    display:none;
  }

  .topNav__right{
    width:auto;
    max-width:calc(100vw - 124px);
    min-width:0;
    flex:0 1 auto;
    justify-content:flex-end;
    margin-left:auto;
    padding-right:54px;
  }

  .topNav__right::before,
  .topNav__right::after{
    height:46px;
    right:-38px;
    width:calc(100% + 132px);
  }
  .topNav__right::before{
    backdrop-filter:blur(8px) saturate(1.05);
    -webkit-backdrop-filter:blur(8px) saturate(1.05);
  }

  .topNav__logo{
    width:44px;
    height:44px;
  }

  .langSwitch{
    max-width:100%;
    flex-wrap:nowrap;
  }
}

/* ===== VIEW DIM (background blur when viewer open) ===== */
.viewerDim{
  transition: opacity 1.2s var(--ease), filter 1.2s var(--ease);
}
body.viewer-open .viewerDim{ opacity:0.10; filter: blur(2px); }

.stage,
.ambient{
  transition: opacity 1.2s var(--ease);
}
body.viewer-open .stage,
body.viewer-open .ambient{ opacity:0; }

/* Hide top nav while viewer is open (cinematic) */
body.viewer-open .topNav{
  opacity:0;
  pointer-events:none;
  transition: opacity 200ms ease;
}

/* ===== MENU BUTTON ===== */
.menuBtn{
  position:fixed;
  left:18px;
  top:50%;
  transform:translateY(-50%);
  z-index:2400;
  width:54px;
  height:54px;
  border-radius:18px;
  background: rgba(15,28,23,0.65);
  border:1px solid rgba(242,239,234,0.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  display:grid;
  place-items:center;
  cursor:pointer;
  user-select:none;
  transition: transform .2s ease, background .2s ease, opacity .2s ease;
}
.menuBtn:hover{ transform:translateY(-50%) scale(1.03); background: rgba(31,58,48,0.75); }
.menuBtn:active{ transform:translateY(-50%) scale(0.98); }
.menuBtn .bars{ width:22px; height:16px; display:flex; flex-direction:column; justify-content:space-between; }
.menuBtn .bars span{ height:2px; width:100%; background: rgba(242,239,234,0.9); border-radius:999px; }

@media (max-width:520px){
  .menuBtn{ left:12px; width:42px; height:42px; border-radius:0; }
}

@media (max-width:900px){
  .menuBtn{
    top:13px;
    left:auto;
    right:14px;
    transform:none;
    width:42px;
    height:42px;
    border-radius:0;
    background:transparent;
    border:none;
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
    box-shadow:none;
  }

  .menuBtn:hover{
    transform:scale(1.04);
    background:transparent;
  }

  .menuBtn:active{
    transform:scale(0.98);
  }

  .menuBtn .bars{
    width:24px;
    height:17px;
  }
}

/* ===== MENU OVERLAY + PANEL ===== */
.menuOverlay{
  position:fixed; inset:0;
  z-index:2300;
  visibility:hidden;
  pointer-events:none;
  transition: visibility 0s linear 520ms;
}
.menuOverlay.open{
  visibility:visible;
  pointer-events:auto;
  transition: visibility 0s linear 0s;
}
.menuDim{
  position:absolute; inset:0;
  z-index:0;
  background: rgba(0,0,0,0.52);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  opacity:0;
  transition: opacity 420ms var(--ease), backdrop-filter 420ms var(--ease), -webkit-backdrop-filter 420ms var(--ease);
}
.menuOverlay.open .menuDim{ opacity:1; }

.menuPanel{
  position:absolute;
  top:0; right:0;
  width:min(520px, 88vw);
  height:100%;
  z-index:1;
  background: rgba(0,0,0,0.38);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  box-shadow: -30px 0 80px rgba(0,0,0,0.35);
  display:flex;
  align-items:center;
  padding:36px;
  transform: translateX(24px);
  opacity:0;
  transition: transform 520ms var(--ease), opacity 420ms var(--ease);
}
.menuOverlay.open .menuPanel{
  transform: translateX(0);
  opacity:1;
}
.menuPanel::before{
  content:"";
  position:absolute; inset:0;
  border-left: 1px solid rgba(242,239,234,0.10);
  background: linear-gradient(
    180deg,
    rgba(255,255,255,0.03) 0%,
    rgba(0,0,0,0.00) 55%,
    rgba(255,255,255,0.02) 100%
  );
  pointer-events:none;
  z-index:0;
}
.menuPanel > *{ position:relative; z-index:1; }

.menuList{ display:flex; flex-direction:column; gap:44px; width:100%; }

.menuItem{ display:flex; flex-direction:column; gap:10px; }

.menuLabel{
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  opacity:0.55;
  font-weight:300;
}

.menuLink{
  position: relative;
  display: inline-block;

  font-size: clamp(44px, 6vw, 78px);
  line-height:0.95;
  letter-spacing:-0.02em;
  color: var(--pearl);
  text-decoration:none;
  font-weight:700;
  opacity:0.92;
  transform: translateX(6px);

  transition:
    transform 380ms var(--ease),
    opacity 380ms var(--ease);
}

/* animacja przy otwieraniu menu */
.menuOverlay.open .menuLink{
  opacity:0.98;
  transform: translateX(0);
}

/* underline */
.menuLink::after{
  content:"";
  position:absolute;
  left:0;
  bottom:-8px;
  width:100%;
  height:1px;
  background: rgba(242,239,234,0.55);

  transform: scaleX(0);
  transform-origin: left;

  transition: transform 380ms var(--ease), opacity 380ms var(--ease);
  opacity:0;
}

/* hover */
.menuLink:hover,
.menuLink:focus-visible{
  transform: translateX(-4px);
  opacity:1;
  outline:none;
}

.menuLink:hover::after,
.menuLink:focus-visible::after{
  transform: scaleX(1);
  opacity:1;
}

@media (max-width:900px){
  .menuPanel{
    width:min(420px, 100vw);
    padding:96px 24px 34px;
    align-items:flex-start;
  }

  .menuList{
    gap:30px;
    align-items:flex-end;
  }

  .menuItem{
    align-items:flex-end;
    text-align:right;
  }

  .menuLabel{
    text-align:right;
  }

  .menuLink{
    font-size:clamp(34px, 10vw, 54px);
  }

  .menuOverlay.open .menuLink:focus-visible{
    transform: translateX(0);
    opacity:0.98;
  }

  .menuOverlay.open .menuLink:focus-visible::after{
    transform: scaleX(0);
    opacity:0;
  }
}


/* ===== HERO TITLE ===== */
.heroTitle{
  position:relative;
  max-width:1520px;
  margin:0 auto;
  padding:140px 18px 60px 18px;
  z-index:5;
}
.heroTitle__text{
  font-family: var(--display);
  font-size: clamp(64px, 9vw, 140px);
  line-height:0.9;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  color:var(--pearl);
  text-align:left;
  max-width:1200px;
}

.heroTitle__strong{
  font-weight:700;
  text-shadow: 18px 18px 34px rgba(0,0,0,0.82);
}

.heroTitle__light{
  font-weight:300;
  opacity:0.95;
  text-shadow: 18px 18px 34px rgba(0,0,0,0.82);
}

.heroTitle__sub{
  font-family: var(--display-sub-font);
  font-weight: var(--display-sub-weight);
  letter-spacing: var(--display-sub-tracking);
  line-height: var(--display-sub-lh);
  text-shadow: 14px 14px 28px rgba(0,0,0,0.74);
  margin-top: 22px;
  max-width: 60ch;
  font-size: clamp(16px, 1.25vw, 21px);
  color: rgba(242,239,234,0.88);
  transform:translateX(10px);
}

@media (min-width:1000px){
  .heroTitle{ padding:180px 40px 100px 40px; }
}
@media (max-width:520px){
  .heroTitle{ padding:120px 16px 40px 16px; }
  .heroTitle__text{ font-size: clamp(48px, 12vw, 72px); }
  .heroTitle__sub{ font-size: clamp(15px, 3.8vw, 17px); }
}

@media (max-width:900px){
  .heroTitle{
    padding:110px 18px 34px 18px;
  }

  .heroTitle__text{
    font-size: clamp(48px, 13vw, 92px);
    line-height:0.92;
    max-width:10ch;
  }

  .heroTitle__sub{
    margin-top:16px;
    max-width:34ch;
    font-size: clamp(15px, 3.6vw, 17px);
    line-height: 1.52;
    transform:translateX(6px);
  }
}

/* ===== WORK TITLE ===== */
#work{
  position: relative;
  scroll-margin-top: 260px;
}

#work::before{
  content:"";
  display:block;
  height:220px;
  margin-top:-220px;
  pointer-events:none;
  visibility:hidden;
}

.workHeader{
  margin-top:40px;
  margin-bottom:24px;
  width:min(1400px, 98vw);
  display:flex;
  justify-content:center;
}
.workTitle{
  font-family: var(--display);
  font-size: clamp(42px, 7vw, 96px);
  line-height:0.95;
  letter-spacing:-0.03em;
  text-transform:uppercase;
  font-weight:700;
  opacity:0.96;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:34px;
  text-align:center;
  user-select:none;
  transform:translateX(122px);
}

.workTitle__base{
  font-weight:700;
  text-shadow: 16px 16px 34px rgba(0,0,0,0.8);
}

.workTitle__slot{
  display:inline-block;
  min-width: 10ch;
  height:calc(1.15em + 18px);
  padding-bottom:18px;
  margin-bottom:-18px;
  overflow:hidden;
  position:relative;
  perspective:900px;
}

.workTitle__word{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  width:100%;
  height:100%;
  white-space:nowrap;
  font-weight:300;
  text-shadow: 12px 12px 28px rgba(0,0,0,0.56);
  transform-origin:50% 45%;
  transform:rotateX(0deg);
  opacity:1;
  will-change:transform, opacity;
}

.workTitle__word.is-flipping{
  animation: workTitleFlip 1.4s cubic-bezier(.2,.9,.2,1) both;
}

@keyframes workTitleFlip{
  0% { transform: rotateX(0deg); opacity:1; }
  35% { transform: rotateX(90deg); opacity:0; }
  36% { transform: rotateX(-90deg); opacity:0; }
  65% { transform: rotateX(0deg); opacity:1; }
  100% { transform: rotateX(0deg); opacity:1; }
}

@media (max-width:720px){
  .workHeader{
    margin-top:22px;
    margin-bottom:24px;
    justify-content:flex-end;
    padding-right:36px;
  }

  .workTitle{
    font-size: clamp(30px, 10vw, 58px);
    gap:20px;
    flex-direction:column;
    align-items:flex-end;
    text-align:right;
    transform:none;
  }

  .workTitle__slot{
    min-width: 9ch;
    text-align:right;
    perspective:none;
  }

  .workTitle__word{
    justify-content:flex-end;
  }

  .workTagline{
    margin-top:12px;
    font-size:clamp(16px, 5vw, 22px);
    max-width:18ch;
  }
}

/* ===== RING ===== */
.stage{
  min-height:100vh;
  display:grid;
  place-items:center;
  align-content:start;
  row-gap:8px;
  padding:18px 18px 140px;
  width:100%;
  max-width:100%;
  overflow-x:hidden;
}

.scene{
  width:min(1400px, 98vw);
  height:min(680px, 74vh);
  position:relative;
  perspective:500px;
  perspective-origin:50% 40%;
  touch-action: pan-y;
  overflow:visible;
  max-width:100%;
}

.workTagline{
  margin-top:34px;
  font-family: var(--display-sub-font);
  font-size:clamp(18px, 2.1vw, 28px);
  line-height:1.22;
  letter-spacing:-0.02em;
  font-weight: var(--display-sub-weight);
  text-align:center;
  color:rgba(242,239,234,0.78);
  text-shadow: 10px 10px 24px rgba(0,0,0,0.42);
  max-width:26ch;
}

.ringCanvas{
  width:100%;
  height:100%;
  display:block;
}

.ringNav{
  position:absolute;
  top:50%;
  transform:translateY(-50%);
  z-index:6;
  width:54px;
  height:54px;
  border-radius:999px;
  border:1px solid rgba(242,239,234,0.18);
  background:rgba(7,10,8,0.55);
  color:transparent;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 28px rgba(0,0,0,0.28);
  font:inherit;
  font-size:0;
  line-height:1;
  cursor:pointer;
  display:grid;
  place-items:center;
  transition:transform 160ms ease, background 160ms ease, border-color 160ms ease, opacity 160ms ease;
}

.ringNav::before{
  color:rgba(242,239,234,0.96);
  font-size:34px;
  font-weight:300;
  line-height:1;
  transform:translateY(-2px);
}

.ringNav--prev::before{ content:"\2039"; }
.ringNav--next::before{ content:"\203A"; }

.ringNav:hover{
  background:rgba(16,24,19,0.78);
  border-color:rgba(242,239,234,0.3);
}

.ringNav:active{
  transform:translateY(-50%) scale(0.96);
}

.ringNav--prev{ left:18px; }
.ringNav--next{ right:18px; }

.ringPlayHint{
  position:absolute;
  left:0;
  top:0;
  z-index:7;
  min-width:88px;
  height:54px;
  padding:0 20px;
  border-radius:999px;
  border:1px solid rgba(242,239,234,0.22);
  background:rgba(8,12,10,0.74);
  color:rgba(242,239,234,0.96);
  backdrop-filter:blur(12px);
  -webkit-backdrop-filter:blur(12px);
  box-shadow:0 12px 30px rgba(0,0,0,0.28);
  display:grid;
  place-items:center;
  font-size:14px;
  font-weight:500;
  letter-spacing:0.14em;
  text-transform:uppercase;
  pointer-events:none;
  opacity:0;
  transform:translate(-50%, -50%) scale(0.92);
  transition:opacity 160ms ease, transform 180ms ease;
}

.ringPlayHint.is-visible{
  opacity:1;
  transform:translate(-50%, -50%) scale(1);
}

.ringFallback{
  width:100%;
  min-height:420px;
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(140px, 1fr));
  gap:18px;
  align-content:center;
  padding:20px;
}

.ringFallback__item{
  position:relative;
  aspect-ratio:9 / 16;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(24,35,30,0.95), rgba(8,11,9,0.98));
  border:1px solid rgba(242,239,234,0.12);
  box-shadow:0 18px 40px rgba(0,0,0,0.35);
  overflow:hidden;
  appearance:none;
  width:100%;
  padding:0;
  cursor:pointer;
  transition:transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.ringFallback__item:hover{
  transform:translateY(-4px);
  border-color:rgba(242,239,234,0.28);
  box-shadow:0 24px 50px rgba(0,0,0,0.42);
}

.ringFallback__item:active{
  transform:translateY(-1px) scale(0.99);
}

.ringFallback__item img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.ringFallback__item::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(180deg, rgba(0,0,0,0.02), rgba(0,0,0,0.38));
  pointer-events:none;
}

.ringFallback__badge{
  position:absolute;
  left:50%;
  bottom:16px;
  transform:translateX(-50%);
  z-index:1;
  min-width:84px;
  height:40px;
  padding:0 18px;
  border-radius:999px;
  border:1px solid rgba(242,239,234,0.28);
  background:rgba(8,12,10,0.78);
  color:rgba(242,239,234,0.95);
  display:grid;
  place-items:center;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.12em;
  text-transform:uppercase;
  backdrop-filter:blur(10px);
  -webkit-backdrop-filter:blur(10px);
  box-shadow:0 12px 26px rgba(0,0,0,0.28);
  pointer-events:none;
}

.ring{
  width:100%;
  height:100%;
  position:absolute;
  transform-style: preserve-3d;
  transform: translateZ(-180px) rotateY(var(--rot, 0deg));
  transition: transform 2000ms cubic-bezier(.2,.9,.2,1);
  will-change: transform;
}

#ringLegacy{
  display:none !important;
}

.phone{
  position:absolute;
  left:50%;
  top:50%;
  --cube-size:148px;
  --cube-depth:42px;
  width:var(--cube-size);
  height:var(--cube-size);
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateY(var(--a)) translateZ(var(--radius, 520px));
  cursor:pointer;
  user-select:none;
  transition: opacity 0.3s ease;
}

.phoneBody{
  position:relative;
  width:100%;
  height:100%;
  transform-style:preserve-3d;
  transition: transform 200ms ease, opacity 200ms ease, filter 200ms ease;
}

.phoneShell{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:0;
  background:#111;
  padding:8px;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.07);
  position:relative;
  transform-style:preserve-3d;
  transform:translateZ(calc(var(--cube-depth) / 2));
  backface-visibility:hidden;
}

/* premium highlight */
.phoneShell::after{
  content:"";
  position:absolute; inset:0;
  border-radius:0;
  background: none;
  opacity:0;
  pointer-events:none;
}

.phone.front .phoneShell::after{ opacity: 1; }

.phoneBack{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  border-radius:0;
  background:linear-gradient(180deg, #242424 0%, #0d0d0d 100%);
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
  transform:translateZ(calc(var(--cube-depth) / -2)) rotateY(180deg);
  backface-visibility:hidden;
}

.phoneEdge{
  position:absolute;
  background:#1a1a1a;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.04);
  transform-style:preserve-3d;
  backface-visibility:hidden;
}

.phoneEdge--left,
.phoneEdge--right{
  top:0;
  left:0;
  height:100%;
  width:var(--cube-depth);
}

.phoneEdge--left{
  transform-origin:center center;
  border-radius:0;
  transform:translateX(calc(var(--cube-depth) / -2)) rotateY(-90deg);
}

.phoneEdge--right{
  left:0;
  transform-origin:center center;
  border-radius:0;
  transform:translateX(calc(var(--cube-depth) / 2)) rotateY(90deg);
}

.phoneEdge--top,
.phoneEdge--bottom{
  top:0;
  left:0;
  width:100%;
  height:var(--cube-depth);
}

.phoneEdge--top{
  transform-origin:center center;
  border-radius:0;
  transform:translateY(calc(var(--cube-depth) / -2)) rotateX(90deg);
}

.phoneEdge--bottom{
  top:0;
  transform-origin:center center;
  border-radius:0;
  transform:translateY(calc(var(--cube-depth) / 2)) rotateX(-90deg);
}

.phone:hover .phoneBody{
  transform: translateZ(10px) scale(1.06);
}

.screen{
  position:relative;
  width:100%;
  height:100%;
  border-radius:0;
  overflow:hidden;
  background:#000;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.05);
}

.notch{
  position:absolute;
  top:6px; left:50%;
  transform:translateX(-50%);
  width:42%;
  height:10px;
  background:#000;
  border-radius:0;
  z-index:3;
}

.thumb{
  position:absolute;
  top:0;
  left:50%;
  height:100%;
  width:auto;
  transform:translateX(-50%);
  display:block;
  filter:none;
  opacity:1;
}

.playBadge{
  position:absolute; inset:0;
  display:grid; place-items:center;
  z-index:4;
  pointer-events:none;
}
.playBadge .btn{
  width:46px;height:46px;border-radius:999px;
  background:rgba(15,28,23,0.55);
  border:1px solid rgba(241,239,236,0.18);
  backdrop-filter: blur(6px);
  box-shadow:0 14px 30px rgba(0,0,0,0.55);
  display:grid; place-items:center;
}
.playBadge .tri{
  width:0;height:0;
  border-left:13px solid rgba(242,239,234,0.92);
  border-top:8px solid transparent;
  border-bottom:8px solid transparent;
  margin-left:3px;
}

.phone.front .phoneBody{
  transform: translateZ(10px) scale(1.04);
}

.phone.front .phoneShell{
  box-shadow: inset 0 0 0 1px rgba(241,239,236,0.12);
}
.phone.side .phoneBody{ opacity:0.82; filter:none; }

@media (max-width:520px){
  .phone{ --cube-size:128px; --cube-depth:34px; }
  .scene{ height:min(620px, 76vh); }
  .ringNav{
    width:44px;
    height:44px;
  }
  .ringNav::before{ font-size:28px; }
  .ringNav--prev{ left:8px; }
  .ringNav--next{ right:8px; }
  .ringPlayHint{ display:none; }
}

@media (max-width:900px){
  .stage{
    min-height:auto;
    padding:8px 12px 110px;
    row-gap:12px;
  }

  .workHeader{
    margin-bottom:14px;
  }

  .scene{
    width:100%;
    height:auto;
    min-height:500px;
    aspect-ratio:1 / 1.18;
    overflow:visible;
  }
}

@media (max-width:520px){
  .stage{
    padding:6px 10px 92px;
  }

  .scene{
    width:100%;
    height:auto;
    min-height:420px;
    aspect-ratio:1 / 1.22;
  }
}

/* ===== VIEWER ===== */
/* Hide UI while viewer is open */
body.viewer-open .menuBtn,
body.viewer-open .backToTop,
body.viewer-open .menuOverlay{
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.overlay{
  position:fixed; inset:0;
  z-index:2500;
  background: rgba(0,0,0,0.94);
  backdrop-filter: blur(20px);
  opacity:0;
  visibility:hidden;
  pointer-events:none;
  transition: opacity 0.6s var(--ease), visibility 0s linear 0.6s;
}
body.viewer-open .overlay{
  opacity:1;
  visibility:visible;
  pointer-events:auto;
  transition: opacity 0.6s var(--ease), visibility 0s linear 0s;
}
.overlayClose{
  position:absolute; inset:0;
  background: transparent;
  border: none;
  cursor: pointer;
}

@media (max-width:900px){
  .overlayClose{
    display:none;
  }
}

.flyPhone{
  position:fixed;
  left:0; top:0;
  width:100px; height:100px;
  transform-origin: top left;
  z-index:1000;
  will-change: transform;
  transition: transform 700ms cubic-bezier(.2,.9,.2,1);
}

.flyShell{
  width:100%;
  height:100%;
  border-radius:44px;
  background:#0b0f0c;
  padding:12px;
  box-shadow:0 34px 110px rgba(0,0,0,0.95), inset 0 0 0 2px rgba(241,239,236,0.12);
}

.flyScreen{
  position:relative;
  width:100%;
  height:100%;
  border-radius:34px;
  overflow:hidden;
  background:#000;
}

.flyPoster, .flyVideo, .flyImage{
  position:absolute;
  top:0;
  left:50%;
  height:100%;
  width:auto;
  transform:translateX(-50%);
  display:block;
}

.flyPoster{
  filter: saturate(0.86) contrast(1.02) brightness(0.98);
  opacity:1;
  transition: opacity 0.6s var(--ease);
}
.flyVideo{
  filter: saturate(0.90) contrast(1.02) brightness(0.98);
  opacity:0;
  transition: opacity 0.6s var(--ease);
  background:#111;
}

.flyImage{
  filter: saturate(0.92) contrast(1.02) brightness(0.99);
  object-fit:cover;
  opacity:1;
  background:#111;
}

/* ===== VIEWER CONTROLS ===== */
.flyControls{
  position:fixed;
  left:50%;
  transform:translateX(-50%);
  z-index:1100;
  display:flex;
  gap:12px;
  align-items:center;
  justify-content:center;
  padding:10px 12px;
  border-radius:18px;
  background: rgba(6,10,8,0.82);
  border: 1px solid rgba(242,239,234,0.42);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  box-shadow:
    0 18px 60px rgba(0,0,0,0.55),
    inset 0 0 0 1px rgba(255,255,255,0.05);
  opacity:0;
  pointer-events:none;
}
body.viewer-open .flyControls{ opacity:1; pointer-events:auto; }

.btnUI{
  font-family:inherit;
  font-weight:260;
  letter-spacing:0.08em;

  appearance:none;
  border:none;
  cursor:pointer;
  height:44px;
  min-width:44px;
  padding:0 14px;
  border-radius:16px;

  color: rgba(252,251,248,1);
  background: rgba(20,28,24,0.9);
  border: 1px solid rgba(242,239,234,0.42);
  text-shadow: 0 1px 2px rgba(0,0,0,0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);

  font-size:12px;

  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  transition: transform 160ms ease, background 160ms ease, box-shadow 160ms ease, border-color 160ms ease;
}
.btnUI:hover{
  transform: translateY(-1px);
  background: rgba(34,46,39,0.94);
  border-color: rgba(242,239,234,0.56);
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}
.btnUI:active{ transform: translateY(0px) scale(0.985); }

.btnUI--icon{ width:44px; padding:0; font-size:16px; letter-spacing:0; font-weight:240; }
.btnUI--danger{ background: rgba(20,28,24,0.9); border-color: rgba(242,239,234,0.42); }
.btnUI--danger:hover{ background: rgba(34,46,39,0.94); border-color: rgba(242,239,234,0.56); }

.btnUI .small{
  font-size:10px;
  letter-spacing:0.18em;
  opacity:0.85;
  font-weight:240;
}

@media (max-width:520px){
  .flyControls{ gap:10px; padding:10px; border-radius:16px; }
  .btnUI{ height:42px; min-width:42px; border-radius:14px; font-size:12px; }
  .btnUI--icon{ width:42px; }
}

@media (max-width:900px){
  .overlay{
    background:rgba(0,0,0,0.985);
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }

  .flyPhone{
    inset:0;
    width:100vw !important;
    height:100vh !important;
    max-width:100vw;
    max-height:100vh;
  }

  .flyShell{
    width:100%;
    height:100%;
    border-radius:0;
    padding:0;
    box-shadow:none;
    background:#000;
  }

  .flyScreen{
    border-radius:0;
  }

  .flyControls{
    left:12px;
    right:12px;
    bottom:max(12px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    top:auto !important;
    transform:none;
    width:auto;
    justify-content:space-between;
    padding:10px;
    border-radius:18px;
  }

  .btnUI{
    flex:1 1 0;
    min-width:0;
  }

  .btnUI--icon{
    flex:0 0 52px;
    width:52px;
  }

  .btnUI--danger{
    flex:1.2 1 0;
  }
}

/* ===== BACK TO TOP ===== */
.backToTop{
  position:fixed;
  bottom:148px;
  right:60px;
  display:inline-block;
  white-space:nowrap;
  font-size:18px;
  transform-origin: 100% 50%;
  transform: rotate(-90deg);
  transition: transform 320ms var(--ease);
  will-change: transform;
  backface-visibility: hidden;
  z-index:2100;
}
.backToTop::before{
  content:"";
  position:absolute;
  inset:-64px;
}
.backToTop:hover{ transform: rotate(0deg); }
.backToTop:active{ transform: rotate(0deg); }

.legalLink{
  position:relative;
  left:auto;
  bottom:auto;
  display:block;
  width:max-content;
  margin:40px 0 24px 28px;
  font-size:14px;
  letter-spacing:0.12em;
  text-transform:uppercase;
  opacity:0.72;
  z-index:auto;
}

.legalLink:hover{
  opacity:1;
}

.legalLink--active{
  opacity:1;
  text-decoration:underline;
  text-underline-offset:6px;
  text-decoration-color:rgba(242,239,234,0.45);
}

@media (max-width:520px){
  .backToTop{ right:28px; bottom:122px; }
  .legalLink{ margin:28px 0 18px 18px; font-size:12px; }
}

@media (max-width:900px){
  .backToTop{
    display:none;
  }
}

/* ===== ABOUT ===== */
body[data-page="about"] .heroTitle{
  padding-bottom: 24px;
}
body[data-page="about"] .heroTitle__sub{
  max-width: 88ch;
}

.about{
  --about-divider-bleed: 64px;
  max-width:1120px;
  margin:0 auto;
  padding:140px clamp(20px, 4vw, 40px) 140px;
}

/* Nieco ciaśniej pod hero, żeby „Misja” zaczynała się wyżej */
body[data-page="about"] .about{
  padding-top: 112px;
}
.aboutSection{
  padding:72px 0;
  position:relative;
}
.aboutSection:not(:last-child)::after{
  content:"";
  position:absolute;
  left:calc(-1 * var(--about-divider-bleed));
  bottom:0;
  width:calc(100% + (2 * var(--about-divider-bleed)));
  height:1px;
  background: var(--pearl);
  opacity:0.18;
}
.aboutSection--split{
  --about-kicker-fs: clamp(17px, 1.85vw, 26px);
  --about-kicker-lh: 1.28;
  --about-kicker-gap: 52px;
  padding-top:32px;
  padding-bottom:72px;
}
.about > .aboutSection.aboutSection--split:first-of-type{
  padding-top: 14px;
}
.aboutKicker{
  font-size: var(--about-kicker-fs, 17px);
  line-height: var(--about-kicker-lh, 1.28);
  letter-spacing:0.12em;
  font-weight:500;
  text-transform:uppercase;
  opacity:0.88;
  margin:0 0 var(--about-kicker-gap, 36px);
  text-align:left;
}
/* Wyrównanie prawej kolumny z rzędem marki w lewej (lewa ma nagłówek Misja) */
.aboutSplit__kickerSpacer{
  height: calc(var(--about-kicker-fs, 17px) * var(--about-kicker-lh, 1.28));
  margin: 0 0 var(--about-kicker-gap, 36px);
  flex-shrink: 0;
  pointer-events: none;
}
.aboutTitle{
  font-family: var(--display);
  font-size: clamp(28px, 3.5vw, 42px);
  line-height:1.1;
  letter-spacing:-0.02em;
  font-weight:700;
  margin-bottom:22px;
  text-align:left;
}
.aboutBrand{
  font-family: var(--display);
  font-size:17px;
  font-weight:600;
  letter-spacing:-0.02em;
  margin-bottom:10px;
  text-align:left;
}
.aboutText{
  font-family: var(--display-sub-font);
  font-size:17px;
  font-weight: var(--display-sub-weight);
  letter-spacing: -0.01em;
  line-height:1.68;
  opacity:0.90;
  margin-bottom:22px;
  text-align:left;
  max-width:82ch;
}
.aboutText--lead{ max-width:92ch; }
.aboutText--preline{
  white-space: pre-line;
}

/* Extra top spacing: divider comes from previous .aboutSection::after only (no second <hr>) */
.aboutSection--referral{
  padding-top:100px;
}

.aboutText--referralIntro{
  margin-bottom: 10px;
}
.aboutText--referralAction{
  margin-top: 0;
  margin-bottom: 22px;
}

.aboutReferralLink{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px;
  border-radius: 16px;
  font-size: 14px;
  letter-spacing: 0.07em;
  font-weight: 500;
  text-decoration: none;
  text-transform: none;
  color: rgba(242,239,234,0.96);
  background: rgba(242,239,234,0.09);
  border: 1px solid rgba(242,239,234,0.24);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  max-width: 100%;
  box-sizing: border-box;
}
.aboutReferralLink::after{
  content: "\2197";
  font-size: 13px;
  font-weight: 400;
  opacity: 0.82;
  line-height: 1;
}
.aboutReferralLink:hover{
  transform: translateY(-2px);
  background: rgba(242,239,234,0.15);
  border-color: rgba(242,239,234,0.38);
  box-shadow: 0 12px 32px rgba(0,0,0,0.4);
}
.aboutReferralLink:active{
  transform: translateY(0);
}

.aboutList{
  list-style:none;
  padding:0;
  margin:28px 0;
  display:grid;
  gap:14px;
  max-width:78ch;
}
.aboutList li{
  font-family: var(--display-sub-font);
  font-size:17px;
  font-weight: var(--display-sub-weight);
  letter-spacing:-0.01em;
  line-height:1.68;
  opacity:0.90;
  text-align:left;
  position:relative;
  padding-left:16px;
}
.aboutList li::before{
  content:"-";
  position:absolute;
  left:0;
  opacity:0.7;
}

.aboutSplit{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(36px, 6vw, 100px);
  align-items: start;
}
.aboutSplit__item{
  width:100%;
  min-width:0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.aboutSplit__item--right{
  text-align:right;
}
.aboutSplit__item--right .aboutBrand,
.aboutSplit__item--right .aboutText{
  text-align:right;
  margin-left:auto;
  margin-right:0;
}

@media (max-width:820px){
  body[data-page="about"] .heroTitle{
    padding-bottom: 18px;
  }
  .about{
    --about-divider-bleed: 26px;
    padding:120px 18px 120px;
  }
  body[data-page="about"] .about{
    padding-top: 96px;
  }
  .aboutSplit{
    grid-template-columns: 1fr;
    gap:48px;
  }
  .aboutSplit__kickerSpacer{
    display: none;
  }
  .aboutSplit__item--right{
    margin-top:0;
    text-align:left;
  }
  .aboutSplit__item--right .aboutBrand,
  .aboutSplit__item--right .aboutText{
    text-align:left;
    margin-left:0;
    margin-right:0;
  }
}

@media (max-width:900px){
  body[data-page="about"] .heroTitle{
    padding-bottom: 14px;
  }

  .about{
    --about-divider-bleed: 26px;
    padding:28px 18px 100px;
  }

  body[data-page="about"] .about{
    padding-top: 24px;
  }

  .aboutSection{
    padding:54px 0;
  }

  .aboutTitle{
    font-size: clamp(26px, 8vw, 40px);
    margin-bottom:18px;
  }

  .aboutText{
    font-size:16px;
    line-height:1.65;
  }

  .aboutList li{
    font-size:16px;
    line-height:1.65;
  }

  .aboutList{
    gap:10px;
    margin:22px 0;
  }
}

/* ===== CONTACT ===== */
.contactPage{
  max-width:1120px;
  margin:0 auto;
  padding:30px 40px 140px;
}

.contactLayout{
  display:grid;
  grid-template-columns: 420px 1fr;
  gap:80px;
  align-items:start;
  max-width:1100px;
  margin:0 auto;
}

.contactIntro{ padding-top:10px; }

.contactTitle{
  font-family: var(--display);
  font-size: clamp(34px, 4vw, 56px);
  line-height:1.0;
  letter-spacing:-0.02em;
  font-weight:700;
  margin-bottom:18px;
}

.contactText{
  font-family: var(--display-sub-font);
  font-size: clamp(16px, 1.15vw, 18px);
  font-weight: var(--display-sub-weight);
  letter-spacing: var(--display-sub-tracking);
  line-height: var(--display-sub-lh);
  opacity:0.88;
  max-width:42ch;
  margin-bottom:28px;
}

.contactMeta{
  border-top:1px solid rgba(242,239,234,0.18);
  padding-top:18px;
  max-width:44ch;
}

.contactSmall{
  font-size:13px;
  letter-spacing:0.02em;
  opacity:0.70;
  line-height:1.6;
}

.contactFormWrap{
  border-left:1px solid rgba(242,239,234,0.18);
  padding-left:42px;
}

.contactForm{ display:grid; gap:18px; }

.fRow2{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.fField{ display:grid; gap:10px; }

.fHp{
  position:absolute;
  left:-9999px;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}

.fLabel{
  font-size:12px;
  letter-spacing:0.18em;
  text-transform:uppercase;
  opacity:0.60;
  font-weight:300;
}

.fInput,
.fTextarea{
  width:100%;
  border-radius:18px;
  padding:14px 16px;
  color: rgba(242,239,234,0.96);
  background: transparent;
  border: 1px solid rgba(242,239,234,0.22);
  outline:none;
  font:inherit;
  font-size:15px;
  line-height:1.4;
  transition: border-color 180ms ease, transform 180ms ease, background 180ms ease;
}

.fTextarea{
  resize: none;
  overflow-y: hidden;
  min-height:110px;
}

.fInput::placeholder,
.fTextarea::placeholder{ color: rgba(242,239,234,0.55); }

.fInput:focus,
.fTextarea:focus{
  border-color: rgba(242,239,234,0.42);
  background: rgba(242,239,234,0.06);
}

.fChoiceRow{ display:grid; gap:12px; }

.fChoice{
  position:relative;
  display:flex;
  align-items:center;
  width:100%;
  padding:16px 18px;
  border-radius:18px;
  background: transparent;
  border: 1px solid rgba(242,239,234,0.22);
  cursor:pointer;
  user-select:none;

  transition:
    border-color 180ms ease,
    background 180ms ease,
    transform 180ms ease,
    box-shadow 220ms ease;
}

.fChoice input{
  position:absolute;
  opacity:0;
  pointer-events:none;
}

.fChoice span{
  font-size:15px;
  line-height:1.4;
  color: rgba(242,239,234,0.92);
}

/* HOVER */
.fChoice:hover{
  transform: translateY(-1px);
  border-color: rgba(242,239,234,0.35);
  background: rgba(242,239,234,0.06);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

/* CHECKED (modern) */
.fChoice:has(input:checked){
  transform: translateY(-1px);
  border-color: rgba(242,239,234,0.45);
  background: rgba(242,239,234,0.12);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.45),
    0 0 0 1px rgba(242,239,234,0.35) inset;
}

/* CHECKED (fallback: JS adds .is-checked for browsers without :has) */
.fChoice.is-checked{
  transform: translateY(-1px);
  border-color: rgba(242,239,234,0.45);
  background: rgba(242,239,234,0.12);
  box-shadow:
    0 12px 30px rgba(0,0,0,0.45),
    0 0 0 1px rgba(242,239,234,0.35) inset;
}

.fActions{ display:flex; align-items:center; gap:14px; margin-top:6px; }

.contactFormStatus{
  min-height:1.4em;
  font-size:12px;
  letter-spacing:0.03em;
  line-height:1.5;
  color:rgba(242,239,234,0.7);
  opacity:0;
  transform:translateY(4px);
  transition:opacity 180ms ease, transform 180ms ease;
}

.contactFormStatus.is-visible{
  opacity:1;
  transform:translateY(0);
}

.contactFormStatus.is-error{
  color:rgba(255,205,205,0.86);
}

.contactFormStatus.is-success{
  color:rgba(216,241,227,0.86);
}

.fBtn{
  height:46px;
  padding:0 18px;
  border-radius:18px;
  border:1px solid rgba(242,239,234,0.28);
  background: rgba(242,239,234,0.10);
  color: rgba(242,239,234,0.96);
  font:inherit;
  font-size:13px;
  letter-spacing:0.10em;
  font-weight:300;
  cursor:pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.fBtn:hover{
  transform: translateY(-1px);
  background: rgba(242,239,234,0.16);
  border-color: rgba(242,239,234,0.38);
  box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}
.fBtn:active{ transform: translateY(0px) scale(0.985); }
.fBtn:disabled{
  opacity:0.55;
  cursor:default;
  transform:none;
  box-shadow:none;
}

/* Contact icons */
.contactIcons{
  display:flex;
  gap:16px;
  align-items:center;
  margin-top:24px;
}
.contactIcon{
  width:44px;
  height:44px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(242,239,234,0.22);
  background: rgba(242,239,234,0.04);
  color: rgba(242,239,234,0.85);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.contactIcon svg{ width:18px; height:18px; }
.contactIcon:hover{
  transform: translateY(-2px);
  background: rgba(242,239,234,0.10);
  border-color: rgba(242,239,234,0.38);
  box-shadow: 0 12px 30px rgba(0,0,0,0.45);
}

/* Copy email */
.contactEmail{
  display:inline-flex;
  align-items:center;
  margin-top:16px;
  padding:6px 12px;
  border-radius:12px;
  border:1px solid rgba(242,239,234,0.22);
  background: rgba(242,239,234,0.05);
  color: rgba(242,239,234,0.92);
  font:inherit;
  font-size:13px;
  letter-spacing:0.02em;
  cursor:pointer;
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
}
.contactEmail:hover{
  transform: translateY(-1px);
  background: rgba(242,239,234,0.10);
  border-color: rgba(242,239,234,0.38);
  box-shadow: 0 10px 26px rgba(0,0,0,0.45);
}
.contactEmail:active{ transform: translateY(0px) scale(0.98); }

.copyMessage{
  margin-left:12px;
  font-size:12px;
  opacity:0;
  transition: opacity 200ms ease;
}
.copyMessage.show{ opacity:0.8; }

@media (max-width:960px){
  .contactPage{ padding:20px 18px 120px; }
  .contactLayout{ grid-template-columns:1fr; gap:34px; }
  .contactFormWrap{
    border-left:none;
    padding-left:0;
    border-top:1px solid rgba(242,239,234,0.18);
    padding-top:26px;
  }
  .fRow2{ grid-template-columns:1fr; }
}

@media (max-width:900px){
  .contactPage{
    padding:10px 18px 100px;
  }

  .contactLayout{
    gap:28px;
  }

  .contactTitle{
    font-size: clamp(28px, 9vw, 44px);
    margin-bottom:14px;
  }

  .contactText{
    font-size:16px;
    line-height:1.6;
    margin-bottom:22px;
  }

  .contactForm{
    gap:16px;
  }

  .fInput,
  .fTextarea,
  .fChoice{
    border-radius:16px;
  }

  .fActions{
    margin-top:2px;
    flex-direction:column;
    align-items:stretch;
  }

  .fBtn{
    width:100%;
    justify-content:center;
  }

  .contactSmall{
    line-height:1.7;
  }

  .copyMessage{
    display:block;
    margin-left:0;
    margin-top:10px;
  }

.contactIcons{
  flex-wrap:wrap;
  }
}

/* ===== IMPRESSUM ===== */
.legalPage{
  max-width:1120px;
  margin:0 auto;
  padding:30px 40px 160px;
}

body[data-page="impressum"] .heroTitle{
  text-align:center;
}

body[data-page="impressum"] .heroTitle__text{
  max-width:none;
  text-align:center;
  font-size:clamp(42px, 6vw, 84px);
  line-height:0.98;
}

body[data-page="impressum"] .heroTitle__strong{
  font-weight:500;
}

body[data-page="impressum"] .heroTitle__light{
  font-weight:300;
  opacity:0.82;
}

body[data-page="impressum"] .heroTitle__sub{
  max-width:34ch;
  margin:18px auto 0;
  text-align:center;
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: var(--display-sub-lh);
  font-family: var(--display-sub-font);
  font-weight: var(--display-sub-weight);
  letter-spacing: var(--display-sub-tracking);
  opacity:0.86;
  transform:none;
}

body[data-page="impressum"] .legalPage{
  max-width:760px;
}

/* =========================
   FIRST-LOAD BUILD INTRO
========================= */
body.intro-building{
  overflow:hidden;
}

body.intro-building::before,
body.intro-building::after{
  content:"";
  position:fixed;
  pointer-events:none;
  z-index:2050;
  opacity:0;
  transition:
    opacity 680ms var(--ease),
    transform 980ms cubic-bezier(0.22, 0.84, 0.22, 1);
}

body.intro-building::before{
  top:112px;
  left:-12vw;
  width:124vw;
  height:1px;
  background:linear-gradient(
    90deg,
    rgba(242,239,234,0) 0%,
    rgba(242,239,234,0.04) 16%,
    rgba(242,239,234,0.18) 34%,
    rgba(242,239,234,0.52) 50%,
    rgba(242,239,234,0.2) 68%,
    rgba(242,239,234,0.05) 84%,
    rgba(242,239,234,0) 100%
  );
  transform:translateX(-18vw) scaleX(0.58);
  transform-origin:center center;
  opacity:0;
}

body.intro-building::after{
  top:8vh;
  right:18vw;
  width:1px;
  height:48vh;
  background:linear-gradient(180deg, rgba(242,239,234,0), rgba(242,239,234,0.34), rgba(242,239,234,0));
  transform:scaleY(0.08);
  transform-origin:center top;
}

body.intro-building .topNav,
body.intro-building .heroTitle,
body.intro-building .viewerDim,
body.intro-building .about,
body.intro-building .contactPage,
body.intro-building .legalPage,
body.intro-building .legalLink,
body.intro-building .backToTop{
  opacity:0;
  filter:blur(10px);
  transform:translate3d(0, 22px, 0);
}

body.intro-building .topNav{
  transform:translate3d(0, -18px, 0);
}

body.intro-building .menuBtn{
  opacity:0;
  filter:blur(10px);
  transform:translate3d(-18px, -50%, 0);
}

body.intro-building .backToTop{
  transform:rotate(-90deg) translate3d(0, 18px, 0);
}

body.intro-building .viewerDim{
  transform:translate3d(0, 34px, 0) scale(0.985);
  transform-origin:center top;
}

body.intro-building.intro-visible::before,
body.intro-building.intro-visible::after{
  opacity:1;
}

body.intro-building.intro-visible::before{
  animation: introSweepLine 1700ms cubic-bezier(0.22, 0.84, 0.22, 1) 20ms forwards;
}

body.intro-building.intro-visible::after{
  transform:scaleY(1);
  transition-delay:140ms;
}

body.intro-building.intro-visible .topNav,
body.intro-building.intro-visible .heroTitle,
body.intro-building.intro-visible .viewerDim,
body.intro-building.intro-visible .about,
body.intro-building.intro-visible .contactPage,
body.intro-building.intro-visible .legalPage,
body.intro-building.intro-visible .legalLink{
  opacity:1;
  filter:blur(0);
  transform:none;
  transition:
    opacity 760ms var(--ease),
    transform 980ms cubic-bezier(0.22, 0.84, 0.22, 1),
    filter 760ms var(--ease);
}

body.intro-building.intro-visible .topNav{ transition-delay:420ms; }
body.intro-building.intro-visible .heroTitle{ transition-delay:560ms; }
body.intro-building.intro-visible .viewerDim,
body.intro-building.intro-visible .about,
body.intro-building.intro-visible .contactPage,
body.intro-building.intro-visible .legalPage{ transition-delay:700ms; }
body.intro-building.intro-visible .legalLink{ transition-delay:780ms; }

body.intro-building.intro-visible .menuBtn,
body.intro-building.intro-visible .backToTop{
  opacity:1;
  filter:blur(0);
  transition:
    opacity 760ms var(--ease),
    transform 980ms cubic-bezier(0.22, 0.84, 0.22, 1),
    filter 760ms var(--ease);
  transition-delay:780ms;
}

body.intro-building.intro-visible .menuBtn{
  transform:translateY(-50%);
}

body.intro-building.intro-visible .backToTop{
  transform:rotate(-90deg);
}

@media (max-width:900px){
  body.intro-building::before{
    top:72px;
    left:-10vw;
    width:120vw;
  }

  body.intro-building::after{
    right:10vw;
    height:34vh;
  }

  body.intro-building .menuBtn{
    transform:translate3d(18px, 0, 0);
  }

  body.intro-building.intro-visible .menuBtn{
    transform:none;
  }
}

@keyframes introSweepLine{
  0%{
    opacity:0;
    transform:translateX(-26vw) scaleX(0.46);
  }
  24%{
    opacity:0.42;
    transform:translateX(-16vw) scaleX(0.62);
  }
  48%{
    opacity:1;
    transform:translateX(-2vw) scaleX(0.9);
  }
  64%{
    opacity:0.96;
    transform:translateX(6vw) scaleX(0.98);
  }
  84%{
    opacity:0.62;
    transform:translateX(14vw) scaleX(1.03);
  }
  100%{
    opacity:0;
    transform:translateX(24vw) scaleX(1.08);
  }
}

.legalGrid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}

.legalSection{
  padding:18px 0 0;
  border-top:1px solid rgba(242,239,234,0.16);
  text-align:center;
}

.legalSection h2{
  font-family:var(--display);
  font-size:clamp(20px, 2.2vw, 28px);
  line-height:1.04;
  margin-bottom:12px;
  font-weight:500;
}

.legalSection p,
.legalSection li{
  font-size:14px;
  line-height:1.65;
  color:rgba(242,239,234,0.76);
}

.legalSection ul{
  list-style:none;
  display:grid;
  gap:8px;
}

.legalSection strong{
  color:rgba(242,239,234,0.9);
  font-weight:400;
}

@media (max-width:900px){
  .legalPage{
    padding:10px 18px 120px;
  }

  .legalGrid{
    grid-template-columns:1fr;
    gap:18px;
  }

  .legalSection{ padding-top:14px; }

  body[data-page="impressum"] .heroTitle__text{
    font-size:clamp(34px, 10vw, 58px);
  }
}

/* =========================
   WIPE — NO GAPS (overlap)
========================= */
:root{
  --wipe-duration: 620ms;
  --wipe-stagger: 55ms;
}

.wipe{
  position:fixed;
  inset:0;
  z-index:99999;
  pointer-events:none;
  opacity:0;
  visibility:hidden;
  isolation:isolate;
}

.wipe__stripe{
  position:absolute;
  left:-2px;
  width: calc(100% + 4px);
  height: calc(100vh / 6 + 2px);
  background:#000;
  will-change: transform;
  backface-visibility:hidden;
  transform: translate3d(0,0,0);
}

.wipe__stripe:nth-child(1){ top: calc(100vh / 6 * 0 - 1px); }
.wipe__stripe:nth-child(2){ top: calc(100vh / 6 * 1 - 1px); }
.wipe__stripe:nth-child(3){ top: calc(100vh / 6 * 2 - 1px); }
.wipe__stripe:nth-child(4){ top: calc(100vh / 6 * 3 - 1px); }
.wipe__stripe:nth-child(5){ top: calc(100vh / 6 * 4 - 1px); }
.wipe__stripe:nth-child(6){ top: calc(100vh / 6 * 5 - 1px); }

/* start positions */
.wipe__stripe:nth-child(odd){ transform: translate3d(-110%,0,0); }
.wipe__stripe:nth-child(even){ transform: translate3d(110%,0,0); }

/* IN */
body.wipe-in .wipe{ opacity:1; visibility:visible; }
body.wipe-in .wipe__stripe{
  transform: translate3d(0,0,0);
  transition: transform var(--wipe-duration) cubic-bezier(.22,.85,.22,1);
}

/* OUT */
body.wipe-out .wipe{ opacity:1; visibility:visible; }
body.wipe-out .wipe__stripe:nth-child(odd){
  transform: translate3d(-110%,0,0);
  transition: transform var(--wipe-duration) cubic-bezier(.22,.85,.22,1);
}
body.wipe-out .wipe__stripe:nth-child(even){
  transform: translate3d(110%,0,0);
  transition: transform var(--wipe-duration) cubic-bezier(.22,.85,.22,1);
}

body.wipe-in .topNav,
body.wipe-in main{
  opacity:0.92;
  filter:blur(1.5px);
  transform:translateY(4px) scale(0.995);
  transition:opacity 260ms ease, filter 260ms ease, transform 260ms ease;
}

body.wipe-out .topNav,
body.wipe-out main{
  opacity:1;
  filter:none;
  transform:none;
}

body.wipe-in .backToTop{
  opacity:0.92;
  filter:blur(1.5px);
  transition:opacity 260ms ease, filter 260ms ease;
}

body.wipe-out .backToTop{
  opacity:1;
  filter:none;
}

@media (hover:none) and (pointer:coarse){
  .ringNav{
    backdrop-filter:none;
    -webkit-backdrop-filter:none;
  }
}

@media (max-width: 768px){

  .ring{
    transform:none !important;
    transform-style: flat;
    display:flex;
    gap:20px;
    position:relative;
    overflow-x:auto;
    padding:16px 36px 18px;
    scroll-snap-type:x mandatory;
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }

  .ring::-webkit-scrollbar{ display:none; }

  .phone{
    position:relative;
    transform:none !important;
    left:auto;
    top:auto;
    flex:0 0 auto;
    scroll-snap-align:center;
  }

  .scene{
    height:auto;
    min-height:420px;
    aspect-ratio:1 / 1.22;
    perspective:none;
    overflow:visible;
  }

}

@media (max-width:520px){
  .langSwitch{
    margin-right:48px;
    transform:scale(0.94);
    transform-origin:right top;
  }

  .ring{
    gap:14px;
    padding:12px 28px 18px;
  }

  .phone{
    --cube-size:116px;
    --cube-depth:30px;
  }

  .flyControls{
    width:calc(100vw - 24px);
    max-width:420px;
    gap:8px;
    padding:8px;
  }

  .btnUI{
    min-width:0;
    padding:0 10px;
  }

  .menuPanel{
    width:100vw;
    padding:92px 20px 28px;
    align-items:flex-start;
  }

  .menuList{
    gap:32px;
  }

  .menuLink{
    font-size: clamp(34px, 11vw, 56px);
  }
}

body.menu-open{
  overflow:hidden;
}

body.menu-open .topNav{
  pointer-events:none;
}

body.menu-open .topNav__right{
  opacity:0;
}

body.menu-open .menuBtn{
  pointer-events:auto;
}

@media (max-width:900px){
  body.menu-open .topNav{
    z-index:2401;
  }

  body.menu-open .topNav__brand{
    position:relative;
    z-index:1;
    pointer-events:auto;
  }
}

/* delays */
body.wipe-in  .wipe__stripe:nth-child(1),
body.wipe-out .wipe__stripe:nth-child(1){ transition-delay: 0ms; }
body.wipe-in  .wipe__stripe:nth-child(2),
body.wipe-out .wipe__stripe:nth-child(2){ transition-delay: calc(var(--wipe-stagger) * 1); }
body.wipe-in  .wipe__stripe:nth-child(3),
body.wipe-out .wipe__stripe:nth-child(3){ transition-delay: calc(var(--wipe-stagger) * 2); }
body.wipe-in  .wipe__stripe:nth-child(4),
body.wipe-out .wipe__stripe:nth-child(4){ transition-delay: calc(var(--wipe-stagger) * 3); }
body.wipe-in  .wipe__stripe:nth-child(5),
body.wipe-out .wipe__stripe:nth-child(5){ transition-delay: calc(var(--wipe-stagger) * 4); }
body.wipe-in  .wipe__stripe:nth-child(6),
body.wipe-out .wipe__stripe:nth-child(6){ transition-delay: calc(var(--wipe-stagger) * 5); }

/* Anti-glitch: hide content until wipe-out starts (only when pre-wipe is set) */
html.pre-wipe body > :not(.wipe){ visibility:hidden; }
html.pre-wipe body.wipe-out > :not(.wipe){ visibility:visible; }
.pre-wipe body{ background:#000; }
.pre-wipe .wipe{ opacity:1 !important; visibility:visible !important; }

html.transition-lock body > :not(.wipe){
  pointer-events:none;
}

/* Wheel scroll musi trafiać w .pageRoot; blokada klików przy przejściu i tak jest w app.js (isNavigating) */
html.transition-lock body > .pageRoot{
  pointer-events:auto;
}