/* ——— Hero stages (1240×600 composition) ——— */
.cut-hero {
  position: relative;
  padding: calc(var(--header-h) + 24px) 0 48px;
  /* visible so letter scroll-drift isn't clipped top/bottom */
  overflow: visible;
  background: #fff;
}

/* First hero: flush under sticky header (no extra top band). */
.cut-hero[data-hero="c"] {
  padding-top: var(--header-h);
}

.cut-stage-frame {
  width: min(1240px, calc(100% - 24px));
  margin-inline: auto;
}

.cut-stage {
  position: relative;
  width: 100%;
  aspect-ratio: 1240 / 600;
  margin-inline: 0;
  overflow: visible;
  --sw: 1240;
  --sh: 600;
}

.cut-layer {
  position: absolute;
  z-index: 2;
  margin: 0;
  box-sizing: border-box;
  will-change: transform, opacity;
}

.cut-layer.is-ready {
  opacity: 0;
}

/* Host stays opaque so WebGL keeps painting; canvas starts hidden (pw-host + fade). */
.cut-layer.cut-pw.is-ready {
  opacity: 1;
}

/* Position helpers: --x --y --w --h in design px on stage (--sw × --sh)
 * --letter-py: scroll drift on C/U/T letter (+ matching mark), set from main.js */
.cut-abs {
  left: calc(var(--x) / var(--sw) * 100%);
  top: calc(var(--y) / var(--sh) * 100% + var(--letter-py, 0px));
}

.cut-abs-size {
  width: calc(var(--w) / var(--sw) * 100%);
  height: calc(var(--h) / var(--sh) * 100%);
}

.cut-abs-right {
  left: auto;
  right: calc(var(--x) / var(--sw) * 100%);
  top: calc(var(--y) / var(--sh) * 100% + var(--letter-py, 0px));
  text-align: right;
}

/* Particle mounts — mark above letter above field */
.cut-pw {
  pointer-events: none;
  overflow: visible;
}

.cut-pw.pw-field {
  z-index: 7;
  /* Soft vignette at field / slide edges (points + lines) */
  -webkit-mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right, transparent 0%, #000 14%, #000 86%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 86%, transparent 100%);
  mask-composite: intersect;
}

.cut-pw.pw-mark {
  z-index: 11;
  pointer-events: auto;
}

.cut-pw .cut-pw-canvas {
  width: 100% !important;
  height: 100% !important;
  background: transparent !important;
}

/* Letter marks */
.cut-mark {
  z-index: 10;
  pointer-events: none;
}

.cut-mark svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Typography */
.cut-title {
  z-index: 12;
  font-weight: 300;
  color: var(--text);
  line-height: 1.15;
  white-space: nowrap;
}

.cut-accent {
  z-index: 13;
  font-weight: 300;
  line-height: 1.2;
  white-space: nowrap;
}

.cut-accent.red {
  color: var(--red);
}
.cut-accent.green {
  color: var(--green);
}
.cut-accent.blue {
  color: var(--blue);
}

.cut-lead {
  z-index: 12;
  font-weight: 300;
  color: #000;
  line-height: 1.5;
}

.cut-tags {
  z-index: 12;
  font-weight: 500;
  font-size: clamp(10px, 1vw, 12px);
  line-height: 2;
  white-space: nowrap;
}

.cut-tags.red {
  color: var(--red);
}
.cut-tags.green {
  color: var(--green);
}
.cut-tags.blue {
  color: var(--blue);
}

/* Thumbs */
.cut-thumb {
  z-index: 14; /* above field grid (7) — same stack as U thumbs */
  border-radius: 10px;
  overflow: hidden;
  object-fit: cover;
}

/* Desktop: wrapper must not create a containing block — abs thumbs use .cut-stage */
.cut-thumb-row {
  display: contents;
}

.cut-thumb-stack {
  z-index: 14; /* above field (7) and mark (11) */
  border-radius: 10px;
  overflow: hidden;
}

.cut-thumb-stack img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 10px;
  opacity: 0;
  transform-origin: 50% 50%;
  will-change: transform, opacity;
}

/* Hero C sizes */
.cut-hero[data-hero="c"] .cut-title {
  font-size: clamp(1.75rem, 5.6vw, 70px);
  line-height: 1.25;
}
.cut-hero[data-hero="c"] .cut-accent {
  font-size: clamp(1.25rem, 4vw, 49px);
}
.cut-hero[data-hero="c"] .cut-lead {
  font-size: clamp(0.9rem, 1.6vw, 20px);
  line-height: 1.5;
  width: calc(541 / var(--sw) * 100%);
}

/* Hero U */
.cut-hero[data-hero="u"] .cut-title {
  font-size: clamp(1.6rem, 4.4vw, 54px);
  width: calc(557 / var(--sw) * 100%);
  /* Keep single line — wrapping mid-entrance caused a height jump */
  white-space: nowrap;
}
.cut-hero[data-hero="u"] .cut-accent {
  font-size: clamp(0.85rem, 1.5vw, 19px);
  width: calc(360 / var(--sw) * 100%);
  white-space: normal;
}
.cut-hero[data-hero="u"] .cut-lead {
  font-size: clamp(0.85rem, 1.3vw, 16px);
  line-height: 1.625;
  width: calc(300 / var(--sw) * 100%);
  height: calc(195 / var(--sh) * 100%);
  overflow: hidden;
}

/* Hero T */
.cut-hero[data-hero="t"] .cut-title {
  font-size: clamp(1.5rem, 4.7vw, 58px);
  /* SR Text-6: 643px; EN „Training and consulting” dłuższe niż PL */
  width: calc(700 / var(--sw) * 100%);
  white-space: nowrap;
}
.cut-hero[data-hero="t"] .cut-accent {
  font-size: clamp(0.8rem, 1.4vw, 17px);
  width: calc(322 / var(--sw) * 100%);
  white-space: normal;
}
.cut-hero[data-hero="t"] .cut-lead {
  font-size: clamp(0.85rem, 1.3vw, 16px);
  line-height: 1.625;
  width: calc(555 / var(--sw) * 100%);
}

/* T letter — origin 50%/50%, perspective 600px.
   Clip only while the 3D entrance runs (.is-entering); afterward allow scroll bleed. */
.cut-hero[data-hero="t"] .cut-mark {
  transform-origin: 50% 50%;
  transform-style: preserve-3d;
}
.cut-hero[data-hero="t"] .cut-pw.pw-mark {
  transform: none !important; /* keep WebGL untransformed */
  transform-style: flat;
}
.cut-hero[data-hero="t"] .cut-stage {
  perspective: 600px;
}
.cut-hero[data-hero="t"].is-entering .cut-stage {
  overflow: hidden;
}

/*
 * Mobile <=778: SR phone layout (design 480x720) as fluid % — no transform:scale
 * (fixed 480px stage + overflow:hidden clipped the right edge).
 * Inline style="--x:…" needs !important on overrides.
 */
@media (max-width: 778px) {
  .cut-hero {
    overflow-x: clip;
    padding-left: 0;
    padding-right: 0;
  }

  .cut-stage-frame {
    container-type: inline-size;
    width: 100%;
    margin-inline: 0;
    aspect-ratio: 480 / 720;
    overflow: visible;
    position: relative;
  }

  .cut-stage {
    position: relative;
    width: 100%;
    height: auto;
    aspect-ratio: 480 / 720;
    margin: 0;
    --sw: 480;
    --sh: 720;
    transform: none;
  }

  .cut-hero[data-hero="c"] [data-layer="tags"] {
    top: auto;
    bottom: calc(var(--y) / var(--sh) * 100%);
  }

  .cut-hero[data-hero="c"] [data-layer="title"],
  .cut-hero[data-hero="c"] [data-layer="accent"] {
    text-align: left;
  }

  .cut-hero[data-hero="c"] [data-layer="field"] {
    --x: 28 !important;
    --y: 431 !important;
    --w: 432 !important;
    --h: 274 !important;
  }
  .cut-hero[data-hero="c"] [data-layer="mark"] {
    --x: 45 !important;
    --y: 136 !important;
    --w: 382 !important;
    --h: 318 !important;
  }
  .cut-hero[data-hero="c"] [data-layer="svg"] {
    --x: 69 !important;
    --y: 153 !important;
    --w: 338 !important;
    --h: 288 !important;
  }
  .cut-hero[data-hero="c"] [data-layer="title"] {
    --x: 49 !important;
    --y: 34 !important;
    font-size: calc(42 * 100cqi / 480);
    width: calc(331 / 480 * 100%);
    white-space: normal;
  }
  .cut-hero[data-hero="c"] [data-layer="accent"] {
    --x: 52 !important;
    --y: 85 !important;
    font-size: calc(28 * 100cqi / 480);
    width: calc(150 / 480 * 100%);
    white-space: normal;
  }
  .cut-hero[data-hero="c"] [data-layer="thumb1"] {
    --x: 46 !important;
    --y: 498 !important;
    --w: 120 !important;
    --h: 68 !important;
  }
  .cut-hero[data-hero="c"] [data-layer="thumb2"] {
    --x: 183 !important;
    --y: 497 !important;
    --w: 120 !important;
    --h: 68 !important;
  }
  .cut-hero[data-hero="c"] [data-layer="thumb3"] {
    --x: 318 !important;
    --y: 496 !important;
    --w: 120 !important;
    --h: 68 !important;
  }
  .cut-hero[data-hero="c"] [data-layer="lead"] {
    --x: 46 !important;
    --y: 587 !important;
    font-size: calc(16 * 100cqi / 480);
    line-height: 1.5;
    width: calc(406 / 480 * 100%);
    height: calc(64 / 720 * 100%);
    overflow: hidden;
  }
  .cut-hero[data-hero="c"] [data-layer="tags"] {
    --x: 43 !important;
    --y: 20 !important;
    font-size: calc(16 * 100cqi / 480);
    line-height: 2;
  }

  .cut-hero[data-hero="u"] [data-layer="field"] {
    --x: 16 !important;
    --y: 491 !important;
    --w: 454 !important;
    --h: 202 !important;
  }
  .cut-hero[data-hero="u"] [data-layer="mark"] {
    --x: 73 !important;
    --y: 142 !important;
    --w: 274 !important;
    --h: 293 !important;
  }
  .cut-hero[data-hero="u"] [data-layer="svg"] {
    --x: 84 !important;
    --y: 137 !important;
    --w: 249 !important;
    --h: 325 !important;
  }
  .cut-hero[data-hero="u"] [data-layer="title"] {
    --x: 51 !important;
    --y: 23 !important;
    font-size: calc(37 * 100cqi / 480);
    width: calc(405 / 480 * 100%);
    white-space: normal;
  }
  .cut-hero[data-hero="u"] [data-layer="accent"] {
    --x: 55 !important;
    --y: 73 !important;
    font-size: calc(16 * 100cqi / 480);
    width: calc(361 / 480 * 100%);
    white-space: normal;
  }
  .cut-hero[data-hero="u"] [data-layer="thumbs"] {
    /* Right of the U letter; smaller than SR so it doesn’t sit under the mark */
    --x: 265 !important;
    --y: 408 !important;
    --w: 168 !important;
    --h: 94 !important;
    left: calc(var(--x) / var(--sw) * 100%);
    top: calc(var(--y) / var(--sh) * 100%);
  }
  .cut-hero[data-hero="u"] [data-layer="lead"] {
    --x: 70 !important;
    --y: 509 !important;
    font-size: calc(16 * 100cqi / 480);
    line-height: 1.5;
    width: calc(348 / 480 * 100%);
    height: auto;
    overflow: visible;
  }
  .cut-hero[data-hero="u"] [data-layer="tags"] {
    --x: 69 !important;
    --y: 674 !important;
    font-size: calc(16 * 100cqi / 480);
    line-height: 2;
  }

  .cut-hero[data-hero="t"] [data-layer="field"] {
    --x: 38 !important;
    --y: 525 !important;
    --w: 422 !important;
    --h: 189 !important;
  }
  .cut-hero[data-hero="t"] [data-layer="mark"] {
    --x: 48 !important;
    --y: 122 !important;
    --w: 138 !important;
    --h: 373 !important;
  }
  .cut-hero[data-hero="t"] [data-layer="svg"] {
    --x: 50 !important;
    --y: 123 !important;
    --w: 140 !important;
    --h: 366 !important;
  }
  .cut-hero[data-hero="t"] [data-layer="title"] {
    --x: 66 !important;
    --y: 20 !important;
    font-size: calc(37 * 100cqi / 480);
    width: calc(414 / 480 * 100%);
    white-space: normal;
  }
  .cut-hero[data-hero="t"] [data-layer="accent"] {
    --x: 93 !important;
    --y: 73 !important;
    font-size: calc(17 * 100cqi / 480);
    width: calc(387 / 480 * 100%);
    white-space: normal;
  }
  .cut-hero[data-hero="t"] [data-layer="thumb1"] {
    --x: 236 !important;
    --y: 121 !important;
    --w: 170 !important;
    --h: 113 !important;
  }
  .cut-hero[data-hero="t"] [data-layer="thumb2"] {
    --x: 237 !important;
    --y: 249 !important;
    --w: 170 !important;
    --h: 113 !important;
  }
  .cut-hero[data-hero="t"] [data-layer="thumb3"] {
    --x: 237 !important;
    --y: 380 !important;
    --w: 170 !important;
    --h: 113 !important;
  }
  .cut-hero[data-hero="t"] [data-layer="lead"] {
    --x: 61 !important;
    --y: 530 !important;
    font-size: calc(16 * 100cqi / 480);
    line-height: 1.5;
    width: calc(358 / 480 * 100%);
  }
  .cut-hero[data-hero="t"] [data-layer="tags"] {
    --x: 61 !important;
    --y: 679 !important;
    font-size: calc(16 * 100cqi / 480);
    line-height: 2;
  }

  .cut-thumb-row {
    display: contents;
  }

  .cut-hero[data-hero="t"].is-entering .cut-stage {
    overflow: hidden;
  }
}