/* ==========================================================================
   brief.html — האפיון
   --------------------------------------------------------------------------
   7 Oct 2026, third version. Her notes on the second: no script font at all,
   no emoji, the ring / the moving haze / the grain / the ticks / the
   gradient letters "have nothing to do with the language", no contact
   screen — "clean, beautiful, simple". So everything here is taken from the
   site as it is:
   - the ground is the home page's hero: her purple columns fading into the
     ink (hero-bg.webp), fixed, with the grid's hairlines on their seams
     (lines-top.svg: #F7F7F7 at 15%);
   - the question's number is Cooperative in lilac, as the numbered rows on
     the mentoring page (.arow__num); the question is Cooperative in white;
   - the long opening line is Discovery, as the home page's statement;
   - the rest is Discovery, light, on the ink, with hairline rules.
   ONE QUESTION, ONE SCREEN (js/brief.js; touch = native snap).
   No Figma frame: 1920 (desktop) / 393 (phone) as every page; --s = the
   smaller of the width's and the height's (1080) on the desktop.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-snap-type: y mandatory;
  scrollbar-gutter: stable;
}
html.is-gliding { scroll-snap-type: none; }   /* js/brief.js is moving the page */

.brief {
  --u: calc(100vw / 1920);                     /* js/brief.js overwrites both */
  --s: min(var(--u), 100vh / 1080);
  --ink: #0D0914;
  --white: #F7F7F7;
  --lilac: #9F93FF;
  --rule: rgba(247, 247, 247, 0.15);           /* the grid's hairline colour */
  --f-title: "Cooperative", "Arial Narrow", sans-serif;
  --gut: calc(174 * var(--u));                 /* the first grid line */
  --drop: cubic-bezier(0.76, 0, 0.24, 1);      /* the home page's power4.inOut */
  margin: 0;
  background: var(--ink);
  color: var(--white);
  font-family: var(--f-body);
  font-weight: var(--fw-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}
p, h1, h2, ul { margin: 0; padding: 0; }
h1, h2 { font-weight: 400; }
a { color: inherit; text-decoration: none; }

.brief__skip {
  position: absolute;
  top: 0; inset-inline-start: 0;
  z-index: 400;
  padding: 0.75rem 1.25rem;
  background: var(--lilac);
  color: var(--ink);
  transform: translateY(-150%);
  transition: transform 0.18s ease;
}
.brief__skip:focus { transform: none; }

/* ---- the ground: the hero's columns + the grid's hairlines, fixed ---------- */
.brief__bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    url("../assets/svg/homepage/lines-top.svg") 0 0 / 100% calc(3296.5 * var(--u)) no-repeat,
    url("../assets/img/homepage/hero-bg.webp") 50% 0 / 100% auto no-repeat,
    var(--ink);
}

/* ---- how far through: a hairline on the left, under the logo's line, that
   fills lilac as the screens go by (js/brief.js sets --p, 0..1) ---------- */
.brief__progress {
  position: fixed;
  z-index: 2;
  left: calc(71.5 * max(0.5px, 100vw / 1920));
  top: 50%;
  width: 1px;
  height: 40vh;
  transform: translate(-50%, -50%);
  background: rgba(247, 247, 247, 0.18);
  pointer-events: none;
}
.brief__progress i {
  position: absolute;
  left: -0.5px;
  top: 0;
  width: 2px;
  height: 100%;
  background: var(--lilac);
  transform-origin: 50% 0;
  transform: scaleY(var(--p, 0));
}

/* ---- THE DECK ------------------------------------------------------------- */
.brief__deck { position: relative; z-index: 1; }

.slide {
  position: relative;
  height: 100vh;
  height: 100svh;
  scroll-snap-align: start;
  scroll-snap-stop: always;
  display: flex;
  align-items: center;
  overflow: clip;
}
.slide__in {
  position: relative;
  width: 100%;
  padding-inline: var(--gut);
}

/* the rest rises — the site-wide fade-in-up, staggered by --d */
[data-anim] {
  opacity: 0;
  transform: translateY(calc(40 * var(--s)));
  transition: opacity var(--dur-rise) var(--ease-rise), transform var(--dur-rise) var(--ease-rise);
  transition-delay: calc(var(--d, 0) * 0.11s + 0.2s);
}
.slide.is-in [data-anim] { opacity: var(--o-rest, 1); transform: none; }

/* ---- the opening ---------------------------------------------------------- */
.intro__title {
  font-family: var(--f-title);
  font-size: calc(150 * var(--s));
  line-height: 0.98;
}
.intro__sub {
  margin-top: calc(40 * var(--s));
  font-size: calc(36 * var(--s));
  line-height: 1.3;
}
.intro__text {
  max-width: calc(880 * var(--u));
  margin-top: calc(22 * var(--s));
  font-size: calc(22 * var(--s));
  line-height: 1.6;
  --o-rest: var(--o-body-on-dark, 0.9);
}
.intro__down {
  display: inline-flex;
  margin-top: calc(72 * var(--s));
  padding: calc(8 * var(--s));
  margin-inline-start: calc(-8 * var(--s));
  color: var(--lilac);
}
.intro__down svg {
  display: block;
  width: calc(11 * var(--s));
  height: calc(56.5 * var(--s));
  animation: brief-nudge 2.4s var(--ease-soft) infinite;
}
@keyframes brief-nudge {
  0%, 100% { transform: translateY(calc(-4 * var(--s))); }
  50%      { transform: translateY(calc(8 * var(--s))); }
}

/* ---- a question ----------------------------------------------------------- */
.slide--q .slide__in > * { max-width: calc(1100 * var(--u)); }
.q__num {
  display: flex;
  align-items: baseline;
  gap: calc(14 * var(--s));
  margin-bottom: calc(28 * var(--s));
  font-family: var(--f-title);
  font-size: calc(48 * var(--s));              /* the mentoring rows' numbers */
  line-height: 0.98;
  color: var(--lilac);
  direction: ltr;
  justify-content: flex-end;                   /* on the right edge, with the words */
}
.q__of {
  font-family: var(--f-body);
  font-size: calc(16 * var(--s));
  letter-spacing: 0.2em;
  color: var(--white);
  opacity: 0.5;
}
.q__title {
  font-family: var(--f-title);
  font-size: calc(110 * var(--s));
  line-height: 0.98;
}
.q__list {
  list-style: none;
  margin-top: calc(52 * var(--s));
  display: flex;
  flex-direction: column;
  gap: calc(18 * var(--s));
}
.q__list li {
  font-size: calc(26 * var(--s));
  line-height: 1.45;
  --o-rest: var(--o-body-on-dark, 0.9);
}

/* the legal links, small, at the foot of the last screen */
.brief__foot {
  position: absolute;
  inset-inline: var(--gut);
  bottom: calc(36 * var(--s));
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1em;
  font-size: calc(15 * var(--s));
  opacity: 0.6;
}
.brief__foot ul { display: flex; gap: 2em; list-style: none; }
.brief__foot a { transition: color 0.3s ease; }
.brief__foot a:hover, .brief__foot a:focus-visible { color: var(--lilac); }

@media (prefers-reduced-motion: reduce) {
  [data-anim] { transform: none !important; opacity: var(--o-rest, 1) !important; transition: none !important; }
  .intro__down svg { animation: none; }
}

/* ==========================================================================
   PHONE — read against the 393 artboard (--s = --u there)
   ========================================================================== */
@media (max-width: 899px) {
  .brief { --s: var(--u); --gut: calc(24 * var(--u)); }
  .brief__bg {
    background:
      url("../assets/img/homepage/hero-bg-mobile.webp") 50% 0 / 100% auto no-repeat,
      var(--ink);
  }

  .intro__title { font-size: calc(64 * var(--u)); }
  .intro__sub { font-size: calc(20 * var(--u)); margin-top: calc(20 * var(--u)); }
  .intro__text { font-size: calc(16 * var(--u)); margin-top: calc(14 * var(--u)); }
  .intro__down { margin-top: calc(40 * var(--u)); }

  .q__num { font-size: calc(36 * var(--u)); margin-bottom: calc(16 * var(--u)); }
  .q__of { font-size: calc(12 * var(--u)); }
  .q__title { font-size: calc(46 * var(--u)); line-height: 1; }
  .q__list { margin-top: calc(28 * var(--u)); }
  .q__list { gap: calc(12 * var(--u)); }
  .q__list li { font-size: calc(17 * var(--u)); }
  .brief__progress { left: calc(10 * var(--u)); height: 32vh; }

  .brief__foot {
    flex-direction: column;
    bottom: calc(96 * var(--u));
    font-size: calc(13 * var(--u));
    gap: calc(10 * var(--u));
    text-align: center;
  }
  .brief__foot ul { gap: 1.2em; }
}

/* ==========================================================================
   CENTRED (her note, 7 Oct 2026: "centre it all — it is not balanced"):
   with the ring gone the left half stood empty; her hero ground is
   symmetric columns, so the words sit on its middle.
   ========================================================================== */
.slide__in { text-align: center; }
.slide__in > * { margin-inline: auto; }
.q__num { justify-content: center; }
.intro__down { margin-inline: auto; }
.slide--intro .slide__in > *:not(.intro__down) { max-width: calc(1100 * var(--u)); }
.intro__text { max-width: calc(820 * var(--u)) !important; }
.brief__foot { justify-content: center; gap: 3em; }
@media (max-width: 899px) {
  .slide--intro .slide__in > *:not(.intro__down) { max-width: none; }
  .intro__text { max-width: none !important; }
}

/* ==========================================================================
   THE NUMBERS, fifth go (her note on the fourth: the fade + the warp made the
   0 read as an N — "not good"). Clean: Degolan, flat lilac, mid size, no
   gradient, no warp. The life is in the motion: as a screen comes in its
   number counts up from 00, as the counter on the home page's opening screen
   (js/brief.js, data-count).
   ========================================================================== */
.q__mark {
  width: max-content;
  margin: 0 auto calc(40 * var(--s));
  font-family: "Degolan", var(--f-title);
  font-size: calc(110 * var(--s));             /* smaller (her note) */
  line-height: 0.8;
  position: relative;
  top: calc(-34 * var(--s));                   /* and a little higher — the question stays put */
  padding-top: 0.09em;                          /* Chrome sets Degolan 0.09em low */
  color: var(--lilac);
  direction: ltr;
  font-variant-numeric: tabular-nums;
  opacity: 0;
  transition: opacity 0.8s var(--ease-rise);
}
.slide.is-in .q__mark { opacity: 1; }

/* the sub-questions closer together (her note) */
.q__list { gap: calc(6 * var(--s)); margin-top: calc(40 * var(--s)); }
.q__list li { line-height: 1.35; }

@media (max-width: 899px) {
  .q__mark { font-size: calc(62 * var(--u)); margin-bottom: calc(22 * var(--u)); top: calc(-16 * var(--u)); }
  .q__list { gap: calc(4 * var(--u)); margin-top: calc(22 * var(--u)); }
}
@media (prefers-reduced-motion: reduce) {
  .q__mark { opacity: 1; transition: none; }
}