/* diyStudio Landing Page - Minimal CSS with Color Palette */

@import url('https://fonts.googleapis.com/css?family=Press+Start+2P');

:root {
  --dark: #001122;
  --light: #00aaff;
  --cyan: #00ffff;
  --white: #ffffff;
  --blue-bg: #000033;
}

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

*::selection {
  background: var(--cyan);
  color: var(--blue-bg);
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  background: var(--blue-bg);
  overflow-x: hidden;
  font-family: 'Press Start 2P', cursive;
  color: var(--cyan);
  font-size: 0.75rem;
  line-height: 1.8;
}

body::before {
  content: '';
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(ellipse at center, rgba(0,0,0,0) 0%, rgba(0,0,0,.4) 100%);
  z-index: 500;
  mix-blend-mode: overlay;
  pointer-events: none;
}

.noise {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
  z-index: 400;
  opacity: .8;
  pointer-events: none;
}

.noise::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: url('https://ice-creme.de/images/background-noise.png');
  pointer-events: none;
}

.noise-moving {
  opacity: 1;
  z-index: 450;
}

.noise-moving::before {
  will-change: background-position;
  animation: noise 1s infinite alternate;
}

@keyframes noise {
  0%, 100% {background-position: 0 0;}
  10% {background-position: -5% -10%;}
  20% {background-position: -15% 5%;}
  30% {background-position: 7% -25%;}
  40% {background-position: 20% 25%;}
  50% {background-position: -25% 10%;}
  60% {background-position: 15% 5%;}
  70% {background-position: 0 15%;}
  80% {background-position: 25% 35%;}
  90% {background-position: -10% 10%;}
}

/* Exclude elements from scanlines overlay */
.excluded-from-animation {
  position: relative;
  z-index: 310;
  isolation: isolate;
  /* Ensure text is crisp and readable */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Parent containers of excluded elements should also create stacking context */
.point-card,
.philosophy {
  position: relative;
  z-index: 305;
  isolation: isolate;
}