/* =========================================================
   LFD ghost typography band - the APPROVED design

   Two sources, both cited inline:
     the type and the hollow stroke   assets/css/modules.css:29634-29665
     the approved LFD override        lfd/lfd-home.css:6-71

   The vendor rule set gives the band its Oswald 700 uppercase type and its
   transparent fill with a 1px #b6b6b6 stroke. The LFD override then resizes it
   to clamp(72px, 11vw, 185px) and fixes the descender clipping that the
   original line-height caused - the block is literally titled "Marquee clipping
   fix". Both are reproduced; neither is reinterpreted.

   NO !important, and no `body.home` prefix: this component owns its markup.
   ========================================================= */

/* lfd-home.css:11-16. The approved wrapper has vertical padding and clips; it
   declares no horizontal padding, and clipping a scrolling band is only
   meaningful at the viewport edge, so the band runs edge to edge and the shell
   gives it the 'bleed' width. */
.lfd-ghost {
  --lfd-ghost-size: clamp(72px, 11vw, 185px);
  --lfd-ghost-leading: 1.08em;
  --lfd-ghost-min: 1.12em;
  --lfd-ghost-pad: 34px;

  /* 100 / 0.05 = 2000 frames per copy-width (modules.js:5949, 5971), which is
     33.3s at 60Hz. Authored as a duration rather than a per-frame delta, so the
     speed is the same on a 120Hz display instead of double. */
  --lfd-ghost-duration: 33.3s;

  padding-block: var(--lfd-ghost-pad);
  overflow: hidden;

  /* The containing block for .lfd-ghost-toggle, which is absolutely positioned at the band's
     trailing edge. Declared here rather than in a second .lfd-ghost rule beside the toggle: one
     selector, one place, so the next person changing the band's positioning finds all of it. */
  position: relative;
}

/* lfd-home.css:23-34 sizes the row; modules.css:29634-29644 gives it its type.
   white-space: nowrap and flex are what keep the two copies on one line. */
.lfd-ghost-track {
  display: flex;
  align-items: center;
  inline-size: max-content;
  white-space: nowrap;

  font-family: Oswald, Arial, sans-serif;
  font-size: var(--lfd-ghost-size);
  line-height: var(--lfd-ghost-leading);
  min-block-size: var(--lfd-ghost-min);
  font-weight: 700;
  text-transform: uppercase;

  /* lfd-home.css:31 - the padding that stops the descenders being clipped. */
  padding: 0.04em 0 0.08em;
  margin: 0;

  /* The track holds exactly two copies, so translating it by half its own width
     moves it by exactly one copy and lands on an identical frame. */
  /* animation-play-state, not `animation: none`, is what makes the control work:
     removing the animation would leave nothing for Resume to restart, and it
     would reset the transform, which is a visible jump. Pausing freezes the
     track exactly where it is and costs no layout. */
  animation: lfd-ghost-scroll var(--lfd-ghost-duration) linear infinite;
  will-change: transform;
}

/* The user's own choice, and it beats both the default and the reduced-motion
   default below - in either direction. */
.lfd-ghost.is-paused .lfd-ghost-track {
  animation-play-state: paused;
  will-change: auto;
}

.lfd-ghost.is-playing .lfd-ghost-track {
  animation-play-state: running;
  will-change: transform;
}

/* modules.css:29648-29652 */
.lfd-ghost-text {
  padding: 0 25px;
  box-sizing: border-box;
  line-height: inherit;
}

/* modules.css:29656-29660 - the hollow treatment. -webkit-text-stroke is
   prefixed but is implemented by every current engine, Firefox included. */
.lfd-ghost:not(.lfd-ghost--solid) .lfd-ghost-text {
  color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: #b6b6b6;
}

/* modules.css:29634-29640 - the solid mode the vendor also supports. */
.lfd-ghost--solid .lfd-ghost-text {
  color: #000;
}

@keyframes lfd-ghost-scroll {

  from { transform: translate3d(0, 0, 0); }

  to   { transform: translate3d(-50%, 0, 0); }
}

.lfd-ghost--static .lfd-ghost-track {
  animation: none;
}

/* ---------------------------------------------------------
   Tablet - lfd-home.css:43-56
   --------------------------------------------------------- */
@media (max-width: 1024px) {

  .lfd-ghost {
    --lfd-ghost-pad: 28px;
    --lfd-ghost-size: clamp(62px, 13vw, 135px);
    --lfd-ghost-leading: 1.1em;
    --lfd-ghost-min: 1.14em;
  }
}

/* ---------------------------------------------------------
   Mobile - lfd-home.css:58-71
   --------------------------------------------------------- */
@media (max-width: 767px) {

  .lfd-ghost {
    --lfd-ghost-pad: 22px;
    --lfd-ghost-size: 58px;
    --lfd-ghost-leading: 1.12em;
    --lfd-ghost-min: 1.16em;
  }
}

/* ---------------------------------------------------------
   The pause control

   WCAG 2.2 SC 2.2.2 wants moving content lasting more than five seconds to be
   pausable BY THE USER - prefers-reduced-motion covers the person who set it
   globally, not the person who just wants this band to stop.

   Deliberately quiet, and deliberately not in the composition: it sits at the
   band's trailing edge, on the page's own alignment edge, in the same Oswald
   micro-label the header CTA eyebrow and the gallery link use. It is a word,
   not a browser button - no border box, no fill, no rounded corners.
   --------------------------------------------------------- */
.lfd-ghost-toggle {
  position: absolute;
  inset-block-end: 8px;
  inset-inline-end: var(--lfd-home-gutter, 16px);
  z-index: 2;

  /* The label changes between two words, so the box is reserved for the longer
     one and nothing moves when the state does. 56px is measured, not guessed:
     "PAUSE" at Oswald 9px / 0.14em plus the 6px mark and its 6px gap renders at
     49px, and "PLAY" at 41px - so both sit inside one 56px box with headroom
     for a fallback face. The browser gate asserts the two boxes are identical. */
  min-inline-size: 56px;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  margin: 0;
  padding: 0 0 3px;
  border: 0;
  border-block-end: 1px solid rgba(0, 0, 0, 0.28);
  background: none;
  cursor: pointer;

  font-family: Oswald, Arial, sans-serif;
  font-size: 9px;
  line-height: 1;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;

  /* 9px at weight 700 is not large text, so this needs 4.5:1. rgba(0, 0, 0, 0.5) composites to
     #808080 = 3.9494:1 on paper. This is the LABEL OF A REAL CONTROL - the button that pauses the
     band's animation - and its word is the only thing that says which state it is in, so there is
     no decoration argument available here and none is made.

     0.55 is the alpha this project already settled on for quiet micro-labels, and it is the
     nearest step on that scale that passes: 4.7417:1 on paper, 4.7326:1 on --lfd-color-paper-warm
     and 4.6496:1 on --lfd-color-mist, the three grounds this band sits on. 0.62 would be 6.19:1,
     a visibly darker label for a requirement of 4.5. The bare rgba() predates the alpha scale.

     The hover and :focus-visible states at the rules below go to #000 (21:1) and are untouched. */
  color: var(--lfd-color-text-quiet, rgba(0, 0, 0, 0.55));
  transition: color var(--lfd-duration-base, 0.25s) ease,
              border-color var(--lfd-duration-base, 0.25s) ease;
}

.lfd-ghost-toggle:hover,
.lfd-ghost-toggle:focus-visible {
  color: #000;
  border-block-end-color: #000;
}

/* A two-bar / triangle mark, drawn in CSS so it needs no asset and inherits the
   label's colour. Decorative: the word carries the meaning. */
.lfd-ghost-toggle::before {
  content: "";
  flex: 0 0 auto;
  inline-size: 6px;
  block-size: 7px;
  border-inline-start: 2px solid currentColor;
  border-inline-end: 2px solid currentColor;
}

.lfd-ghost.is-paused .lfd-ghost-toggle::before {
  inline-size: 0;
  block-size: 0;
  border-inline-start: 6px solid currentColor;
  border-inline-end: 0;
  border-block-start: 4px solid transparent;
  border-block-end: 4px solid transparent;
}

@media (max-width: 767px) {

  .lfd-ghost-toggle {
    inset-block-end: 6px;
    font-size: 8.5px;
  }
}

/* ---------------------------------------------------------
   Reduced motion

   The vendor loop has no such check, so today this band is continuous motion a
   user cannot stop or pause. Under a reduced-motion preference the band starts
   PAUSED rather than un-animated, so the control can still start it for a user
   who wants it - the preference sets the default, it does not remove the
   choice. `.is-playing` above is what lets them.
   --------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {

  .lfd-ghost-track {
    animation-play-state: paused;
    will-change: auto;
  }

  .lfd-ghost-toggle {
    transition: none;
  }
}