/*
      Wordmark-to-Initials Crossfade
      ─────────────────────────────────────────────────────────────
      A scroll-driven header lockup that shrinks "jon humphrey" to
      "jh" as you scroll, with a cursor that tracks the shrinking
      container purely through flex layout. Zero JavaScript.

      @supports check ensures a graceful fallback - the full name
      stays put, statically, on browsers without support.
      ─────────────────────────────────────────────────────────────
    */

    @layer reset, base, components;

    @layer reset {
      *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
      html { scroll-behavior: smooth; }
    }

    @layer base {
      :root {
        --colour-bg:         #06060f;
        --colour-surface:    #0c0c1e;
        --colour-border:     #1c1c36;
        --colour-text:       #eaeaf4;
        --colour-text-muted: #7e7ea6;
        --colour-cyan:       #40d9ff;
        --colour-green:      #7fff8a;
        --font-display: system-ui, sans-serif;
        --font-mono:    ui-monospace, 'Cascadia Code', monospace;
      }

      @media (prefers-color-scheme: light) {
        :root:not([data-theme="dark"]) {
          --colour-bg:         #f4f4f8;
          --colour-surface:    #ffffff;
          --colour-border:     #c9c9db;
          --colour-text:       #12121e;
          --colour-text-muted: #4e4e6a;
          --colour-cyan:       #ae5600;
          --colour-green:      #7a2e00;
        }
      }

      :root[data-theme="light"] {
        --colour-bg:         #f4f4f8;
        --colour-surface:    #ffffff;
        --colour-border:     #c9c9db;
        --colour-text:       #12121e;
        --colour-text-muted: #4e4e6a;
        --colour-cyan:       #ae5600;
        --colour-green:      #7a2e00;
      }

      .reading-page {
        background: var(--colour-bg);
        color: var(--colour-text);
        font-family: var(--font-display);
        font-size: clamp(1rem, 2vw, 1.125rem);
        line-height: 1.7;
      }
    }

    @layer components {

      /* ── Wordmark demo ── */
      /*
        Zero-height sibling, NOT a wrapper around .wordmark-demo — wrapping
        it would shrink .wordmark-demo's own sticky containing block down to
        the wrapper's height, un-sticking it again almost immediately after
        engagement. This only hosts the sentinel and the named timeline
        (visible to .wordmark-demo's descendants via timeline-scope), and
        sits right before .wordmark-demo so the two share the same natural
        top edge.
      */
      .wordmark-demo-zone {
        position: relative;
        block-size: 0;
      }

      /*
        Zero-footprint marker sharing .wordmark-demo's natural (pre-sticky)
        top edge. Its own height (not .wordmark-demo's) sets how much scroll
        the animation spans once triggered — see the @supports block below.
      */
      .wordmark-demo__sentinel {
        position: absolute;
        inset-block-start: 0;
        inset-inline-start: 0;
        inline-size: 1px;
        block-size: 240px; /* must match RANGE_PX in the e2e test */
        pointer-events: none;
      }

      .wordmark-demo {
        position: sticky;
        inset-block-start: var(--safe-top-padding, 3.8rem);
        z-index: 10;
        display: flex;
        justify-content: center;
        padding-block: 1.5rem;
        background: color-mix(in srgb, var(--colour-bg) 88%, transparent);
        backdrop-filter: blur(6px);
        border-block-end: 1px solid var(--colour-border);
      }

      /* Embedded pen viewer hides site-header entirely (see styles/layout.css),
         so there's no fixed header left to clear — stick to the very top. */
      :root[data-embed="pen"] .wordmark-demo {
        inset-block-start: 0;
      }

      .wordmark {
        display: inline-flex;
        align-items: baseline;
        font-family: var(--font-mono);
        font-size: 1.35rem;
        font-weight: 600;
        color: var(--colour-text);
      }

      .wordmark__text {
        position: relative;
        display: inline-grid;
        /* Fallback (no @supports, or prefers-reduced-motion): the compact
           "jh" width, not the full name — see the @supports block below. */
        inline-size: 2ch; /* "jh" = 2 characters */
        overflow: hidden;
        white-space: nowrap;
      }

      .wordmark__full,
      .wordmark__short {
        grid-area: 1 / 1;
      }

      .wordmark__full {
        opacity: 0;
      }

      /*
        Shape, glow and blink cadence mirror .site-logo > .cursor in the
        real header (styles/components.css) - this pen is the prototype for
        that element, so the two should read as the same cursor.
      */
      .wordmark__cursor {
        display: inline-block;
        inline-size: .55em;
        block-size: 1.1em;
        margin-inline-start: 3px;
        border-radius: 1px;
        background: var(--colour-green);
        box-shadow:
          0 0 6px var(--colour-green),
          0 0 14px color-mix(in srgb, var(--colour-green) 35%, transparent);
        animation: wordmark-blink 1.1s step-end infinite;
      }

      @supports (animation-timeline: scroll()) {
        /*
          Must sit on a common ancestor of BOTH the sentinel (defines the
          timeline) and .wordmark-demo's descendants (consume it) — that's
          .reading-page, since the zone and .wordmark-demo are now siblings.
        */
        .reading-page {
          timeline-scope: --wordmark-stuck;
        }

        /*
          The sentinel's "exit" phase is measured against the top edge,
          shifted down by view-timeline-inset to line up with .wordmark-demo's
          own sticky offset. Its top edge crossing that line coincides with
          .wordmark-demo actually becoming stuck (both start at the zone's
          natural top); its bottom edge crossing it, 240px of scroll later,
          is where the crossfade finishes.
        */
        .wordmark-demo__sentinel {
          view-timeline-name: --wordmark-stuck;
          view-timeline-axis: block;
          view-timeline-inset: var(--safe-top-padding, 3.8rem) 0;
        }

        .wordmark__text {
          animation: wordmark-shrink linear both;
          animation-timeline: --wordmark-stuck;
          animation-range: exit 0% exit 100%;
        }

        .wordmark__full {
          animation: wordmark-fade-out linear both;
          animation-timeline: --wordmark-stuck;
          animation-range: exit 0% exit 100%;
        }

        .wordmark__short {
          animation: wordmark-fade-in linear both;
          animation-timeline: --wordmark-stuck;
          animation-range: exit 0% exit 100%;
        }
      }

      /*
        The shrink finishes at 80% of the range and holds; the crossfade
        doesn't start until that same 80% mark, so "jon humphrey" clips
        down to "jo" (container already at 2ch) before it fades to "jh" —
        rather than blending across the whole range.
      */
      @keyframes wordmark-shrink {
        from { inline-size: 12ch; }
        80%  { inline-size: 2ch; }
        to   { inline-size: 2ch; } /* "jh" = 2 characters */
      }

      @keyframes wordmark-fade-out {
        from, 80% { opacity: 1; }
        to        { opacity: 0; }
      }

      @keyframes wordmark-fade-in {
        from, 80% { opacity: 0; }
        to        { opacity: 1; }
      }

      @keyframes wordmark-blink {
        0%, 50%      { opacity: 1; }
        50.01%, 100% { opacity: 0; }
      }

      @media (prefers-reduced-motion: reduce) {
        .wordmark__text,
        .wordmark__full,
        .wordmark__short {
          animation: none;
        }

        .wordmark__cursor {
          animation: none;
          opacity: 1;
        }
      }

      /* ── Article ── */
      .reading-article {
        max-inline-size: 65ch;
        margin-inline: auto;
        padding-block: 4rem 8rem;
        padding-inline: clamp(1.25rem, 5vw, 2rem);
      }

      :root[data-embed="pen"] .reading-article {
        padding-block-start: 1.5rem;
      }

      .reading-article > header { margin-block-end: 3rem; }

      .reading-article > .label {
        font-family: var(--font-mono);
        font-size: .72rem;
        color: var(--colour-green);
        letter-spacing: .15em;
        text-transform: uppercase;
        margin-block-end: .75rem;
        display: flex;
        align-items: center;
        gap: .6rem;
      }

      .reading-article > .label::before {
        content: '';
        inline-size: 1.5rem;
        block-size: 1px;
        background: var(--colour-green);
        box-shadow: 0 0 6px var(--colour-green);
        display: block;
      }

      h1 {
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        font-weight: 700;
        letter-spacing: -.02em;
        line-height: 1.15;
        margin-block-end: 1rem;
      }

      h1 strong {
        color: var(--colour-cyan);
        text-shadow: 0 0 20px rgba(64, 217, 255, .4);
      }

      .reading-article > .meta {
        font-family: var(--font-mono);
        font-size: .72rem;
        color: var(--colour-text-muted);
        display: flex;
        gap: 1.5rem;
      }

      h2 {
        font-size: 1.25rem;
        font-weight: 600;
        letter-spacing: -.01em;
        margin-block: 2.5rem .75rem;
        color: var(--colour-text);
      }

      p { color: var(--colour-text-muted); margin-block-end: 1.25rem; }

      p:last-child { margin-block-end: 0; }

      code {
        font-family: var(--font-mono);
        font-size: .875em;
        color: var(--colour-green);
        background: var(--colour-surface);
        padding-block: .1em;
        padding-inline: .35em;
        border-radius: 3px;
      }

      pre {
        background: var(--colour-surface);
        border: 1px solid var(--colour-border);
        border-radius: 6px;
        padding: 1.25rem;
        overflow-x: auto;
        font-family: var(--font-mono);
        font-size: .8rem;
        line-height: 1.75;
        margin-block-end: 1.25rem;
      }

      pre code {
        background: none;
        padding: 0;
        color: var(--colour-text-muted);
        font-size: inherit;
      }

      ._cyan  { color: var(--colour-cyan); }
      ._green { color: var(--colour-green); }
      ._amber { color: #ffbe00; }

      .callout-note {
        border: 1px solid var(--colour-border);
        border-inline-start: 2px solid var(--colour-cyan);
        border-radius: 4px;
        padding: 1rem 1.25rem;
        background: var(--colour-surface);
        font-family: var(--font-mono);
        font-size: .8rem;
        color: var(--colour-text-muted);
        line-height: 1.65;
        margin-block: 2rem;
      }
    }