/* Shared by all five takes (the journey on the home page, src/features/journey/film). Takes add their
   own take.css. Everything here is scoped to the journey's root ([data-journey]) through :where(), so
   the selectors keep the prototype's specificity and nothing leaks into the other site pages when the
   visitor moves on inside the app (React keeps these stylesheets once loaded). The font is the site's
   own Noto Sans Hebrew (next/font, --font-noto), with its width axis. */

/* ------------------------------------------------------------- the site */
/* The journey is the whole screen: the root and the body take the void (the scrollbar gutter too),
   main loses the room it keeps for the paper header */
html:has([data-journey]){background:#010103;scrollbar-color:#2b3160 #010103}
body:has([data-journey]){background:#010103}
main:has(> [data-journey]){padding-block-start:0}

/* The header on the home is the menu button alone (header.module.scss, data-compact): the readout
   sits beside it, at the same height, never under it */
html:has([data-site-header][data-compact]) :where([data-journey]) .hud{
  inset-inline-end:calc(max(var(--gutter,16px),(100% - 1360px) / 2) + 60px);
  top:max(calc(var(--header-h,64px) / 2 - 19px),env(safe-area-inset-top,0px))}

/* The site's base styles (chrome/site.css) reset what the takes were drawn on: the browser's own
   defaults. Inside the journey they go back to those defaults (the lead form keeps the site's); every
   take rule still wins. */
:where([data-journey]){font-size:16px;line-height:normal;--focus:var(--color-cyan)}
:where([data-journey]) :is(h1,h2,h3,h4,p,dl,dd,figure,blockquote):where(:not([data-lead-form] *)){margin:revert}
:where([data-journey]) :is(h1,h2,h3,h4):where(:not([data-lead-form] *)){line-height:revert;text-wrap:revert;overflow-wrap:revert}
:where([data-journey]) p:where(:not([data-lead-form] *)){text-wrap:revert}
:where([data-journey]) :is(ul,ol)[class]:where(:not([data-lead-form] *)){padding:revert;list-style:revert}
:where([data-journey]) a:where(:not([data-lead-form] *)){color:revert;text-underline-offset:revert;text-decoration-thickness:revert}
:where([data-journey]) :is(img,svg):where(:not([data-lead-form] *)){display:revert;max-width:revert}

/* ----------------------------------------------------------- the tokens */
:where([data-journey]){
  --color-paper:#f3f4fa; --color-mist:#e3e7f5; --color-card:#fff;
  --color-ink:#0c1144; --color-ink-2:#1b2470; --color-muted:#474c6e; --color-subtle:#5e6385;
  --color-blue:#2c52d1; --color-cyan:#00c2ff;
  --gradient-brand:linear-gradient(250deg,#7d13ff 0%,#2c52d1 52%,#15bffd 100%);
  --color-on-blue:#fff; --color-on-blue-muted:#dce3ff; --color-on-ink-muted:#a9aed0;
  --void-core:#090c26; --void-mid:#03040e; --void-edge:#010103;
  --warm:#ffcf8a;
  --font-sans:var(--font-noto),"Noto Sans Hebrew",system-ui,"Segoe UI",Arial,sans-serif;
  --type-display:clamp(2.75rem,.9rem + 9.5vw,11rem);
  --type-h2:clamp(2.375rem,1.4rem + 4.2vw,5rem);
  --type-name:clamp(1.5rem,1.2rem + 1.2vw,2.25rem);
  --type-lead:clamp(1.25rem,1.1rem + .6vw,1.625rem);
  --type-body:clamp(1.0625rem,1rem + .25vw,1.125rem);
  --type-meta:.9375rem;
  --gutter:max(clamp(16px,2.8vw,40px),env(safe-area-inset-left,0px));
  --container:min(100% - 2*var(--gutter),1360px);
  --radius-control:12px; --radius-surface:20px; --radius-pill:999px;
  --ease-out:cubic-bezier(.16,1,.3,1);
  --hud-h:64px;
  font-family:var(--font-sans);color:var(--color-paper);background:var(--void-edge);
  -webkit-font-smoothing:antialiased}
:where([data-journey]) img{max-width:100%;height:auto}

/* the brand's one gesture: a cyan stroke behind the lower half of a word */
:where([data-journey]) .mark{position:relative;isolation:isolate}
:where([data-journey]) .mark::before{content:"";position:absolute;z-index:-1;inset-inline:-.06em;inset-block-end:.14em;
  height:.46em;border-radius:.08em .2em .12em .18em;background:var(--color-cyan);
  transform:skewX(-8deg)}

:where([data-journey]) .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
:where([data-journey]) .skip{position:fixed;inset-inline-start:12px;top:-60px;z-index:100;padding:10px 16px;border-radius:var(--radius-pill);
  background:var(--color-card);color:var(--color-ink);font-weight:600;text-decoration:none}
:where([data-journey]) .skip:focus{top:12px}

/* ------------------------------------------------------------------ takes */
:where([data-journey]) .journey{position:relative}
:where([data-journey]) .take{position:relative}
:where([data-journey]) .stage{position:relative;min-height:100svh;overflow:clip;isolation:isolate}
:where([data-journey]) .canvasHost{position:absolute;inset:0;z-index:0}
:where([data-journey]) .canvasHost canvas{display:block;width:100%;height:100%}

/* live mode: every section is a spacer, every stage a fixed layer the director fades */
html.jr-live :where([data-journey]) .take{height:var(--len,400svh)}
html.jr-live :where([data-journey]) .stage{position:fixed;inset:0;min-height:0;opacity:0;visibility:hidden;pointer-events:none}
html.jr-live :where([data-journey]) .stage[data-on]{visibility:visible}
html.jr-live :where([data-journey]) .stage[data-top]{pointer-events:auto}
/* keyboard: the controls of a take the camera has not reached keep their place in the Tab order
   (reachable by focus, still transparent and unclickable inside their hidden stage), with the
   labels that name them and take 2's (visually hidden) heading above its projects; a control that
   takes focus brings the camera to its rest (director.js), so focus never stays on something unseen */
html.jr-live :where([data-journey]) .stage:not([data-on]) :is(a[href],button,input,select,textarea,label,legend,.t2Title){visibility:visible;pointer-events:none}

/* -------------------------------------------------------------------- HUD */
:where([data-journey]) .hud{position:fixed;z-index:50;inset-inline-end:max(14px,env(safe-area-inset-left,0px));top:max(14px,env(safe-area-inset-top,0px));
  display:none;flex-direction:column;align-items:flex-start;gap:2px;direction:rtl;
  color:rgb(243 244 250 / .92);font-size:11px;letter-spacing:.08em;line-height:1.2;
  text-shadow:0 0 2px rgb(4 6 28 / .9),0 1px 3px rgb(4 6 28 / .75),0 1px 10px rgb(4 6 28 / .6);pointer-events:none;mix-blend-mode:normal}
/* a soft local scrim: the readout keeps its contrast over the lit cloud tops and street lights */
:where([data-journey]) .hud::before{content:"";position:absolute;z-index:-1;inset:-10px -16px;
  background:radial-gradient(closest-side,rgb(4 6 28 / .5),rgb(4 6 28 / .3) 60%,rgb(4 6 28 / 0));pointer-events:none}
html.jr-live :where([data-journey]) .hud{display:flex}
:where([data-journey]) .hudValue{font-size:15px;font-weight:600;letter-spacing:.02em;color:#fff;font-variant-numeric:tabular-nums;
  direction:rtl;unicode-bidi:isolate}
:where([data-journey]) .hudTicks{display:flex;gap:4px;margin-top:4px}
:where([data-journey]) .hudTicks i{width:14px;height:2px;border-radius:2px;background:rgb(243 244 250 / .25)}
:where([data-journey]) .hudTicks i[data-on]{background:var(--color-cyan)}

/* ------------------------------------------------------ the ways to talk */
/* The floating WhatsApp (right edge) and "בואו נדבר" (./contact.js shows them) live in a band at the
   bottom of the frame (--jr-band from the bottom edge): copy anchored to the bottom sits above it.
   Without JavaScript they stay out: the page is complete without them and could not hide them at
   the form. */
:where([data-journey]){--color-whatsapp:#25d366;--jr-float:48px;--jr-float-gap:16px;
  --jr-band:calc(var(--jr-float-gap) + var(--jr-float) + env(safe-area-inset-bottom,0px))}
@media (min-width:768px){:where([data-journey]){--jr-float:52px;--jr-float-gap:24px}}
/* static mode: a focused control scrolls into view above the floating band, never under it */
html:has([data-jr-float]):not(.jr-live){scroll-padding-block-end:calc(96px + env(safe-area-inset-bottom,0px))}

:where([data-journey]) .jrFloat{position:fixed;z-index:50;display:flex;align-items:center;gap:10px;
  inset-inline-start:max(var(--jr-float-gap),env(safe-area-inset-right,0px));bottom:calc(var(--jr-float-gap) + env(safe-area-inset-bottom,0px));
  opacity:0;visibility:hidden;translate:0 12px;pointer-events:none;
  transition:opacity .18s var(--ease-out),translate .18s var(--ease-out),visibility 0s linear .18s}
:where([data-journey]) .jrFloat[data-on]{opacity:1;visibility:visible;translate:none;pointer-events:auto;
  transition:opacity .32s var(--ease-out),translate .32s var(--ease-out),visibility 0s}
html:not([data-js]) :where([data-journey]) .jrFloat{display:none}
:where([data-journey]) .jrFloatWa{display:grid;place-items:center;flex:none;width:var(--jr-float);height:var(--jr-float);border-radius:50%;
  background:var(--color-whatsapp);color:#fff;text-decoration:none;
  box-shadow:0 10px 26px -10px rgb(0 0 0 / .8),inset 0 0 0 1px rgb(255 255 255 / .18);transition:transform .2s var(--ease-out)}
:where([data-journey]) .jrFloatWa svg{display:block;filter:drop-shadow(0 1px 1px rgb(0 60 30 / .35))}
:where([data-journey]) .jrFloatWa:hover{transform:scale(1.06)}
:where([data-journey]) .jrFloatTalk{display:inline-flex;align-items:center;gap:10px;min-height:var(--jr-float);padding-inline:18px 20px;
  border:1.5px solid rgb(243 244 250 / .42);border-radius:var(--radius-pill);background:rgb(6 8 30 / .78);color:#fff;
  font-size:1rem;font-weight:600;line-height:1.2;text-decoration:none;white-space:nowrap;
  box-shadow:0 10px 26px -12px rgb(0 0 0 / .8);transition:border-color .2s var(--ease-out),background-color .2s var(--ease-out),opacity .18s var(--ease-out),visibility 0s}
:where([data-journey]) .jrFloatTalk::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--color-cyan)}
:where([data-journey]) .jrFloatTalk:hover{border-color:#fff;background:rgb(6 8 30 / .92)}
/* a row on screen already says "בואו נדבר": the float keeps WhatsApp only */
:where([data-journey]) .jrFloat[data-talk-off] .jrFloatTalk{opacity:0;visibility:hidden;transition:opacity .16s var(--ease-out),visibility 0s linear .16s}
:where([data-journey]) :is(.jrFloatWa,.jrFloatTalk):focus-visible{outline:3px solid var(--color-cyan);outline-offset:3px}
:where([data-journey]) :is(.jrFloatWa,.jrFloatTalk):active{transform:scale(.96)}

/* one quiet row at a rest frame: "בואו נדבר" (the take-1 pill, compact) and a hub link */
:where([data-journey]) .jrCta{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:10px 22px}
:where([data-journey]) .jrCtaTalk{position:relative;isolation:isolate;display:inline-flex;align-items:center;min-height:48px;
  padding-inline:42px 22px;border-radius:var(--radius-pill);overflow:clip;background:var(--color-card);color:var(--color-ink);
  font-size:1rem;font-weight:650;line-height:1.2;text-decoration:none;white-space:nowrap;transition:color .22s var(--ease-out)}
:where([data-journey]) .jrCtaTalk::before{content:"";position:absolute;z-index:-1;inset-inline-start:19px;top:calc(50% - 5px);
  width:10px;height:10px;border-radius:50%;background:var(--color-blue);transition:transform .24s var(--ease-out)}
:where([data-journey]) .jrCtaTalk:is(:hover,:focus-visible)::before{transform:scale(40)}
:where([data-journey]) .jrCtaTalk:is(:hover,:focus-visible){color:#fff}
:where([data-journey]) .jrCtaLink{display:inline-flex;align-items:center;min-height:48px;padding-inline:2px;color:#fff;
  font-size:1rem;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:.32em;
  text-shadow:0 1px 14px rgb(4 6 28 / .9)}
:where([data-journey]) .jrCtaLink:hover{text-decoration-thickness:2px}
:where([data-journey]) .jrCta :focus-visible{outline:3px solid var(--color-cyan);outline-offset:3px}
:where([data-journey]) .jrCtaLink:focus-visible{border-radius:4px}
@media (min-width:768px){:where([data-journey]) :is(.jrCtaTalk,.jrCtaLink){min-height:52px;font-size:1.0625rem}}

/* live: a row above the band, faded by the director in its take's window. It stays in the Tab
   order even while its stage is hidden (transparent, unclickable): a row that takes focus brings
   the camera to its rest (./contact.js) */
html.jr-live :where([data-journey]) .jrCta{position:absolute;z-index:6;inset-inline:var(--gutter);bottom:calc(var(--jr-band) + 18px);
  opacity:0;visibility:visible;pointer-events:none;will-change:opacity,transform}
html.jr-live :where([data-journey]) .jrCta[data-shown] a{pointer-events:auto}
html.jr-live :where([data-journey]) .jrCta::before{content:"";position:absolute;z-index:-1;inset:-40% 8%;pointer-events:none;
  background:radial-gradient(closest-side,rgb(4 6 28 / .5),rgb(4 6 28 / 0))}
/* static: the row closes its take in the flow */
html:not(.jr-live) :where([data-journey]) .jrCta{position:relative;margin-block-start:clamp(48px,8vw,88px)}