/* ==========================================================================
   TSIVIA — homepage.html  (the new home page, started 24 Sep 2026)
   --------------------------------------------------------------------------
   Figma file 2Yx93XsRt6hLfp4jN52y8T, desktop frame 3571:465, **1920 x 8859**.

   Same scaling model as every other page: each length is its literal Figma
   pixel value times --u, set by js/homepage.js. Section tops are literal
   Figma y; inside a section, `top` is written as (figma y - section top) so
   either number can be checked against the frame.

   THE PAGE MAP (literal Figma y)
       header / hero      0      CREATIVE DESIGNER, sub, shot, lead, CTA
       statement       1256      80px statement, kicker at 1877
       project 01      1980      (01) / אלעד בן אלול / 3 pictures / desc / CTA
       about           3297      light band 3297-5733, ABOUT ME, photo, texts,
                                 the long line at 5011
       testimonials    5733      wordmark, 3 columns of cards from 6272
       contact         8181      LET'S TALK
       footer bar      8717      142 tall, page ends 8859

   ANIMATIONS ARE NOT IN YET — she will describe them section by section.
   Only the site-wide fade-in-up ([data-anim]) is on.
   ========================================================================== */

/* ---- Fonts new to this page -------------------------------------------- */
@font-face {
  font-family: "Degolan";
  src: url("../assets/fonts/Degolan.woff2") format("woff2"),
       url("../assets/fonts/Degolan.woff") format("woff");
  font-weight: 400;
  font-style: normal;
  font-display: block;
}
@font-face {
  font-family: "Lia Michal-Kasov";
  src: url("../assets/fonts/LiaMichalKasov-Regular.woff2") format("woff2"),
       url("../assets/fonts/LiaMichalKasov-Regular.ttf") format("truetype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Motive";
  src: url("../assets/fonts/Motive-Medium.woff2") format("woff2"),
       url("../assets/fonts/Motive-Medium.ttf") format("truetype");
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ---- This page's palette (Figma styles in the frame) ------------------- */
.homepage {
  --hair: 1px;   /* js/homepage.js: exactly one device pixel */
  --hk: 1;       /* js/homepage.js: device pixels per design px */
  --hp-ink:     #0D0914;   /* כהה — the ground of this page, NOT tokens' #191D24 */
  --hp-white:   #F7F7F7;   /* לבן */
  --hp-lilac:   #9F93FF;   /* סגול בהיר — buttons, script words, card strokes */
  --hp-purple:  #695EBE;   /* סגול */
  --f-mark:     "Degolan", "Cooperative", "Arial Narrow", sans-serif;
  --f-script:   "Lia Michal-Kasov", "Discovery Fs", sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  -webkit-text-size-adjust: 100%;
  /* the scrollbar's room is kept when the menu locks the page, so --u and
     the page behind do not jump */
  scrollbar-gutter: stable;
}

/* Lenis (js/homepage-smooth.js) — its own stylesheet, the three rules that matter */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: clip; }
body {
  --u: calc(100vw / 1920);   /* fallback; js/homepage.js overwrites it */
  margin: 0;
  background: var(--hp-ink);
  color: var(--hp-white);
  font-family: var(--f-body);
  font-weight: var(--fw-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; }
a   { color: inherit; text-decoration: none; }
p, h1, h2, figure, blockquote { margin: 0; }
h1, h2 { font-weight: inherit; font-size: inherit; }
em { font-style: normal; }

.page {
  /* the testimonials window is one screen now, as on the developers page
     (900, not the frame's 1544): everything after it rides up by the 644 */
  --q: calc(644 * var(--u));
  /* 4 Oct, her call: ABOUT ME raised (more of it cut by the dark) and the
     section 110 shorter (--ab); the testimonials moved onto the white, under
     a TESTIMONIALS across the five middle lines. Everything below rides up
     by --q2. */
  --ab: calc(110 * var(--u));
  --q2: calc(1229 * var(--u));   /* 269, then 960 more without the long line (4 Oct, later) */
  /* 5 Oct: the purple panel (js/homepage-reach.js). Its height: one window
     for the circle-filled stage + 5061 of sentence (600 to drop, 4461 to run
     sideways) + 943 of form and buttons. Everything after it is placed from
     the white's end (6426) plus this; --q / --q2 are no longer used. */
  --reach: calc(100vh + (6314 + 152) * var(--u));
  position: relative;
  width: 100%;
  height: calc((6426 + 998) * var(--u) + var(--pin, 0px) + var(--pj, 0px) + var(--reach));   /* the frame ends 998 under the panel */
  overflow: clip;
}

.skip-link {
  position: absolute;
  top: 0; right: 0;
  width: 1px; height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  z-index: 300;
  background: var(--hp-white);
  color: var(--hp-ink);
}
.skip-link:focus {
  width: auto; height: auto;
  overflow: visible;
  clip-path: none;
  top: calc(16 * var(--u));
  right: calc(16 * var(--u));
  padding: calc(12 * var(--u)) calc(20 * var(--u));
}

/* Shared: the Lia script words (לעצור, / “וואו” / (01) / היי, אני צביה) */
.script {
  font-family: var(--f-script);
  font-weight: 400;
  color: var(--hp-lilac);
}
/* Inside a Discovery line, Lia's taller metrics stretched the line box —
   the statement measured 332 against the frame's 312. Figma keeps every line
   at 1.3; a zero line-height on the inline word lets the parent's line rule. */
em.script { line-height: 0; }

/* Shared: the Degolan wordmarks. width: max-content because a centred,
   absolutely positioned nowrap box is otherwise capped at the space left
   to the containing block's edge (docs/traps.md). Placement uses the
   INDIVIDUAL `translate` property so [data-anim]'s transform can't wipe it. */
.mark {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  width: max-content;
  margin: 0;
  font-family: var(--f-mark);
  font-weight: 400;
  line-height: 0.96;
  /* INK CORRECTION. The box sits on Figma's to the pixel and the letters
     still landed LOW: Chrome sets Degolan's glyphs 0.09em further down the
     line than Figma does — 38 px on CREATIVE DESIGNER, 68 on Testimonials,
     72 on LET'S TALK, the same ratio every time. Measured against Figma's
     absoluteRenderBounds with __scratch/homepage-ink.js (3 Oct 2026). */
  margin-top: -0.0903em;
  white-space: nowrap;
  color: transparent;
  background-image: var(--mark-grad);
  -webkit-background-clip: text;
  background-clip: text;
}

/* js/homepage-titles.js — the drop-in letters (olhalazarieva.com).
   The line clips them; each letter carries the wordmark's gradient over its
   own box, which is the line's full height, so the gradient reads the same.
   LTR on purpose: inline-blocks are bidi-neutral, and in this RTL document
   "LET'S TALK" would otherwise come out backwards. */
.mark.is-split { background-size: 0 0 !important; background-repeat: no-repeat !important; }   /* not none: the warp reads it (5 Oct) */
.drop {
  display: block;
  overflow: hidden;            /* direction is set by the script: ltr for Latin, rtl for Hebrew */
}
.drop i {
  display: inline-block;
  font-style: normal;
  will-change: transform;
}
.is-settled .drop i { will-change: auto; }
/* ABOUT ME: each path drops within its own box; the SVG itself is the clip */
.about__mark svg { display: block; width: 100%; height: 100%; overflow: hidden; }
.about__mark svg path { transform-box: fill-box; }
.mark .drop i {
  color: transparent;
  background-image: var(--mark-grad);
  -webkit-background-clip: text;
  background-clip: text;
  will-change: transform;
}
/* once landed, the warp canvas takes over (if it mounted) */
.mark .warp-text { opacity: 0; transition: opacity 0.6s ease; }
.mark.is-settled .warp-text { opacity: 1; }
.mark.is-warped .drop { transition: opacity 0.6s ease; }
.mark.is-warped.is-settled .drop { opacity: 0; }




/* WarpText (js/warp-text.js, the developers page's white version). The heading
   keeps its text for search engines and screen readers; only its painted
   fill is switched off and a canvas is laid over the same box, bleeding past
   it so the warp has room. Same rules as css/style.css. */
.mark.is-warped {
  background-image: none !important;
  color: transparent;
}
.warp-text {
  --warp-bleed: 16%;
  position: absolute;
  inset: calc(-1 * var(--warp-bleed));
  display: block;
  pointer-events: none;
}
.warp-text canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}


/* ==========================================================================
   BACKGROUND
   ========================================================================== */
.page-bg {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.page-bg img { max-width: none; }

/* Her export of the whole hero background, 1919 x 1192 at the frame's 0,0. */
.hero-bg {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(1919 * var(--u));
  height: calc(1192 * var(--u));
}

.hero-bg--foot {
  top: calc((6426 + 998 - 1192) * var(--u));   /* bottom on the page's end */
  scale: 1 -1;
}

/* Rectangle 110 — plain white, 1920 x 2436 at 3297. */
.light-band {
  position: absolute;
  left: 0;
  top: calc(3297 * var(--u));
  width: 100%;
  /* white through the testimonials AND under the purple panel (her call, 5 Oct:
     no dark under the circle) — to 50 above the panel end, so the panel's
     rounded corners still meet the dark of the footer */
  height: calc((6426 - 3297 - 50) * var(--u) + var(--reach));
  background: #FFFFFF;
  overflow: hidden;                         /* the blur stays on the white */
}

.lines {
  position: absolute;
  left: calc(174 * var(--u));
  width: calc(1570.5 * var(--u));
}
.lines--top    { left: 0; width: 100%; top: calc(0.5 * var(--u)); height: calc(3296.5 * var(--u) + var(--pin, 0px) + var(--pj, 0px)); }

/* EVERYTHING BELOW THE RING moves down by its extra scroll. --pin is set by
   js/homepage-gallery.js (3 screens) and is 0 when the ring is off, so every
   Figma y below still reads as the frame's number, plus --pin. */
.after-pin { margin-top: var(--pin, 0px); }
/* and everything below the PROJECTS by theirs (--pj, js/homepage-projects.js) */
.after-pin.after-pj { margin-top: calc(var(--pin, 0px) + var(--pj, 0px)); }
.after-pin.after-pj.after-q { margin-top: calc(var(--pin, 0px) + var(--pj, 0px) + var(--reach)); }   /* their tops: from the panel's end, E = 6426 + --reach */
.lines--mid    { top: calc(3279 * var(--u)); height: calc((6426 - 3279) * var(--u) + 100vh); opacity: 0.67; }   /* 5 Oct: a touch lighter (0.3 -> 0.2) */   /* to the white's end */
.lines--quotes { top: calc(6173 * var(--u)); height: calc((1643 - 644) * var(--u)); }   /* ends with the one-screen window */


/* HEADER + MENU: css/site-nav.css (shared by every page, 4 Oct) */


/* ==========================================================================
   SECTIONS — every section is an absolute box at its Figma y
   ========================================================================== */
main { position: relative; z-index: 1; }
main > section {
  position: absolute;
  left: 0;
  width: 100%;
}
main > section > * { position: absolute; }

/* A right-aligned Hebrew paragraph whose RIGHT edge Figma gives as x. */
.rtl-edge { text-align: right; }

/* ---- Buttons ------------------------------------------------------------
   THE SITE'S RECIPE, as on index / home / mentoring: the colour lives on
   ::before, and on hover it is MASKED AWAY in a circle that opens from where
   the pointer came in (--mx/--my, set in js/homepage.js), leaving a lilac
   outline and lilac words; the arrow steps toward the reading direction.
   `background: transparent` is on purpose (docs/traps.md).

   Figma's auto-layout is left-to-right: arrow first, words after. The box
   keeps that direction, the words keep the document's (docs/traps.md). */
@property --fill {
  syntax: "<percentage>";
  initial-value: 0%;
  inherits: false;
}
.btn {
  display: flex;
  direction: ltr;
  align-items: center;
  justify-content: center;
  gap: calc(19.453 * var(--u));
  padding: calc(12 * var(--u)) calc(36 * var(--u));
  border-radius: calc(100 * var(--u));
  color: #FFFFFF;
  font-size: calc(20 * var(--u));
  line-height: 1.591;
  white-space: nowrap;
  --mx: 50%;
  --my: 50%;
  isolation: isolate;
  cursor: pointer;
  transition: color var(--dur-fast) var(--ease-soft),
              border-color var(--dur-base) var(--ease-soft);
}
.btn::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--hair));
  border-radius: inherit;
  background: var(--btn-fill, var(--hp-lilac));
  z-index: -1;
  transition: --fill var(--dur-base) var(--ease-soft);
}
.btn--solid {
  background: transparent;
  border: var(--hair) solid transparent;   /* the button stays at ONE device pixel — 1.5 read too heavy on it (3 Oct) */
}
.btn--solid::before {
  --fill: 0%;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my),
                        #0000 var(--fill), #000 calc(var(--fill) + 0.5%));
          mask-image: radial-gradient(circle at var(--mx) var(--my),
                        #0000 var(--fill), #000 calc(var(--fill) + 0.5%));
}
.btn--solid:hover::before,
.btn--solid:focus-visible::before { --fill: 105%; }
.btn--solid:hover,
.btn--solid:focus-visible {
  /* her call (3 Oct): on hover the words AND the outline stay WHITE — the
     other pages turn them lilac; this page does not */
  border-color: #FFFFFF;
  color: #FFFFFF;
}
/* on the light band (About) the hover's white would vanish: ink there (her call, 4 Oct) */
.about .btn--solid:hover,
.about .btn--solid:focus-visible { border-color: var(--hp-ink); color: var(--hp-ink); }
.btn span { direction: rtl; }
.btn--apart { justify-content: space-between; }
.btn__arrow {
  display: block;
  flex: none;
  width: calc(56.5 * var(--u));
  height: calc(11.046 * var(--u));
  margin-inline: calc(-0.75 * var(--u));
  transition: transform var(--dur-fast) var(--ease-out);
}
.btn:hover .btn__arrow,
.btn:focus-visible .btn__arrow { transform: translateX(calc(-6 * var(--u))); }


/* ---- HERO (top 0) ------------------------------------------------------- */
.hero { top: 0; height: calc(1058 * var(--u)); }

.hero__tag {
  right: calc((1920 - 916) * var(--u));
  top: calc((80 + 2.2) * var(--u));   /* + ink correction, Discovery */
  font-size: calc(20 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(11.8 * var(--u));
  color: #FFFFFF;
  white-space: pre;
}

/* 429.102 Degolan, gradient bottom-up: solid to 66.8%, gone by the top. */
.hero__title {
  top: calc(151 * var(--u));
  left: calc(959.5 * var(--u));
  font-size: calc(429.102 * var(--u));
  --mark-grad: linear-gradient(0.39deg, #FFFFFF 20.619%, #FFFFFF 66.795%, rgba(255, 255, 255, 0) 107.47%);
}

.hero__sub {
  right: calc((1920 - 1745) * var(--u));
  top: calc((516 + 1.9) * var(--u));   /* + ink correction */
  font-size: calc(24 * var(--u));
  line-height: 1.3;
  text-align: right;
  white-space: nowrap;
}
.hero__sub b { font-weight: var(--fw-bold); }

/* 3571:788 — 366 x 417, the picture cropped inside it. */
.hero__shot {
  left: calc(1028 * var(--u));
  top: calc(456 * var(--u));
  width: calc(366 * var(--u));
  height: calc(417 * var(--u));
  border-radius: calc(12 * var(--u));
  overflow: hidden;
}
.hero__shot img {
  position: absolute;
  max-width: none;
  left: -10.44%;
  top: -10.97%;
  width: 110.6%;
  height: 121.29%;
}
/* js/homepage-shot.js — the changing pictures, drawn over the first one */
.hero__shot-gl {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.hero__shot.is-gl img { visibility: hidden; }
/* THE PICTURE ENTRANCE — one gesture for the page (her call, 4 Oct: the
   About photo comes in exactly as the hero's): uncovered from the top down
   while the picture settles from 1.5x, 2.5 s. */
.hero__shot.reveal-init,
.about__photo.reveal-init { clip-path: inset(0 0 100% 0 round calc(12 * var(--u))); }
.hero__shot.reveal-init > *,
.about__photo.reveal-init > * { transform: scale(1.5); transform-origin: 50% 0; }
.hero__shot.reveal-init.is-revealed,
.about__photo.reveal-init.is-revealed {
  clip-path: inset(0 0 0 0 round calc(12 * var(--u)));
  transition: clip-path 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.hero__shot.reveal-init.is-revealed > *,
.about__photo.reveal-init.is-revealed > * {
  transform: scale(1);
  transition: transform 2.5s cubic-bezier(0.22, 1, 0.36, 1);
}
/* the fallback is a square mockup: cover, centred on its screen */
.hero__shot img.hero__shot-fallback {
  left: 0; top: 0; width: 100%; height: 100%;
  object-fit: cover;
  object-position: 60% 42%;
}

.hero__lead {
  right: calc((1920 - 872) * var(--u));
  top: calc((699 + 2.2) * var(--u));   /* + ink correction */
  width: calc(350 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.3;
  text-align: right;
  color: rgba(255, 255, 255, 0.7);
}

.hero__cta {
  left: calc(528 * var(--u));
  top: calc(811 * var(--u));
  width: calc(344 * var(--u));
}


/* ---- THE RING (lukebaffait.fr) -----------------------------------------
   The track starts so that, the moment the stage pins, the statement's centre
   sits exactly where the frame has it (1256 + 5.7 ink + 312 / 2 = 1417.7).
   It is one screen plus --pin tall; the stage inside is sticky. */
.cg {
  top: calc(1417.7 * var(--u) - 50vh);
  height: calc(100vh + var(--pin, 0px));
  pointer-events: none;
}
.cg > .cg__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
  perspective: calc(1200 * var(--u));
  display: flex;
  align-items: center;
  justify-content: center;
}
.cg__ring {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transform-style: preserve-3d;
}
.cg__img {
  position: absolute;
  transform-style: preserve-3d;
  visibility: hidden;
  /* NO opacity / filter / will-change here. opacity flattens preserve-3d
     (the slices lose their curve); will-change: transform makes Chrome draw
     the picture once at its base size and stretch that texture as it comes
     forward (1.7x at the front) — soft. Left alone, it is redrawn sharp. */
}
.cg__slice {
  position: absolute;
  top: 0;
  height: 100%;
  background-repeat: no-repeat;
  backface-visibility: visible;
}
/* the statement, in the middle of the ring */
.cg .cg__phrase {
  /* smaller than the frame's 80 inside the ring — her call (3 Oct), to give
     the pictures room */
  font-size: calc(64 * var(--u));
  width: calc(1060 * var(--u));
  position: relative;
  left: auto;
  top: auto;
  translate: none;
  z-index: 900;
  will-change: opacity, transform;
}
.cg--live .cg__phrase .word {
  display: inline-block;
  opacity: 0;
  filter: blur(8px);
}

/* ---- STATEMENT KICKER (top 1256 as before, + --pin) --------------------- */
.statement { top: calc(1256 * var(--u)); }

.statement__text {
  left: 50%;
  translate: -50% 0;
  top: calc(5.7 * var(--u));   /* ink correction: Discovery at 80 sits 5.7 high */
  width: calc(1325 * var(--u));
  font-size: calc(80 * var(--u));
  line-height: 1.3;
  text-align: center;
  color: var(--hp-white);
  font-weight: var(--fw-light);
}

.statement__kicker {
  position: absolute;
  left: 50%;
  translate: -50% 0;
  top: calc((1877 - 1256) * var(--u));
  width: calc(1325 * var(--u));
  font-size: calc(32 * var(--u));
  line-height: 1.3;
  letter-spacing: calc(0.96 * var(--u));
  text-align: center;
}
.statement__kicker .script { letter-spacing: calc(0.48 * var(--u)); }
/* in the projects' stage (4 Oct): closer to the name — its bottom 53 above
   the name's top, not 114 — and "וואו" a size up (32 -> 44) */
.pj__kicker { top: calc(-40 * var(--u)); z-index: 1; }
.pj__kicker .script { font-size: calc(48 * var(--u)); }
.pj--live .pj__kicker { top: calc(50vh - 237.5 * var(--u) - 40 * var(--u)); }


/* ---- RAIN (muizzwebstudio.com's grid raindrops, her call 4 Oct) -------
   2 x 10, blurred 1px, sliding down the background lines; white on the dark
   projects, ink on the light About. js/homepage-rain.js */
.rain { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.rain i {
  position: absolute;
  left: 0;
  top: 0;
  width: 1px;                                /* his 2 read too heavy (her call): one pixel */
  height: 10px;
  margin-left: -0.5px;
  background: var(--rain, #fff);
  filter: blur(0.5px);
  opacity: 0;
  will-change: transform, opacity;
}
.about .rain { --rain: var(--hp-ink); }

/* ---- PROJECTS (top 1980) -----------------------------------------------
   Static (no script / reduced motion / narrow): the frame as drawn — project
   01's words and its three pictures; 02 and 03 are not shown.
   Live (.pj--live, js/homepage-projects.js): one tall scene; the stage is
   sticky and holds the words, centred on the window (the frame's 475-tall
   block); the gallery scrolls over it. The section starts so that the words
   sit exactly at the frame's y the moment the stage pins. */
.pj { top: calc(1980 * var(--u)); height: calc(1220 * var(--u)); }
.pj > .pj__stage, .pj > .pj__gallery { position: absolute; left: 0; width: 100%; top: 0; }
.pj__panel { position: absolute; left: 0; top: 0; width: 100%; height: calc(475 * var(--u)); }
.pj__panel > * { position: absolute; }
.pj__panel:not(.is-active), .pj__set:not([data-i="0"]) { display: none; }
.pj__set { position: absolute; inset: 0; }
.pj__fig {
  position: absolute;
  border-radius: calc(12 * var(--u));
  overflow: hidden;
}
.pj__fig img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pj__fig[style*="aspect-ratio"] { height: auto !important; }   /* her mockups: their own proportions, 452 wide */
/* x1.6 was too big (her, 4 Oct); now the example's width — his pictures are
   452 wide at 1920 — with the frame's proportions; a keeps the frame's left
   edge (174), b its right edge (1744), c its centre (960) */
.pj__fig--a { left: calc(174 * var(--u));  top: calc((2291 - 1980) * var(--u)); width: calc(452 * var(--u)); height: calc(536 * var(--u)); }  /* 3604:1374, 378x448 */
.pj__fig--b { left: calc(1292 * var(--u)); top: calc((2336 - 1980) * var(--u)); width: calc(452 * var(--u)); height: calc(341 * var(--u)); }  /* 3604:1375, 373x281 */
.pj__fig--c { left: calc(734 * var(--u));  top: calc((2643 - 1980) * var(--u)); width: calc(452 * var(--u)); height: calc(536 * var(--u)); }  /* 3604:1376, 378x448 */
.pj.pj--live { top: calc((1980 + 237.5) * var(--u) - 50vh); height: var(--pj-h); }
.pj--live > .pj__stage { position: sticky; height: 100vh; z-index: 1; }
.pj--live > .pj__gallery { height: 100%; z-index: 2; pointer-events: none; }
.pj--live .pj__panel { display: block; top: calc(50vh - 237.5 * var(--u)); pointer-events: none; }
.pj--live .pj__panel.is-active { pointer-events: auto; }
.pj--live .pj__set { display: block; inset: auto; left: 0; width: 100%; height: 0; }
.pj--live .pj__fig { top: 0; }            /* placed by the script */
.pj--live .pj__fig { will-change: translate; }
/* the entrance (her call, 4 Oct): the name with the page's title effect —
   letters drop into the line, centre-out — then the number, the words and
   the button rise as the whole site's fade-in-up does. The way out: the
   panel fades. Delays are set by js/homepage-projects.js. */
.pj--live .pj__panel .drop i {
  transform: translateY(-1em);
  transition: transform 1.1s cubic-bezier(0.76, 0, 0.24, 1);
}
.pj--live .pj__panel .pj__up {
  opacity: 0;
  transform: translateY(calc(46 * var(--u)));
  transition: opacity var(--dur-rise) var(--ease-rise), transform var(--dur-rise) var(--ease-rise);
}
.pj--live .pj__panel.is-in .drop i,
.pj--live .pj__panel.is-in .pj__up { transform: none; }
.pj--live .pj__panel.is-in .pj__up { opacity: 1; }
.pj--live .pj__panel { transition: opacity 0.35s cubic-bezier(0.55, 0.085, 0.68, 0.53); }
.pj--live .pj__panel.is-out { opacity: 0; }
.pj--live .pj__panel.is-reset,
.pj--live .pj__panel.is-reset * { transition: none !important; }


.project__num {
  left: calc(471 * var(--u));
  translate: -50% 0;
  top: 0;                                    /* the frame: it overlaps the name's first letter; its x follows each name (js) */
  z-index: 2;                                /* her call (4 Oct): drawn OVER the name */
  font-size: calc(80.762 * var(--u));
  line-height: 1.3;
  white-space: nowrap;
}

.project__name {
  left: 50%;
  translate: -50% 0;
  top: calc((2033 - 1980 + 2.1) * var(--u));   /* + ink correction, Cooperative */
  width: max-content;
  font-family: var(--f-display);
  font-size: calc(224 * var(--u));
  line-height: 0.98;
  font-weight: 400;
  color: var(--hp-white);
  white-space: nowrap;
}

.project__desc {                             /* 3604:1370, centred (her frame, 4 Oct) */
  left: calc(699 * var(--u));
  top: calc((2310 - 1980) * var(--u));
  width: calc(524 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.3;
  text-align: center;
  color: rgba(255, 255, 255, 0.7);
}

.project__cta {                              /* 3604:1371, centred */
  left: calc(786 * var(--u));
  top: calc((2404 - 1980) * var(--u));
  width: calc(348 * var(--u));
}


/* ---- ABOUT (top 3297, the light band) ---------------------------------- */
.about {
  top: calc(3297 * var(--u));
  height: calc((4430 - 3297) * var(--u));   /* the long line is gone: ends 84 under the button */
  color: var(--hp-ink);
  font-weight: 380;                          /* 340 read thin on the white (her note, 5 Oct) */
}

/* The ABOUT ME outline starts 32.48 ABOVE the band — as in the frame. */
.about__mark {
  left: calc(176.3 * var(--u));
  top: calc((3264.52 - 3297 - 95) * var(--u));   /* 127.5 under the dark now (her picture, 4 Oct) */
  /* the part above the white is cut, not drawn: its ink letters hid the
     background lines there (her note, 5 Oct) */
  clip-path: inset(calc(127.5 * var(--u) - 1px) 0 0 0);   /* 1px over the white's edge: at a fractional --u the edge row showed as a white hairline above the letters (her note, 5 Oct) */
  width: calc(1563.669 * var(--u));
  height: calc(529.484 * var(--u));
  margin: 0;
}
.about__mark img { width: 100%; height: 100%; max-width: none; }

/* Figma: saturation -0.22 on this picture. */
.about__photo {                              /* 3680:832 */
  /* smaller (her call, 4 Oct): its foot on the button's and the text's
     (4346.4), the top and the centre (1073) kept, the frame's proportions */
  left: calc((1073 - 228.9) * var(--u));
  top: calc((3762 - 3297) * var(--u) - var(--ab));
  width: calc(457.8 * var(--u));
  height: calc(694.4 * var(--u));
  border-radius: calc(12 * var(--u));
  overflow: hidden;
  isolation: isolate;
}
.about__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: inherit; }
.about__photo.is-gl img { visibility: hidden; }
.about__photo canvas { position: absolute; display: block; pointer-events: none; }
/* once in, the photo is no longer boxed: the wave may run past its edges
   (her call: "release it"); the shader draws the rounded corners itself */
.about__photo.is-free { overflow: visible; clip-path: none !important; }

.about__hi {
  right: calc((1920 - 1744) * var(--u));
  top: calc((4253 - 3297) * var(--u) - var(--ab));
  padding: 0.25em 0 0.35em;                  /* the script's tails (the נ) live inside the box — */
  margin: -0.25em 0 -0.35em;                 /* — without moving the line */
  --w: 110%;
  -webkit-mask-image: linear-gradient(to left, #000 calc(var(--w) - 12%), transparent var(--w));
          mask-image: linear-gradient(to left, #000 calc(var(--w) - 12%), transparent var(--w));
  width: calc(367 * var(--u));
  font-size: calc(64 * var(--u));
  line-height: 1.3;
  text-align: right;
}


.about__intro {
  right: calc((1920 - 1743) * var(--u));
  top: calc((4358 - 3297) * var(--u) - var(--ab));
  width: calc(367 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.3;
  text-align: right;
}

/* Two paragraphs with one blank line between them (Figma's double <br>). */
.about__body {
  right: calc((1920 - 697) * var(--u));
  top: calc((4182 - 3297) * var(--u) - var(--ab));
  width: calc(523 * var(--u));
  font-size: calc(20 * var(--u));
  line-height: 1.3;
  text-align: right;
}
.about__body p + p { margin-top: 1.3em; }

.about__cta {
  left: calc(440 * var(--u));
  top: calc((4407 - 3297) * var(--u) - var(--ab));
  width: calc(257 * var(--u));
}



/* ---- TESTIMONIALS (top 5733) ------------------------------------------- */
/* 4 Oct, her call: on the WHITE now — the section starts where About ends
   (5623) and the white runs to 6966. TESTIMONIALS spans the five middle
   lines (524.25 .. 1395), solid ink; the cards are the same wall, in ink
   with ink frames, and the drops fall here too (ink, as in About). */
.quotes {
  top: calc(4430 * var(--u));
  height: calc((6426 - 4430) * var(--u));
  color: var(--hp-ink);
  font-weight: 380;                          /* 340 read thin on the white (her note, 5 Oct) */
}
.quotes .rain { --rain: var(--hp-ink); }

.quotes__mark {
  top: calc(220 * var(--u));                /* 120 further from About, then 50 lower (5 Oct) */
  left: calc(959.625 * var(--u));
  font-size: calc(329.46 * var(--u));      /* 870.75 wide: line 524.25 to line 1395 */
  --mark-grad: linear-gradient(var(--hp-ink), var(--hp-ink));
}

/* Three columns at x 175 / 708 / 1241, 497 wide, cards ~36 apart (the frame
   has 34–38). Laid out LTR like Figma; the cards themselves are RTL. */
.quotes__cols {
  left: calc(174.25 * var(--u));           /* line to line, 174.25 .. 1744.5 (her call, 4 Oct) */
  top: calc((5046 - 4430) * var(--u));     /* 130 under the heading's box */
  display: flex;
  direction: ltr;
  align-items: flex-start;
  gap: calc(36 * var(--u));
}
/* THE DEVELOPERS PAGE'S TESTIMONIALS (her call, 4 Oct: "exactly as there,
   with the animation"): js/marquee.js — shared, used as it is — wraps each
   column's cards in a track, clones them until a copy is taller than the
   column, and loops each column upward (34 / 22 / 34 s a loop, the middle
   faster), under a 15% fade at the top and the bottom. Same rules as
   css/style.css; this page keeps its own columns' x and width (the frame's).
   ONE SCREEN, as there (her call, 4 Oct): the window is the developers
   page's 900 tall, from the frame's first card (6272); everything below
   rides up the 644 it saves (--q). Cards 36 apart, evenly — the loop is
   measured on it. */
.quotes__cols {
  height: calc(900 * var(--u));
  overflow: hidden;
  /* the mask ends at the box: 3px of room each side for the frames */
  padding: 0 3px;
  margin-left: -3px;
  -webkit-mask-image: linear-gradient(transparent 0%, #000 15%, #000 85%, transparent 100%);
          mask-image: linear-gradient(transparent 0%, #000 15%, #000 85%, transparent 100%);
}
.quotes__col {
  width: calc(499.42 * var(--u));
  height: 100%;
  overflow: clip;
  overflow-clip-margin: 2px;               /* the cards' right frame sits ON the edge: it was being cut (5 Oct) */
}
.quotes__track {
  display: flex;
  flex-direction: column;
  gap: calc(36 * var(--u));
  will-change: transform;
  /* its GPU layer ended exactly on the cards right frame and dropped that
     pixel (5 Oct): 2px of room each side, inside the columns clip margin */
  padding-inline: 2px;
  margin-inline: -2px;
  backface-visibility: hidden;          /* her note (4 Oct): it trembled — the track now rides */
  transform: translate3d(0, 0, 0);      /* its own GPU layer, so the hairlines and the text are */
}                                       /* painted once and only moved, never redrawn per frame */
.quotes.is-running .quotes__track { animation: hp-quotes-up var(--speed, 25s) linear infinite; }
@keyframes hp-quotes-up {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(0, calc(-1 * var(--loop, 0px)), 0); }
}
/* the lift on hover moved the card inside a moving track and redrew it; the
   wall is always under the pointer, so it shook — the developers page has
   the same rule, but no smooth scroll on top. Off here. */
.quotes .quote:hover { transform: none; }
@media (prefers-reduced-motion: reduce) {
  .quotes__cols { height: auto; overflow: visible; -webkit-mask-image: none; mask-image: none; }
  .quotes__col { height: auto; overflow: visible; display: flex; flex-direction: column; gap: calc(36 * var(--u)); }
}

.quote {
  direction: rtl;
  margin: 0;
  transition: transform var(--dur-base) var(--ease-out);
  display: flex;
  flex-direction: column;
  gap: calc(26 * var(--u));
  padding: calc(36 * var(--u));
  border: var(--hair) solid rgba(13, 9, 20, 0.45);  /* ink on the white, ONE device pixel; 30% -> 45% (5 Oct: a touch darker) */
  border-radius: calc(12 * var(--u));
  font-size: calc(20 * var(--u));
  color: var(--hp-ink);
}
.quote__face {
  width: calc(70 * var(--u));
  height: calc(68 * var(--u));
}
.quote blockquote {
  margin: 0;
  line-height: 1.3;
  text-align: right;
}
/* Figma sets the name LEFT-aligned (textAlignHorizontal: LEFT). */
.quote figcaption {
  font-weight: var(--fw-bold);
  line-height: calc(23 * var(--u));   /* Figma "normal" for this font */
  text-align: left;
}


/* ---- CONTACT (top 8181) ------------------------------------------------ */
.contact { top: calc((6426 + 324 + 71.46) * var(--u)); }   /* box 324 under the panel (frame 6998 - 6674) + ink correction */   /* box 348 under the panel (frame 8011 - 7663) + ink correction */
.contact__mark {
  top: 0;
  left: calc(956.5 * var(--u));
  font-size: calc(791.323 * var(--u));      /* her frame, 5 Oct */
  --mark-grad: linear-gradient(179.26deg, #FFFFFF 2.2433%, rgba(255, 255, 255, 0.5) 39.917%, rgba(255, 255, 255, 0) 75.737%);
}


/* ---- FOOTER BAR (top 8717) --------------------------------------------- */
.foot {
  position: absolute;
  left: 0;
  top: calc((6426 + 887) * var(--u));     /* frame 7561 - 6674 */
  width: 100%;
  height: calc(142 * var(--u));
  z-index: 2;
  background: rgba(13, 9, 20, 0.6);      /* the new dark at 60% (her call, 5 Oct) */
  border-top: var(--hair) solid rgba(159, 147, 255, 0.4);   /* the frame: #9F93FF at 40%, one device pixel */
  font-size: calc(16 * var(--u));
  color: var(--hp-white);
}
.foot > * { position: absolute; }
.foot__copy {
  left: calc(957 * var(--u));           /* 842 + 230 / 2 */
  translate: -50% 0;
  top: calc((7597 - 7561) * var(--u));
  line-height: 1.3;
  white-space: nowrap;
}


/* ==========================================================================
   THE SITE-WIDE FADE-IN-UP — same recipe as the other pages
   ========================================================================== */
[data-anim] {
  opacity: 0;
  transform: translateY(calc(46 * var(--u)));
  transition: opacity var(--dur-rise) var(--ease-rise),
              transform var(--dur-rise) var(--ease-rise);
  will-change: opacity, transform;
}
[data-anim].is-in {
  opacity: var(--o-rest, 1);
  transform: none;
  will-change: auto;
}
[data-anim="mark"] {
  transform: translateY(calc(64 * var(--u))) scale(0.985);
  transition-duration: var(--dur-slow);
}
@media (prefers-reduced-motion: reduce) {
  [data-anim] { opacity: 1; transform: none; transition: none; }
}

/* once split, the wordmark's own gradient goes: background-clip:text on a
   parent of inline-block letters clips to the letters' BOXES, a stripe of
   gradient behind each one (seen on the other pages, 4 Oct). Each letter
   carries the gradient itself (.mark .drop i). The warp read the heading's
   fill at mount, before the split. */
.mark.is-split { background-size: 0 0 !important; background-repeat: no-repeat !important; }   /* not none: the warp reads it (5 Oct) */


/* ==========================================================================
   REACH — the purple panel, AS HER FINISHED FRAME (5 Oct; 3704:1316 at
   5649, 1378 tall, radius 50, the grid lines in it at 20% white)
   --------------------------------------------------------------------------
   Section top S = 6426 (300 of white after the testimonials).
   js/homepage-reach.js:
   - while S climbs the last window, .reach-blob (fixed, over the
     testimonials) is a circle on the window's bottom edge growing until it
     covers it (lukebaffait.fr); from S the section's own purple shows;
   - the stage is pinned: the two lines above (24, 3723:433), the sentence
     (Cooperative 300) dropping in from the right and running sideways,
     and the button to the form (3726:444) under it;
   - then the rest: the two page buttons on the left (3711:1377 / 1374), the
     pages on the right (3726:454), the panel's rounded foot.
   Frame offsets from the sentence's top (5981): lines -235, button +471;
   from the button's foot (6551): buttons and pages +253, the end +476.
   ========================================================================== */
.reach-blob {
  position: fixed;
  inset: 0;
  z-index: 3;
  background: #695EBE;
  clip-path: circle(0 at 50% 100%);
  visibility: hidden;
  pointer-events: none;
}
.reach {
  top: calc(6426 * var(--u));
  height: var(--reach);
  z-index: 4;
  border-radius: 0 0 calc(50 * var(--u)) calc(50 * var(--u));
}
.reach.is-full, .reach.is-static { background: #695EBE; }
main > section.reach > * { position: relative; }
.reach__scene {
  /* one window + the run (600 to drop + 5450 sideways) + the overlap the
     rest rides up over: it stops on the button's foot (50vh + 423) */
  height: calc(150vh + (6314 - 394) * var(--u));
  z-index: 1;
}
.reach__stage {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}
.reach__stage > * { position: absolute; margin: 0; }
.reach__top {
  left: 0;
  width: 100%;
  top: calc(50vh - 382 * var(--u));
  font-size: calc(24 * var(--u));
  line-height: 1.2;
  color: #F7F7F7;
  text-align: center;
  font-weight: var(--fw-light);
}
.reach__line {
  right: calc((1920 - 1744) * var(--u));    /* starts on the right grid line: at 1988 its first word was cut (her note) */
  top: calc(50vh - 147 * var(--u));
  width: max-content;
  font-family: var(--f-display);
  font-size: calc(300 * var(--u));
  line-height: 0.98;
  font-weight: 400;
  color: #F7F7F7;
  white-space: nowrap;
  padding-left: 0.25em;                     /* the frame's trailing space */
  will-change: transform;
}
.reach__line .drop { overflow: hidden; padding: 0.1em 0 0.12em; margin: -0.1em 0 -0.12em; }
/* two sparkles inside the sentence, either side of מדהים, turning */
.reach__star {
  display: inline-block;
  width: 0.36em;
  height: 0.36em;
  margin: 0 0.12em;
  vertical-align: 0.24em;
  color: #F7F7F7;
  will-change: transform;
}
/* the button to the form — 3726:444: 538 x 99, ink, 64 / 24 padding, 32,
   a 109 arrow */
main > section.reach .reach__cta {
  position: absolute;
  left: calc(697.25 * var(--u));            /* line to line, 697.25 .. 1221 (her note) */
  top: calc(50vh + 324 * var(--u));
  width: calc(523.75 * var(--u));
  padding: calc(16 * var(--u)) calc(64 * var(--u));   /* 16 / 16 (her call): 70 tall */
  font-family: inherit;
  font-size: calc(24 * var(--u));      /* 32 -> 24, as her frame now */
  font-weight: var(--fw-light);
  --btn-fill: var(--hp-ink);
  will-change: transform, opacity;
}
.reach__cta .btn__arrow { width: calc(109 * var(--u)); height: calc(11.046 * var(--u)); }

.reach__rest {
  margin-top: calc(-50vh + 394 * var(--u));   /* the button's foot: 324 + 70 */
  height: calc(152 * var(--u));               /* the panel still ends 222 under the button's top */
  z-index: 1;
}
.reach__rest > * { position: absolute; }
/* the grid lines in the panel: the page's ten, #F7F7F7 at 20% */
.reach__lines {
  position: absolute !important;
  left: 0;
  top: 0;
  width: 100%;
  bottom: 0;                                /* to the end of the purple (her note) */
  z-index: 0;
  pointer-events: none;
  opacity: 0;
}
.reach.is-full .reach__lines { opacity: 1; }
.reach__lines i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: var(--hair);
  /* her frame: #F7F7F7 at 20% on a HALF-pixel line; ours is a whole device
     pixel, so 10% reads as hers (at 20% / 35% it read heavy — her notes) */
  background: rgba(247, 247, 247, 0.1);
}

/* ---- THE ROW under the panel (her frame, 5 Oct; panel end E = 6674) ----
   pages x 1440..1516 from E+71, legal 1119..1237 from E+77, icons at 1719
   from E+76, the buttons (290, the site button) at 174 / 486, centred on
   the frame's 64-tall row at E+124. */
.footrow {
  position: absolute;
  left: 0;
  width: 100%;
  top: calc((6426 + 111) * var(--u));    /* the frame's 71, + 40 lower (her note, 5 Oct) */
  z-index: 2;
  font-size: calc(20 * var(--u));
  color: #F7F7F7;
  font-weight: var(--fw-light);
}
.footrow > * { position: absolute; margin: 0; padding: 0; list-style: none; }
.footrow .reach__btn {
  top: calc((124 - 71 + 4) * var(--u));
  width: calc(290 * var(--u));
  padding: calc(12 * var(--u)) calc(36 * var(--u));
  color: #FFFFFF;
}
.reach__btn--white { left: calc(174 * var(--u)); --btn-fill: #F7F7F7; color: var(--hp-ink) !important; font-weight: 400; }
.reach__btn--white:hover, .reach__btn--white:focus-visible { color: #FFFFFF !important; border-color: #FFFFFF; }
.reach__btn--ghost {
  left: calc(486 * var(--u));
  border: var(--hair) solid #F7F7F7;
  --btn-fill: transparent;
  transition: background-color var(--dur-base) var(--ease-soft);
}
/* it FILLS on hover, as the white one empties: the white comes in as a
   circle from where the pointer entered (her note, 5 Oct) */
.reach__btn--ghost::before {
  --fill: 0%;
  background: #F7F7F7;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 var(--fill), #0000 calc(var(--fill) + 0.5%));
          mask-image: radial-gradient(circle at var(--mx) var(--my), #000 var(--fill), #0000 calc(var(--fill) + 0.5%));
}
.reach__btn--ghost:hover::before, .reach__btn--ghost:focus-visible::before { --fill: 105%; }
.footrow .reach__btn--ghost:hover, .footrow .reach__btn--ghost:focus-visible { color: var(--hp-ink); font-weight: 400; }   /* dark on light: heavier (her standing rule) */
.footrow__pages { right: calc((1920 - 1516) * var(--u)); top: 0; text-align: right; }
.footrow__pages li { height: calc(29 * var(--u)); line-height: calc(37 * var(--u)); }
.footrow__legal { left: calc(1119 * var(--u)); width: calc(118 * var(--u)); top: calc(6 * var(--u)); text-align: right; }
.footrow__legal li { height: calc(42.5 * var(--u)); line-height: calc(27 * var(--u)); }
.footrow__legal a { text-decoration: underline; text-decoration-thickness: var(--hair); text-underline-offset: calc(4 * var(--u)); white-space: nowrap; }
.footrow__icons { left: calc(1719 * var(--u)); top: calc(5 * var(--u)); display: flex; flex-direction: column; gap: calc(20 * var(--u)); }
.footrow__icons img { width: calc(24.667 * var(--u)); height: calc(24.667 * var(--u)); }
.footrow a:hover { color: var(--hp-lilac); }

/* THE FORM DRAWER: css/site-drawer.css (shared with index.html, 5 Oct) */

/* ---- the purple blur (Ellipse 22) ---- */
.hp-glow {
  position: absolute;
  left: calc((509.485 - 1571.987) * var(--u));
  top: calc((3983.647 - 160.867 - 3297) * var(--u));   /* inside the light band now */
  width: calc(3143.973 * var(--u));
  height: calc(321.734 * var(--u));
  border-radius: 50%;
  background: rgba(140, 127, 240, 0.85);   /* a touch deeper than the frame's #9F93FF 80% (her note) */
  rotate: 49.17deg;                 /* Figma -49.17 (counter-clockwise positive) */
  filter: blur(calc(375 * var(--u)));   /* Figma's 750 is about twice CSS's radius */
  pointer-events: none;
}

/* ==========================================================================
   THE OPENING SCREEN (5 Oct, second version) — js/homepage-intro.js
   Its own unit --iu (set by the script: the window's client width / 1920,
   exactly as lines-top.svg is stretched) so its lines ARE the hero's lines.
   ========================================================================== */
.intro {
  --iu: calc(100vw / 1920);
  position: fixed;
  inset: 0;
  z-index: 1000;
  pointer-events: auto;
}
.intro__col {
  position: absolute;
  top: 0;
  bottom: 0;
  background: #0D0914;
  overflow: hidden;
}
.intro__col::after {                         /* the purple filling it from the bottom */
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(105, 94, 190, 0.35) 0%, rgba(105, 94, 190, 0.1) 45%, rgba(105, 94, 190, 0) 100%);
  transform: scaleY(var(--f, 0));
  transform-origin: bottom;
}
/* it leaves as ONE: a slow fade, a small rise (her note: "too much movement — gentle") */
.intro { transition: opacity 1s cubic-bezier(0.4, 0, 0.2, 1), transform 1.2s cubic-bezier(0.22, 1, 0.36, 1); }
.intro.is-gone { opacity: 0; transform: translateY(calc(-40 * var(--iu))); pointer-events: none; }
.intro__lines i {
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0.5px;
  margin-left: -0.25px;
  background: rgba(247, 247, 247, 0.15);    /* lines-top.svg: #F7F7F7 at 15% */
  opacity: 0;
  transition: opacity 1.2s ease;
}
.intro.is-in .intro__lines i { opacity: 1; }
.intro.is-gone .intro__lines i { opacity: 0; transition-delay: 0s; }
.intro__tag {
  position: absolute;
  right: calc(176 * var(--iu));
  top: calc(82 * var(--iu));
  margin: 0;
  font-size: calc(16 * var(--iu));
  letter-spacing: calc(9 * var(--iu));
  color: #F7F7F7;
  opacity: 0;
  transition: opacity 0.8s ease 0.4s;
}
.intro__count {
  position: absolute;
  left: calc(174 * var(--iu));
  bottom: calc(40 * var(--iu));
  margin: 0;
  font-family: var(--f-mark, "Degolan"), sans-serif;
  font-size: calc(160 * var(--iu));
  line-height: 0.9;
  color: #F7F7F7;
  transition: opacity 0.4s ease, translate 0.8s cubic-bezier(0.76, 0, 0.24, 1);
}
.intro__count span { color: #9F93FF; font-size: 0.5em; margin-left: 0.08em; }
.intro.is-in .intro__tag { opacity: 0.8; }
.intro.is-gone .intro__tag,
.intro.is-gone .intro__count { opacity: 0; transition-delay: 0s; }
.intro.is-gone .intro__count { translate: 0 -40%; }
/* the opening screen has its own ground: the page showed through the hair
   gaps between its columns (seen on the phone, 5 Oct) */
.intro { background: #0D0914; }


/* ==========================================================================
   THE REEL (her call, 6 Oct 2026) — right after the hero. js/homepage-reel.js
   sets its height (one window + the run it stays pinned) and --reel, by which
   everything from the ring down moves (as --pin / --pj do).
   ========================================================================== */
.hero { z-index: 2; }               /* the picture flies out UNDER the wordmark, as it sits in the frame */
.reel { top: calc(1058 * var(--u)); height: 300vh; z-index: 1; }
.reel > .reel__stage { position: sticky; top: 0; left: 0; width: 100%; height: 100vh; perspective: 1700px; }
.reel__plane { position: absolute; left: 50%; top: 50%; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }
.reel__card {
  position: absolute;
  left: 0;
  top: 0;
  overflow: hidden;
  border-radius: calc(10 * var(--u));
  background: #1A1424 no-repeat;
  backface-visibility: hidden;
}
.reel__card img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
/* the hero picture is a tile like the others (her note, 6 Oct) */
.reel__flyer {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 5;
  visibility: hidden;
  overflow: hidden;
  border-radius: calc(10 * var(--u));
  background-repeat: no-repeat;
}

/* everything from the ring down moves down by the reel */
.cg { margin-top: var(--reel, 0px); }
.after-pin { margin-top: calc(var(--pin, 0px) + var(--reel, 0px)); }
.after-pin.after-pj { margin-top: calc(var(--pin, 0px) + var(--pj, 0px) + var(--reel, 0px)); }
.after-pin.after-pj.after-q { margin-top: calc(var(--pin, 0px) + var(--pj, 0px) + var(--reach) + var(--reel, 0px)); }
.page { height: calc((6426 + 998) * var(--u) + var(--pin, 0px) + var(--pj, 0px) + var(--reach) + var(--reel, 0px)); }
.lines--top { height: calc(3296.5 * var(--u) + var(--pin, 0px) + var(--pj, 0px) + var(--reel, 0px)); }

/* project 03, WAVECAR (her call, 6 Oct): an English name, set in the English
   wordmarks' Degolan, not Cooperative. At the same size its capitals stand as
   tall as the Hebrew names' letters (measured: 172 / 173 at 222px). */
.project__name--en { font-family: var(--f-mark); margin-top: -0.0903em; }   /* Chrome draws Degolan 0.09em low */

/* ==========================================================================
   THE SWAP (her call, 7 Oct 2026): hero -> the tilt -> PROJECTS -> THE RING
   -> about ... (the ring used to come before the projects). Derived from the
   frame's own numbers, so each section keeps its own length and pin:
   - projects start where the tilt ends (live top 2217.5u - 50vh + this);
   - the ring starts where the projects end (--pj-h = --pj + 50vh + 982.5u);
   - everything after both moves by --swap = 150vh - 799.8u (the ring's
     window and the 97u gap now sit after the projects instead of before).
   ========================================================================== */
.page { --swap: calc(150vh - 799.8 * var(--u)); }
.pj.pj--live { margin-top: calc(var(--reel, 0px) - 799.8 * var(--u) + 50vh); }
.cg { margin-top: calc(var(--reel, 0px) + var(--pj, 0px) + 100vh + 982.5 * var(--u)); }
.after-pin.after-pj { margin-top: calc(var(--pin, 0px) + var(--pj, 0px) + var(--reel, 0px) + var(--swap)); }
.after-pin.after-pj.after-q { margin-top: calc(var(--pin, 0px) + var(--pj, 0px) + var(--reach) + var(--reel, 0px) + var(--swap)); }
.page { height: calc((6426 + 998) * var(--u) + var(--pin, 0px) + var(--pj, 0px) + var(--reach) + var(--reel, 0px) + var(--swap)); }
.lines--top { height: calc(3296.5 * var(--u) + var(--pin, 0px) + var(--pj, 0px) + var(--reel, 0px) + var(--swap)); }