/* Kelsuu homepage motion: everything below the hero. Owned by the page-motion agent.
   One scroll language, per the owner: content is in focus near the middle of the
   viewport and drifts softly out of focus as it moves toward the top and leaves —
   a shallow depth of field, not a reveal trick. No clip-path/mask reveals on any
   imagery, no turbulence. No JS. Gated behind @supports so a browser without
   animation-timeline (or a person who asked for less motion) sees the finished,
   correct page with no animation at all — see the base rules before each block. */

:root{
  --stitch: steps(8,jump-end); /* a running-stitch reveals one dash at a time */
}

/* ---- 1. Depth of field, used sparingly ---------------------------------------- */
/* The owner's idea ("in focus in the middle, out of focus as it goes higher") belongs to
   the hero lockup (motion-hero.css) and, here, only to the intro statement that follows
   it, as one continuous lens. Everything else on the page stays sharp. Arrival is sharp;
   only the drift out at the top softens. */
.intro p.rv{ filter:blur(0); opacity:1; transform:none; }

@supports (animation-timeline: view()){
  @media (prefers-reduced-motion: no-preference){
    @keyframes focus-out{
      0%, 55%{ filter:blur(0);   opacity:1;   transform:none; }
      100%   { filter:blur(8px); opacity:.25; transform:translateY(-12px); }
    }
    .intro p.rv{
      animation:focus-out .1s linear both;
      animation-timeline:view();
      animation-range:cover 0% cover 100%;
    }
  }
}

/* ---- 2. Links are stitched ------------------------------------------------------ */
/* A running stitch, not an underline: short dashes laid down left to right on
   hover or focus, picked out again on leave. Footer links start bare; the story
   link's permanent rule is swapped for the same stitch so it only shows on touch. */
.footer-col a, .makers-text .arrow-link, .site-header nav a:not(.pill){
  position:relative;
  display:inline-block;
}
/* "Our story" keeps the handoff's permanent 1px Paper rule; the stitch lies just under it on hover. */
.footer-col a::after, .makers-text .arrow-link::after, .site-header nav a:not(.pill)::after{
  content:"";
  position:absolute; left:0; bottom:-3px;
  width:0; height:1px;
  background-image:repeating-linear-gradient(to right, currentColor 0 4px, transparent 4px 9px);
  background-repeat:repeat-x;
  transition:width .5s var(--stitch);
}
.footer-col a:hover::after, .footer-col a:focus-visible::after,
.makers-text .arrow-link:hover::after, .makers-text .arrow-link:focus-visible::after,
.site-header nav a:not(.pill):hover::after, .site-header nav a:not(.pill):focus-visible::after{
  width:100%;
}

/* ---- 3. Buttons press ------------------------------------------------------------ */
.notify button{
  transition:background .4s cubic-bezier(.22,.61,.2,1), transform .2s cubic-bezier(.22,.61,.2,1), color .4s cubic-bezier(.22,.61,.2,1);
}
.notify button:active{ transform:scale(.97) translateY(1px); }

/* ---- Restored micro-interactions (dropped in the motion rewrite without being asked) ---- */
.makers-text .arrow-link::after{bottom:-10px}
.site-header nav a:not(.pill)::after{bottom:-7px}
.site-header .pill{transition:background-color .45s cubic-bezier(.16,1,.3,1),color .45s cubic-bezier(.16,1,.3,1),border-color .45s cubic-bezier(.16,1,.3,1)}
.site-header .pill:hover,.site-header .pill:focus-visible{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.arrow-link span{display:inline-block;transition:transform .5s cubic-bezier(.16,1,.3,1)}
.arrow-link:hover span,.arrow-link:focus-visible span{transform:translateX(6px)}
.card .ph img{transition:transform .9s cubic-bezier(.16,1,.3,1)}
.card .ph figcaption{transition:opacity .5s ease,transform .5s cubic-bezier(.16,1,.3,1)}
.card .dots{transition:gap .5s cubic-bezier(.16,1,.3,1)}
.card .dot{transition:transform .5s cubic-bezier(.16,1,.3,1)}
.card .ph{overflow:hidden}
.card:hover .ph img{transform:scale(1.035)}
.card:hover .ph figcaption{opacity:.55;transform:translateY(4px)}
.card:hover .dots{gap:10px}
.card:hover .dot{transform:scale(1.15)}
.swatch-chip{transition:transform .7s cubic-bezier(.16,1,.3,1)}
.swatch:hover .swatch-chip{transform:translateY(-8px)}

/* ---- Reduced motion: keep every interaction, just make it instant --------------- */
@media (prefers-reduced-motion: reduce){
  .footer-col a::after, .makers-text .arrow-link::after, .site-header nav a::after, .site-header .pill,
  .arrow-link span, .card .ph img, .card .ph figcaption, .card .dots, .card .dot, .swatch-chip,
  .notify button{
    transition-duration:.001s;
  }
}