/* WAKENEX V10.1 interaction layer, loaded after the V10 stylesheets on every page.
   Language boot, bilingual toggles, cross-document view transitions, tap feedback,
   animated overlays and card artwork. Transitions stay off under prefers-reduced-motion
   (styles.css already forces transition:none there). */

/* Language: hide not-yet-translated chrome text until v9-app.js has run (see #wx-boot). */
.wx-pending [data-v7-zh]{visibility:hidden!important}
html[lang="zh-CN"] .lx-en,html:not([lang="zh-CN"]) .lx-zh{display:none!important}

/* Cross-document view transitions: short crossfade, steady header, cover morph (names set inline). */
@media (prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto}
  ::view-transition-old(root),::view-transition-new(root){animation-duration:.2s;animation-timing-function:cubic-bezier(.2,.7,.2,1)}
  ::view-transition-group(*){animation-duration:.34s;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  .topbar{view-transition-name:wx-topbar}
}

/* Tap feedback: quick press state, no grey flash, visible keyboard focus. */
a,button,summary,[role="button"]{-webkit-tap-highlight-color:transparent;touch-action:manipulation}
.primary-btn:active,.join-btn:active{transform:translateY(0) scale(.97);opacity:.9;transition-duration:.12s}
.watch-btn:active,.lang-btn:active,.icon-btn:active,.menu-btn:active,.drawer-close:active,#searchClose:active,
.category-filter button:active,.wx-btn:active,.article-end button:active,.media-load:active,#mobileSearch:active{transform:scale(.96);opacity:.82}
.watch-btn,.icon-btn,.menu-btn,.drawer-close,#searchClose,.category-filter button,.wx-btn,.article-end button,#mobileSearch{transition:transform .12s ease,opacity .12s ease,color .2s,background-color .2s,border-color .2s}
.post-card,.latest-list>a,.search-result,.related-links a,.wx-pn a{transition:transform .16s ease,opacity .16s ease}
.post-card:active,.latest-list>a:active,.search-result:active,.related-links a:active,.wx-pn a:active{transform:scale(.985);opacity:.9}
.world-card:active{filter:brightness(1.14)}
.mobile-drawer>a{transition:opacity .12s ease,transform .12s ease}
.mobile-drawer>a:active{opacity:.7;transform:translateX(4px)}
.lang-btn:focus-visible,.icon-btn:focus-visible,.menu-btn:focus-visible,.category-filter button:focus-visible,.wx-btn:focus-visible{outline:2px solid #99d3ff;outline-offset:3px}

/* Search overlay and drawer: fade/scale both ways instead of an abrupt display toggle. */
.search-overlay{display:grid;opacity:0;transition:opacity .2s ease,visibility 0s linear .2s}
.search-overlay.open{opacity:1;transition:opacity .2s ease}
.search-overlay .search-box{transform:translateY(10px) scale(.985);transition:transform .24s cubic-bezier(.2,.8,.2,1)}
.search-overlay.open .search-box{transform:none}
.mobile-drawer{opacity:0;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .22s ease,visibility 0s linear .34s}
.mobile-drawer.open{opacity:1;transition:transform .34s cubic-bezier(.2,.8,.2,1),opacity .18s ease}
.search-result{border-radius:2px}
.search-result:hover strong,.search-result:focus-visible strong{color:#a9d9ff}

/* Action row and secondary button shared by article and 404 pages. */
.wx-actions{display:flex;flex-wrap:wrap;align-items:center;gap:10px}
.wx-actions .primary-btn{min-height:44px;padding:0 20px;gap:10px}
.wx-btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:44px;padding:0 17px;border:1px solid #365974;border-radius:6px;background:#0b2236;color:#d6e9f8;font:inherit;font-size:12px;letter-spacing:.03em;line-height:1.2;cursor:pointer;text-decoration:none;white-space:nowrap}
.wx-btn:hover{border-color:#5c9cce;background:#123552;color:#fff}
.brand-edition a.wx-btn{color:#d6e9f8}
.brand-edition a.wx-btn:hover{color:#fff}

/* Card artwork as real, lazy images (cover or category art); overlays stay above the image.
   16:9 boxes match the engine covers (no cropped headlines) and the article hero (clean morph). */
.post-art{background:#06111f}
.post-card .post-art,.post-card.featured-post .post-art{height:auto;aspect-ratio:16/9}
.post-art>img{position:absolute;inset:0;width:100%;height:100%;display:block;object-fit:cover;object-position:center 44%;transition:transform .7s cubic-bezier(.2,.8,.2,1)}
.post-art>img[src*="/assets/articles/"]{object-position:center}
/* Keep the hero manifesto legible where it crosses the bright portal light. */
.hero-manifesto span{text-shadow:0 1px 3px rgba(1,6,16,.7),0 0 24px rgba(1,6,16,.85)}
.post-art::before,.post-art::after{z-index:1}
.post-art>.art-label,.post-art>.art-arrow{z-index:2}
.post-card:hover .post-art>img{transform:scale(1.03)}

/* Touch targets of at least 44px on phones and tablets. The language button keeps its small pill
   look: the 44px button is transparent and the pill is drawn by an inset ::before. */
@media (max-width:1100px){
  .menu-btn{width:44px;height:44px}
  .lang-btn{position:relative;z-index:0;min-width:44px;min-height:44px;border-color:transparent!important;background:none!important;box-shadow:none!important}
  .lang-btn::before{content:"";position:absolute;inset:6px 0;z-index:-1;border:1px solid rgba(115,171,223,.28);border-radius:6px;background:rgba(4,17,31,.38);transition:border-color .25s,background-color .25s}
  .lang-btn:hover::before{border-color:rgba(76,166,255,.68);background:rgba(8,78,145,.18)}
}
@media (max-width:680px){
  .drawer-close,#searchClose{min-width:44px;min-height:44px}
  .mobile-drawer>a,#mobileSearch{min-height:44px;display:flex;align-items:center;gap:10px}
  .category-filter button{min-height:44px}
  .breadcrumbs a,.legal-links>a,.editorial-heading>a{display:inline-flex;align-items:center;min-height:44px}
  .breadcrumbs{gap:6px 13px}
  .brand-edition .legal-links{gap:0 18px}
}