/* ==========================================================================
   SiteYourStory — How it happens, as pinned cards on a route.

   The pattern is the "how it works" card layout: each step on its own pinned
   surface, offset left and right, joined by a dashed path.

   What is NOT taken from it: the palette. That component is orange / blue /
   purple on flat white with a Comic Sans numeral, which would read as a
   different website bolted into this one. Every colour here is a site token —
   the warm charcoal ink, --accent for the pin and the drawn line, --site-line
   for the route. The type is untouched: same faces, same sizes, same weights,
   same hierarchy as before this file existed.

   The section already had the bones — story.css calls it "How it happens, as
   a route", with the stages alternating down a centre line and reveal.js
   driving --p / --q / --route. This adds the surface and swaps the straight
   line for a curve; it does not rebuild the section.

   Loaded after motion.css, on index.html only.
   ========================================================================== */

/* --- The card ------------------------------------------------------------
   Frosted rather than opaque: an opaque panel here would punch four white
   holes in the ground the rest of the page is built on. At 0.58 the mountain
   still reads through it and the ink still clears AA on top.
   ------------------------------------------------------------------------ */
@media (min-width: 900px) {
  .stage {
    padding: clamp(22px, 2.2vw, 32px) clamp(22px, 2.4vw, 34px) clamp(24px, 2.6vw, 34px) !important;
    background: rgba(252, 251, 249, 0.58);
    border: 1px solid var(--site-line);
    border-radius: 20px;
    backdrop-filter: blur(12px) saturate(112%);
    -webkit-backdrop-filter: blur(12px) saturate(112%);
    box-shadow: 0 22px 46px -32px rgba(60, 48, 36, 0.5);
    /* `rotate` is an independent property, so this composes with the
       translate/scale story.css already drives from --p instead of fighting
       it. 1deg, not the source component's 8 — at 8 the text stops being
       something you read and starts being a prop. */
    rotate: 1deg;
  }
  .stage[data-from='left'] { rotate: -1deg; }

  .stage:hover {
    background: rgba(252, 251, 249, 0.68);
    box-shadow: 0 26px 54px -30px rgba(60, 48, 36, 0.55);
  }

  /* --- The pin ----------------------------------------------------------
     story.css used ::before as the dot that sat on the old straight centre
     line. The line is a curve now and the dot has nowhere to sit, so the
     pseudo-element is reused for the pin the card hangs from. Masked rather
     than inlined, so one definition serves all four and it takes currentcolor
     from the accent. */
  .stage::before {
    content: '';
    position: static;
    display: block;
    width: clamp(22px, 2vw, 28px);
    height: clamp(22px, 2vw, 28px);
    inset: auto;
    border-radius: 0;
    margin: 0 0 clamp(14px, 1.6vh, 20px);
    background: var(--accent);
    opacity: calc(0.3 + var(--p, 0) * 0.7);
    -webkit-mask: var(--pin) center / contain no-repeat;
    mask: var(--pin) center / contain no-repeat;
    transition: opacity 0.5s var(--ease);
  }
  /* Steps 2 and 4 are right-aligned, so the pin hangs from their right edge. */
  .stage[data-step='2']::before,
  .stage[data-step='4']::before { margin-left: auto; }

  /* The spur that joined each card to the straight line, and the line itself.
     Both are replaced by the drawn path in route.js. */
  .stage::after { display: none !important; }
  .stage-list::before { display: none !important; }

  /* --- The route --------------------------------------------------------- */
  .route {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
    overflow: visible;
  }
  .stage-list { position: relative; }
  .stage { z-index: 1; }

  /* The dashes. Faint, and moving only because the page is moving. */
  .route-dash {
    fill: none;
    stroke: var(--site-ink-3);
    stroke-width: 1.5;
    stroke-linecap: round;
    opacity: 0.5;
  }

  /* The accent drawing along the same curve as the section is descended. */
  /* Wider and softer than the dashes that run over it, so the two read as one
     line being travelled rather than two lines on the same curve. */
  .route-draw {
    fill: none;
    stroke: var(--accent);
    stroke-width: 2.2;
    stroke-linecap: round;
    opacity: 0.5;
  }
}

:root {
  --pin: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M16 3a1 1 0 0 1 .117 1.993l-.117 .007v4.764l1.894 3.789a1 1 0 0 1 .1 .331l.006 .116v2a1 1 0 0 1 -.883 .993l-.117 .007h-4v4a1 1 0 0 1 -1.993 .117l-.007 -.117v-4h-4a1 1 0 0 1 -.993 -.883l-.007 -.117v-2a1 1 0 0 1 .06 -.34l.046 -.107l1.894 -3.791v-4.762a1 1 0 0 1 -.117 -1.993l.117 -.007h8z'/%3E%3C/svg%3E");
}

/* --- Narrow ---------------------------------------------------------------
   Below the route breakpoint the stages are already a plain stack, and the
   source component drops its connector below md for the same reason: a curve
   between two things sitting directly above one another is just a line. The
   cards stay — flat to the grid, no rotation, no blur to pay for.
   ------------------------------------------------------------------------ */
@media (max-width: 899px) {
  .stage {
    padding: clamp(20px, 5vw, 26px) !important;
    background: rgba(252, 251, 249, 0.56);
    border: 1px solid var(--site-line);
    border-radius: 16px;
    box-shadow: 0 14px 30px -24px rgba(60, 48, 36, 0.45);
  }
  .stage::before {
    content: '';
    display: block;
    width: 22px;
    height: 22px;
    margin: 0 0 12px;
    background: var(--accent);
    opacity: 0.75;
    -webkit-mask: var(--pin) center / contain no-repeat;
    mask: var(--pin) center / contain no-repeat;
  }
  .route { display: none; }
}

/* Reduced motion keeps the surface and the route, and stops the dashes. */
@media (prefers-reduced-motion: reduce) {
  .route-dash { animation: none; }
}