@layer sections {
  /* ---- marquee strip ---- */
  .strip {
    border-block: var(--rule);
    background: var(--c-basalt);
    padding-block: var(--space-md);
    overflow: hidden;
    display: flex;
    user-select: none;
  }

  .strip__track {
    display: flex;
    gap: var(--space-xl);
    flex: none;
    padding-inline-end: var(--space-xl);
    animation: strip-run 34s linear infinite;
    will-change: transform;
  }

  .strip:hover .strip__track { animation-play-state: paused; }

  .strip__item {
    font-family: var(--f-display);
    font-weight: 700;
    font-size: clamp(1.5rem, 3.4vw, 2.75rem);
    text-transform: uppercase;
    color: var(--c-basalt-hi);
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    line-height: 1;
  }

  .strip__item::after {
    content: "";
    inline-size: 9px;
    block-size: 9px;
    background: var(--c-ember);
    flex: none;
    rotate: 45deg;
  }

  @keyframes strip-run {
    to { transform: translate3d(-50%, 0, 0); }
  }

  @media (prefers-reduced-motion: reduce) {
    .strip__track { animation: none; }
  }

  /* ---- closing ---- */
  .outro {
    position: relative;
    min-block-size: 100svh;
    display: grid;
    align-content: end;
    padding-block-end: clamp(2rem, 6vh, 5rem);
    overflow: hidden;
    background:
      radial-gradient(70% 60% at 50% 100%, oklch(0.505 0.150 34 / 0.30), transparent 72%),
      var(--c-basalt);
    --p: 0;
  }

  .outro__ash {
    position: absolute;
    inset: 0;
    pointer-events: none;
  }

  .outro__ash i {
    position: absolute;
    inline-size: 3px;
    block-size: 3px;
    background: var(--c-sulphur);
    opacity: 0.45;
    border-radius: 50%;
    animation: ash-rise var(--dur, 14s) linear infinite;
    animation-delay: var(--delay, 0s);
    will-change: transform, opacity;
  }

  @keyframes ash-rise {
    0%   { transform: translate3d(0, 20svh, 0) scale(0.6); opacity: 0; }
    12%  { opacity: 0.5; }
    100% { transform: translate3d(var(--dx, 40px), -100svh, 0) scale(1.3); opacity: 0; }
  }

  .outro__word {
    font-family: var(--f-display);
    font-weight: 800;
    font-size: var(--t-3xl);
    line-height: 0.78;
    text-transform: uppercase;
    color: var(--c-bone);
    letter-spacing: -0.035em;
    text-align: center;
    transform: translate3d(0, calc(var(--p) * -4%), 0);
  }

  .outro__foot {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: baseline;
    gap: var(--space-md);
    padding-block-start: var(--space-lg);
    margin-block-start: var(--space-lg);
    border-block-start: var(--rule);
  }

  .outro__foot p { font-size: var(--t-xs); color: var(--c-ash); max-inline-size: 42ch; }

  @media (prefers-reduced-motion: reduce) {
    .outro__ash i { animation: none; opacity: 0.2; }
    .outro__word { transform: none; }
  }
}