@layer reset {
  * {
    box-sizing: border-box;
  }

  html,
  body {
    margin: 0;
    padding: 0;
  }
}

@layer base {
  html,
  body {
    background: transparent;
    color: var(--text);
    font-family: Inter, Arial, sans-serif;
  }

  html {
    scroll-padding-top: var(--nav-scroll-offset);
  }

  body {
    min-height: 100vh;
    overflow-x: hidden;
  }

  body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--layer-decoration);
    pointer-events: none;
    background:
      radial-gradient(circle at top left, rgba(255, 91, 46, 0.16), transparent 28%),
      radial-gradient(circle at top right, rgba(255, 209, 102, 0.12), transparent 24%);
  }

  body.monza-bg-page::after {
    content: "";
    position: fixed;
    inset: 0;
    z-index: var(--layer-background);
    pointer-events: none;
    background:
      linear-gradient(180deg, rgba(8, 12, 18, 0.08) 0%, rgba(8, 12, 18, 0.12) 38%, rgba(8, 12, 18, 0.18) 100%),
      url("../fun-stats/monza.jpg") center center / cover no-repeat;
  }

  body.monza-bg-page .site-video-bg,
  body.lite-background .site-video-bg {
    display: none;
  }

  body.monza-bg-page .site-video-overlay {
    background: linear-gradient(180deg, rgba(8, 12, 18, 0.03) 0%, rgba(8, 12, 18, 0.06) 36%, rgba(8, 12, 18, 0.1) 100%);
  }

  body.lite-background .site-video-overlay {
    background: linear-gradient(180deg, rgba(11, 15, 20, 0.82) 0%, rgba(11, 15, 20, 0.88) 55%, rgba(11, 15, 20, 0.94) 100%);
  }

  .reveal-ready {
    opacity: 0;
    transform: translateY(16px);
    transition:
      opacity 0.45s ease,
      transform 0.45s ease;
    transition-delay: var(--reveal-delay, 0ms);
  }

  .reveal-ready.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
}

@layer layout {
  .top-nav,
  .container {
    position: relative;
    z-index: var(--layer-content);
  }

  .container {
    width: min(1200px, calc(100% - 32px));
    margin: 0 auto;
  }
}