/* Home + Kontaktówka — wyłącznie warstwa prototypowa. */

.contact-variant .s-first .split {
  grid-template-columns:minmax(0,.92fr) minmax(440px,1.08fr);
  gap:clamp(52px,6vw,94px);
}
.contact-variant .callback-anchor {
  height:82vh;
  max-height:880px;
  min-height:520px;
  transform:none !important;
}
.contact-variant .callback-anchor img {
  object-position:50% 3%;
  filter:none;
}

/* Unbounded ma bardzo ciasne metryki pionowe. W szkle naglowka dokładamy
   kontrolowany oddech, aby C/A/O nie byly obcinane przez overflow:clip. */
.contact-variant .hero-glass .word {
  line-height:.96;
  padding-block:.05em .09em;
}
.contact-variant .s-first .h-big {
  font-size:clamp(38px,5.3vw,104px);
  line-height:.94;
}

/* Jedna, prosta wstega: portret jest jej pierwsza karta. Caly zestaw jedzie
   po tej samej ostrej przekatnej w lewo i konczy przed Where I Have Played. */
.early-contact-ribbon {
  position:fixed;
  inset:0;
  z-index:1;
  opacity:0;
  pointer-events:none;
  overflow:hidden;
  contain:layout paint style;
}
.early-contact-card {
  position:absolute;
  top:0;
  left:0;
  width:clamp(132px,11.5vw,184px);
  aspect-ratio:2 / 3;
  margin:0;
  overflow:hidden;
  border:4px solid rgba(10,9,16,.94);
  border-radius:clamp(14px,1.4vw,22px);
  background:var(--blackout);
  box-shadow:
    -2px 0 rgba(25,223,230,.74),
    2px 0 rgba(255,46,136,.72),
    0 20px 42px rgba(10,9,16,.28);
  transform-origin:center;
  will-change:transform,opacity;
}
.early-contact-card::after {
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(246,244,238,.2);
}
.early-contact-card img {
  width:100%;
  height:100%;
  object-fit:cover;
  filter:none;
}
.early-contact-card:first-child img { object-position:50% 3%; }

/* JS podmienia nieruchomy portret jego pikselowo dopasowana pierwsza karta.
   Element zostaje w layoucie, wiec kolumny nigdy nie przeskakuja. */
.contact-variant.contact-ribbon-active .callback-anchor {
  visibility:hidden;
}

/* Czytelność jest fizycznie maskowana kolorem sceny — karty nie prześwitują
   przez litery ani CTA. Widać je tylko w przerwach i poza blokami treści. */
.contact-variant .s-esc > .wrap > .eyebrow {
  display:inline-block;
  width:max-content;
  background:var(--magenta);
  box-shadow:0 0 0 10px var(--magenta);
}
.contact-variant .s-esc .row {
  background:var(--magenta) !important;
}
.contact-variant .s-lineage .lineage-head > * {
  position:relative;
  background:var(--ultra) !important;
  box-shadow:0 0 0 11px var(--ultra);
}
.contact-variant .s-lineage .panel {
  background:var(--ultra) !important;
}

/* Galeria jest zawsze kolorowa. Wachlarz przyjezdza gotowy z lewej strony;
   naglowek pozostaje nad nim w osobnej warstwie. */
.contact-variant .s-gallery .fan-card img { filter:none; }

@media (max-width:1180px) {
  .contact-variant .s-first .split {
    grid-template-columns:minmax(0,1fr) minmax(390px,.88fr);
    gap:48px;
  }
}

@media (max-width:900px), (hover:none), (pointer:coarse) {
  .early-contact-ribbon { display:none !important; }
  .contact-variant .s-first .split { grid-template-columns:minmax(0,1fr); gap:36px; }
  .contact-variant .callback-anchor { height:56vh; min-height:320px; }
  .contact-variant .s-esc .row,
  .contact-variant .s-lineage .panel,
  .contact-variant .s-lineage .lineage-head > * {
    background:transparent;
    box-shadow:none;
  }
  .contact-variant .hero-glass .word { line-height:1; padding-block:.04em .08em; }
  .contact-variant .s-gallery .fan-card img { filter:none !important; }
}

@media (prefers-reduced-motion:reduce) {
  .early-contact-ribbon { display:none !important; }
  .contact-variant .s-gallery .fan-card img { filter:none !important; }
}