/* =============================================================================
   Components layer

   Everything a utility class cannot express cleanly: the clipped background
   planes, the dimension line and the motion system. Under Tailwind this file
   becomes @layer components and the markup stays untouched.
   ========================================================================== */

/* -----------------------------------------------------------------------------
   Background planes
   The Λ isotipo, flat colour, bleeding off every edge. preserveAspectRatio
   "slice" scales it like background-size: cover, so the chevron keeps its
   proportions and only ever gets cropped, never stretched.
   -------------------------------------------------------------------------- */
.backdrop {
  position: fixed;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.plane--taupe {
  fill: rgb(139 136 119 / 0.13);
}

.plane--olive {
  fill: rgb(138 140 92 / 0.13);
}

/* -----------------------------------------------------------------------------
   Inline fact list
   The middle dot is a CSS decoration, so the markup stays a real list and the
   separator never ends up in copied text or in a screen reader's output. The
   gap sits before the dot and the margin after it, so spacing is symmetric.
   -------------------------------------------------------------------------- */
/* Stacked on phones: laid out inline, the number of items per line changes with
   the device width and the list reads as a broken sentence. */
.meta-list {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-1);
}

@media (min-width: 640px) {
  .meta-list {
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--spacing-2);
  }

  /* The dot only makes sense once the items share a line. */
  .meta-list > li + li::before {
    content: "·";
    margin-right: var(--spacing-2);
  }
}

/* -----------------------------------------------------------------------------
   Service list
   Ordered on purpose: these are the studio's three lines of work, numbered.
   The number comes from a counter, so it is never typed twice.
   -------------------------------------------------------------------------- */
.services {
  counter-reset: service;
}

.services > li {
  counter-increment: service;
}

.services > li::before {
  content: counter(service, decimal-leading-zero);
  font-family: var(--font-display);
  font-size: var(--text-number);
  /* Tight leading keeps the numeral inside its grid cell: aligned to the
     baseline it would overhang the row above once it gets this big. */
  line-height: 0.72;
  letter-spacing: -0.04em;
  /* Hairline outline, same language as the technical drawing: at this size the
     number is meant to be sensed, not read. */
  color: transparent;
  -webkit-text-stroke: 1px var(--color-brick);
}

/* Firefox before 49 and any engine without text-stroke: a flat, pale numeral. */
@supports not (-webkit-text-stroke: 1px black) {
  .services > li::before {
    color: rgb(217 139 104 / 0.55);
  }
}

/* -----------------------------------------------------------------------------
   Dimension line
   Hairline rules with brick end ticks, borrowed from a drawing's dimension.
   Both are decoration, so they are pseudo-elements and the paragraph holds
   nothing but its own text. The ticks are painted on the element itself.
   -------------------------------------------------------------------------- */
.dimension {
  background-image:
    linear-gradient(var(--color-brick), var(--color-brick)),
    linear-gradient(var(--color-brick), var(--color-brick));
  background-size: 1px var(--spacing-3);
  background-position: left center, right center;
  background-repeat: no-repeat;
}

.dimension::before,
.dimension::after {
  content: "";
  flex: 1;
  height: 1px;
  background-color: rgb(248 245 237 / 0.35);
  animation: extend 1.1s var(--ease-draw) 1.2s backwards;
}

/* Each rule grows outward from the label it belongs to. */
.dimension::before {
  transform-origin: right center;
}

.dimension::after {
  transform-origin: left center;
}

/* -----------------------------------------------------------------------------
   Motion
   The technical drawing and the wordmark are stroked in, as if drawn on the
   board; content enters with a short staggered offset. pathLength="1"
   normalises every path, so a single dash value fits all of them.
   -------------------------------------------------------------------------- */
@keyframes stroke-in {
  from { stroke-dashoffset: 1; }
  to { stroke-dashoffset: 0; }
}

@keyframes enter {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 0.34; }
}

@keyframes extend {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.drawing {
  opacity: 0;
  animation: reveal 0.8s ease 0.2s forwards;
}

.drawing [data-draw] {
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: stroke-in 2.4s var(--ease-draw) forwards;
}

.drawing [data-draw="1"] { animation-delay: 0.25s; }
.drawing [data-draw="2"] { animation-delay: 0.55s; }
.drawing [data-draw="3"] { animation-delay: 0.85s; }
.drawing [data-draw="4"] { animation-delay: 1.15s; }
.drawing [data-draw="5"] { animation-delay: 1.45s; }

/* The wordmark uses the brand's filled letterforms, so it cannot be stroked in
   like the drawing: it reveals with a left-to-right wipe instead. */
@keyframes wipe {
  from { clip-path: inset(0 100% 0 0); }
  to { clip-path: inset(0 0 0 0); }
}

.wordmark svg {
  animation: wipe 1.1s var(--ease-draw) 0.1s backwards;
}

.enter {
  opacity: 0;
  animation: enter 0.9s var(--ease-enter) forwards;
}

.enter--1 { animation-delay: 0.05s; }
.enter--2 { animation-delay: 0.18s; }
.enter--3 { animation-delay: 0.31s; }
.enter--4 { animation-delay: 0.44s; }
.enter--5 { animation-delay: 0.57s; }
.enter--6 { animation-delay: 0.70s; }

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .enter {
    opacity: 1;
  }

  .drawing {
    opacity: 0.34;
  }

  .drawing [data-draw] {
    stroke-dashoffset: 0;
  }

  .wordmark svg {
    clip-path: none;
  }

  .dimension::before,
  .dimension::after {
    transform: none;
  }
}