/* ==========================================================================
   KOBRO — kobro-motion.css
   Motion layer. Additive: only adds transitions and reveal states to
   elements kobro-2026.css already styles. Everything here is disabled under
   prefers-reduced-motion, and every element is visible if JS never runs.
   ========================================================================== */

:root{
  --m-fast:.28s;
  --m-mid:.55s;
  --m-slow:.9s;
  --m-ease:cubic-bezier(.16,1,.3,1);
}

/* ---------- 1. reveal on scroll ---------------------------------------- */
/* js adds .motion-ready to <html>; without it nothing is hidden */
.motion-ready [data-reveal]{
  opacity:0;
  transform:translate3d(0,22px,0);
  transition:opacity var(--m-mid) var(--m-ease), transform var(--m-mid) var(--m-ease);
  transition-delay:var(--reveal-delay,0ms);
  will-change:opacity,transform;
}
.motion-ready [data-reveal].is-in{opacity:1;transform:none}

/* Footers sit at the document's hard scroll limit, so they must never depend
   on an intersection threshold to become readable.  This also protects
   visitors who still have an older motion script cached. */
.motion-ready .reference-footer .footer-links > *{
  opacity:1 !important;
  transform:none !important;
}

/* small directional variants keep long pages from feeling mechanically
   identical; all remain compositor-only transforms + opacity */
.motion-ready [data-reveal="slide-left"]{transform:translate3d(-28px,0,0)}
.motion-ready [data-reveal="slide-right"]{transform:translate3d(28px,0,0)}
.motion-ready [data-reveal="scale"]{transform:translate3d(0,14px,0) scale(.975)}
.motion-ready [data-reveal="slide-left"].is-in,
.motion-ready [data-reveal="slide-right"].is-in,
.motion-ready [data-reveal="scale"].is-in{opacity:1;transform:none}

/* headline wipe: the big condensed type rises out of its own line */
.motion-ready [data-reveal="rise"]{
  clip-path:inset(0 0 -15% 0);
  transform:translate3d(0,42px,0);
  transition-duration:var(--m-slow);
}

/* image plates wipe open instead of fading */
.motion-ready [data-reveal="wipe"]{
  opacity:1;
  transform:none;
  clip-path:inset(0 0 100% 0);
  transition:clip-path var(--m-slow) var(--m-ease);
}
.motion-ready [data-reveal="wipe"].is-in{clip-path:inset(0 0 0 0)}

/* ---------- 2. first paint --------------------------------------------- */
.motion-ready .site-header{
  animation:kb-header var(--m-mid) var(--m-ease) both;
}
@keyframes kb-header{from{opacity:0;transform:translate3d(0,-100%,0)}to{opacity:1;transform:none}}

.motion-ready .journal-title-row h1,
.motion-ready .journal-hero h1,
.motion-ready .page-hero-v3 h1,
.motion-ready .article-head-v3 h1{
  animation:kb-wordmark var(--m-slow) var(--m-ease) both .08s;
}
@keyframes kb-wordmark{
  from{opacity:0;transform:translate3d(0,14%,0) scaleY(.94);letter-spacing:-.075em}
  to{opacity:1;transform:none}
}

/* the orange dot / accent marks pop in after the type settles */
.motion-ready .membership-kicker i,
.motion-ready .admin-edition i{animation:kb-pop .5s var(--m-ease) both .5s}
@keyframes kb-pop{from{transform:scale(0)}to{transform:scale(1)}}

/* ---------- 3. header behaviour ---------------------------------------- */
/* the header already draws its own 1.5px rule; no floating shadow */
.site-header{transition:background-color var(--m-fast) ease}
.is-scrolled .site-header{box-shadow:none}

.nav a{position:relative}

/* section rules draw once when the title reaches the viewport */
.motion-ready .section-title-v3{position:relative;border-bottom-color:transparent}
.motion-ready .section-title-v3::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1.5px;background:var(--rule);
  transform:scaleX(0);transform-origin:0 50%;transition:transform .8s var(--m-ease) .08s;
}
.motion-ready .section-title-v3.is-in::after{transform:scaleX(1)}

/* ---------- 4. cards, rows, buttons ------------------------------------ */
/* Polish pass (Sep 27): cards no longer lift, cast shadows or zoom their
   images. Hover answers the pointer quietly — the paper warms and the title
   takes a graphite underline — so the drawn rules stay the structure. */
.journal-lead-story,
.journal-rail-story,
.post-card,
.product-card-v3,
.kb-tier-card,
.atlas-block{transition:background-color var(--m-fast) ease}
.journal-lead-story:hover,
.journal-rail-story:hover,
.post-card:hover,
.product-card-v3:hover,
.home-article-card:hover,
.home-feature-card:hover,
.kb-tier-card:hover,
.member-button:hover,.membership-card-cta:hover,.member-plan-cta:hover,.text-link:hover,.journal-load-older:hover{transform:none;box-shadow:none}
.store-service-band article{transition:none}

/* index rows: a signal edge draws in from the bottom */
.post-card:not(:first-child){position:relative;overflow:hidden}
.post-card:not(:first-child)::before{
  content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--orange);
  transform:scaleY(0);transform-origin:50% 100%;transition:transform var(--m-fast) var(--m-ease);
}
.post-card:not(:first-child):hover::before{transform:scaleY(1)}

.journal-lead-copy h2,.journal-rail-copy h3,.post-card h2,.product-card-v3 h3{
  text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:.14em;
  text-decoration-color:transparent;transition:text-decoration-color var(--m-fast) ease;
}
.journal-lead-story:hover h2,.journal-rail-story:hover h3,.post-card:hover h2,.product-card-v3:hover h3{
  text-decoration-color:currentColor;
}

/* media stays put */
.journal-lead-media img,.post-card .post-art img,.product-image img,.journal-rail-image img{transition:none}
.journal-lead-story:hover .journal-lead-media img,
.post-card:hover .post-art img,
.post-card:hover img,
.product-card-v3:hover img,
.product-card-v3:hover .product-image img,
.journal-rail-story:hover .journal-rail-image img{transform:none}

/* buttons: the fill changes, the arrow nudges; nothing jumps */
.btn-pill,.journal-deck-action a,.membership-card-cta,.member-plan-cta,
.article-preview-primary,.paywall-primary,.detail-add,.add-btn,.text-link,.kb-tier-cta{
  position:relative;overflow:hidden;
  transition:background-color var(--m-fast) ease, color var(--m-fast) ease;
}
.journal-deck-action a span,.membership-card-cta i,.detail-add svg,.kb-tier-cta span{
  display:inline-block;transition:transform var(--m-fast) var(--m-ease);
}
.journal-deck-action a:hover span,.membership-card-cta:hover i,.detail-add:hover svg,.kb-tier-cta:hover span{
  transform:translate3d(5px,0,0);
}
.reference-footer a{transition:color var(--m-fast) ease}
.contact-switch button,.filter-row .filter{transition:background-color var(--m-fast) ease,color var(--m-fast) ease,border-color var(--m-fast) ease}

/* tier badges settle in */
.motion-ready .kb-tier{animation:kb-badge .45s var(--m-ease) both}
@keyframes kb-badge{from{opacity:0;transform:translate3d(0,-4px,0) scale(.9)}to{opacity:1;transform:none}}

/* ---------- 5. dark bands: a drawn accent rule ------------------------- */
.journal-membership,.journal-access-band,.article-membership-card{position:relative;overflow:hidden}
.journal-membership::after,.journal-access-band::after,.article-membership-card::after{
  content:'';position:absolute;left:0;right:0;top:0;height:2px;background:var(--orange);
  transform:scaleX(0);transform-origin:0 50%;transition:transform 1.1s var(--m-ease);
}
.motion-ready .journal-membership.is-in::after,
.motion-ready .journal-access-band.is-in::after,
.motion-ready .article-membership-card.is-in::after{transform:scaleX(1)}

/* ---------- 6. article reading progress -------------------------------- */
.kb-progress{
  position:fixed;left:0;top:0;z-index:120;height:3px;width:100%;
  transform:scaleX(var(--kb-progress,0));transform-origin:0 50%;
  background:var(--orange);pointer-events:none;
}
body:not([data-page="article"]) .kb-progress{display:none}

/* ---------- 7. atlas pins ---------------------------------------------- */
.motion-ready .atlas-pin,.motion-ready .route-pin{
  animation:kb-pin .6s var(--m-ease) both;
  animation-delay:calc(var(--pin-index,0) * 90ms);
}
@keyframes kb-pin{from{opacity:0;transform:translate3d(0,-8px,0) scale(.6)}to{opacity:1;transform:none}}

/* ---------- 8. page exit ----------------------------------------------- */
.motion-ready.is-leaving main{opacity:0;transform:translate3d(0,-8px,0);transition:opacity .2s ease, transform .2s ease}

/* ---------- 9. opt out -------------------------------------------------- */
@media(prefers-reduced-motion:reduce){
  .motion-ready [data-reveal],
  .motion-ready [data-reveal="wipe"],
  .motion-ready [data-reveal="rise"],
  .motion-ready [data-reveal="slide-left"],
  .motion-ready [data-reveal="slide-right"],
  .motion-ready [data-reveal="scale"]{opacity:1 !important;transform:none !important;clip-path:none !important;transition:none !important}
  .motion-ready *,.motion-ready *::before,.motion-ready *::after{animation:none !important}
  .kb-progress{display:none}
}