/*  octw-credit-bar.css  —  v1.0.0
 *  Old City Tech Works footer credit bar.
 *  Shared asset: contains NO per-site values. Site-specific overrides belong in
 *  the child theme, by redeclaring tokens on :root or on .octw-credit-bar.
 *
 *  Cascade warning: stroke-opacity, fill-opacity, d and transform on the SVG
 *  are written by JS as presentation attributes. Declaring any of them here
 *  will silently win and freeze the animation. Don't.
 */

:root{
  --octw-cb-bg:            #04050a;
  --octw-cb-bg-edge:       #0a0c13;
  --octw-cb-baseline:      #33405a;
  --octw-cb-figure:        #eae7de;
  --octw-cb-text:          #eae7de;
  --octw-cb-text-dim:      #98a2b4;
  --octw-cb-accent:        #e2b165;
  --octw-cb-scrim-rgb:     4 5 10;
  --octw-cb-focus:         #e2b165;
  --octw-cb-brew:          #e8b33a;
  --octw-cb-brew-head:     #f4dd8c;

  --octw-cb-height:        clamp(1.75rem, 3vh, 2.5rem);
  --octw-cb-stroke:        1.25px;
  --octw-cb-baseline-w:    1px;
  --octw-cb-pad-x:         clamp(1rem, 3vw, 2.5rem);
  --octw-cb-gap:           clamp(.75rem, 2.5vw, 2rem);

  --octw-cb-font:          ui-sans-serif, "Helvetica Neue", Helvetica, Arial, sans-serif;
  --octw-cb-size:          clamp(.58rem, .72vw + .38rem, .74rem);
  --octw-cb-track:         .16em;
  --octw-cb-track-mark:    .22em;

  --octw-cb-ease:          cubic-bezier(.2,.7,.2,1);
  --octw-cb-reveal-dur:    .55s;
  --octw-cb-word-step:     .065s;
  --octw-cb-frag-dur:      .5s;
  --octw-cb-scrim-w:       min(72ch, 78%);
  --octw-cb-frag-fade:     .45s;
}

/* Width-based rules are container queries further down — the bar responds to
   its own width, not the viewport's, so it stays correct inside a constrained
   theme column. Height is the one genuinely viewport-scoped concern. */

/* Short viewports (landscape phones): 52px would eat 13% of the screen. */
@media (max-height: 30rem){
  :root{
    --octw-cb-height: 1.75rem;
  }
}

/* ============================================================
   COMPONENT — octw-credit-bar (BEM, no inline styles, tokens only)
   ============================================================ */
.octw-credit-bar{
  position:relative;
  isolation:isolate;
  width:100%;
  height:var(--octw-cb-height);
  min-height:2.75rem;
  overflow:hidden;
  background:var(--octw-cb-bg);
  background-image:linear-gradient(90deg,
    var(--octw-cb-bg-edge) 0%,
    var(--octw-cb-bg) 12%,
    var(--octw-cb-bg) 88%,
    var(--octw-cb-bg-edge) 100%);
  contain:layout paint;
}

.octw-credit-bar__stage{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  display:block;
  pointer-events:none;
}

.octw-credit-bar__baseline{
  fill:none;
  stroke:var(--octw-cb-baseline);
  stroke-width:var(--octw-cb-baseline-w);
  vector-effect:non-scaling-stroke;
  stroke-linecap:square;
}

.octw-credit-bar__figure{
  fill:none;
  stroke:var(--octw-cb-figure);
  stroke-width:var(--octw-cb-stroke);
  stroke-linecap:round;
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
  /* stroke-opacity is written by JS as a presentation attribute. Never declare
     it here — CSS outranks presentation attributes and would pin every figure
     to a single opacity. (Same trap the old stroke-dashoffset fell into.) */
}

/* The wanderer — the one deliberately non-single-stroke figure. The glass is
   separate geometry because it needs its own colour and a fill. */
.octw-credit-bar__glass{
  fill:none;
  stroke:var(--octw-cb-figure);
  stroke-width:var(--octw-cb-stroke);
  stroke-linejoin:round;
  vector-effect:non-scaling-stroke;
}
.octw-credit-bar__brew{ fill:var(--octw-cb-brew); stroke:none; }
.octw-credit-bar__level{ fill:var(--octw-cb-brew-head); stroke:none; }

.octw-credit-bar__wanderer{
  pointer-events:auto;      /* stage is pointer-events:none; this opts back in */
  cursor:pointer;
}
.octw-credit-bar__hit{ fill:transparent; stroke:none; }
.octw-credit-bar__wanderer:focus{ outline:none; }
.octw-credit-bar__wanderer:focus-visible .octw-credit-bar__hit{
  stroke:var(--octw-cb-focus);
  stroke-width:1px;
  vector-effect:non-scaling-stroke;
}

.octw-credit-bar__meta{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  justify-content:flex-end;
  gap:var(--octw-cb-gap);
  height:100%;
  padding-inline:var(--octw-cb-pad-x);
  font-family:var(--octw-cb-font);
  font-size:var(--octw-cb-size);
  text-transform:uppercase;
  letter-spacing:var(--octw-cb-track);
}

/* scrim keeps text at AA no matter which figure walks behind it */
.octw-credit-bar__meta::before{
  content:"";
  position:absolute;
  inset-block:0;
  inset-inline-end:0;
  inline-size:var(--octw-cb-scrim-w);
  z-index:-1;
  background:linear-gradient(90deg,
    rgb(var(--octw-cb-scrim-rgb) / 0) 0%,
    rgb(var(--octw-cb-scrim-rgb) / .82) 34%,
    rgb(var(--octw-cb-scrim-rgb) / .96) 100%);
  pointer-events:none;
}

.octw-credit-bar__tagline{
  margin:0;
  color:var(--octw-cb-text-dim);
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.octw-credit-bar__word{
  display:inline-block;
  opacity:0;
  transform:translateY(.4em);
  transition:opacity var(--octw-cb-reveal-dur) ease,
             transform var(--octw-cb-reveal-dur) var(--octw-cb-ease);
}
.octw-credit-bar__word + .octw-credit-bar__word{ margin-inline-start:.32em; }

/* --- mobile fragment cycler -------------------------------------------
   Fragments are stacked in one grid area so the container is always as wide
   as the longest phrase. Nothing reflows as they swap. */
.octw-credit-bar__cycle{
  display:none;
  grid-template-areas:"frag";
  place-items:center;
}
.octw-credit-bar__frag{
  grid-area:frag;
  white-space:nowrap;
  opacity:0;
  transform:translateY(.35em);
  transition:opacity var(--octw-cb-frag-dur) ease,
             transform var(--octw-cb-frag-dur) var(--octw-cb-ease);
}
.octw-credit-bar__frag--payoff{ color:var(--octw-cb-accent); }
.octw-credit-bar__frag--visible{ opacity:1; transform:translateY(0); }

@media (max-width: 48rem){
  /* The credit link spans the whole bar here, so it owns the tap. The wanderer
     keeps wobbling but stops competing for the touch target. */
  .octw-credit-bar__wanderer{ pointer-events:none; cursor:default; }
  .octw-credit-bar__meta{ justify-content:center; }
  .octw-credit-bar__tagline{ display:none; }
  .octw-credit-bar__label{ display:none; }
  .octw-credit-bar__cycle{ display:grid; }

  /* Inert while no phrase is showing — scoped to the breakpoint so the
     desktop credit is never disabled. */
  .octw-credit-bar__link--resting{ pointer-events:none; }

  /* scrim re-centres with it, so walkers stay visible at both edges */
  .octw-credit-bar__meta::before{
    inset-inline:0;
    inline-size:auto;
    background:linear-gradient(90deg,
      rgb(var(--octw-cb-scrim-rgb) / 0) 0%,
      rgb(var(--octw-cb-scrim-rgb) / .9) 26%,
      rgb(var(--octw-cb-scrim-rgb) / .9) 74%,
      rgb(var(--octw-cb-scrim-rgb) / 0) 100%);
  }
}

/* Frozen state wins over the breakpoint via specificity — no !important.
   Reduced motion gets the plain static credit at every width. */
.octw-credit-bar--static .octw-credit-bar__cycle{ display:none; }
.octw-credit-bar--static .octw-credit-bar__label{ display:inline; }

.octw-credit-bar__tagline--visible .octw-credit-bar__word{
  opacity:1;
  transform:translateY(0);
}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(1){transition-delay:calc(var(--octw-cb-word-step)*0)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(2){transition-delay:calc(var(--octw-cb-word-step)*1)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(3){transition-delay:calc(var(--octw-cb-word-step)*2)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(4){transition-delay:calc(var(--octw-cb-word-step)*3)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(5){transition-delay:calc(var(--octw-cb-word-step)*4)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(6){transition-delay:calc(var(--octw-cb-word-step)*5)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(7){transition-delay:calc(var(--octw-cb-word-step)*6)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(8){transition-delay:calc(var(--octw-cb-word-step)*7)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(9){transition-delay:calc(var(--octw-cb-word-step)*8)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(10){transition-delay:calc(var(--octw-cb-word-step)*9)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(11){transition-delay:calc(var(--octw-cb-word-step)*10)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(12){transition-delay:calc(var(--octw-cb-word-step)*11)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(13){transition-delay:calc(var(--octw-cb-word-step)*12)}
.octw-credit-bar__tagline--visible .octw-credit-bar__word:nth-child(14){transition-delay:calc(var(--octw-cb-word-step)*13)}

.octw-credit-bar__link{
  flex:none;
  display:inline-flex;
  align-items:center;
  gap:.45em;
  min-block-size:1.5rem;          /* WCAG 2.2 SC 2.5.8 target size (minimum) */
  padding-block:0;                /* 24px target; 28px floor leaves no room for more */
  color:var(--octw-cb-text);
  letter-spacing:var(--octw-cb-track);
  text-decoration:underline;
  text-decoration-color:transparent;
  text-decoration-thickness:1px;
  text-underline-offset:.35em;
  transition:text-decoration-color .25s ease, color .25s ease;
}
.octw-credit-bar__link:hover,
.octw-credit-bar__link:focus-visible{
  color:var(--octw-cb-accent);
  text-decoration-color:currentColor;
}
.octw-credit-bar__link:focus-visible{
  outline:2px solid var(--octw-cb-focus);
  outline-offset:.25em;
  text-decoration-color:transparent;
}

.octw-credit-bar__mark{
  letter-spacing:var(--octw-cb-track-mark);
  font-weight:600;
}

.octw-credit-bar__sr{
  position:absolute;
  width:1px;height:1px;
  padding:0;margin:-1px;
  overflow:hidden;
  clip-path:inset(50%);
  white-space:nowrap;
  border:0;
}

/* ---- reduced motion: scene freezes, tagline is simply present ---- */
@media (prefers-reduced-motion: reduce){
  .octw-credit-bar__word{
    opacity:1;
    transform:none;
    transition:none;
  }
}
.octw-credit-bar--static .octw-credit-bar__word{
  opacity:1;
  transform:none;
  transition:none;
}