/* =============================================================================
   PAGONI — MANIFESTO
   A standalone slide travelling across the photographic background.

   The pin holds still; the slide goes right while its items play in, and the
   plate behind goes left. Two speeds against each other is what makes it read
   as depth rather than as one picture sliding.
   ============================================================================= */

.manifesto {
  --bleed: 12vh;
  position: relative;
  padding-block: 0;
}

/* Preserve the section's existing scroll duration pending its redesign. */
.manifesto__scroller { position: relative; height: 300vh; }

.manifesto__pin {
  --push: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* -----------------------------------------------------------------------------
   THE CAMERA
   ----------------------------------------------------------------------------- */
.manifesto__sky {
  position: absolute;
  inset: 0;
  z-index: 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 16%, #000 82%, transparent 100%);
}

/* Oversized so a 14% pan never exposes an edge. `max-width: none` is load
   bearing: the reset caps images at 100% of their box and silently undoes it. */
.manifesto__plate,
.manifesto__plate img {
  width: 150%;
  max-width: none;
  height: 100%;
  object-fit: cover;
}
.manifesto__plate { position: absolute; inset: 0; will-change: transform; opacity: 0.5; }

.manifesto__veil {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(120% 86% at 50% 50%, transparent 30%, var(--raw-void-a62) 100%),
    rgb(4 16 13 / 0.66);
}

/* -----------------------------------------------------------------------------
   THE FLOOR
   One line. It is what the figure is walking on, and without it a person and a
   rectangle are floating next to each other in a void.
   ----------------------------------------------------------------------------- */
.manifesto__floor {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 8%;
  height: 1px;
  z-index: 1;
  background: linear-gradient(to right, transparent, var(--raw-mint-a24) 18%, var(--raw-mint-a24) 82%, transparent);
}

/* -----------------------------------------------------------------------------
   THE RIG
   ----------------------------------------------------------------------------- */
.manifesto__rig {
  position: absolute;
  left: 8%;
  bottom: 8%;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  will-change: transform;
}

.manifesto__card {
  position: relative;
  z-index: 1;
  flex: none;
  width: min(60rem, 60vw);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--rounding-panel);
  background: var(--raw-abyss-980);
  box-shadow:
    inset 0 0 0 1px var(--raw-mint-a24),
    /* The shadow leans away from the push, and deepens as the slide gains
       ground. It is the only cue that the thing has weight. */
    calc(var(--push, 0) * -1.5rem - 0.5rem) 2rem 4rem -1rem rgb(2 8 7 / 0.9);
  transform-origin: 0 100%;
}
/* The engine's slide page at its native 1920x1080, scaled to the card. */
.manifesto__frame {
  position: absolute;
  top: 0;
  left: 0;
  border: 0;
  transform-origin: 0 0;
  pointer-events: none;
}

.manifesto__peacocks {
  position: absolute;
  inset: 0;
  z-index: 0;
  color: var(--illustration-outline);
  pointer-events: none;
}

.manifesto__peacock {
  position: absolute;
  transform-origin: 50% 90%;
}

.manifesto__peacock svg {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.manifesto__peacock .crayon__edge {
  stroke-width: calc(3.8 * var(--crayon-pressure, 1));
  opacity: .22;
}
.manifesto__peacock .crayon__wax {
  stroke-width: calc(2.3 * var(--crayon-pressure, 1));
  opacity: .88;
}
.manifesto__peacock .crayon__grain {
  stroke-width: calc(.75 * var(--crayon-pressure, 1));
  opacity: .68;
}

.manifesto__peacock [data-plume],
.manifesto__peacock [data-tail] { transform-origin: 0 0; }
.manifesto__peacock [data-fan] { transform-origin: 85px 230px; }

.manifesto__peacock--left { left: 0; top: 25%; width: 26%; }
.manifesto__peacock--top-a { left: 12%; top: 0; width: 30%; }
.manifesto__peacock--top-b { left: 53%; top: 0; width: 28%; }
.manifesto__peacock--right { right: -23%; top: 2%; width: 32%; }

@media (min-width: 641px) and (max-width: 1024px) {
  .manifesto__peacock--right { right: -13%; }
}

@media (max-width: 640px) {
  .manifesto__peacock svg { stroke-width: 2.4; }
  .manifesto__peacock--left { width: 31%; top: 32%; }
  .manifesto__peacock--top-a { left: 7%; width: 39%; }
  .manifesto__peacock--top-b { left: 49%; width: 37%; }
  .manifesto__peacock--right { width: 36%; right: -17%; top: 14%; }
}

/* -----------------------------------------------------------------------------
   NARROW
   The push stays — it is the section — and the slide keeps its 16:9.
   ----------------------------------------------------------------------------- */
@media (max-width: 1024px) {
  .manifesto__scroller { height: 240vh; }
  .manifesto__card { width: 80vw; }
}

@media (max-width: 640px) {
  .manifesto__scroller { height: 200vh; }
  .manifesto__card { width: 88vw; }
  /* Centred in the frame. */
  .manifesto__rig, .manifesto__floor { bottom: 32%; }
  .manifesto__rig { left: 4%; }
}

@media (prefers-reduced-motion: reduce) {
  .manifesto__scroller { height: 100vh; }
  .manifesto__rig { transform: none !important; }
  .manifesto__plate { transform: none !important; }
}