/* =========================================================================
   Velaccio — Qué hacemos

   The answer the home owed the visitor: after the logos and before the work,
   a plain statement of what the company actually does.

   Two movements, no script:

     • a statement column and a reading column, side by side, so the display
       line and the body copy are read as one thought rather than stacked
     • the four disciplines underneath, on a hairline, as the short version
       of the same thing

   Type is matched to what already sits either side of it: the headline to
   .vsr-title, the body to .vsr-sub / .s-text, the labels to .rst-label. Sizes
   are rem because main-style.css drives html{font-size} off vw — a rem here is
   already fluid.
   ========================================================================= */

.vel-wwd {
  --wwd-label-gap: clamp(1.6rem, 2.4vw, 3.2rem);
  position: relative;
  padding: clamp(5rem, 8vw, 13rem) 0 clamp(3rem, 5vw, 7rem);
  background: transparent;
}

.wwd-inner {
  display: flex;
  /* top-aligned: the statement and the first line of copy should start on the
     same optical line, which centring would break the moment the copy wraps */
  align-items: flex-start;
  gap: clamp(2.4rem, 4vw, 6rem);
}

.wwd-head {
  flex: 1 1 54%;
  min-width: 0;
}

.wwd-body {
  flex: 1 1 46%;
  min-width: 0;
  max-width: 46rem;
  /* drops the first line of copy off the headline's cap line */
  padding-top: clamp(.6rem, 1.4vw, 1.8rem);
}

.wwd-label {
  display: block;
  margin: 0 0 var(--wwd-label-gap);
  color: rgba(255, 255, 255, .5);
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-size: clamp(1.4rem, 1.2vw, 1.8rem);
  font-weight: 500;
  letter-spacing: .02em;
}

.wwd-title {
  margin: 0;
  font-family: "ABC Gravity Compressed", sans-serif;
  font-weight: 900;
  font-size: clamp(3.2rem, 9.6vw, 11rem);
  line-height: .85;
  letter-spacing: -.01em;
  text-transform: uppercase;
  color: #fff;
}

.wwd-text {
  margin: 0;
  color: rgba(255, 255, 255, .72);
  /* same face and rhythm as .s-text and .vsr-sub */
  font-family: "P22 Mackinac", serif;
  font-weight: 400;
  font-size: clamp(1.5rem, 1.3vw, 1.8rem);
  line-height: 1.45;
  text-wrap: pretty;
}

.wwd-text + .wwd-text {
  margin-top: clamp(1.4rem, 1.6vw, 2.2rem);
}

.wwd-text strong {
  color: #fff;
  font-weight: 400;
}

/* ---- the highlighter ----------------------------------------------------- */

/* The words to take away if nothing else is read, run through with a marker
   in the brand's light blue: one flat stroke the full height of the line,
   covering the word the way a real highlighter does.

   Light blue under white type does not read, so the ink turns dark — and it
   turns dark exactly where the stroke has reached, not the whole phrase at
   once. Two text-clipped layers do it: the dark ink sized to the stroke's
   progress on top, the resting white underneath. The stroke is the third
   layer, and all three read one variable, --wwd-hl, so ink and paper can
   never drift apart. Without background-clip:text the fallback is the plain
   version: dark ink on a flat stroke, no letter-by-letter handover.

   One background on the whole inline, not one per line: with the default
   box-decoration-break (slice) a phrase that wraps is painted as a single
   strip cut at the line end, so the sweep finishes line one and carries on
   into line two.

   The resting state here is the finished one. scroll-motion.js arms the
   empty state only once it is ready to play the sweep, so with reduced
   motion, or with the script missing, the words are simply highlighted. */
.wwd-hl {
  --wwd-hl: 100%;
  --wwd-hl-paper: #67e8f9;
  --wwd-hl-ink: #0b0b0c;
  --wwd-hl-rest: #fff;

  color: var(--wwd-hl-ink);
  background-color: transparent;
  background-image: linear-gradient(var(--wwd-hl-paper), var(--wwd-hl-paper));
  background-repeat: no-repeat;
  background-position: 0 50%;
  background-size: var(--wwd-hl) 100%;
  /* vertical padding grows the stroke past the glyphs without touching the
     line box; the side padding is taken back by the margin so the phrase
     does not push the words around it */
  padding: .06em .07em;
  margin: 0 -.07em;
  border-radius: .16em;
}

.wwd-hl strong {
  color: inherit;
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
  .wwd-hl {
    color: transparent;
    background-image:
      linear-gradient(var(--wwd-hl-ink), var(--wwd-hl-ink)),
      linear-gradient(var(--wwd-hl-rest), var(--wwd-hl-rest)),
      linear-gradient(var(--wwd-hl-paper), var(--wwd-hl-paper));
    background-size: var(--wwd-hl) 100%, 100% 100%, var(--wwd-hl) 100%;
    -webkit-background-clip: text, text, padding-box;
    background-clip: text, text, padding-box;
  }
}

html.wwd-hl-armed .wwd-hl {
  --wwd-hl: 0%;
}

/* played: every mark is finished, including the ones in the copy that is
   hidden at this width and so never swept — rotate the phone and they are
   already there */
html.wwd-hl-armed .wwd-body.is-lit .wwd-hl {
  --wwd-hl: 100%;
}

/* ---- long / short copy --------------------------------------------------- */

/* The section says the same thing twice: the full version, and a short one for
   phones, where the two paragraphs plus four steps read as a wall. Only one of
   the two is ever in the flow, so nothing is repeated to a reader or to a
   crawler. The inline selector is there so a tail can be swapped inside a
   sentence the same way the steps drop theirs. */
p.wwd-short,
span.wwd-short {
  display: none;
}

/* ---- the four disciplines ------------------------------------------------ */

/* A descending staircase: each step sits one column right and one --wwd-step
   down, and a dashed arc hops from each marker to the next. The step and the
   marker placement are set here; the arcs themselves are measured off the
   result by what-we-do.js, so changing either one needs no change there. */
.wwd-pillars {
  --wwd-col-gap: clamp(2.4rem, 3vw, 4.4rem);
  --wwd-step: clamp(2.6rem, 3.4vw, 5.4rem);
  --wwd-dot: .9rem;
  /* where the marker sits across its own column */
  --wwd-dot-x: 26%;

  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  align-items: start;
  column-gap: var(--wwd-col-gap);
  row-gap: clamp(2.4rem, 3vw, 4.4rem);
  /* the staircase sits closer to the copy now that no hairline separates them.
     Only this margin moves: .wwd-inner keeps its own position in the section. */
  margin: clamp(3.2rem, 5vw, 7.5rem) 0 0;
  /* explicit: the theme resets ul padding, but this must not depend on it.
     The old top padding existed only to clear the rule that used to sit here. */
  padding: 0;
  list-style: none;
}

.wwd-pillar {
  position: relative;
  min-width: 0;
}

.wwd-pillar:nth-child(2) {
  margin-top: var(--wwd-step);
}

.wwd-pillar:nth-child(3) {
  margin-top: calc(var(--wwd-step) * 2);
}

.wwd-pillar:nth-child(4) {
  margin-top: calc(var(--wwd-step) * 3);
}

.wwd-pillar__dot {
  display: block;
  width: var(--wwd-dot);
  height: var(--wwd-dot);
  margin: 0 0 clamp(1.2rem, 1.6vw, 2rem) var(--wwd-dot-x);
  border-radius: 50%;
  background: #fff;
}

/* The arcs are drawn into this one canvas rather than one box per step: it is
   the only way the curve can start and finish on the exact centre of a marker,
   since those centres are only known once the grid has laid itself out. The
   script measures them and writes a 1:1 pixel viewBox here — nothing is
   stretched, so the dashes stay even and the light's falloff stays circular. */
.wwd-steps {
  position: relative;
}

.wwd-arcs {
  position: absolute;
  inset: 0;
  /* under the markers, so each curve is cut off cleanly by the dot it runs
     into instead of being drawn across it */
  z-index: 0;
  width: 100%;
  height: 100%;
  /* the arcs crest above the first marker, outside this box */
  overflow: visible;
  pointer-events: none;
}

/* The chain is drawn twice: once dim, and once in a light that exists only
   where the travelling source reaches it.

   There is no ball. The source is a radial gradient in user space, and the lit
   copy of each arc is stroked with it — so the only thing that can catch the
   light is a dash. Between the dashes there is nothing to light, which is what
   makes the source read as something behind the line rather than a dot riding
   on top of it. It only works if a dash is big enough to be lit on its own,
   which is why they are fewer and heavier here than a hairline would want.

   Dash length, gap and stroke width are all set by what-we-do.js. They are
   measured off each arc so that every arc carries the same count of evenly
   spaced dashes at any width, rather than more of them as the screen grows. */
.wwd-arc,
.wwd-arc-bloom,
.wwd-arc-lit {
  fill: none;
  stroke-linecap: round;
}

.wwd-arc {
  stroke: rgba(255, 255, 255, .28);
}

/* the spill, blurred wide and sitting under the crisp pass */
.wwd-arc-bloom {
  stroke: url(#wwd-spark-glow);
  filter: url(#wwd-spark-bloom);
}

/* and the dash itself, taken to white inside the source's radius */
.wwd-arc-lit {
  stroke: url(#wwd-spark-glow);
}

.wwd-pillar__title {
  margin: 0 0 clamp(.8rem, 1vw, 1.2rem);
  color: #fff;
  font-family: "Acid Grotesk", system-ui, sans-serif;
  font-size: clamp(1.7rem, 1.5vw, 2.1rem);
  font-weight: 500;
  letter-spacing: -.01em;
}

.wwd-pillar__num {
  color: rgba(255, 255, 255, .38);
  font-variant-numeric: tabular-nums;
}

.wwd-pillar__text {
  margin: 0;
  color: rgba(255, 255, 255, .58);
  font-family: "P22 Mackinac", serif;
  font-weight: 400;
  font-size: clamp(1.35rem, 1.15vw, 1.6rem);
  line-height: 1.45;
  text-wrap: pretty;
}

/* ---- breakpoints --------------------------------------------------------- */

/* The two columns hold as long as the display line has room for its own
   breaks; below that the statement reads better with the copy under it. */
@media (max-width: 1099px) {
  .wwd-inner {
    display: block;
  }

  .wwd-body {
    max-width: 56rem;
    margin-top: clamp(2.4rem, 4vw, 3.6rem);
    padding-top: 0;
  }

  /* the staircase needs its four columns to read as one line; on two it would
     just look like broken alignment, so the steps flatten and the arcs go */
  .wwd-pillars {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .wwd-pillar:nth-child(2),
  .wwd-pillar:nth-child(3),
  .wwd-pillar:nth-child(4) {
    margin-top: 0;
  }

  .wwd-arcs {
    display: none;
  }
}

/* On a phone the four steps stop being a staircase and become one column read
   top to bottom, so the chain is redrawn the only way it still makes sense
   there: a dashed rail down the left, with each marker sitting on it. The copy
   drops to its short version at the same width — the long one plus four steps
   is more text than a phone screen earns. */
@media (max-width: 767px) {
  .wwd-long {
    display: none;
  }

  p.wwd-short {
    display: block;
  }

  span.wwd-short {
    display: inline;
  }

  .wwd-body {
    margin-top: clamp(1.8rem, 5vw, 2.6rem);
  }

  .wwd-pillars {
    --wwd-dot: .7rem;
    --wwd-rail: clamp(2.2rem, 6.5vw, 3rem);

    grid-template-columns: minmax(0, 1fr);
    /* the gap between steps is the padding on each item instead, so the rail
       can run through it from one marker to the next */
    row-gap: 0;
    margin-top: clamp(2.6rem, 8vw, 4rem);
  }

  .wwd-pillar {
    padding: 0 0 clamp(1.8rem, 5.5vw, 2.6rem) var(--wwd-rail);
  }

  .wwd-pillar:last-child {
    padding-bottom: 0;
  }

  /* the rail: from under this marker down to the next one */
  .wwd-pillar:not(:last-child)::before {
    content: "";
    position: absolute;
    left: calc(var(--wwd-dot) / 2 - .5px);
    top: 1.7rem;
    bottom: -.1rem;
    border-left: 1px dashed rgba(255, 255, 255, .28);
  }

  .wwd-pillar__dot {
    position: absolute;
    /* aligned to the middle of the title's first line, not to its top */
    top: .7rem;
    left: 0;
    margin: 0;
  }

  .wwd-pillar__title {
    margin-bottom: clamp(.5rem, 1.6vw, .8rem);
    font-size: max(15px, 1.75rem);
  }

  .wwd-pillar__text {
    max-width: 42rem;
  }
}

/* ---- label entrance ------------------------------------------------------ */

/* Only ever applied once the script has wrapped the text, so a label without
   its inner span is never left hidden behind a mask it cannot leave. */
html.wwd-js .wwd-label {
  overflow: hidden;
  /* the mask has to clear the descenders of the parentheses and the Q, so the
     box grows downward and the gap underneath shrinks by the same amount */
  padding-bottom: .28em;
  margin-bottom: calc(var(--wwd-label-gap) - .28em);
}

html.wwd-js .wwd-label__in {
  display: inline-block;
  /* 115%, not 100%: the extra clears the padding added above, so nothing of
     the label peeks out below the mask before it rises */
  transform: translateY(115%);
  opacity: 0;
  transition: transform .9s cubic-bezier(.33, 1, .68, 1),
              opacity .7s cubic-bezier(.33, 1, .68, 1);
}

html.wwd-js .wwd-label.is-in .wwd-label__in {
  transform: none;
  opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
  html.wwd-js .wwd-label__in {
    transform: none;
    opacity: 1;
    transition: none;
  }
}