/* NCD creative footer v1 (concept F1 Colossus + F4 verb marquee + F5 living desk).
   Link AFTER ncd.components.css. Needs fonts.css, tokens.css, tokens.dark.css.
   Rules this file follows
   - Tokens only, no raw hex. The footer is always an ink room: the root carries data-theme="dark", so the semantic
     tokens flip locally. Blue rule: text uses --accent (light blue); --accent-ui (mid blue) is the dot and big shapes only.
   - Content is visible by default. Every animation, transition and hidden start state lives inside
     prefers-reduced-motion: no-preference. Reduced motion = a static, complete footer (marquee becomes a wrapped list,
     the curtain becomes a normal footer).
   - Everything sits in @layer components; a page's unlayered CSS wins without !important.
   - Container-aware: sizes use cqw of the footer (container "fc") and of the wordmark block ("fc-c"). */

@property --fc-sw { syntax: "<number>"; inherits: true; initial-value: 1; }
@property --fc-p { syntax: "<number>"; inherits: false; initial-value: 0; }

@layer components {

  .fc {
    container: fc / inline-size;
    position: relative;
    isolation: isolate;
    overflow: clip;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: space-between;
    min-height: 85svh;
    background:
      radial-gradient(70cqw 38cqw at 88% 0%, color-mix(in oklab, var(--accent-ui) 30%, transparent), transparent 70%),
      radial-gradient(50cqw 30cqw at 0% 62%, color-mix(in oklab, var(--accent-ui) 14%, transparent), transparent 70%);
    background-color: var(--bg);
    color: var(--fg);
    font-family: var(--serif);
    font-size: var(--fs-base);
    line-height: var(--sp-5);
  }
  @media (min-width: 800px) { .fc { min-height: 100svh; } }
  .fc *, .fc *::before, .fc *::after { box-sizing: border-box; }
  .fc :where(h2, p, ul, address) { margin: 0; padding: 0; }
  .fc :where(ul) { list-style: none; }
  .fc a:focus-visible, .fc button:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }

  .fc-inner {
    width: 100%;
    max-width: var(--max);
    margin-inline: auto;
    padding-inline: var(--gut);
  }
  .fc-eyebrow {
    color: var(--fg-muted);
    font-family: var(--disp);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    line-height: var(--sp-5);
    letter-spacing: var(--tr-eyebrow);
    text-transform: uppercase;
  }

  /* ---------- F5 living desk ---------- */
  .fc-desk {
    display: grid;
    gap: var(--sp-5);
    padding-block: var(--sp-9) var(--sp-8);
    font-style: normal;
  }
  .fc-desk-top {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--sp-2) var(--sp-6);
    color: var(--fg-muted);
    font-family: var(--disp);
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    letter-spacing: var(--tr-eyebrow);
    line-height: var(--sp-5);
    text-transform: uppercase;
  }
  .fc-status { display: inline-flex; align-items: center; gap: var(--sp-3); color: var(--fg); }
  .fc-pulse {
    position: relative;
    flex: none;
    width: var(--sp-3);
    height: var(--sp-3);
    border-radius: var(--r-round);
    background: var(--accent-ui);
  }
  .fc-time { font-variant-numeric: tabular-nums; }
  .fc-mail-wrap { display: grid; justify-items: start; gap: var(--sp-4); }
  .fc-mail {
    --hop: 0px;
    position: relative;
    display: inline-block;
    max-width: 100%;
    padding-inline-start: .55em;
    color: var(--fg);
    font-family: var(--disp);
    font-size: clamp(var(--fs-lg), 7.4cqw, calc(var(--sp-10) + var(--sp-4)));
    font-weight: var(--fw-semibold);
    line-height: 1.1;
    letter-spacing: var(--tr-display);
    text-decoration: none;
    overflow-wrap: anywhere;
    border-radius: var(--r-md);
  }
  .fc-mail-t {
    background: linear-gradient(var(--accent), var(--accent)) no-repeat 0 100% / 100% 0;
    padding-block-end: .04em;
  }
  .fc-mail:hover { color: var(--accent); }
  .fc-mail:hover .fc-mail-t,
  .fc-mail:focus-visible .fc-mail-t { background-size: 100% .05em; }
  .fc-mail-dot {
    position: absolute;
    inset-inline-start: 0;
    top: .52em;
    width: .26em;
    height: .26em;
  }
  .fc-mail-dot::before {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--r-round);
    background: var(--accent-ui);
  }
  .fc-mail:is(:hover, :focus-visible, [data-copied="true"]) .fc-mail-dot { translate: var(--hop) 0; }
  .fc-desk-sub {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--sp-2) var(--sp-5);
    color: var(--fg-muted);
    font-size: var(--fs-md);
    line-height: var(--sp-6);
  }
  .fc-desk-sub > span:first-child { max-width: 52ch; text-wrap: pretty; }
  .fc-mailto, .fc-link {
    color: var(--fg);
    text-decoration: underline;
    text-decoration-color: var(--accent);
    text-underline-offset: .4em;
  }
  .fc-mailto { display: inline-flex; align-items: center; min-height: 44px; font-family: var(--disp); font-size: var(--fs-base); font-weight: var(--fw-semibold); }
  .fc-live:not(:empty) {
    padding: var(--sp-1) var(--sp-3);
    border: 1px solid var(--line-c);
    border-radius: var(--r-pill);
    color: var(--accent);
    font-family: var(--disp);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    line-height: var(--sp-5);
  }

  /* ---------- F4 verb marquee ---------- */
  .fc-marquee { display: grid; gap: var(--sp-5); padding-block: var(--sp-7); border-block: 1px solid var(--line-c); }
  .fc-marquee-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--sp-3); }
  .fc-pause {
    min-height: 44px;
    padding-inline: var(--sp-5);
    border: 1px solid var(--line-c);
    border-radius: var(--r-pill);
    background: transparent;
    color: var(--fg);
    font-family: var(--disp);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    cursor: pointer;
  }
  .fc-pause[hidden] { display: none; }
  .fc-pause[aria-pressed="true"] { background: var(--fg); color: var(--bg); }
  .fc-rows { display: grid; gap: var(--sp-4); overflow: clip; }
  .fc-marquee:not([data-loop]) .fc-row { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gut); }
  .fc-marquee:not([data-loop]) .fc-rows { gap: 0; }
  .fc-verbs { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); }
  .fc-verbs li {
    display: inline-flex;
    align-items: center;
    flex: none;
    font-family: var(--disp);
    font-size: clamp(var(--fs-4xl), 9cqw, calc(var(--sp-10) + var(--sp-8)));
    font-weight: var(--fw-bold);
    line-height: 1.12;
    letter-spacing: var(--tr-display);
    white-space: nowrap;
    color: var(--fg);
  }
  .fc-verbs li::after {
    content: "";
    flex: none;
    width: .17em;
    height: .17em;
    margin-inline-start: .3em;
    border-radius: var(--r-round);
    background: var(--accent-ui);
  }
  /* style 1: outline */
  .fc-marquee:not([data-loop]) .fc-verbs li:nth-child(3n+1),
  .fc-marquee[data-loop] [data-row="1"] li {
    color: transparent;
    -webkit-text-stroke: 1.5px var(--fg);
    font-weight: var(--fw-light);
  }
  @supports not (-webkit-text-stroke: 1px red) {
    .fc-marquee:not([data-loop]) .fc-verbs li:nth-child(3n+1),
    .fc-marquee[data-loop] [data-row="1"] li { color: var(--fg); }
  }
  /* style 2: ink-on-bone chips */
  .fc-marquee:not([data-loop]) .fc-verbs li:nth-child(3n+2),
  .fc-marquee[data-loop] [data-row="2"] li {
    padding: .06em .42em .12em;
    border-radius: var(--r-pill);
    background: var(--fg);
    color: var(--bg);
    font-size: clamp(var(--fs-3xl), 6.2cqw, calc(var(--sp-10)));
  }
  /* style 3: serif italic, blue fill on hover */
  .fc-marquee:not([data-loop]) .fc-verbs li:nth-child(3n),
  .fc-marquee[data-loop] [data-row="3"] li {
    font-family: var(--serif);
    font-style: italic;
    font-weight: var(--fw-light);
    letter-spacing: var(--tr-wordmark);
  }
  @media (hover: hover) {
    .fc-marquee:not([data-loop]) .fc-verbs li:nth-child(3n):hover,
    .fc-marquee[data-loop] [data-row="3"] li:hover { color: var(--accent-ui); }
    .fc-marquee:not([data-loop]) .fc-verbs li:nth-child(3n+1):hover,
    .fc-marquee[data-loop] [data-row="1"] li:hover { color: var(--fg); }
  }

  /* ---------- nav columns ---------- */
  .fc-nav {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--sp-7) var(--sp-6);
    padding-block: var(--sp-8) var(--sp-6);
  }
  @container fc (min-width: 900px) {
    .fc-nav { grid-template-columns: 2.3fr 1fr 1.4fr 1fr 1fr; }
  }
  .fc-nav h2 { margin-block-end: var(--sp-3); }
  .fc-nav ul { display: grid; gap: var(--sp-1); }
  .fc-nav a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    color: var(--fg);
    font-family: var(--disp);
    font-size: var(--fs-md);
    font-weight: var(--fw-medium);
    line-height: var(--sp-6);
    text-decoration: none;
    text-underline-offset: .35em;
    text-decoration-color: var(--accent);
    text-wrap: balance;
    border-radius: var(--r-sm);
  }
  .fc-nav a:hover { color: var(--accent); text-decoration: underline; }
  .fc-note {
    max-width: 52ch;
    padding-block-end: var(--sp-7);
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--sp-5);
  }

  /* ---------- F1 Colossus wordmark ---------- */
  .fc-colossus {
    container: fc-c / inline-size;
    display: grid;
    padding-block: var(--sp-6) var(--sp-8);
  }
  .fc-word {
    --fc-fit: 16;
    grid-area: 1 / 1;
    display: block;
    color: var(--fg);
    font-family: var(--disp);
    font-size: calc(var(--fc-fit) * 1cqw);
    line-height: .94;
    letter-spacing: var(--tr-wordmark);
    text-decoration: none;
    border-radius: var(--r-lg);
  }
  .fc-line { display: block; white-space: nowrap; }
  .fc-w {
    font-weight: calc(380 + 260 * var(--fc-sw) + 160 * var(--fc-p));
    font-variation-settings: "opsz" calc(36 + 60 * var(--fc-p));
  }
  .fc-dot { position: relative; display: inline-block; width: .27em; color: transparent; }
  .fc-dot::before {
    content: "";
    position: absolute;
    inset-inline-start: .02em;
    bottom: .07em;
    width: .2em;
    height: .2em;
    border-radius: var(--r-round);
    background: var(--accent-ui);
  }
  .fc-tag {
    grid-area: 2 / 1;
    padding-block-start: var(--sp-5);
    max-width: 26ch;
    color: var(--fg-muted);
    font-family: var(--serif);
    font-size: var(--fs-lg);
    font-style: italic;
    line-height: var(--sp-6);
  }
  @container fc-c (min-width: 640px) {
    .fc-tag { grid-area: 1 / 1; align-self: end; justify-self: end; padding: 0; text-align: end; font-size: var(--fs-xl); line-height: var(--sp-7); }
  }

  /* ---------- bottom bar ---------- */
  .fc-base {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-1) var(--sp-5);
    padding-block: var(--sp-4) var(--sp-5);
    border-top: 1px solid var(--line-c);
    color: var(--fg-muted);
    font-size: var(--fs-sm);
    line-height: var(--sp-5);
  }
  .fc-top {
    display: inline-flex;
    align-items: center;
    gap: var(--sp-2);
    min-height: 44px;
    color: var(--fg);
    font-family: var(--disp);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: none;
    border-radius: var(--r-sm);
  }
  .fc-top:hover { color: var(--accent); text-decoration: underline; text-underline-offset: .35em; }
  .fc-sig { flex-basis: 100%; text-align: center; }
  .fc-sig a {
    display: inline-block;
    padding-block: var(--sp-2);
    color: var(--accent);
    font-family: var(--disp);
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    text-decoration: underline;
    text-underline-offset: .35em;
    border-radius: var(--r-sm);
  }

  /* ---------- touch: no hover-only info ---------- */
  @media (hover: none) {
    .fc-mail-t { background-size: 100% .05em; }
    .fc-marquee:not([data-loop]) .fc-verbs li:nth-child(3n),
    .fc-marquee[data-loop] [data-row="3"] li:nth-child(3n+1) { color: var(--accent-ui); }
  }

  /* ---------- locked state: the final composition, frozen, for specimens and docs ---------- */
  .fc[data-state="locked"] .fc-w { --fc-p: calc(.35 + .3 * var(--i)); }

  /* ======================================================================
     MOTION. Everything below is gated; reduced motion never reaches it.
     ====================================================================== */
  @media (prefers-reduced-motion: no-preference) {
    .fc { --fc-motion: 1; --fc-lift: clamp(240px, 60svh, 720px); }

    /* marquee */
    .fc-marquee[data-loop] .fc-rows { gap: var(--sp-5); }
    .fc-marquee[data-loop] .fc-track { display: flex; width: max-content; animation: fc-drift var(--fc-dur, 70s) linear infinite; }
    .fc-marquee[data-loop] .fc-verbs { flex-wrap: nowrap; gap: var(--sp-6); padding-inline-end: var(--sp-6); }
    .fc-marquee[data-loop] [data-row="2"] .fc-track { --fc-dur: 56s; animation-direction: reverse; }
    .fc-marquee[data-loop] [data-row="3"] .fc-track { --fc-dur: 84s; }
    .fc-marquee[data-loop] [data-row="2"] .fc-verbs { gap: var(--sp-4); padding-inline-end: var(--sp-4); }
    .fc-marquee[data-loop] .fc-rows { -webkit-mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent); mask-image: linear-gradient(90deg, transparent, black 4%, black 96%, transparent); }
    @media (hover: hover) { .fc-row:hover .fc-track { animation-play-state: paused; } }
    .fc[data-paused="true"] :is(*, *::before, *::after) { animation-play-state: paused; }
    .fc[data-state="locked"] .fc-track { animation-play-state: paused; animation-delay: -17s; }
    @keyframes fc-drift { to { transform: translateX(-50%); } }

    /* desk */
    .fc-pulse::after {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: inherit;
      border: 2px solid var(--accent-ui);
      animation: fc-ping 2.4s var(--ease-out) infinite;
    }
    @keyframes fc-ping { from { transform: scale(1); opacity: .9; } to { transform: scale(3.2); opacity: 0; } }
    .fc-mail-dot { transition: translate var(--dur-slow) var(--ease-spring); }
    .fc-mail-t { transition: background-size var(--dur-base) var(--ease-out); }
    .fc-mail:is(:hover, :focus-visible, [data-copied="true"]) .fc-mail-dot::before { animation: fc-arc var(--dur-slow) var(--ease-out); }
    @keyframes fc-arc { 45% { transform: translateY(-.6em); } }

    /* nav links */
    .fc-nav a { transition: color var(--dur-quick) var(--ease-out), translate var(--dur-quick) var(--ease-out); }
    .fc-nav a:hover { translate: var(--sp-1) 0; }

    /* colossus: pointer swell, hop */
    .fc-w { transition: font-weight var(--dur-base) var(--ease-out), font-variation-settings var(--dur-base) var(--ease-out); }
    .fc-word:is(:hover, :focus-visible, :active) .fc-dot::before { animation: fc-hop var(--dur-slow) var(--ease-spring); }
    @keyframes fc-hop { 40% { transform: translateY(-1.1em); } }
    @media (hover: none) {
      .fc-w { animation: fc-wave 7s ease-in-out infinite; animation-delay: calc(var(--i) * -1.7s); }
      @keyframes fc-wave { 50% { --fc-p: 1; } }
    }
    @supports (animation-timeline: view()) {
      .fc-word { animation: fc-swell linear both; animation-timeline: view(); animation-range: entry 10% cover 50%; }
      @keyframes fc-swell { from { --fc-sw: 0; } to { --fc-sw: 1; } }
    }

    /* sticky-curtain: the page above is the cover and lifts away; the footer is revealed from under it.
       A footer taller than the viewport cannot use position:sticky (its top would never show), so the curtain is a
       scroll-driven uncover: the footer travels slower than the page until it settles. */
    @supports (animation-timeline: view()) {
      .fc:not([data-state="locked"]) { animation: fc-uncover linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
      @keyframes fc-uncover { from { transform: translateY(calc(var(--fc-lift) * -1)); } to { transform: none; } }
      .fc-cover, :where(main, [data-ncd-cover]):has(+ .fc:not([data-state="locked"])) {
        position: relative;
        z-index: var(--z-raised);
        background: var(--bg);
        border-end-start-radius: var(--r-xl);
        border-end-end-radius: var(--r-xl);
        box-shadow: var(--shadow-3);
      }
    }
  }
}