/* ==========================================================================
   Launch Labs — "Editorial" (standalone experiment). One continuous scroll
   composition that answers what a website needs to do, in three moments:
   STAND OUT (opening statement) -> ATTENTION (great design; a portrait image
   reveals rapidly upward behind a huge word) -> CHOOSE YOU (great messaging;
   calmer, the dominant typographic payoff). Near-black canvas, Launch type,
   one red accent. No cards, columns, icons or explanatory paragraphs.

   Base styles below are the readable STATIC fallback (reduced motion / no JS):
   the three moments simply stack and read top to bottom. js/editorial.js adds
   .is-motion for the pinned, scroll-scrubbed version. All namespaced
   .editorial. To revert: delete this file, js/editorial.js, the .editorial
   markup and their <link>/<script> lines.
   ========================================================================== */

.editorial {
  position: relative;
  background: #010202;
  color: #FFFFFF;
  padding: clamp(4rem, 12vh, 9rem) clamp(1.5rem, 5vw, 4rem);
}

/* ---- Base / static fallback: three stacked, centred moments ---- */
.editorial__scene {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: clamp(2.5rem, 6vw, 4.5rem) 0;
}

/* STAND OUT — the opening statement, given plenty of space. */
.editorial__statement {
  margin: 0;
  max-width: 22ch;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 600;
  font-size: clamp(1.9rem, 4.6vw, 4.4rem);
  line-height: 1.12;
  letter-spacing: -0.025em;
  color: #FFFFFF;
  will-change: opacity, transform;
}
.editorial__accent { color: #D92632; font-weight: 800; }

/* Small line above each big word. */
.editorial__kicker {
  position: relative;
  z-index: 2;
  margin: 0 0 clamp(0.5rem, 1.5vw, 1rem);
  max-width: 30ch;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 500;
  font-size: clamp(1rem, 2.2vw, 1.7rem);
  line-height: 1.25;
  letter-spacing: -0.01em;
  color: rgba(255, 255, 255, 0.82);
  will-change: opacity, transform;
}

/* The dominant words. */
.editorial__word {
  position: relative;
  z-index: 2;
  margin: 0;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-weight: 800;
  text-transform: uppercase;
  line-height: 0.9;
  letter-spacing: -0.04em;
  color: #FFFFFF;
  will-change: opacity, transform;
}
.editorial__word--attention { font-size: clamp(4rem, 17vw, 15rem); }
.editorial__word--choose { font-size: clamp(3.4rem, 14.5vw, 13rem); }

/* Portrait image — a real photographic moment (placeholder until an asset is
   supplied). Bottom-anchored clip target for the upward reveal. */
.editorial__image {
  position: relative;
  width: min(80vw, 22rem);
  height: min(58vh, 30rem);
  margin: clamp(1.75rem, 3.5vw, 2.75rem) auto 0;
  overflow: hidden;
}
.editorial__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Clearly-labelled placeholder (no asset needed yet). Replace the figure's
   contents with an <img> and drop the --placeholder modifier when ready. */
.editorial__image--placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(217, 38, 50, 0.18), transparent 60%),
    linear-gradient(160deg, #241a1c 0%, #120c0e 60%, #0a0708 100%);
}
.editorial__image-label {
  font-family: 'Hanken Grotesk', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.5);
  text-align: center;
}

/* ==========================================================================
   Animated (pinned) layout — applied only when js/editorial.js runs with GSAP.
   The three scenes become full-viewport overlays the scrub cross-fades between;
   the image reveals via clip-path. GSAP owns opacity/transform/clip-path.
   ========================================================================== */
.editorial.is-motion {
  height: 100svh;
  overflow: hidden;
  padding: 0;
}
.editorial.is-motion .editorial__scene {
  position: absolute;
  inset: 0;
  padding: clamp(1.5rem, 5vw, 4rem);
}

.editorial.is-motion .editorial__image {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);   /* GSAP animates clip-path, not transform */
  width: clamp(15rem, 27vw, 24rem);
  height: min(76vh, 40rem);
  margin: 0;
  z-index: 1;                          /* behind the ATTENTION word */
  clip-path: inset(100% 0 0 0);        /* hidden until the reveal */
  -webkit-clip-path: inset(100% 0 0 0);
  will-change: clip-path;
}

/* A whisper of darkening so white type stays legible where it crosses the
   image — a gradient, not a box. */
.editorial.is-motion .editorial__image--placeholder::after,
.editorial.is-motion .editorial__image::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(1, 2, 2, 0.15), rgba(1, 2, 2, 0.35));
  pointer-events: none;
}

@media (max-width: 40rem) {
  .editorial__word--attention { font-size: clamp(3.4rem, 22vw, 6rem); }
  .editorial__word--choose { font-size: clamp(3rem, 19vw, 5.5rem); }
}