/* ============================================================
   AuroraThread Style System — foguniversity.neocities.org
   Slug: at-
   ============================================================ */

/* ------------------------------------------------------------
   Root Variables
   ------------------------------------------------------------ */
:root {
  --at-primary: #c6b8ff;
  --at-surface: #16171b;
  --at-paper: #1c1e22;
  --at-ink: #f3f3f3;
  --at-muted: #9ca0aa;
  --at-edge: rgba(255,255,255,0.06);
  --at-edge-strong: rgba(255,255,255,0.15);
  --at-shadow: rgba(0,0,0,0.28);
  --at-radius: 14px;
  --at-max-width: 1200px;
  --at-space: 1.4rem;

  /* Motion tokens */
  --at-motion-fast: 150ms;
  --at-motion-med: 260ms;
  --at-motion-slow: 420ms;
  --at-easing: cubic-bezier(.22,.61,.36,1);
}

@media (prefers-reduced-motion: reduce){
  *{animation:none !important; transition:none !important;}
}

/* ------------------------------------------------------------
   Global Reset & Body
   ------------------------------------------------------------ */
*{box-sizing:border-box; margin:0; padding:0;}

html, body {
  background: var(--at-paper);
  color: var(--at-ink);
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  overflow-x:hidden;
}

/* Ultra subtle moving wash background */
body::before {
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background: radial-gradient(120% 60% at 80% 20%, rgba(255,255,255,.06), transparent 60%),
              linear-gradient(120deg, rgba(0,0,0,.02), rgba(255,255,255,.02));
  animation: at-wash 24s ease-in-out infinite alternate;
  opacity:.35;
}
@keyframes at-wash {
  0%{ transform: translate3d(0,0,0) scale(1); }
  100%{ transform: translate3d(0,-2%,0) scale(1.02); }
}

/* ------------------------------------------------------------
   Header and Navigation
   ------------------------------------------------------------ */
.at-header {
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  padding:calc(var(--at-space)*1.6) var(--at-space);
  background: linear-gradient(180deg, rgba(255,255,255,0.05), rgba(255,255,255,0));
  backdrop-filter: blur(10px);
  position:sticky; top:0; z-index:999;
  box-shadow:0 2px 8px rgba(0,0,0,0.3);
}

.at-brand {
  display:flex;
  align-items:center;
  gap:1rem;
  margin-bottom:0.4rem;
}

/* Enlarged glowing logo */
.at-logo {
  width:72px;
  height:72px;
  border-radius:50%;
  object-fit:contain;
  box-shadow: 0 0 10px rgba(198,184,255,0.25);
  transition: transform 0.25s var(--at-easing), box-shadow 0.25s var(--at-easing);
}
.at-logo:hover {
  transform: scale(1.05);
  box-shadow: 0 0 16px rgba(198,184,255,0.4);
}

.at-brand h1 {
  font-weight:700;
  letter-spacing:0.04em;
  font-size:1.7rem;
}

/* Centered nav with pill buttons and background fade motion */
.at-nav ul {
  list-style:none;
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:1rem;
  margin-top:1rem;
}
.at-nav a {
  display:inline-block;
  padding:0.5rem 1rem;
  border-radius:999px;
  text-decoration:none;
  color:var(--at-ink);
  background:rgba(255,255,255,0.05);
  transition:background var(--at-motion-fast) var(--at-easing), color var(--at-motion-fast) var(--at-easing);
  position:relative;
}
.at-nav a::after {
  content:""; position:absolute; left:0; right:0; bottom:-2px; height:2px;
  background:linear-gradient(90deg, var(--at-primary), transparent);
  transform:scaleX(0); transform-origin:left;
  transition:transform var(--at-motion-med) var(--at-easing);
}
.at-nav a:hover::after {transform:scaleX(1);}
.at-nav a:hover {background:rgba(255,255,255,0.15); color:#fff;}
.at-nav .at-active {background:var(--at-primary); color:#111;}

/* ------------------------------------------------------------
   Main Layout
   ------------------------------------------------------------ */
.at-main {
  max-width: var(--at-max-width);
  margin: 0 auto;
  padding: calc(var(--at-space)*2) var(--at-space);
}

/* Default article is single column (fixes big gaps) */
.at-article {
  display:block;
  max-width:100%;
}

/* Optional sidebar layout (only if needed later) */
body.has-sidebar .at-article {
  display:grid;
  grid-template-columns: 1fr minmax(260px, 320px);
  grid-gap: calc(var(--at-space)*2);
  align-items:start;
}
@media (max-width:900px){
  body.has-sidebar .at-article {grid-template-columns:1fr;}
}

/* ------------------------------------------------------------
   Hero Image & Dek
   ------------------------------------------------------------ */
.at-hero {
  grid-column:1/-1;
  margin-bottom:calc(var(--at-space)*2);
  text-align:center;
}
.at-dek {
  font-weight:400;
  font-size:1.4rem;
  margin-bottom:var(--at-space);
  color:var(--at-muted);
}
.at-hero-figure {
  max-width:100%;
  border-radius: var(--at-radius);
  overflow:hidden;
  box-shadow:0 10px 32px rgba(0,0,0,0.4);
  position:relative;
}
.at-hero-img {
  width:100%;
  height:auto;
  display:block;
  border-radius: var(--at-radius);
  filter:blur(0.2px) brightness(0.96);
}
.at-hero-figure figcaption {
  font-size:0.9rem;
  color:var(--at-muted);
  margin-top:0.4rem;
}

/* ------------------------------------------------------------
   Sections & Text (Final Spacing Fix)
   ------------------------------------------------------------ */
section.at-section {
  display: block;
  position: relative;
  margin: 0 0 1.2rem 0;
  padding: 0 0 0.8rem 0;
  border-bottom: 1px solid var(--at-edge);
}
section.at-section:last-of-type {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}
section.at-section::before {
  content:"";
  position:absolute; top:-6px; left:0;
  height:2px; width:0%;
  background:linear-gradient(90deg, var(--at-primary), transparent);
  transition:width var(--at-motion-slow) var(--at-easing);
}
section.at-section.is-seen::before { width:100%; }

section.at-section h2 {
  font-size:1.55rem;
  margin-bottom:0.4rem;
  color:var(--at-primary);
}
section.at-section p {
  margin-bottom:0.8rem;
  color:var(--at-ink);
  text-align:justify;
  text-justify:inter-word;
  hyphens:auto;
}

/* ------------------------------------------------------------
   Cards (lift on hover)
   ------------------------------------------------------------ */
.at-card {
  background:var(--at-paper);
  border:1px solid var(--at-edge);
  border-radius:var(--at-radius);
  box-shadow:0 4px 14px rgba(0,0,0,0.2);
  padding:var(--at-space);
  transition:transform var(--at-motion-fast) var(--at-easing),
             box-shadow var(--at-motion-fast) var(--at-easing),
             border-color var(--at-motion-fast) var(--at-easing);
}
.at-card:hover {
  transform:translateY(-3px);
  box-shadow:0 8px 24px var(--at-shadow);
  border-color:var(--at-edge-strong);
}

/* ------------------------------------------------------------
   Footer (Aurora Wave)
   ------------------------------------------------------------ */
.at-footer {
  position: relative;
  text-align: center;
  color: var(--at-muted);
  padding: calc(var(--at-space)*3) var(--at-space) calc(var(--at-space)*2);
  background: linear-gradient(180deg, rgba(198,184,255,0.08), rgba(255,255,255,0.02));
  overflow: hidden;
  clip-path: ellipse(120% 100% at 50% 0%);
}
.at-footer p {
  position: relative;
  z-index: 1;
  display: inline-block;
  padding: 0.6rem 1.4rem;
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(255,255,255,0.1);
  border-radius: 999px;
  backdrop-filter: blur(6px);
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  font-size: 0.95rem;
}

/* ------------------------------------------------------------
   Reading Progress Bar
   ------------------------------------------------------------ */
.at-progress {
  position:fixed;
  left:0; top:0;
  height:3px; width:0%;
  background:linear-gradient(90deg, var(--at-primary), transparent);
  z-index:9998;
  transition:width var(--at-motion-fast) linear;
}

/* ------------------------------------------------------------
   Back-to-Top Button (Arrow Only)
   ------------------------------------------------------------ */
.at-to-top {
  position: fixed;
  right: 24px;
  bottom: 28px;
  font-size: 2rem;
  line-height: 1;
  color: var(--at-primary);
  background: none;
  border: none;
  cursor: pointer;
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity var(--at-motion-fast) var(--at-easing),
              transform var(--at-motion-fast) var(--at-easing),
              color var(--at-motion-fast) var(--at-easing);
  z-index: 9999;
  overflow: hidden;
}
.at-to-top:hover { color: #fff; }
.at-to-top.at-show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* Ripple effect retained */
.at-to-top .ripple {
  position: absolute;
  border-radius: 999px;
  pointer-events: none;
  opacity: 0.35;
  transform: translate(-50%, -50%) scale(0);
  background: var(--at-primary);
  animation: at-ripple .6s ease-out forwards;
}
@keyframes at-ripple {
  to {
    transform: translate(-50%, -50%) scale(8);
    opacity: 0;
  }
}

/* ------------------------------------------------------------
   Responsive Tweaks
   ------------------------------------------------------------ */
@media (max-width:600px){
  .at-nav ul {gap:0.5rem;}
  .at-nav a {padding:0.4rem 0.8rem;}
  .at-dek {font-size:1.1rem;}
}