/* Derin Kare Motion Pack 2.0.2 — GPU-friendly, optional, accessible.
   No external fonts, frameworks, trackers, or images. */
:root { --dk-motion-ease: cubic-bezier(.21,.74,.23,1); --dk-motion-fast: 220ms; }

/* A slender navigation trace, separate from the article reading progress. */
.dk-page-progress { position:fixed; top:0; left:0; z-index:120; width:100%; height:3px;
  background:linear-gradient(90deg,var(--dk-accent),#eccb97); transform-origin:0 50%;
  transform:scaleX(0); pointer-events:none; will-change:transform; opacity:.94; }

/* Motion control lives with the other header controls. */
.dk-motion-toggle { display:inline-flex; justify-content:center; align-items:center; gap:7px;
  min-width:39px; min-height:39px; padding:7px 10px; border-radius:11px; font-size:12px;
  line-height:1; font-weight:700; border:1px solid var(--dk-line-strong); background:var(--dk-card);
  color:var(--dk-text-soft); cursor:pointer; white-space:nowrap; }
.dk-motion-toggle:hover, .dk-motion-toggle[aria-pressed="true"] { border-color:var(--dk-accent); color:var(--dk-accent); }
.dk-motion-toggle:focus-visible { outline:3px solid var(--dk-accent); outline-offset:2px; }
.dk-motion-toggle .dk-motion-mark { font-size:17px; }

/* Graceful entrance: applied only after the observer is active. Never hide article text. */
html.dk-motion-ready [data-dk-reveal]:not(.dk-inview) { opacity:0; transform:translate3d(0,23px,0); }
html.dk-motion-ready [data-dk-reveal] { transition: opacity 750ms var(--dk-motion-ease), transform 750ms var(--dk-motion-ease);
  transition-delay:var(--dk-reveal-delay,0ms); }
html.dk-motion-ready [data-dk-reveal].dk-inview { opacity:1; transform:translate3d(0,0,0); }
html.dk-motion-ready [data-dk-reveal].dk-inview:is(.article-card,.topic-pill,.route-row,.community-preview-item,.forum-topic):hover {
  transform:translate3d(0,-5px,0); }

/* Homepage: the existing brand sculpture gains breathing and orbital motion. */
html.dk-motion-ready .hero .art-orbit-a { animation:dk-orbit-a 80s linear infinite; }
html.dk-motion-ready .hero .art-orbit-b { animation:dk-orbit-b 105s linear infinite; }
html.dk-motion-ready .hero .art-orbit-c { animation:dk-orbit-c 94s linear infinite reverse; }
html.dk-motion-ready .hero .art-monolith { animation:dk-monolith 7.5s ease-in-out infinite; }
html.dk-motion-ready .hero .art-sphere { animation:dk-sphere 6s ease-in-out infinite; }
html.dk-motion-ready .hero .art-star { animation:dk-star 4.3s ease-in-out infinite alternate; }
html.dk-motion-ready .hero .art-star.star-b { animation-delay:-1.7s; }
html.dk-motion-ready .hero .art-star.star-c { animation-delay:-3.1s; }
html.dk-motion-ready .hero .hero-glow { animation:dk-haze 13s ease-in-out infinite alternate; }
@keyframes dk-orbit-a { from {transform:translate(-50%,-50%) rotate(-28deg)} to {transform:translate(-50%,-50%) rotate(332deg)} }
@keyframes dk-orbit-b { from {transform:translate(-50%,-50%) rotate(-28deg)} to {transform:translate(-50%,-50%) rotate(332deg)} }
@keyframes dk-orbit-c { from {transform:translate(-50%,-50%) rotate(37deg)} to {transform:translate(-50%,-50%) rotate(397deg)} }
@keyframes dk-monolith { 0%,100% {transform:translate3d(0,0,0) rotate(-5deg)} 50% {transform:translate3d(0,-11px,0) rotate(-3.3deg)} }
@keyframes dk-sphere { 0%,100% {transform:translate3d(0,0,0)} 50% {transform:translate3d(0,-5px,0)} }
@keyframes dk-star {from {opacity:.25;transform:scale(.6)} to {opacity:1;transform:scale(1.4)} }
@keyframes dk-haze { from {opacity:.3;transform:translate3d(0,0,0)} to {opacity:.67;transform:translate3d(-25px,8px,0)} }

/* One lightweight pointer halo in hero, only for fine mouse pointers. */
.dk-hero-halo { position:absolute; z-index:1; top:0; left:0; width:190px; height:190px;
  pointer-events:none; border-radius:50%; opacity:0;
  background:radial-gradient(circle,rgba(197,154,91,.17) 0%,rgba(197,154,91,.06) 42%,transparent 72%);
  transform:translate3d(-300px,-300px,0); transition:opacity .34s ease; will-change:transform; }
.hero.dk-pointer-inside .dk-hero-halo {opacity:1}

/* Cards communicate depth without requiring WebGL or heavy gradients. */
html.dk-motion-ready .article-card, html.dk-motion-ready .featured-story,
html.dk-motion-ready .topic-pill, html.dk-motion-ready .route-row { backface-visibility:hidden; }
html.dk-motion-ready .article-card .article-image img,
html.dk-motion-ready .featured-story .featured-image img { transition:transform 600ms var(--dk-motion-ease); }
html.dk-motion-ready .article-card:hover .article-image img {transform:scale(1.075)}
html.dk-motion-ready .featured-story:hover .featured-image img {transform:scale(1.055)}
html.dk-motion-ready .brand-icon { transition:transform .6s var(--dk-motion-ease); }
html.dk-motion-ready .brand:hover .brand-icon { transform:rotate(-7deg) scale(1.075); }
html.dk-motion-ready .btn-primary {position:relative;overflow:hidden;isolation:isolate;}
html.dk-motion-ready .btn-primary::after {content:"";position:absolute;inset:-50% auto -50% -50%;width:30%;
  transform:translateX(-260%) rotate(22deg);background:linear-gradient(90deg,transparent,rgba(255,255,255,.18),transparent);
  pointer-events:none;transition:transform .75s ease; }
html.dk-motion-ready .btn-primary:hover::after {transform:translateX(650%) rotate(22deg)}

/* Optional page fade on first render; never animate browser navigation itself. */
html.dk-motion-ready .hero-copy {animation:dk-hero-in 790ms var(--dk-motion-ease) both;}
html.dk-motion-ready .hero-art {animation:dk-art-in 900ms var(--dk-motion-ease) both;}
@keyframes dk-hero-in {from {opacity:.15;transform:translate3d(0,18px,0)} to {opacity:1;transform:translate3d(0,0,0)}}
@keyframes dk-art-in {from {opacity:.25;filter:grayscale(.25)} to {opacity:1;filter:grayscale(0)}}

/* Account / forms: micro-interactions only, not moving text fields while typing. */
html.dk-motion-ready .account-panel, html.dk-motion-ready .auth-card {transition:border-color .24s ease, box-shadow .24s ease}
html.dk-motion-ready .account-panel:hover, html.dk-motion-ready .auth-card:focus-within {border-color:var(--dk-accent);box-shadow:var(--dk-shadow)}

@media (max-width:1120px) { .dk-motion-label {display:none;} .dk-motion-toggle {padding:7px;min-width:39px;} }
@media (max-width:700px), (pointer:coarse) { .dk-hero-halo {display:none;} }

/* Preferences (site switch) and system accessibility both take precedence. */
html.dk-motion-off .dk-page-progress {display:none}
html.dk-motion-off .dk-hero-halo {display:none}
html.dk-motion-off .hero .art-orbit, html.dk-motion-off .hero .art-monolith,
html.dk-motion-off .hero .art-sphere, html.dk-motion-off .hero .art-star,
html.dk-motion-off .hero .hero-glow {animation:none!important}
html.dk-motion-off [data-dk-reveal] {opacity:1!important;transform:none!important;transition:none!important}
html.dk-motion-off .hero-copy, html.dk-motion-off .hero-art {animation:none!important}
html.dk-motion-off .btn-primary::after {display:none}
@media (prefers-reduced-motion:reduce) {
  html:not(.dk-motion-user-on) .dk-page-progress, html:not(.dk-motion-user-on) .dk-hero-halo {display:none!important}
  html:not(.dk-motion-user-on).dk-motion-ready [data-dk-reveal] {opacity:1!important;transform:none!important;transition:none!important}
  html:not(.dk-motion-user-on).dk-motion-ready .hero .art-orbit,html:not(.dk-motion-user-on).dk-motion-ready .hero .art-monolith,
  html:not(.dk-motion-user-on).dk-motion-ready .hero .art-sphere,html:not(.dk-motion-user-on).dk-motion-ready .hero .art-star,
  html:not(.dk-motion-user-on).dk-motion-ready .hero .hero-glow,html:not(.dk-motion-user-on).dk-motion-ready .hero-copy,html:not(.dk-motion-user-on).dk-motion-ready .hero-art {animation:none!important}
  html:not(.dk-motion-user-on).dk-motion-ready .btn-primary::after {display:none!important}
}