/* Home motion for GenSig (layered on the approved v6.5 mockup).
   House rule: nothing counts, grows or fills in a way that implies a data
   change, nothing waits hidden on scroll or JS, and a screenshot at any moment
   shows the final state. What moves: rules drawing on the section dividers,
   the highlight sweep on named brands, one floating card drifting, hover and
   press feedback, the market globe, a smooth FAQ. All of it lives inside
   prefers-reduced-motion: no-preference; print turns it off. */

/* ---- market globe (static layout, always on) ---- */
.mkts .fr-t{display:flex;flex-direction:column}
.globe{--globe-ink:#1f4fff;--globe-line:#e4e5e2;display:block;width:min(100%,300px);aspect-ratio:1;height:auto;margin-top:24px}
.mkt button{font:inherit;font-size:12.5px;font-weight:500;display:inline-flex;align-items:center;height:26px;padding:0 10px;border-radius:99px;border:0;background:var(--paper-2);color:var(--ink-2);cursor:pointer}
.mkt button[aria-selected=true]{background:var(--accent-soft);color:var(--accent)}
.mkt button:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
@media (max-width:860px){.globe{width:min(64%,240px);margin:16px 0 0}}
.mkts>*{min-width:0}
@media (max-width:860px){.mkts{grid-template-columns:minmax(0,1fr)}}
@media (max-width:640px){.mkt{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin-right:-16px;padding-right:16px}.mkt::-webkit-scrollbar{display:none}.mkt button{flex:none;white-space:nowrap}}

@media (prefers-reduced-motion:no-preference){
  :root{--m-ease:cubic-bezier(.2,.7,.2,1)}
  html{scroll-behavior:smooth}
  section[id],#paths{scroll-margin-top:24px}

  /* Hero: the floating answer drifts a few pixels, once every 8 s, never off its place. */
  @keyframes m-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
  .fl-ans{animation:m-drift 8s ease-in-out infinite}

  /* Path cards: the arrow leans in, the sample slides a hair. */
  .p2-go{transition:transform .2s var(--m-ease),background-color .2s,color .2s,border-color .2s}
  .p2:hover .p2-go{transform:translateX(3px)}
  .p2:active{transform:translateY(1px)}
  .p2 .p2-v{transition:background-color .2s}
  .p2:hover .p2-v{background:var(--accent-soft)}

  /* Matrix and plan: reading aids on hover, nothing that moves data. */
  .sov2 td,.sov2 th{transition:background-color .15s}
  .sov2 tbody tr:hover td{background:var(--paper-2)}
  .mat .rw{transition:background-color .15s}
  .mat .rw:hover{background:var(--paper-2)}
  .tk .nb{transition:background-color .2s,color .2s}
  .tk:hover .nb{background:var(--accent);color:#fff;border-color:var(--accent)}
  .ht .hi{transition:border-color .2s}
  .ht:hover .hi{border-color:var(--accent)}

  /* Market tabs: press, swap the questions with a short fade. */
  .mkt button{transition:background-color .18s ease,color .18s ease,transform .12s ease}
  .mkt button:active{transform:translateY(1px)}
  .qs.swap{animation:m-swap .22s ease both}
  @keyframes m-swap{from{opacity:0}to{opacity:1}}

  /* Buttons. */
  .btn{transition:transform .12s ease,filter .15s ease,border-color .15s ease,background-color .15s ease}
  .btn:active{transform:translateY(1px)}
  nav.top .links a{transition:color .15s ease}

  /* FAQ opens smoothly where the browser can animate to auto height. */
  .faq details{interpolate-size:allow-keywords}
  .faq details::details-content{block-size:0;overflow:clip;transition:block-size .25s var(--m-ease),content-visibility .25s allow-discrete}
  .faq details[open]::details-content{block-size:auto}
}

@media (prefers-reduced-motion:no-preference){
  /* Landing only, always ends in its final state: hero matrix fills column by
     column, the path-card bars draw from the left, the trend lines are
     revealed left to right as the card scrolls in. Example data, marked as such. */
  @keyframes m-cell{from{background-color:var(--line)}}
  @keyframes m-bar{from{transform:scaleX(0)}}
  .mat .sq i.on{animation:m-cell .35s ease backwards}
  .mat .sq i.on:nth-child(1){animation-delay:0.5s}
  .mat .sq i.on:nth-child(2){animation-delay:0.57s}
  .mat .sq i.on:nth-child(3){animation-delay:0.64s}
  .mat .sq i.on:nth-child(4){animation-delay:0.71s}
  .mat .sq i.on:nth-child(5){animation-delay:0.78s}
  .mat .sq i.on:nth-child(6){animation-delay:0.85s}
  .mat .sq i.on:nth-child(7){animation-delay:0.92s}
  .mat .sq i.on:nth-child(8){animation-delay:0.99s}
  .mat .sq i.on:nth-child(9){animation-delay:1.06s}
  .mat .sq i.on:nth-child(10){animation-delay:1.13s}
  .mat .sq i.on:nth-child(11){animation-delay:1.2s}
  .mat .sq i.on:nth-child(12){animation-delay:1.27s}
  .p2 .mr .bb i{transform-origin:left;animation:m-bar .7s var(--m-ease) .4s backwards}
  /* Trend lines draw once, left to right, when the card first scrolls into
     view. home-motion.js adds .m-pre only to a card that starts below the fold
     and removes it on arrival; remove the m-draw class on <body> to turn this off. */
  @keyframes m-trend{from{clip-path:inset(0 100% 0 0)}to{clip-path:inset(0 0 0 0)}}
  @keyframes m-dots{from{opacity:0}to{opacity:1}}
  .m-draw .trend.m-pre .tw .ln{clip-path:inset(0 100% 0 0)}
  .m-draw .trend.m-pre .tw .pt,.m-draw .trend.m-pre .tw image{opacity:0}
  .m-draw .trend.m-play .tw .ln{animation:m-trend 1.4s var(--m-ease) both}
  .m-draw .trend.m-play .tw .pt,.m-draw .trend.m-play .tw image{animation:m-dots .4s ease 1.2s both}
}
@media print{*,*::before,*::after{animation:none!important;transition:none!important}.trend.m-pre .tw .ln{clip-path:none!important}.trend.m-pre .tw .pt,.trend.m-pre .tw image{opacity:1!important}}