/* ===========================================================================
   CE-06 · Hero tekstowe (text hero)
   Root:     section.ce-hero
   Parts:    __kicker (optional, with .lf-kicker), __title (the page's only
             <h1>), __lead (__lead-first: its first sentence, centered-lead),
             __thesis (centered-lead: one line under the button), __alias
             (empty old anchors), __cost (optional "cost sentence", emphasised),
             __note (optional small line, e.g. the 24-hour promise on
             Kontakt), __actions (row of CTA or the anchor), __anchor (text
             link "… ↓" to a section below, with .lf-link)
   Variants: with-kicker · with-anchor · no-cta · long-title ·
             side-eyebrow (O nas, 26.09: __body wraps the title and the lead)
             · centered (Usługi, 27.09: the eyebrow and the H1 centred, no
             lead, no CTA) · centered-lead (Usługi v6, 30.09: centered plus
             the lead, the button and __thesis) – combinable (until 27.09
             Usługi had data-ce-variant="with-kicker with-anchor long-title")
   Base:     index.html#hero · registry: ce-registry.js → CE-06
   =========================================================================== */

.ce-hero {
  padding-block: clamp(4rem, 10vw, 9rem) clamp(3rem, 6vw, 5rem);
}

.ce-hero__kicker { margin-bottom: 1.25rem; }

.ce-hero__title {
  max-width: 15ch;
  font-family: var(--font-heading);
  font-size: var(--t-hero);
  line-height: 1.06;
  letter-spacing: var(--track-hero);
  font-weight: 500;
  text-wrap: balance;
}

.ce-hero__lead {
  margin-top: var(--sp-blk);
  max-width: 56ch;
  font-size: var(--t-lead);
  line-height: 1.6;
  color: var(--ink-2);
}

/* The cost sentence: same size as the lead, set apart by a rule and weight. */
.ce-hero__cost {
  margin-top: 1.25rem;
  max-width: 56ch;
  padding-left: 1rem;
  border-left: 2px solid var(--ink);
  font-size: var(--t-lead);
  line-height: 1.6;
  font-weight: 500;
  color: var(--ink-2);
}

.ce-hero__note {
  margin-top: 1.25rem;
  font-size: var(--t-sm);
  color: var(--ink-3);
}

.ce-hero__actions {
  margin-top: var(--sp-blk);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .75rem 1.25rem;
}

.ce-hero__anchor { font-size: var(--t-sm); }

/* ---- variants ------------------------------------------------------------ */
/* with-kicker: the kicker sits tight above the title. */
.ce-hero[data-ce-variant~="with-kicker"] .ce-hero__kicker { margin-bottom: 1rem; }

/* with-anchor: a quieter, closer row – a text link instead of a button. */
.ce-hero[data-ce-variant~="with-anchor"] .ce-hero__actions { margin-top: 2.5rem; }

/* no-cta: no action row (O nas, Kontakt – the form stands lower on the page),
   so the section closes sooner. */
.ce-hero[data-ce-variant~="no-cta"] { padding-bottom: clamp(2.5rem, 5vw, 4rem); }

/* long-title: an H1 longer than about 60 characters (O nas, Usługi). At the
   15ch measure of --t-hero it runs to five lines at 1280 px; the full width
   of the column and a smaller step keep it to three or four. The floor is
   lower than the hero's: in the wide heading font the 93 characters of O nas
   would take seven lines at 375 px, at 1.85rem they take five. */
.ce-hero[data-ce-variant~="long-title"] .ce-hero__title {
  max-width: none;
  font-size: clamp(1.85rem, 4.9vw, 4.25rem);
}

/* rotating-fit (Home, 24.09.2026): two lines of one size. The top line
   "Tworzymy <rotator>" in its widest form ("Tworzymy strony internetowe")
   takes --hero-fill of the column, aligned left: the font size is that
   share of the column width (100cqi – the .lf-wrap is the size container)
   over --hero-fit, the width of that widest line in em, measured in TT
   Hoves Pro Expanded with the hero's tracking. --hero-fill is .8 since
   27.09 (Mateusz: "not the full width of the screen, 80%"; it was the
   whole column); on a phone (≤ 640 px) the line keeps the whole column –
   80% would bring the H1 down to about 19 px, barely above the lead. The
   rotator stacks every word in one grid cell, so its width is the widest
   word's and the line never changes width. The second line has the same
   size. ce/CE-06-hero.js turns the words. */
.ce-hero[data-ce-variant~="rotating-fit"] .lf-wrap { container-type: inline-size; }
.ce-hero[data-ce-variant~="rotating-fit"] .ce-hero__title {
  --hero-fit: 13.73;              /* measured 24.09 (Regular, −.035em): "Tworzymy " + the widest word = 13.72 em */
  --hero-fill: .8;                /* the widest top line: 80% of the column (27.09) */
  max-width: none;
  font-size: calc(100cqi * var(--hero-fill) / var(--hero-fit));
  line-height: 1.06;
  text-wrap: nowrap;
  /* type as Figma crear-v2.0, 790:1002 (24.09): Expanded Regular, −3.5 px
     at 100 px, #1D1D1E */
  font-weight: 400;
  letter-spacing: -.035em;
  color: var(--ui-ink);
}
@media (max-width: 640px) {
  .ce-hero[data-ce-variant~="rotating-fit"] .ce-hero__title { --hero-fill: 1; }
}
.ce-hero__line { display: block; white-space: nowrap; }
.ce-hero__rotator {
  /* The clip box reaches past the tight line box (line-height 1.06), so the
     descenders of y, j, p stay whole; the negative margins keep the line
     box as it was. Aligned on the baseline, so the padding moves nothing. */
  --rotator-pad-top: .12em;
  --rotator-pad-bottom: .28em;
  display: inline-grid;
  vertical-align: baseline;
  padding-block: var(--rotator-pad-top) var(--rotator-pad-bottom);
  margin-block: calc(var(--rotator-pad-top) * -1) calc(var(--rotator-pad-bottom) * -1);
  overflow: hidden;                /* the leaving and coming words are clipped here */
}
.ce-hero__word {
  grid-area: 1 / 1;
  transform: translateY(calc(100% + var(--rotator-pad-bottom)));
  opacity: 0;
  transition: transform 600ms var(--ease-out-quart), opacity 600ms var(--ease-out-quart);
}
.ce-hero__word.is-current { transform: none; opacity: 1; }
.ce-hero__word.is-leaving { transform: translateY(calc(-100% - var(--rotator-pad-top))); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ce-hero__word { transition: none; }
}

/* full-screen (Home, 24.09.2026): the header (CE-01) and the hero together
   are exactly one screen high. The title and the button stand at the top,
   the scroll row with the lead at the bottom of the screen. The header is --header-h plus its
   1 px rule; svh, so a phone's collapsing toolbar never cuts the button. */
.ce-hero[data-ce-variant~="full-screen"] {
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - var(--header-h) - 1px);
  min-height: calc(100svh - var(--header-h) - 1px);
  padding-block: clamp(3rem, 7vw, 6rem) clamp(2.5rem, 5vw, 4rem);
}
.ce-hero[data-ce-variant~="full-screen"] > .lf-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
}

/* Home, 24.09 (Figma crear-v2.0, 608:2043): the button right under the title
   (40 px), and at the bottom of the screen a row – eyebrow „• SCROLL” in a
   168 px box, 68 px, the lead in 20 px TT Hoves Pro Regular (line 1.4,
   −0.2 px, #0A2526, 648 px). The showreel thumbnail (CE-08) stands in the
   bottom-right corner over the hero, so on a phone the hero keeps room
   under the row for it. */
.ce-hero[data-ce-variant~="full-screen"] .ce-hero__actions { margin-top: clamp(24px, 2.8vw, 40px); }
.ce-hero__foot {
  display: flex;
  align-items: flex-start;
  gap: 16px 68px;
  margin-top: auto;
  padding-top: var(--sp-blk);
}
.ce-hero__scroll { flex: none; width: 168px; padding-top: .35em; }
.ce-hero__foot .ce-hero__lead {
  margin: 0;
  /* 648 px, but always ending 32 px before the showreel thumbnail (CE-08:
     max(220px, 24.72vw) wide at the right page margin) */
  max-width: min(648px, 100vw - 2 * var(--gut) - 168px - 68px - max(220px, 24.72vw) - 32px);
  font-size: clamp(1.0625rem, 1.39vw, 20px);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ui-text);
}
@media (max-width: 900px) {
  .ce-hero__foot { flex-direction: column; }
  .ce-hero__scroll { width: auto; padding-top: 0; }
}
@media (max-width: 900px) {
  .ce-hero__foot .ce-hero__lead { max-width: 648px; }
  .ce-hero[data-ce-variant~="full-screen"] { padding-bottom: calc(max(220px, 24.72vw) * 223 / 356 + 24px); }
}
@media (max-width: 640px) {
  .ce-hero[data-ce-variant~="full-screen"] { padding-bottom: calc(45vw * 223 / 356 + 24px); }
}

/* reveal (Home, 24.09.2026): the H1 comes in like the hero of
   unitedcarriers.com/about (measured 24.09.2026). Each line is filled by a
   gradient clipped to its text – the final colour, then a red edge
   (--ui-brand) fading to transparent – that slides from left to right:
   --hero-reveal runs 30 → 100 in 0.5 s (their 1.2 s, "much faster" –
   Mateusz, 24.09), power1.inOut, the second line 0.06 s later. Their gradient: final 0–30%, brand 40%, transparent from
   50%, 350% wide, position (100 − progress)%. Here one gradient spans a
   whole line although the line is made of several boxes (the run
   "Tworzymy " and the rotating words): every box gets the line's width
   (--reveal-w) and its own offset in the line (--reveal-dx) from
   ce/CE-06-hero.js; without the script the line is taken as --hero-fill
   of the column width – exact for the top line in its widest form.
   After the last line CE-06-hero.js adds .is-revealed and the plain text
   colour returns. Reduced motion: no reveal. */
@property --hero-reveal {
  syntax: "<number>";
  inherits: true;
  initial-value: 100;
}
@keyframes ce-hero-reveal {
  from { --hero-reveal: 30; }
  to { --hero-reveal: 100; }
}
@media (prefers-reduced-motion: no-preference) {
  .ce-hero[data-ce-variant~="reveal"]:not(.is-revealed) .ce-hero__line {
    animation: ce-hero-reveal .5s var(--ease-in-out-quad) both;
  }
  .ce-hero[data-ce-variant~="reveal"]:not(.is-revealed) .ce-hero__line + .ce-hero__line { animation-delay: .06s; }
  .ce-hero[data-ce-variant~="reveal"]:not(.is-revealed) :is(.ce-hero__run, .ce-hero__word) {
    color: transparent;
    background-image: linear-gradient(90deg, var(--ui-ink) 0%, var(--ui-ink) 30%, var(--ui-brand) 40%, transparent 50%, transparent 100%);
    background-repeat: no-repeat;
    background-size: calc(var(--reveal-w, 100cqi * var(--hero-fill, 1)) * 3.5) 100%;
    background-position: calc(var(--reveal-w, 100cqi * var(--hero-fill, 1)) * -2.5 * (100 - var(--hero-reveal)) / 100 - var(--reveal-dx, 0px)) 0;
    -webkit-background-clip: text;
    background-clip: text;
  }
}

/* the button (Home, 24.09): "poznaj usługi", a link to uslugi.html; its
   entrance is the kit's [data-pop] (wembi.ai pills, 350 ms after load, right
   behind the title sweep), its hover the kit's .lf-roll / .lf-swap
   (aventuradentalarts.com) – site.css. */

/* side-eyebrow (O nas, 26.09.2026 – Figma crear-v2.0, frame 608:1127, node
   608:1143): the eyebrow („• O NAS”, __kicker with .lf-eyebrow) in a 168 px
   column on the left, 175 px to the text column; the H1 in 64 px Expanded
   Regular (line 1.05, −2.56 px, #1D1D1E, 945 px), 54 px to the lead in
   20 px TT Hoves Pro (line 1.4, −0.2 px, #0A2526, 349 px). 104 px under the
   header, 160 px to the next section. 1:1 at 1440 px, proportionally below;
   ≤ 900 px the eyebrow stands above the title. The H1 comes in with the kit
   sweep (site.css, data-reveal-text="sweep"), eyebrow and lead fade in
   (data-appear). Combined with no-cta; declared after it, so it wins. */
.ce-hero[data-ce-variant~="side-eyebrow"] {
  padding-block: clamp(56px, 7.22vw, 104px) clamp(80px, 11.11vw, 160px);
}
.ce-hero[data-ce-variant~="side-eyebrow"] > .lf-wrap {
  display: flex;
  align-items: flex-start;
  gap: 24px clamp(40px, 12.15vw, 175px);
}
.ce-hero[data-ce-variant~="side-eyebrow"] .ce-hero__kicker {
  flex: none;
  width: 168px;
  margin: 0;
  padding-top: clamp(4px, .56vw, 8px);
}
.ce-hero[data-ce-variant~="side-eyebrow"] .ce-hero__body { min-width: 0; }
.ce-hero[data-ce-variant~="side-eyebrow"] .ce-hero__title {
  max-width: 14.77em;                    /* 945 px at 64 px */
  font-size: clamp(2rem, 4.444vw, 64px);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: -.04em;                /* −2.56 px at 64 px */
  color: var(--ui-ink);
  text-wrap: pretty;
}
.ce-hero[data-ce-variant~="side-eyebrow"] .ce-hero__lead {
  margin-top: clamp(32px, 3.75vw, 54px);
  max-width: 17.45em;                    /* 349 px at 20 px */
  font-size: clamp(1.0625rem, 1.389vw, 20px);
  line-height: 1.4;
  letter-spacing: -.01em;
  color: var(--ui-text);
}
@media (max-width: 900px) {
  .ce-hero[data-ce-variant~="side-eyebrow"] > .lf-wrap { flex-direction: column; }
  .ce-hero[data-ce-variant~="side-eyebrow"] .ce-hero__kicker { width: auto; padding-top: 0; }
}

/* centered (Usługi, 27.09.2026 – Figma crear-v2.0, frame 608:1649, node
   608:1650): the eyebrow „USŁUGI” (13 px Expanded Medium, #778181 at .7,
   without the dot – hidden in the design, 608:1652) centred 70 px under
   the header bar, 101 px lower the H1 in 64 px Expanded Regular (line
   1.06, −2.24 px, #1D1D1E, 945 px, centred – „Co możemy dla Ciebie /
   zrealizować”), 41 px to the line that opens the tiles below (CE-46).
   1:1 at 1440 px, proportionally below. Entrance: the eyebrow codes itself
   (kit), the H1 comes in with the kit sweep (data-reveal-text="sweep"). */
.ce-hero[data-ce-variant~="centered"] {
  padding-block: clamp(32px, 4.861vw, 70px) clamp(28px, 2.847vw, 41px);
  text-align: center;
}
.ce-hero[data-ce-variant~="centered"] .ce-hero__kicker {
  justify-content: center;
  margin: 0;
}
.ce-hero[data-ce-variant~="centered"] .ce-hero__kicker::before { display: none; }
.ce-hero[data-ce-variant~="centered"] .ce-hero__title {
  max-width: 14.77em;                    /* 945 px at 64 px */
  margin: clamp(40px, 7.014vw, 101px) auto 0;
  font-size: clamp(2.125rem, 4.444vw, 64px);
  font-weight: 400;
  line-height: 1.06;
  letter-spacing: -.035em;               /* −2.24 px at 64 px */
  color: var(--ui-ink);
  text-wrap: wrap;                       /* not balanced: „Co możemy dla Ciebie / zrealizować”, as in Figma */
}

/* centered-lead (Usługi v6, 30.09.2026 – tresci/uslugi-v6-przekaz.md §01;
   combined with centered): the same centred eyebrow and H1, then the lead
   in a 760 px column (20 px TT Hoves Pro, line 1.5, #1D1D1E at 68% – 5.8 : 1;
   its first sentence, bold in the copy file, in full #1D1D1E), the
   UI button (lf-btn--ui with the kit's pop and hover) and the thesis
   „Stronę widać. Pracuje cała platforma.” – a <p>, not a heading – in
   32 px Expanded Regular, lit letter by letter (kit „chars”). The H1 comes
   closer to the eyebrow than in centered (60 instead of 101 px), the lead
   fades in (data-appear). The thesis stands 64 px under the button and
   110 px above the AI block (30.09, second round – halfway between them it
   belonged to neither). 1:1 at 1440 px, proportionally below. ≤ 640 px the
   whole hero aligns left (a 13-line lead does not read centred, and a
   centred H1 over a left lead looked broken; as on O nas). */
.ce-hero[data-ce-variant~="centered-lead"] {
  padding-bottom: clamp(64px, 7.64vw, 110px);
}
.ce-hero[data-ce-variant~="centered-lead"] .ce-hero__title {
  margin-top: clamp(28px, 4.17vw, 60px);
}
.ce-hero[data-ce-variant~="centered-lead"] .ce-hero__lead {
  max-width: 38em;                       /* 760 px at 20 px */
  margin: clamp(28px, 2.78vw, 40px) auto 0;
  font-size: clamp(1.0625rem, 1.389vw, 20px);
  line-height: 1.5;
  letter-spacing: -.01em;
  color: rgba(29, 29, 30, .68);
  text-wrap: pretty;
}
.ce-hero__lead-first { color: var(--ui-ink); }
.ce-hero[data-ce-variant~="centered-lead"] .ce-hero__actions {
  justify-content: center;
  margin-top: clamp(28px, 2.78vw, 40px);
}
.ce-hero__thesis {
  max-width: 24em;
  margin: clamp(40px, 4.44vw, 64px) auto 0;
  font-family: var(--font-heading);
  font-size: clamp(1.375rem, 2.222vw, 32px);
  font-weight: 400;
  line-height: 1.25;
  letter-spacing: -.035em;
  color: var(--ui-ink);
  text-wrap: balance;
}
@media (max-width: 640px) {
  .ce-hero[data-ce-variant~="centered-lead"] { text-align: left; }
  .ce-hero[data-ce-variant~="centered-lead"] .ce-hero__kicker { justify-content: flex-start; }
  .ce-hero[data-ce-variant~="centered-lead"] .ce-hero__title,
  .ce-hero[data-ce-variant~="centered-lead"] .ce-hero__lead,
  .ce-hero[data-ce-variant~="centered-lead"] .ce-hero__thesis { margin-inline: 0; }
  .ce-hero[data-ce-variant~="centered-lead"] .ce-hero__actions { justify-content: flex-start; }
}

/* dots (Home, 29.09.2026 – test): an animated dot grid behind the hero, from
   Mateusz's file dots_bg_pattern x2.png (2880 × 1880, 29.09): a square grid
   every 13.5 px, 1.5 px square dots, warm grey on white (rgb 239 239 237 on
   average, 6–30 of 255 darker, a few up to 50), every dot of its own
   strength, blotchy on a large scale and a little darker towards the
   bottom. ce/CE-06-hero.js draws it on a canvas: at rest the blotches drift
   slowly, like light on water; a moving pointer drops ripples in random
   spots around and behind its path, a moment later, that spread like on
   a lake and fade – the dots rock along the radius and darken on the crests.
   The canvas also runs under the transparent header (CE-01), so the whole
   first screen is dotted. Reduced motion: the still pattern.
   grain (Home, 30.09.2026 – the accepted version until changed, replaces dots there): the dot field from
   lab/dot-field/, effect „Ziarno”, version „Szybsze” – 2 px squares of
   #1D1D1E every 7 px, 0–10% opaque, lit where a slowly flowing field is
   dense, so large soft shapes with grainy edges swell and dissolve on
   their own – only below an uneven edge from Mateusz's sketch and in the
   space the growing showreel opens. ce/CE-06-hero.js draws it with WebGL.
   O nas (01.10.2026): the same field with data-grain-edge="text" – the
   dots keep to the free space beside and under the hero's own text and
   end at the section's bottom edge (the script measures the text). */
.ce-hero:is([data-ce-variant~="dots"], [data-ce-variant~="grain"]) {
  position: relative;
  isolation: isolate;
}
.ce-hero:is([data-ce-variant~="dots"], [data-ce-variant~="grain"]) > .lf-wrap { position: relative; z-index: 1; }
.ce-hero__dots {
  position: absolute;
  z-index: 0;
  left: 0;
  right: 0;
  top: calc(-1 * (var(--header-h) + 1px));   /* under the header and its rule */
  bottom: 0;
  pointer-events: none;
}
.ce-hero__dots canvas { display: block; width: 100%; height: 100%; }
/* grain (30.09, second round): the layer is fixed to the window, so it
   also fills the space the pinned showreel (CE-08) opens under the hero;
   ce/CE-06-hero.js masks it to Mateusz's uneven edge and hides it once the
   reel fills the window. It stays in the hero's stacking context: under
   the hero's text, under the reel (z-index 50). */
.ce-hero[data-ce-variant~="grain"] .ce-hero__dots { position: fixed; inset: 0; }