/* Base reset and typography */
* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Lato", -apple-system, system-ui, Segoe UI, Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif;
  color: var(--text);
  background: var(--bg);
  position: relative;
  overflow-x: hidden;
}

/* Local Lato Webfonts */
@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/lato/Lato-Regular.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/lato/Lato-Bold.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/lato/Lato-Black.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Lato';
  src: url('../assets/fonts/lato/Lato-Light.woff2') format('woff2');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

body::before {
  content: '';
  position: fixed;
  top: -50%;
  left: -50%;
  width: 200%;
  height: 200%;
  background: 
    radial-gradient(circle at 20% 80%, rgba(99,102,241,0.25) 0%, transparent 60%),
    radial-gradient(circle at 80% 20%, rgba(16,185,129,0.22) 0%, transparent 60%),
    radial-gradient(circle at 40% 40%, rgba(124,140,249,0.18) 0%, transparent 55%);
  animation: backgroundFlow 15s ease-in-out infinite;
  z-index: -1;
}

@keyframes backgroundFlow {
  0%, 100% {
    transform: translate(-40px, -20px) rotate(0deg);
    opacity: 1;
  }
  25% {
    transform: translate(60px, -50px) rotate(1deg);
    opacity: 0.7;
  }
  50% {
    transform: translate(-20px, 40px) rotate(-0.8deg);
    opacity: 0.85;
  }
  75% {
    transform: translate(40px, 20px) rotate(0.6deg);
    opacity: 0.75;
  }
}

#app { display: grid; min-height: 100dvh; grid-template-rows: auto 1fr auto; }

.container { width: min(1100px, 92%); margin: 0 auto; }
.container--page { padding: 40px 0 56px; }

main#view { min-height: 60vh; transition: opacity .15s ease, transform .15s ease; }
.fade-out { opacity: 0; transform: translateY(8px); }
.fade-in { opacity: 1; transform: translateY(0); }

.prose p { line-height: 1.7; }

/* Accessibility focus outline */
:where(a, button, [tabindex]) :focus-visible,
:where(a, button, [tabindex]):focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 8px; }