/* Layout: one fixed particle canvas behind everything; each tall section gets its own colour world. */
:root {
  --ground: #1B2BE8;
  --fg: #F6F4FF;
  --display: "Anton", Impact, "Arial Narrow", sans-serif;
  --serif: "Fraunces", Georgia, serif;
  --sans: "Instrument Sans", system-ui, sans-serif;
  --mono: "DM Mono", ui-monospace, Menlo, monospace;
  --gutter: max(clamp(24px, 4vw, 64px), env(safe-area-inset-left, 0px));
  --gutter-r: max(clamp(24px, 4vw, 64px), env(safe-area-inset-right, 0px));
  color-scheme: dark;
}

* { box-sizing: border-box; }

html {
  background: var(--ground);
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  color: var(--fg);
  font: 400 1.0625rem/1.55 var(--sans);
  transition: color .35s ease;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }
:focus-visible { outline: 2px solid currentColor; outline-offset: 4px; }
ul, ol, dl, dd, p, h1, h2 { margin: 0; padding: 0; }
ul, ol { list-style: none; }

#field {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100lvh;
  pointer-events: none;
  z-index: 0;
}

main { position: relative; z-index: 1; }

/* Top bar */
.bar {
  position: fixed;
  z-index: 5;
  inset: 0 0 auto;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  padding: calc(env(safe-area-inset-top, 0px) + 20px) var(--gutter-r) 22px var(--gutter);
  /* Long sections scroll underneath the bar, so it fades in the page's current colour behind itself. */
  background: linear-gradient(var(--ground) 62%, transparent);
  font: 400 .8125rem/1 var(--mono);
  letter-spacing: .04em;
  text-transform: uppercase;
}
.bar a { text-decoration: none; padding-block: 6px; }
.bar nav { display: flex; gap: clamp(14px, 3vw, 32px); }
.bar nav a { background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .3s ease; }
.bar nav a:hover { background-size: 100% 1px; }


/* Scenes */
.scene {
  position: relative;
  min-height: 140vh;
  min-height: 140svh;
  display: flex;
  align-items: center;
  padding: 96px var(--gutter-r) 96px var(--gutter);
}
.scene[data-side="left"] { justify-content: flex-end; }

.panel {
  width: min(44vw, 620px);
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
}

.eyebrow {
  font: 400 .8125rem/1 var(--mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.statement {
  font: 300 clamp(2rem, 3.6vw, 3.375rem)/1.14 var(--serif);
  font-variation-settings: "opsz" 144;
  letter-spacing: -.012em;
  text-wrap: balance;
}

.title {
  font: 400 clamp(2.75rem, 8.4vw, 7.5rem)/.98 var(--display);
  text-transform: uppercase;
  letter-spacing: .002em;
  text-wrap: balance;
}

.body { max-width: 48ch; font-size: 1.125rem; }

.tags { display: flex; flex-wrap: wrap; gap: 6px 28px; font: 400 .875rem/1.4 var(--mono); }

.stats { display: flex; flex-wrap: wrap; gap: 16px 48px; }
.stats dt { font: 400 .75rem/1 var(--mono); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 8px; }
.stats dd { font: 400 clamp(1.5rem, 2.4vw, 2.125rem)/1.1 var(--serif); font-variant-numeric: tabular-nums; }

.actions { display: flex; flex-wrap: wrap; gap: 12px; }
button.more { background: none; color: inherit; cursor: pointer; }
.demo-icon { font-size: .75em; }
.more.demo-btn:hover span { transform: none; }
html:not(.gl) .demo-btn { display: none; }

/* Positioned by main.js over the shape it replaces. */
#demo-video {
  position: fixed;
  z-index: 4;
  object-fit: cover;
  border-radius: 18px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .45s ease, visibility 0s linear .45s;
}
#demo-video.on { opacity: 1; visibility: visible; transition: opacity .45s ease; }

.more {
  font: 500 .875rem/1 var(--mono);
  letter-spacing: .02em;
  text-decoration: none;
  padding: 14px 20px;
  border: 1.5px solid currentColor;
  border-radius: 99px;
  transition: background-color .25s ease, color .25s ease;
}
.more span { display: inline-block; transition: transform .25s ease; }
.more:hover { background: var(--fg); color: var(--ground); }
.more:hover span { transform: translate(3px, -3px); }

.jobs { width: 100%; display: flex; flex-direction: column; }
.jobs li {
  display: grid;
  grid-template-columns: 48px minmax(0, 1fr);
  gap: 18px;
  padding-block: 16px;
  border-top: 1.5px solid currentColor;
}
.jobs li:last-child { border-bottom: 1.5px solid currentColor; }
/* A white tile keeps every company's logo colours true on any background. */
.logo {
  width: 48px;
  height: 48px;
  padding: 6px;
  background: #fff;
  border-radius: 11px;
}
.logo img { display: block; width: 100%; height: 100%; object-fit: contain; }
.job { min-width: 0; display: flex; flex-direction: column; align-items: flex-start; }
.when { font: 400 .75rem/1.5 var(--mono); letter-spacing: .03em; font-variant-numeric: tabular-nums; margin-bottom: 3px; }
.what { font: 400 clamp(1.375rem, 2vw, 1.75rem)/1.15 var(--serif); }
.where { font-size: .9375rem; line-height: 1.4; }
.note { font-size: 1rem; line-height: 1.45; margin-top: 7px; max-width: 52ch; }

/* Hero. The name itself is drawn by the particles. */
.hero {
  min-height: 100vh;
  min-height: 100svh;
  align-items: flex-end;
  padding-bottom: 28px;
}
/* Edge to edge along the bottom of the first screen, sitting behind the particle canvas so the dots draw over it.
   On tall phone screens it keeps a usable height and crops the sides, holding the person in frame. */
.hero-photo {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
  animation: photo-in 1.4s ease .9s both;
}
.hero-photo img {
  position: absolute;
  left: 0;
  bottom: 0;
  display: block;
  width: 100%;
  height: max(40vw, 58vh);
  object-fit: cover;
  object-position: 37% bottom;
}
@keyframes photo-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* A small photo credit in the corner, under the Hebrew. */
.photo-note {
  position: absolute;
  right: var(--gutter-r);
  bottom: 14px;
  color: #0A0F45;
  font: 500 .75rem/1 var(--mono);
  letter-spacing: .04em;
  /* Dark text with a pale glow holds up on both the white foam and the sand. */
  text-shadow: 0 0 3px rgba(255, 255, 255, .95), 0 0 10px rgba(255, 255, 255, .8);
  pointer-events: none;
}

.hero-foot {
  position: relative;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 40px;
  padding-bottom: 56px;
}
/* Spans the row so the Hebrew can sit on the right. Only the words themselves are clickable; the rest of the row still fires a shockwave. */
.lead {
  width: 100%;
  display: flex;
  pointer-events: none;
  font: 300 clamp(1.375rem, 2.3vw, 2.125rem)/1.18 var(--serif);
  font-variation-settings: "opsz" 144;
  letter-spacing: -.01em;
  text-wrap: balance;
}
/* The pitch is a button: a click swaps it between Hebrew and English. It matches the poster lettering of the name, in the name's highlight colour. */
.translate {
  font: 400 clamp(1.375rem, 2.6vw, 2.5rem)/1 var(--display);
  letter-spacing: .01em;
  text-transform: uppercase;
  text-align: start;
  pointer-events: auto;
  color: #FFD23F;
  /* The line sits over sand and foam now, so it needs a dark edge to stay readable. */
  text-shadow: 0 1px 2px rgba(8, 12, 70, .8), 0 0 16px rgba(8, 12, 70, .6);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: opacity .18s ease, color .2s ease;
}
.translate:hover { color: var(--fg); }
.translate:lang(he) {
  margin-left: auto;
  font: 700 clamp(2rem, 3.7vw, 3.625rem)/.9 "Karantina", var(--display);
  letter-spacing: 0;
}
.translate.swapping { opacity: 0; }


/* Headline words stay as real text. If WebGL is missing they are shown instead of the particles. */
.big-word {
  position: absolute;
  top: 18svh;
  left: var(--gutter);
  right: var(--gutter-r);
  font: 400 clamp(5rem, 20vw, 22rem)/.95 var(--display);
  text-transform: uppercase;
}
/* Hidden from the first paint, so the text doesn't flash before the particles start. Screen readers still get it. */
.js:not(.no-gl) .big-word {
  width: 1px;
  height: 1px;
  right: auto;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.contact {
  min-height: 130vh;
  min-height: 130svh;
  align-items: flex-end;
  padding-bottom: 28px;
}
.contact-foot { width: 100%; display: flex; flex-direction: column; gap: 22px; padding-bottom: 56px; }
.email {
  font: 300 clamp(1.625rem, 5vw, 4.5rem)/1.1 var(--serif);
  font-variation-settings: "opsz" 144;
  letter-spacing: -.015em;
  overflow-wrap: anywhere;
  text-underline-offset: .14em;
  text-decoration-thickness: 1.5px;
}
.contact-links { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; font: 400 .875rem/1 var(--mono); }
.contact-links a { padding-block: 6px; text-underline-offset: .25em; }
.copy {
  font: inherit;
  color: inherit;
  background: none;
  border: 1.5px solid currentColor;
  border-radius: 99px;
  padding: 11px 16px;
  cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.copy:hover { background: var(--fg); color: var(--ground); }
.colophon { font: 400 .75rem/1.5 var(--mono); opacity: .8; }

/* These only make sense when the particles are running. */
html:not(.gl) .colophon { display: none; }

/* Sections ease in once. Without JS they are simply visible. */
.js .reveal { opacity: 0; transform: translateY(28px); transition: opacity .8s ease, transform .9s cubic-bezier(.2, .7, .2, 1); }
.js .reveal.in { opacity: 1; transform: none; }

/* Phones: shape up top, words below */
@media (max-width: 820px) {
  .scene { min-height: 125svh; align-items: flex-end; padding-bottom: 16svh; }
  .scene[data-side="left"] { justify-content: flex-start; }
  .panel { width: 100%; gap: 18px; }
  .title { font-size: min(15vw, 5rem); }
  .hero { min-height: 100svh; padding-bottom: 24px; }
  .hero-foot { flex-direction: column; align-items: flex-start; gap: 16px; padding-bottom: 8px; }
  .big-word { top: 14svh; }
  .contact { min-height: 120svh; padding-bottom: 24px; }
  .contact-foot { padding-bottom: 8px; }
  .body { font-size: 1.0625rem; }
  .jobs li { grid-template-columns: 40px minmax(0, 1fr); gap: 14px; padding-block: 14px; }
  .logo { width: 40px; height: 40px; padding: 5px; border-radius: 9px; }
  .note { font-size: .9375rem; }
  /* Each section's words start below its shape, then slide up and cover the shape as you scroll, so dots never sit behind text.
     The panel reaches both screen edges and the section's bottom, so no dots show beside or under it. */
  .scene:not(.hero):not(.contact) { padding-top: 54svh; padding-bottom: 0; }
  .panel {
    position: relative;
    width: calc(100% + var(--gutter) + var(--gutter-r));
    margin-inline: calc(var(--gutter) * -1) calc(var(--gutter-r) * -1);
    padding: 16px var(--gutter-r) 16svh var(--gutter);
    background: var(--ground);
  }
  .panel::before,
  .panel::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    height: 56px;
    pointer-events: none;
  }
  .panel::before { bottom: 100%; background: linear-gradient(transparent, var(--ground)); }
  .panel::after { top: 100%; background: linear-gradient(var(--ground), transparent); }
}

@media (max-width: 480px) {
  .bar { font-size: .6875rem; letter-spacing: .02em; gap: 12px; }
  .bar a { white-space: nowrap; }
  .bar nav { gap: 10px; }
}

/* The smallest phones can't fit the name and all four links, and the name is on the screen anyway. */
@media (max-width: 350px) {
  .bar { justify-content: flex-end; }
  .bar-name { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-photo { animation: none; }
  .js .reveal { opacity: 1; transform: none; transition: none; }
  body, .more, .copy, .more span, .bar nav a, .translate { transition: none; }
}