/* ===========================================================
   alankan.net — styles
   Base reset, fonts, keyframes, interactive states, responsive.
   Per-element layout/appearance lives inline in index.html;
   this file owns the reset, motion, :hover/:focus states,
   and responsive stacking.
   =========================================================== */

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  background:#0a0b12;
  color:#f5f4ef;
  font-family:'Manrope',system-ui,-apple-system,sans-serif;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
::selection{background:#38bdf8;color:#06110d}
a{color:inherit}
h1,h2,h3{margin:0}
p{margin:0}
img{display:block;max-width:100%}

/* ---- Motion ---- */
@keyframes auroraDrift{
  0%{transform:translate3d(-5%,-3%,0) scale(1)}
  50%{transform:translate3d(6%,4%,0) scale(1.18)}
  100%{transform:translate3d(-5%,-3%,0) scale(1)}
}
@keyframes cueBob{
  0%,100%{transform:translateY(0);opacity:.5}
  50%{transform:translateY(8px);opacity:1}
}

/* ---- Interactive states (inline styles can't do :hover/:focus) ---- */
.nav-link{transition:color .3s}
.nav-link:hover{color:#ffffff}

.nav-cta{transition:border-color .3s,background .3s}
.nav-cta:hover{border-color:rgba(56,189,248,.6);background:rgba(255,255,255,.1)}

.btn-primary{transition:transform .3s cubic-bezier(.2,.7,.2,1),box-shadow .35s}
.btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 52px rgba(77,124,255,.4)}

.btn-ghost{transition:border-color .35s,background .35s}
.btn-ghost:hover{border-color:rgba(56,189,248,.6);background:rgba(255,255,255,.04)}

.text-link{transition:color .3s,border-color .3s}
.text-link:hover{color:#ffffff;border-color:rgba(56,189,248,.7)}

.help-text-link{transition:color .3s}
.help-text-link:hover{color:#f5f4ef}

.logo-tile{transition:filter .4s,opacity .4s}
.logo-tile:hover{filter:grayscale(0);opacity:1}

.talk-card{transition:border-color .35s,background .35s,transform .35s}
.talk-card:hover{border-color:rgba(56,189,248,.5);background:rgba(255,255,255,.05);transform:translateY(-2px)}

.field{transition:border-color .3s,background .3s}
.field:focus{border-color:rgba(56,189,248,.6);background:rgba(255,255,255,.06)}
.field::placeholder{color:#7f818c}

.foot-link{transition:color .3s}
.foot-link:hover{color:#38bdf8}

/* ---- Responsive stacking ---- */
@media (max-width:820px){
  .split{grid-template-columns:1fr !important;gap:2.4rem !important}
  .grid-2{grid-template-columns:1fr !important}
  .grid-4{grid-template-columns:1fr 1fr !important}
  .nav-links{gap:1.1rem !important}
  .nav-hide-sm{display:none !important}
  .sticky-col{position:static !important;top:auto !important}
}
@media (max-width:520px){
  .grid-4{grid-template-columns:1fr !important}
  .belief-row{grid-template-columns:1fr !important;gap:.6rem !important}
}

/* ---- Respect reduced motion ---- */
@media (prefers-reduced-motion:reduce){
  .js-aur{animation:none !important}
  .js-cue{animation:none !important}
}