/* home-motion.css -- interaction + motion layer for the homepage SPA (public/index.html).
   Colours come from the page's own tokens (--brand, --tx, --line ...). Every animation here is off under
   prefers-reduced-motion; nothing in this file hides content on its own (GSAP sets start states in JS). */

/* ---- nav dropdowns ------------------------------------------------------------------------------------ */
.mtrig .caret{transition:transform .2s ease, opacity .2s ease}
.hm.open .mtrig .caret{transform:rotate(180deg);opacity:1}
.hm.open .menu{animation:ps-menu-in .2s cubic-bezier(.2,.7,.2,1) both}
@keyframes ps-menu-in{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.menu a{transition:background .15s ease, transform .15s ease}
.menu a:hover,.menu a:focus-visible{transform:translateX(2px)}
.mtrig:focus-visible,.menu a:focus-visible,.nlinks>a:focus-visible,.tabs [role=tab]:focus-visible,.burger:focus-visible{
  outline:2px solid var(--brand);outline-offset:2px}
.mob.open{animation:ps-fade-in .22s ease-out both}
@keyframes ps-fade-in{from{opacity:0}to{opacity:1}}

/* ---- header after scroll ------------------------------------------------------------------------------ */
header{transition:box-shadow .25s ease, background-color .25s ease}
header.ps-scrolled{box-shadow:0 10px 30px rgba(0,0,0,.45)}

/* ---- console tabs + feed ------------------------------------------------------------------------------ */
.tabs [role=tab]{cursor:pointer;transition:color .15s ease, border-color .2s ease, background-color .15s ease}
.tabs [role=tab]:hover{color:var(--tx);background:rgba(255,255,255,.03)}
.ev.off{display:none}
.ev{transition:background-color .15s ease}
.ev:hover{background:rgba(255,255,255,.025)}

/* ---- React Bits ports (see js/react-bits-ports.js) ---------------------------------------------------- */
.bt-word{display:inline-block;will-change:transform,filter,opacity}
.ps-motion .kick .shiny-text{
  background:linear-gradient(120deg,var(--brand) 40%,#FFE7B3 50%,var(--brand) 60%);
  background-size:200% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;
  animation:ps-shiny 5s linear infinite}
@keyframes ps-shiny{0%{background-position:150% center}66%,100%{background-position:-50% center}}
.card-spotlight{position:relative;isolation:isolate;--mouse-x:50%;--mouse-y:50%;--spotlight-color:rgba(227,169,60,.10)}
.card-spotlight::before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:0;transition:opacity .5s ease;
  background:radial-gradient(circle at var(--mouse-x) var(--mouse-y),var(--spotlight-color),transparent 75%)}
.card-spotlight:hover::before,.card-spotlight:focus-within::before{opacity:1}
.text-type{position:relative;display:inline-block}
.text-type__ghost{visibility:hidden}
.text-type__live{position:absolute;left:0;top:0;white-space:nowrap}
.text-type__cursor{margin-left:1px;color:var(--brand)}
.text-type__cursor::after{content:'|'}

/* ---- buttons ------------------------------------------------------------------------------------------ */
.btn{transition:background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .25s ease}
.btn:not(.ghost):hover{box-shadow:0 8px 26px rgba(227,169,60,.22)}

@media (prefers-reduced-motion:reduce){
  .hm.open .menu,.mob.open,.ps-motion .kick .shiny-text{animation:none}
  .ps-motion .kick .shiny-text{color:var(--brand);background:none}
  .menu a:hover,.menu a:focus-visible{transform:none}
}
@media print{ .ps-motion .kick .shiny-text{color:inherit;background:none} }

/* hover bridge: the dropdown sits 8 px below its button; this invisible strip keeps the pointer "inside"
   while it crosses that gap (otherwise the menu closed before an item could be reached) */
.menu::before{content:'';position:absolute;left:0;right:0;top:-12px;height:12px}