/*
  Swap in the real Etna Sans Serif typeface once you have licensed font files:
  1. Drop the .woff2/.woff files into assets/fonts/
  2. Uncomment the @font-face block below and point it at those files
  3. Nothing else needs to change — variables.css already lists
     'Etna Sans Serif' first in --font-heading, so it activates automatically.
*/
/*
@font-face {
  font-family: 'Etna Sans Serif';
  src: url('../assets/fonts/EtnaSansSerif.woff2') format('woff2'),
       url('../assets/fonts/EtnaSansSerif.woff') format('woff');
  font-weight: 400 800;
  font-style: normal;
  font-display: swap;
}
*/

/*
  Opts every page into native cross-document view transitions, so clicking
  a nav link crossfades the old/new page instead of a hard cut. Both the
  page you're leaving and the page you're landing on need this rule for the
  transition to fire — since every page shares base.css, that's automatic.
  Unsupported browsers (e.g. Firefox) just navigate normally, no errors.
*/
@view-transition {
  navigation: auto;
}

::view-transition-old(root),
::view-transition-new(root) {
  animation-duration: 0.28s;
  animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  height: 100%;
  color-scheme: dark;

  /* Scrolling stays fully functional (wheel, trackpad, keyboard) — this
     only hides the visual scrollbar track/thumb itself. */
  scrollbar-width: none;
  -ms-overflow-style: none;
}

html::-webkit-scrollbar {
  display: none;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-heading);
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  position: relative;
  overflow-x: hidden;
}

/* Pushes the footer to the bottom of the viewport on short pages
   (the placeholder sections) while staying in normal flow — and so
   out of the way — on tall ones like the home page. */
.page-content {
  flex: 1 0 auto;
}

/* Three soft, blurred color blooms that slowly drift past each other —
   an ambient backdrop instead of a flat fill or a static glow. Screen
   blend mode means they only ever add light on top of the near-black
   base, so the page stays dark and never muddies. */
body::before {
  content: '';
  position: fixed;
  inset: -10%;
  z-index: -1;
  pointer-events: none;
  filter: blur(90px);
  opacity: 0.3;
  mix-blend-mode: screen;
  background-repeat: no-repeat;
  background-image:
    radial-gradient(circle, rgba(253, 233, 204, 0.35), transparent 60%),
    radial-gradient(circle, rgba(201, 138, 75, 0.26), transparent 60%),
    radial-gradient(circle, rgba(107, 63, 82, 0.26), transparent 60%);
  background-size: 55% 55%, 50% 50%, 60% 60%;
  background-position: 8% -8%, 82% 28%, 46% 92%;
  animation: aurora-drift 34s ease-in-out infinite alternate;
}

@keyframes aurora-drift {
  0% {
    background-position: 8% -8%, 82% 28%, 46% 92%;
  }
  50% {
    background-position: 20% 4%, 66% 12%, 60% 68%;
  }
  100% {
    background-position: 12% -12%, 76% 42%, 38% 84%;
  }
}

/* A faint grain layer over the whole viewport so the aurora reads as
   textured atmosphere rather than a plain digital gradient. Fixed +
   pointer-events:none keeps it purely decorative. */
body::after {
  content: '';
  position: fixed;
  inset: 0;
  z-index: 50;
  pointer-events: none;
  opacity: 0.035;
  mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

@media (prefers-reduced-motion: reduce) {
  body::before {
    animation: none;
  }
}

a {
  color: inherit;
  text-decoration: none;
}

img {
  display: block;
  max-width: 100%;
}

ul,
ol {
  list-style: none;
}