/* project.css — project pages (SPEC-LUSION L5), paired with js/project.js (it builds the DOM at the end of <body>).
   One palette for every page (SPEC-OWNER-2 O7): the dark page + ivory type + the accent. The --pj-* names stay as
   the page's local tokens (set once below, from tokens.css — no per-project colour exists any more, and JS writes
   none on <html>). Hooks written by JS:
     html.has-project          a project page is open (main scroll locked, page chrome adjusted below)
     .project.is-chrome        back button + odometer area live (after the page panel has started)
     .project.is-down          scrolling down the page: the back button steps aside (back on the way up / on focus)
     .project.is-in            the content reveal (kicker, services stagger, facts, pill pop); kinetic does the title
                               (sides) and the paragraphs (rise)
     .pj-flip.is-on            the FLIP media layer (WAAPI: clip-path inset + counter-scaled media)
     .pj-cover.is-on           the accent cover while switching (circle in / full after the pull, then lifted off)
     .pj-odo.is-on             the odometer (digit strips: --d per strip)
     .pj-m.is-in / --from      a media frame's clip wipe (from the side it enters, replays); .pj-m.is-live (Drago)
     --pj-vh                   the overlay's height in px (the sticky NEXT screen)
   Motion: transform / translate / scale / opacity / clip-path only. The back button and the launch pill are
   [data-magnetic] (cursor.js owns their `transform`), so their pops use `scale` / `translate`. */

/* ================================================================ page tokens (one palette, O7) */
.project,html.has-project .site-header{--pj-bg:var(--dark);--pj-fg:var(--dark-ink);--pj-accent:var(--accent);--pj-next-bg:var(--accent);--pj-next-fg:var(--dark-ink);
  --pj-surface:var(--ink);--pj-ring:var(--accent-soft);--roll-ink:var(--accent-soft)}

/* ================================================================ page chrome while a project is open */
html.has-project .site-header{--t-fg:var(--pj-fg);--t-bg:var(--pj-bg);color:var(--pj-fg)}
html.has-project .site-header.is-hidden{transform:none}
html.has-project .site-header.is-cinema :is(.lang-btn,.pill--talk,.menu-btn){opacity:1;translate:none;visibility:visible;pointer-events:auto}
html.has-project .site-header.is-cinema :is(.wordmark,.sound-btn)::before{opacity:0;visibility:hidden}
@media (hover:hover){html.has-project .site-header .pill--talk:hover{background:var(--accent);border-color:var(--accent);color:var(--white)}}
/* focus rings + rolled labels contrast with the dark page (the site's accent ring is 4.4:1 there; accent-soft ≈ 9:1) */
:is(.project,html.has-project .site-header) :focus-visible{outline-color:var(--pj-ring)}
html.has-project :is(.progress,.chapter-hud,.cta-bar){opacity:0!important;visibility:hidden!important;pointer-events:none!important}

/* ================================================================ overlay */
.project{--pj-rad:18px;--pj-pad:var(--gutter);position:fixed;inset:0;z-index:48;color:var(--pj-fg);
  font:400 var(--fs-body)/var(--lh-body) var(--font-latin);-webkit-font-smoothing:antialiased;overflow:hidden;isolation:isolate}
:lang(he) .project{font-family:var(--font-he)}
.project ::selection{background:var(--pj-fg);color:var(--pj-bg)}

/* FLIP layer (the card media growing to the viewport / shrinking back) */
.pj-flip{position:absolute;inset:0;z-index:0;overflow:hidden;pointer-events:none;visibility:hidden}
.pj-flip.is-on{visibility:visible}
.pj-flip-media{position:absolute;left:0;top:0;width:100%;height:100%;transform-origin:50% 50%;will-change:transform;background:var(--pj-bg)}
.pj-flip-media>:is(img,video,canvas){position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.project[data-project=hillel] .pj-flip-media>img,
.project[data-project=save] .pj-flip-media>img{object-position:50% 0}
/* the snapshot canvas (work.js) is already the card's own frame at the card's aspect: centred, like the GL plane */

/* the page panel + its own scroll container */
.pj-panel{position:absolute;inset:0;z-index:1;background:var(--pj-bg)}
.pj-scroll{position:absolute;inset:0;overflow:hidden auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:thin;
  scrollbar-color:color-mix(in srgb,var(--pj-fg) 30%,transparent) transparent}
.pj-scroll:focus{outline:none}
.project.is-held .pj-scroll,.project .pj-scroll.lenis.lenis-stopped{overflow:hidden}   /* a transition holds the input; never lenis.css's
   overflow:clip here, which would drop the scroll position (and show the top of the page) while the cover grows */
.pj-content{position:relative}
/* Sticky strip under the site header (mobile QA: the header no longer collides with the content scrolling under it).
   Inside the scroller, so a classic scrollbar is never covered; its negative margin keeps the layout; it fades out
   as the accent panel rises (project.js). */
.pj-strip{position:sticky;top:0;z-index:4;display:block;height:calc(var(--header-h) + env(safe-area-inset-top) + 30px);
  margin-bottom:calc(-1 * (var(--header-h) + env(safe-area-inset-top) + 30px));pointer-events:none;
  background:linear-gradient(to bottom,var(--pj-bg) 0%,color-mix(in srgb,var(--pj-bg) 86%,transparent) 52%,transparent 100%)}

/* the accent cover while switching (lifted off upward once the next page is in place) */
.pj-cover{position:absolute;inset:0;z-index:2;pointer-events:none;visibility:hidden;background:var(--pj-next-bg)}
.pj-cover.is-on{visibility:visible;pointer-events:auto}

/* ================================================================ head */
.pj-head{padding:calc(var(--header-h) + env(safe-area-inset-top) + 13vh) var(--pj-pad) 15vh}
.pj-label,.pj-top{margin:0;font:600 var(--fs-label)/1.4 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase}
:lang(he) :is(.pj-label,.pj-top){font-family:var(--font-he);letter-spacing:.04em}
.pj-top{display:flex;flex-wrap:wrap;align-items:center;gap:10px 22px;color:color-mix(in srgb,var(--pj-fg) 72%,transparent)}
.pj-n{display:inline-block;white-space:nowrap;font-variant-numeric:tabular-nums;color:var(--pj-fg)}   /* inline-block keeps the space: "01 / 05" */
.pj-n-of{opacity:.62}
.pj-kicker{min-height:1.4em}
.pj-title{margin:3.2vh 0 0;font-size:clamp(56px,9vw,150px);font-weight:500;line-height:.9;letter-spacing:-.062em;color:var(--pj-fg)}
:lang(he) .pj-title{line-height:1;letter-spacing:-.02em}
.pj-title:focus{outline:none}

.pj-body{display:grid;grid-template-columns:minmax(0,52ch) minmax(240px,340px);justify-content:space-between;column-gap:7vw;row-gap:56px;margin-top:9vh}
.pj-text{display:flex;flex-direction:column;gap:26px}
.pj-p{margin:0}
.pj-p1{font-size:var(--fs-lead);line-height:1.42;letter-spacing:-.012em}
.pj-p2{color:color-mix(in srgb,var(--pj-fg) 76%,transparent)}
:lang(he) .pj-p1{letter-spacing:0}

.pj-meta{display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.pj-meta>.pj-label,.pj-fact dt{color:color-mix(in srgb,var(--pj-fg) 62%,transparent)}
.pj-services{display:flex;flex-direction:column;gap:2px;margin:0 0 18px;padding:0;list-style:none;font-size:clamp(17px,1.35vw,22px);line-height:1.38;letter-spacing:-.01em}
.pj-services li{display:flex;align-items:center;gap:12px}
.pj-services li::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--pj-accent)}
.pj-facts{display:grid;grid-template-columns:auto auto;justify-content:start;gap:12px 40px;margin:0 0 26px}
.pj-fact{display:flex;flex-direction:column;gap:6px}
.pj-fact dd{margin:0;font-size:var(--fs-body);line-height:1.4}

/* the white pill "● LAUNCH PROJECT" (disabled: PRIVATE SYSTEM / IN PRODUCTION) */
.pj-cta{display:block}
.pj-launch{display:inline-flex;align-items:center;min-height:58px;padding-inline:26px 30px;border-radius:var(--r-pill);background:var(--white);color:var(--ink);
  font:600 12px/1 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase;white-space:nowrap;text-decoration:none;
  transition:background-color var(--d-xs) linear,color var(--d-xs) linear}
:lang(he) .pj-launch{font-family:var(--font-he);letter-spacing:.04em;font-size:13px}
.pj-launch .mag-inner{display:inline-flex;align-items:center;gap:12px}
.pj-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--pj-accent);box-shadow:0 0 0 0 color-mix(in srgb,var(--pj-accent) 60%,transparent)}
.pj-launch[data-pill=live] .pj-dot{animation:pj-ping 1.8s var(--ease-out) infinite}
@media (hover:hover){
  .pj-launch[href]:hover{background:var(--pj-accent);color:var(--white)}
  .pj-launch[href]:hover .pj-dot{background:var(--white)}
}
.pj-launch.is-off{background:transparent;color:var(--pj-fg);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--pj-fg) 34%,transparent);cursor:default}
.pj-launch.is-off .pj-dot{background:color-mix(in srgb,var(--pj-fg) 50%,transparent)}
.pj-launch[data-pill=production] .pj-dot{background:var(--pj-accent);animation:pj-blink 1.4s steps(2,jump-none) infinite}
.pj-launch:focus-visible{outline:2px solid var(--pj-ring);outline-offset:4px}
@keyframes pj-ping{0%{box-shadow:0 0 0 0 color-mix(in srgb,var(--pj-accent) 70%,transparent)}100%{box-shadow:0 0 0 9px transparent}}
@keyframes pj-blink{50%{opacity:.25}}

/* ---------------- content reveal (.is-in); kinetic does the title + paragraphs */
html.js:not(.reduced) .project:not(.is-in) :is(.pj-n,.pj-meta>.pj-label,.pj-services li,.pj-fact){opacity:0;translate:0 18px}
html.js:not(.reduced) .project:not(.is-in) .pj-kicker{opacity:0}
html.js:not(.reduced) .project:not(.is-in) .pj-launch{opacity:0;scale:.55}
html.js:not(.reduced) .project.is-in :is(.pj-n,.pj-meta>.pj-label,.pj-services li,.pj-fact){opacity:1;translate:none;
  transition:opacity 500ms linear var(--rd,0ms),translate calc(var(--d-l) * var(--tempo)) var(--ease-out) var(--rd,0ms)}
html.js:not(.reduced) .project.is-in .pj-launch{opacity:1;scale:1;
  transition:opacity 300ms linear 900ms,scale calc(var(--d-land) * var(--tempo)) var(--ease-back) 900ms,background-color var(--d-xs) linear,color var(--d-xs) linear}
.project .pj-meta>.pj-label{--rd:420ms}
.project .pj-services li{--rd:calc(480ms + var(--li,0) * 50ms)}
.pj-services li:nth-child(2){--li:1}.pj-services li:nth-child(3){--li:2}.pj-services li:nth-child(4){--li:3}
.pj-services li:nth-child(5){--li:4}.pj-services li:nth-child(6){--li:5}.pj-services li:nth-child(7){--li:6}
.project .pj-fact{--rd:760ms}
.project .pj-fact+.pj-fact{--rd:820ms}
html.reduced .project:not(.is-in) :is(.pj-n,.pj-meta>.pj-label,.pj-services li,.pj-fact,.pj-launch){opacity:0}
html.reduced .project.is-in :is(.pj-n,.pj-meta>.pj-label,.pj-services li,.pj-fact,.pj-launch){opacity:1;transition:opacity 400ms linear}

/* ================================================================ media stack */
.pj-media{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:4vw;row-gap:9vh;padding:0 var(--pj-pad) 22vh}
.pj-m{position:relative;margin:0;grid-column:span 2;min-width:0}
.pj-m--half{grid-column:span 1}
.pj-m--lo{margin-top:16vh}
.pj-m-frame{position:relative;aspect-ratio:16/10;border-radius:var(--pj-rad);overflow:hidden;overflow:clip;isolation:isolate;transform-origin:50% 50%;
  background:color-mix(in srgb,var(--pj-fg) 7%,transparent);will-change:transform}
.pj-m--wide .pj-m-frame{aspect-ratio:16/9}
.pj-m-inner{position:absolute;inset:0;transform-origin:50% 50%}
.pj-m-inner>:is(img,video){position:absolute;inset:0;display:block;width:100%;height:100%;max-width:none;object-fit:cover}
.project[data-project=hillel] .pj-m-inner>:is(img,video),
.project[data-project=save] .pj-m-inner>:is(img,video){object-position:50% 0}
.pj-m-cap{margin-top:16px;font:600 var(--fs-label)/1.4 var(--font-latin);letter-spacing:var(--tr-label);text-transform:uppercase;
  color:color-mix(in srgb,var(--pj-fg) 60%,transparent)}
:lang(he) .pj-m-cap{font-family:var(--font-he);letter-spacing:.04em}
:lang(he) .pj-m-cap--en{display:none}                    /* "Hebrew product": only said on the English page */
/* clip wipe from the side the frame enters (--from 1 = below, -1 = above); replays */
html.js:not(.reduced) .pj-m:not(.is-in) .pj-m-frame{clip-path:inset(calc(50% + 50% * var(--from,1)) 0px calc(50% - 50% * var(--from,1)) 0px round var(--pj-rad))}
html.js:not(.reduced) .pj-m.is-in .pj-m-frame{clip-path:inset(0px 0px 0px 0px round var(--pj-rad));transition:clip-path calc(1100ms * var(--tempo)) var(--ease-out)}
html.js:not(.reduced) .pj-m:not(.is-in) .pj-m-inner>*{scale:1.28}
html.js:not(.reduced) .pj-m.is-in .pj-m-inner>*{scale:1;transition:scale calc(1500ms * var(--tempo)) var(--ease-out)}
html.js:not(.reduced) .pj-m:not(.is-in) .pj-m-cap{opacity:0}
html.js:not(.reduced) .pj-m.is-in .pj-m-cap{opacity:1;transition:opacity 600ms linear 400ms}
html.reduced .pj-m{opacity:0;transition:opacity 400ms linear}
html.reduced .pj-m.is-in{opacity:1}

/* Drago: the card's illustration (cloned), filling the frame; the halves zoom into a detail */
.pj-m-inner>.pj-drago,.pj-flip-media>.pj-drago{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto;border-radius:0;--w-rad:0px}
.pj-drago[data-focus] .drago-ui{transition:none}
.pj-drago[data-focus=kpis] .drago-ui{scale:1.75;transform-origin:50% 22%}
.pj-drago[data-focus=call] .drago-ui{scale:1.9;transform-origin:8% 88%}
.pj-drago[data-focus=agents] .drago-ui{scale:1.9;transform-origin:96% 88%}
[dir=rtl] .pj-drago[data-focus=call] .drago-ui{transform-origin:92% 88%}
[dir=rtl] .pj-drago[data-focus=agents] .drago-ui{transform-origin:4% 88%}
.pj-m .dg-ds{transform:translate3d(0,0,0)}
.pj-m.is-in .dg-ds,.pj-flip .dg-ds{transform:translate3d(0,calc(var(--d,0) * -10%),0);transition:transform 1400ms var(--ease-out) calc(300ms + var(--j,0) * 70ms)}
html.reduced .project .dg-ds{transition:none!important}
.pj-m.is-live .dg-calling-line>i{animation-play-state:running}
.pj-m.is-live :is(.dg-live-dot,.dg-agent[data-status=accent] .dg-status)::after{animation:w-ping 1.5s var(--ease-out) infinite}
.pj-m.is-live .dg-agent:is([data-status=soft],[data-status=green]) .dg-bar-time{animation:dg-grow 2.4s linear infinite}

/* ================================================================ NEXT PROJECT (sticky; the last 60 vh pull the next one in) */
.pj-next{position:relative;height:calc(var(--pj-vh,100dvh) * 1.6)}
.pj-next-stick{position:sticky;top:0;height:var(--pj-vh,100dvh);overflow:hidden;overflow:clip}
.pj-next-stick::before{content:"";position:absolute;top:0;inset-inline:var(--pj-pad);height:1px;background:color-mix(in srgb,var(--pj-fg) 22%,transparent)}
.pj-next-panel{position:absolute;inset:0;background:var(--pj-next-bg);clip-path:inset(100% 0px 0px 0px)}
.pj-next-btn{position:relative;z-index:1;display:block;width:100%;height:100%;padding:calc(var(--header-h) + 4vh) var(--pj-pad) 7vh;color:var(--pj-fg);text-align:center}
.pj-next-btn:focus-visible{outline:2px solid var(--pj-ring);outline-offset:-12px;border-radius:var(--r-card)}
.pj-next-inner{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4.4vh;height:100%;transform-origin:50% 60%}
.pj-next-top{display:inline-flex;align-items:center;gap:18px;color:color-mix(in srgb,var(--pj-fg) 78%,transparent)}
.pj-next-n{font:600 var(--fs-label)/1.4 var(--font-latin);letter-spacing:var(--tr-label);font-variant-numeric:tabular-nums}
.pj-next-title{display:block;max-width:100%;font-size:clamp(64px,11vw,210px);font-weight:500;line-height:.9;letter-spacing:-.064em;white-space:nowrap}
:lang(he) .pj-next-title{font-family:var(--font-he);font-weight:600;line-height:1;letter-spacing:-.02em}
.pj-ring{position:relative;display:grid;place-items:center;width:84px;height:84px}
.pj-ring svg:first-child{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.pj-ring-track,.pj-ring-fill{fill:none;stroke-width:1.5}
.pj-ring-track{stroke:color-mix(in srgb,var(--pj-fg) 24%,transparent)}
.pj-ring-fill{stroke:var(--pj-fg);stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1 1;stroke-dashoffset:1}
.pj-ring-arrow{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
html.js:not(.reduced) .pj-ring-arrow{animation:pj-nudge 1.6s var(--ease-in-out) infinite}
@keyframes pj-nudge{0%,100%{translate:0 -3px}50%{translate:0 4px}}
.pj-next-hint{color:color-mix(in srgb,var(--pj-fg) 70%,transparent)}

/* ================================================================ back button (top-end, under the header row) */
.pj-back{position:absolute;z-index:3;top:calc(env(safe-area-inset-top) + var(--header-h) + 8px);inset-inline-end:var(--pj-pad);
  display:grid;place-items:center;width:58px;height:58px;border-radius:50%;background:var(--white);color:var(--pj-bg);
  opacity:0;scale:.4;visibility:hidden;transition:opacity 200ms linear,scale 320ms var(--ease-in),visibility 0s linear 320ms,background-color var(--d-xs) linear}
.project.is-chrome .pj-back{opacity:1;scale:1;visibility:visible;
  transition:opacity 260ms linear,scale var(--d-land) var(--ease-back),visibility 0s,background-color var(--d-xs) linear}
.pj-back .mag-inner{display:grid;place-items:center}
.pj-back svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;transition:translate 420ms var(--ease-out)}
[dir=rtl] .pj-back svg{scale:-1 1}
@media (hover:hover){
  .pj-back:hover{background:var(--pj-accent);color:var(--white)}
  .pj-back:hover svg{translate:-4px 0}
  [dir=rtl] .pj-back:hover svg{translate:4px 0}
}
.pj-back:focus-visible{outline:2px solid var(--pj-ring);outline-offset:4px}
/* reading down the page: the button steps aside (it sits over the media frames); back on the way up or on focus */
.project.is-chrome.is-down .pj-back:not(:focus-visible){opacity:0;scale:.6;pointer-events:none;
  transition:opacity 200ms linear,scale 320ms var(--ease-in),background-color var(--d-xs) linear}
html.reduced .pj-back{transition:opacity 300ms linear,visibility 0s!important;scale:1}

/* ================================================================ odometer (bottom-start, 000 → 100) */
.pj-odo{position:absolute;z-index:3;left:var(--pj-pad);bottom:calc(var(--pj-pad) - .1em);margin:0;overflow:hidden;overflow:clip;pointer-events:none;visibility:hidden;
  font-size:clamp(64px,min(10.5vw,19vh),190px);font-weight:500;line-height:1;letter-spacing:-.05em;color:var(--pj-fg)}
[dir=rtl] .pj-odo{left:auto;right:var(--pj-pad)}
.pj-odo.is-on{visibility:visible}
.pj-odo-in{display:flex;margin:0;direction:ltr;font-variant-numeric:tabular-nums;transform:translate3d(0,105%,0)}
.pj-odo-d{display:block;height:1em;overflow:hidden;overflow:clip}
.pj-odo-s{display:block;transform:translateY(calc(-10% * var(--d,0)));transition:transform 160ms var(--ease-out)}
.pj-odo-s>span{display:block;height:1em}

/* ================================================================ responsive */
@media (max-width:1024px){
  .pj-body{grid-template-columns:minmax(0,1fr);row-gap:48px}
  .pj-meta{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start;gap:14px 6vw;width:100%}
  .pj-meta>.pj-label{grid-column:1}
  .pj-services{grid-column:1;margin:0}
  .pj-facts{grid-column:2;grid-row:1 / span 2;margin:0}
  .pj-cta{grid-column:1 / -1;margin-top:18px}
}
@media (max-width:700px){
  .project{--pj-rad:14px}
  .pj-head{padding:calc(var(--header-h) + env(safe-area-inset-top) + 92px) var(--pj-pad) 11vh}
  .pj-title{font-size:clamp(46px,14.6vw,96px);margin-top:20px}
  .pj-body{margin-top:5.5vh;row-gap:40px}
  .pj-meta{display:flex;flex-direction:column;gap:14px}
  .pj-facts{grid-row:auto;margin:6px 0 12px}
  .pj-cta{margin-top:0}
  .pj-launch{min-height:54px}
  .pj-media{grid-template-columns:minmax(0,1fr);row-gap:22px;padding-bottom:16vh}
  .pj-m,.pj-m--half{grid-column:1}
  .pj-m--lo{margin-top:0}
  .pj-m--wide .pj-m-frame{aspect-ratio:16/10}
  .pj-next-title{font-size:clamp(52px,17vw,110px);white-space:normal}
  .pj-ring{width:72px;height:72px}
  .pj-back{width:50px;height:50px;top:calc(env(safe-area-inset-top) + var(--header-h) + 6px)}
  .pj-odo{font-size:64px}
}