/* ==========================================================================
   SECTION 2: MANIFESTO ("REBEL WITH PASSION.") + ABOUT EMBARK 12
   One tall section. The stage inside it stays pinned while you scroll:
     1. the GIF plays on a plain yellow background
     2. then it scrolls up and away exactly like the page does (1 to 1 with your scroll), while the
        background with the buildings and doodles and the About text scroll up into view from below
     3. the About EMBARK 12 title pops in
   Scrolling back up plays it all in reverse and restarts the GIF.
   ========================================================================== */

/* The doubled class beats any older .manifesto-section rule left in global.css (display:flex, overflow:hidden, padding...) */
section.manifesto-section.manifesto-section {
  /* ----- Things you may want to tune ----- */
  --about-bg: #d6ac45;
  /* yellow of the background (shows only if an image has not loaded yet) */
  --site-h: var(--site-header-h, 4.5rem);
  /* height of your fixed header */
  --mf-blend: color-burn;
  /* GIF blend mode: try "difference" for a stronger, inverted look */
  --dwell-a: 30svh;
  /* how long the GIF stays pinned before it starts scrolling away */
  --travel: 100svh;
  /* the scroll-away distance = one screen, like a normal scroll */
  --dwell-b: 20svh;
  /* how long the finished About screen stays pinned at the end */
  --assets-top: 0.58;
  /* where the doodles start in the tall background (0.58 = 58% down) */

  /* Reset what the old one-screen manifesto section set, so the stage can stay pinned */
  display: block;
  overflow: visible;
  padding: 0;
  margin: 0;
  min-height: 0;
  max-height: none;

  position: relative;
  box-sizing: border-box;
  width: 100%;
  height: calc(100vh + var(--dwell-a) + var(--travel) + var(--dwell-b));
  height: calc(100svh + var(--dwell-a) + var(--travel) + var(--dwell-b));
  background-color: var(--about-bg);
  border-top: 4px solid var(--c-black, #000);
  border-bottom: 4px solid var(--c-black, #000);
  scroll-margin-top: 4.5rem;
}

.manifesto-section .manifesto-filter-defs {
  position: absolute;
  width: 0;
  height: 0;
  overflow: hidden;
}

/* ---------- Stage: pinned to the screen ---------- */

.manifesto-section .manifesto-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;
  /* the GIF blends with the layers of this stage only */
  container: manifesto / inline-size;
  background-color: var(--about-bg);
}

/* Plain texture: the top (plain) part of the tall background, enlarged so it always fills the screen */
.manifesto-section .manifesto-texture {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../../assets/images/about_embark-background-full.webp") 50% 0 / auto max(190svh, 125vw) no-repeat;
  pointer-events: none;
}

/* Tall background, glued to the bottom of the stage. JS moves it up 1 to 1 with your scroll: it starts one
   screen lower (so only its plain top shows) and ends at its natural place with the buildings at the bottom. */
.manifesto-section .manifesto-bg {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  z-index: 1;
  pointer-events: none;
  will-change: transform;
}

.manifesto-section .manifesto-bg-picture {
  display: block;
  width: 100%;
  /* Soft top edge, only visible on tall screens where the image does not reach the top */
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 min(14%, 160px));
  mask-image: linear-gradient(to bottom, transparent 0, #000 min(14%, 160px));
}

.manifesto-section .manifesto-bg-img {
  display: block;
  width: 100%;
  height: auto;
}

.manifesto-section .manifesto-charac-img {
  position: absolute;
  left: -1.2%;
  bottom: -5%;
  width: 38.28125%;
  height: auto;
  z-index: 2;
  pointer-events: none;
  display: block;
  opacity: 1;
  transition: opacity 1.2s cubic-bezier(0.2, 0.8, 0.2, 1);
  animation: charac-float 4s ease-in-out infinite alternate;
  will-change: transform, opacity;
}

.manifesto-section.is-armed:not(.is-in) .manifesto-charac-img {
  opacity: 0;
}

.manifesto-section.is-in .manifesto-charac-img {
  opacity: 1;
}

@keyframes charac-float {
  0% {
    transform: translateY(0);
  }

  100% {
    transform: translateY(-10px);
  }
}

/* ---------- The GIF ---------- */

.manifesto-section .manifesto-gif {
  position: absolute;
  inset: 0;
  z-index: 2;
  box-sizing: border-box;
  display: none;
  /* shown only when JS is running */
  place-items: center;
  padding: clamp(1rem, 2vh, 2rem) clamp(1rem, 2vw, 2rem);
  pointer-events: none;
  mix-blend-mode: var(--mf-blend);
  will-change: transform;
  /* JS scrolls it up and away with the page */
}

.manifesto-section.is-armed .manifesto-gif {
  display: grid;
}

.manifesto-section .manifesto-img {
  display: block;
  width: auto;
  max-width: min(1600px, 92cqw);
  height: auto;
  max-height: min(85svh, 85vh);
  object-fit: contain;
  margin: auto;
}

/* ---------- About EMBARK 12: centered in the space above the buildings ---------- */

.manifesto-section .about-embark-inner {
  /* Height of the strip at the bottom the text must stay above (buildings), and the sizes derived from the free space */
  --zone: min(27cqw, 42svh);
  --avail: max(240px, calc(100svh - var(--site-h) - var(--zone) - 1.5rem));
  --fs: clamp(0.95rem, min(calc(0.85rem + 0.7vw), calc(var(--avail) * 0.066)), 1.7rem);
  --title-w: min(max(44vw, 340px), calc(var(--avail) * 1.8), 860px, 100%);

  position: absolute;
  inset: 0;
  z-index: 3;
  box-sizing: border-box;
  padding: calc(var(--site-h) + 0.75rem) clamp(1rem, 4cqw, 3rem) calc(var(--zone) + 1rem);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: clamp(1rem, 3.2svh, 2.25rem);
  text-align: center;
  will-change: transform;
  /* JS scrolls it up from below with the page */
}

.manifesto-section .about-embark-title {
  margin: 0;
  width: var(--title-w);
  line-height: 0;
}

.manifesto-section .about-embark-title-img {
  display: block;
  width: 100%;
  height: auto;
  transform-origin: 50% 55%;
}

.manifesto-section .about-embark-copy {
  width: min(100%, 56rem, 66cqw);
  color: #14110a;
  font-family: var(--f-inter, 'Inter', -apple-system, BlinkMacSystemFont, sans-serif);
  font-size: var(--fs);
  font-weight: 500;
  line-height: 1.5;
}

.manifesto-section .about-embark-copy p {
  margin: 0 0 1.4em;
  text-wrap: balance;
}

.manifesto-section .about-mini-embark {
  display: inline-block;
  height: 1em;
  width: auto;
  vertical-align: -0.10em;
  margin-right: 0.15em;
}

.manifesto-section .about-embark-copy p:last-child {
  margin-bottom: 0;
}

/* Tablet portrait and phones: the doodles sit right above the buildings, so keep the text above them; text can use the full width */
@container manifesto (max-width: 900px) {
  .manifesto-section .about-embark-inner {
    --zone: min(calc((1 - var(--assets-top)) * var(--bg-ratio, 1.2307) * 100cqw + 1rem), 46svh);
  }

  .manifesto-section .about-embark-copy {
    width: min(100%, 36rem);
  }
}

/* Very short screens (phones held sideways): the tall background would fill the whole height, so it is
   narrowed and centered (buildings stay small at the bottom) and the text gets the room above them */
@media (max-height: 560px) and (min-aspect-ratio: 13/10) {
  .manifesto-section .manifesto-bg {
    right: 0;
    margin-inline: auto;
    width: min(100%, 105svh);
  }

  .manifesto-section .manifesto-bg-picture {
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 min(14%, 160px));
    mask-image: linear-gradient(to right, transparent 0, #000 4%, #000 96%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 min(14%, 160px));
    -webkit-mask-composite: source-in;
    mask-composite: intersect;
  }

  .manifesto-section .about-embark-inner {
    --zone: 30svh;
    --title-w: min(300px, 44vw);
    gap: 0.8rem;
  }

  .manifesto-section .about-embark-copy {
    width: min(100%, 64rem);
  }

  .manifesto-section .about-embark-copy p {
    margin-bottom: 0.7em;
  }
}

/* ---------- Title pop (only when JS is running: the page still works without it) ---------- */
/* The text scrolls up with the page; the title pops from small to big once the About screen has arrived */

.manifesto-section.is-armed:not(.is-in) .about-embark-title-img {
  opacity: 0;
  transform: scale(0.12) rotate(-10deg);
}

.manifesto-section.is-in .about-embark-title-img {
  animation: about-title-pop 0.95s cubic-bezier(0.22, 0.9, 0.3, 1) both;
}

@keyframes about-title-pop {
  0% {
    opacity: 0;
    transform: scale(0.12) rotate(-10deg);
  }

  45% {
    opacity: 1;
    transform: scale(1.12) rotate(2deg);
  }

  68% {
    transform: scale(0.96) rotate(-1deg);
  }

  85% {
    transform: scale(1.03) rotate(0deg);
  }

  100% {
    opacity: 1;
    transform: scale(1) rotate(0deg);
  }
}

/* ---------- Anchor for nav links ---------- */

.manifesto-section .manifesto-anchor {
  position: absolute;
  left: 0;
  top: calc(var(--dwell-a) + var(--travel));
  width: 1px;
  height: 1px;
  scroll-margin-top: 0;
  pointer-events: none;
}

/* ---------- Shaking buildings, doodles and the 126 ---------- */
/* The shake layers are created, cut out (SVG filters) and shaken by js/manifesto-about.js */

@media (prefers-reduced-motion: reduce) {
  .manifesto-section.is-in .about-embark-title-img {
    animation: none;
  }

  .manifesto-section.is-armed:not(.is-in) .about-embark-title-img {
    opacity: 1;
    transform: none;
  }

  .manifesto-section .manifesto-charac-img {
    animation: none;
    transition: none;
  }

  .manifesto-section.is-armed:not(.is-in) .manifesto-charac-img {
    opacity: 1;
  }
}