/* ── intro hero (top of timeline view) ────── */
  .intro-hero {
    height: 100vh;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 40px 40px;
    text-align: center;
    box-sizing: border-box;
  }
  .intro-eyebrow {
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-mute);
    margin-bottom: 36px;
  }
  .intro-title {
    font-family: var(--serif);
    font-weight: 500;
    font-size: clamp(40px, 8vw, 96px);
    line-height: 1.05;
    letter-spacing: -.02em;
    color: var(--ink);
    margin: 0;
    max-width: 14ch;
  }
  .intro-title em {
    font-style: italic;
    color: var(--accent);
  }
  .intro-meta {
    margin-top: 28px;
    font-family: var(--mono);
    font-size: 11px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  /* Hand-drawn ~320° circle around the demo badge — opens slightly at upper-left. */
  .intro-badge-arc {
    position: absolute;
    /* Badge: bottom calc(100% + 12px), right -56px, 116×116.
       Size the arc a bit larger than the badge and center it on the badge. */
    bottom: calc(100% - 18px);
    right: -78px;
    width: 160px;
    height: 160px;
    color: var(--accent);
    pointer-events: none;
    z-index: 3;
    overflow: visible;
    transform: rotate(-6deg);
    opacity: .9;
  }
  .intro-badge-arc path {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    /* Arc draws first, slower — like someone circling the badge with intent. */
    animation: flourish-draw 1.7s cubic-bezier(.6, 0, .35, 1) 0.9s forwards;
  }
  @keyframes flourish-draw {
    to { stroke-dashoffset: 0; }
  }
  @media (prefers-reduced-motion: reduce) {
    .intro-badge-arc path {
      animation: none;
      stroke-dashoffset: 0;
    }
  }
  /* intro footer (worked-at avatars + tags marquee) */
  #view-timeline.active > .intro-hero { position: relative; }

  /* Hero stickers — small clickable hints toward the playful views. */
  .hero-sticker {
    position: absolute;
    background: transparent;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--ink);
    line-height: 0;
    transform: rotate(var(--rot, 0deg));
    transition: transform .35s cubic-bezier(.2,.8,.2,1), filter .25s ease;
    filter: drop-shadow(2px 3px 0 rgba(26,26,26,.10));
    z-index: 4;
    animation: hero-sticker-float 6s ease-in-out infinite var(--float-delay, 0s);
  }
  .hero-sticker:hover,
  .hero-sticker:focus-visible {
    transform: rotate(0deg) scale(1.08) translateY(-2px);
    filter: drop-shadow(3px 4px 0 rgba(26,26,26,.18));
    outline: none;
  }
  .hero-sticker svg { display: block; }
  .hero-sticker .hs-tip {
    position: absolute;
    left: 50%;
    top: calc(100% + 10px);
    transform: translateX(-50%);
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--ink);
    background: #fff;
    border: 1.5px solid var(--ink);
    padding: 8px 12px;
    line-height: 1;
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    transition: opacity .2s ease;
  }
  .hero-sticker:hover .hs-tip,
  .hero-sticker:focus-visible .hs-tip { opacity: 1; }

  /* Per-sticker position + tilt. Avoids the title area + demo badge (upper-right). */
  .hs-folder   { top: 14%; left: 6%;  width: 84px; --rot: -8deg; --float-delay: -.5s; }
  .hs-memory   { top: 22%; right: 5%; width: 64px; --rot: 7deg;  --float-delay: -2s; }
  .hs-trex     { bottom: 16%; left: 7%; width: 70px; --rot: -3deg; --float-delay: -3.5s; }
  .hs-pixel    { bottom: 18%; right: 7%; width: 78px; --rot: 5deg; --float-delay: -1.2s; }
  .hs-timeline { top: 46%; left: 4%;  width: 90px; --rot: -4deg; --float-delay: -2.6s; }
  .hs-canvas   { top: 48%; right: 4%; width: 100px; --rot: 6deg; --float-delay: -1.8s; }

  /* Canvas/timeline lines draw themselves in once, like the headline flourish. */
  .hero-sticker .hs-line {
    stroke-dasharray: 1;
    stroke-dashoffset: 1;
    pathLength: 1;
    animation: flourish-draw 1.4s cubic-bezier(.45,0,.25,1) 1s forwards;
  }
  .hs-timeline circle {
    opacity: 0;
    animation: hero-sticker-pop .25s cubic-bezier(.4,1.6,.5,1) forwards;
  }
  .hs-timeline circle:nth-of-type(1) { animation-delay: 1.6s; }
  .hs-timeline circle:nth-of-type(2) { animation-delay: 1.75s; }
  .hs-timeline circle:nth-of-type(3) { animation-delay: 1.9s; }
  .hs-timeline circle:nth-of-type(4) { animation-delay: 2.05s; }
  @keyframes hero-sticker-pop {
    from { opacity: 0; transform: scale(0); }
    to   { opacity: 1; transform: scale(1); }
  }
  .hs-timeline circle { transform-box: fill-box; transform-origin: center; }

  /* ── Hover animations matched to each layout's character ── */

  /* Timeline: re-draw the line, then re-pop the dots. */
  @keyframes hs-line-redraw {
    from { stroke-dashoffset: 1; }
    to   { stroke-dashoffset: 0; }
  }
  .hs-timeline:hover .hs-line,
  .hs-timeline:focus-visible .hs-line {
    animation: hs-line-redraw .7s cubic-bezier(.45,0,.25,1);
  }
  .hs-timeline:hover circle,
  .hs-timeline:focus-visible circle {
    animation: hero-sticker-pop .25s cubic-bezier(.4,1.6,.5,1) both;
  }
  .hs-timeline:hover circle:nth-of-type(1),
  .hs-timeline:focus-visible circle:nth-of-type(1) { animation-delay: .55s; }
  .hs-timeline:hover circle:nth-of-type(2),
  .hs-timeline:focus-visible circle:nth-of-type(2) { animation-delay: .65s; }
  .hs-timeline:hover circle:nth-of-type(3),
  .hs-timeline:focus-visible circle:nth-of-type(3) { animation-delay: .75s; }
  .hs-timeline:hover circle:nth-of-type(4),
  .hs-timeline:focus-visible circle:nth-of-type(4) { animation-delay: .85s; }

  /* Canvas: pen flourish redraws itself. */
  .hs-canvas:hover .hs-line,
  .hs-canvas:focus-visible .hs-line {
    animation: hs-line-redraw .9s cubic-bezier(.45,0,.25,1);
  }

  /* T-Rex: hop, like the game character clearing a cactus. */
  @keyframes hs-trex-hop {
    0%   { transform: translateY(0); }
    45%  { transform: translateY(-22%); }
    100% { transform: translateY(0); }
  }
  .hs-trex svg {
    transform-origin: bottom center;
    transition: transform .2s ease;
  }
  .hs-trex:hover svg,
  .hs-trex:focus-visible svg {
    animation: hs-trex-hop .55s cubic-bezier(.3,1.2,.5,1);
  }

  /* Folder: papers fan out, same gesture as the Folders layout cards. */
  .hs-folder svg .hs-paper {
    transform-box: fill-box;
    transform-origin: center center;
    transform: translate(0, 0) rotate(0deg);
    transition: transform .4s cubic-bezier(.2,.8,.2,1);
  }
  .hs-folder svg .hs-paper-1 { transform: translate(-22px, 0) rotate(-10deg); }
  .hs-folder svg .hs-paper-2 { transform: translate(2px, 0)   rotate(3deg); }
  .hs-folder svg .hs-paper-3 { transform: translate(26px, 0)  rotate(11deg); }
  .hs-folder:hover svg .hs-paper-1,
  .hs-folder:focus-visible svg .hs-paper-1 { transform: translate(-30px, -6px) rotate(-18deg); }
  .hs-folder:hover svg .hs-paper-2,
  .hs-folder:focus-visible svg .hs-paper-2 { transform: translate(2px, -10px)  rotate(3deg); }
  .hs-folder:hover svg .hs-paper-3,
  .hs-folder:focus-visible svg .hs-paper-3 { transform: translate(34px, -6px)  rotate(20deg); }

  @media (prefers-reduced-motion: reduce) {
    .hs-timeline:hover .hs-line,
    .hs-canvas:hover .hs-line,
    .hs-timeline:hover circle,
    .hs-trex:hover svg,
    .hs-folder:hover svg .hs-paper { animation: none; transition: none; }
  }

  .hero-sticker svg .px-fill   { fill: var(--ink); }
  .hero-sticker svg .px-accent { fill: var(--accent); }

  /* Memory card sticker — matches the orange memory back from the Memory view. */
  .hs-memory-card {
    display: grid;
    place-items: center;
    width: 100%;
    aspect-ratio: 3 / 4;
    border-radius: 10px;
    background: linear-gradient(180deg, #fbdccc 0%, #e9b5a0 45%, #d97757 100%);
    box-shadow:
      inset 0 0 0 1.5px #a85339,
      inset 0 0 0 3px #f6cdbb,
      inset 0 -6px 10px -7px rgba(120,40,20,.45);
    color: #5c2812;
    position: relative;
  }
  .hs-memory-card::before {
    content: "";
    position: absolute;
    inset: 6px;
    border-radius: 6px;
    border: 1px dashed currentColor;
    opacity: .35;
    pointer-events: none;
  }
  .hs-memory-ornament {
    width: 48%;
    height: 48%;
    opacity: .6;
    fill: currentColor;
    transition: transform .45s cubic-bezier(.2,.8,.2,1), opacity .25s;
  }
  .hero-sticker.hs-memory:hover .hs-memory-ornament,
  .hero-sticker.hs-memory:focus-visible .hs-memory-ornament {
    transform: rotate(45deg) scale(1.1);
    opacity: .8;
  }

  @keyframes hero-sticker-float {
    0%, 100% { transform: rotate(var(--rot, 0deg)) translateY(0); }
    50%      { transform: rotate(var(--rot, 0deg)) translateY(-6px); }
  }
  @media (prefers-reduced-motion: reduce) {
    .hero-sticker { animation: none; }
  }
  @media (max-width: 760px) {
    .hs-folder   { top: 7%; left: 4%;  width: 54px; }
    .hs-memory   { top: 11%; right: 4%; width: 42px; }
    .hs-trex     { bottom: 16%; left: 5%; width: 48px; }
    /* Sits in the gap between the headline and the footer chips. */
    .hs-pixel    { top: 60%; bottom: auto; right: 6%; width: 50px; }
    .hs-timeline, .hs-canvas { display: none; }
    .hero-sticker .hs-tip { display: none; }
  }

  /* Title wrap is the positioning context for the demo sticker */
  .intro-title-wrap {
    position: relative;
    display: inline-block;
  }

  /* "LIVE · TRY IT" sticker — sits fully above the title's top-right corner */
  .intro-demo-badge {
    position: absolute;
    bottom: calc(100% + 12px);
    right: -56px;
    width: 116px;
    height: 116px;
    z-index: 4;
    transform: rotate(10deg);
    transition: transform .35s cubic-bezier(.2,.8,.2,1);
  }
  .intro-demo-badge:hover { transform: rotate(0deg) scale(1.04); }
  .intro-demo-badge .demo-badge {
    position: relative;
    top: auto; left: auto;
    width: 100%;
    height: 100%;
  }
  .intro-demo-badge .demo-badge-tip {
    top: auto;
    bottom: 100%;
    left: auto;
    right: 0;
    transform: translateY(-10px);
  }
  .intro-demo-badge .demo-badge-tip::before {
    top: auto;
    bottom: -4px;
    left: auto;
    right: 24px;
  }
  @media (hover: hover) and (pointer: fine) {
    .intro-demo-badge:hover .demo-badge-tip {
      transform: translateY(-4px);
    }
  }
  @media (max-width: 820px) {
    .intro-demo-badge {
      bottom: calc(100% + 8px);
      right: -16px;
      width: 84px;
      height: 84px;
    }
    .intro-badge-arc {
      bottom: calc(100% - 12px);
      right: -34px;
      width: 116px;
      height: 116px;
    }
    /* Snap on mobile: land on the top of the stage (first project),
       not its end. */
    #view-timeline.active > .stage {
      scroll-snap-align: start;
    }
  }
  .intro-footer {
    position: absolute;
    left: 0; right: 0; bottom: 24px;
    display: flex;
    align-items: center;
    gap: 32px;
    padding: 0 40px;
    box-sizing: border-box;
  }
  .intro-worked-at {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-shrink: 0;
  }
  .intro-worked-label {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--ink-mute);
  }
  .intro-avatars { display: inline-flex; }
  .intro-avatar {
    position: relative;
    width: 38px; height: 38px;
    margin-left: -10px;
    cursor: default;
    transition: transform .25s cubic-bezier(.2,.8,.2,1);
  }
  .intro-avatar:first-child { margin-left: 0; }
  .intro-avatar:hover {
    transform: translateY(-3px);
    z-index: 3;
  }
  .intro-avatar-inner {
    display: block;
    width: 100%; height: 100%;
    border-radius: 9px;
    border: 2px solid var(--bg);
    overflow: hidden;
    background: var(--card);
    box-sizing: border-box;
  }
  .intro-avatar-inner img,
  .intro-avatar-inner svg {
    display: block;
    width: 100%; height: 100%;
    object-fit: cover;
  }
  .intro-avatar::after {
    content: attr(data-name);
    position: absolute;
    bottom: calc(100% + 10px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    background: var(--ink);
    color: var(--bg);
    padding: 6px 10px;
    border-radius: 6px;
    font-family: var(--mono);
    font-size: 9px;
    letter-spacing: .14em;
    text-transform: uppercase;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 4;
  }
  .intro-avatar::before {
    content: '';
    position: absolute;
    bottom: calc(100% + 4px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    width: 0; height: 0;
    border: 5px solid transparent;
    border-top-color: var(--ink);
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
    z-index: 4;
  }
  .intro-avatar:hover::after,
  .intro-avatar:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }

  /* tags: stacked deck, hover lifts one out of the stack */
  .intro-tags {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding-left: 16px;
  }
  .intro-tag {
    font-family: var(--mono);
    font-size: 10px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--ink-soft);
    padding: 7px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 999px;
    white-space: nowrap;
    cursor: default;
    position: relative;
    transition: transform .3s cubic-bezier(.2,.8,.2,1),
                background .2s, color .2s, border-color .2s;
  }
  .intro-tag:nth-child(odd)  { transform: rotate(-3deg); }
  .intro-tag:nth-child(even) { transform: rotate(2deg); }
  .intro-tag:hover {
    transform: rotate(0deg) translateY(-6px);
    background: var(--ink);
    color: var(--bg);
    border-color: var(--ink);
    z-index: 5;
  }

  /* Mobile intro footer overrides (placed after the base rules so they win
     the cascade): avatars hug their content, tags take the rest of the row
     and bottom-align with the avatars. Worked-at label is hidden. */
  @media (max-width: 820px) {
    .intro-footer { align-items: flex-end; }
    .intro-worked-at {
      flex: 0 0 auto;
      min-width: 0;
      gap: 0;
    }
    .intro-worked-label { display: none; }
    .intro-tags {
      flex: 1 1 auto;
      min-width: 0;
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      align-content: flex-end;
      gap: 4px;
      padding-left: 0;
      margin-left: 0;
      overflow: hidden;
    }
    .intro-tag {
      flex: 0 0 auto;
      font-size: 9px;
      letter-spacing: .1em;
      padding: 5px 10px;
    }
    .intro-tag:nth-child(odd),
    .intro-tag:nth-child(even) { transform: none; }
    .intro-tag:hover {
      transform: translateY(-3px);
    }
  }