/*
 * Base globale.
 *
 * Regles partagees par tout le site : box model, fond general, typographie,
 * focus clavier, liens, medias et comportement de scroll.
 */
*,
*::before,
*::after {
  box-sizing: border-box;
}

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

body {
  margin: 0;
  min-height: 100vh;
  overflow-x: hidden;
  background:
    radial-gradient(circle at top right, rgba(0, 212, 255, 0.08), transparent 30%),
    radial-gradient(circle at left center, rgba(0, 255, 65, 0.06), transparent 28%),
    var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  line-height: 1.6;
}

#app,
.page,
.animation-showcase__player-panel,
.sagaz-player-panel {
  scroll-margin-top: var(--sticky-nav-offset);
}

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

button,
a {
  -webkit-tap-highlight-color: transparent;
}

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

picture {
  display: block;
}

iframe {
  border: 0;
}

::selection {
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}

.background-grid {
  position: fixed;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(rgba(0, 255, 65, 0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(0, 255, 65, 0.03) 1px, transparent 1px);
  background-size: 46px 46px;
  opacity: 0.45;
}

.scan-line {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 65, 0.22), transparent);
  animation: scan-line 8s linear infinite;
}

::-webkit-scrollbar {
  width: 8px;
}

::-webkit-scrollbar-track {
  background: #081016;
}

::-webkit-scrollbar-thumb {
  background: rgba(0, 255, 65, 0.28);
  border-radius: var(--radius-pill);
}