/* WebGL Canvas */
:root {
  --webgl-background-opacity: 1.0;
}

#webgl-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  opacity: var(--webgl-background-opacity);
}

/* Animation for the period */
/*
@keyframes periodFade {
  0%   { color: #ff8800; }  
  50%  { color: #10b8a5; }  
  100% { color: #ff8800; }  
}

.animate-period-fade {
  animation: periodFade 3s ease-in-out infinite;
}
*/

/* Override Tufte CSS body defaults for perfect centering */
body {
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;
  padding: 0 1rem !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  background-color: #0e0e0e !important;
}

header {
  max-width: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

/* Responsive title styling */
.responsive-title {
  font-size: clamp(2rem, 12vw, 10rem);
  line-height: 1;
  white-space: nowrap;
}

/* 80s Retro Text Effect */
.retro-text-container {
  position: relative;
  display: inline-block;
  white-space: nowrap;
}

.retro-layer {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  white-space: nowrap;
  pointer-events: none;
}

.retro-main {
  position: relative;
  z-index: 10;
  text-shadow: 
    0 0 10px rgba(16, 184, 165, 0.9),
    0 0 20px rgba(16, 184, 165, 0.7),
    0 0 30px rgba(16, 184, 165, 0.5),
    0 0 40px rgba(16, 184, 165, 0.3),
    0 0 60px rgba(255, 136, 0, 0.7),
    0 0 80px rgba(255, 136, 0, 0.5),
    0 0 100px rgba(255, 136, 0, 0.3);
}

/* Layer-specific styles with colors and offsets */
.retro-layer[data-layer="-8"] {
  color: #ff8800;
  opacity: 0.05;
  transform: translateY(-45vh);
}

.retro-layer[data-layer="-7"] {
  color: #10b8a5;
  opacity: 0.08;
  transform: translateY(-38vh);
}

.retro-layer[data-layer="-6"] {
  color: #ff9922;
  opacity: 0.12;
  transform: translateY(-31vh);
}

.retro-layer[data-layer="-5"] {
  color: #0dcfba;
  opacity: 0.18;
  transform: translateY(-24vh);
}

.retro-layer[data-layer="-4"] {
  color: #ffaa33;
  opacity: 0.25;
  transform: translateY(-17vh);
}

.retro-layer[data-layer="-3"] {
  color: #13d5c2;
  opacity: 0.35;
  transform: translateY(-12vh);
}

.retro-layer[data-layer="-2"] {
  color: #ff7700;
  opacity: 0.5;
  transform: translateY(-7vh);
}

.retro-layer[data-layer="-1"] {
  color: #0ac5b3;
  opacity: 0.7;
  transform: translateY(-3vh);
}

.retro-layer[data-layer="1"] {
  color: #ff8800;
  opacity: 0.7;
  transform: translateY(3vh);
}

.retro-layer[data-layer="2"] {
  color: #10b8a5;
  opacity: 0.5;
  transform: translateY(7vh);
}

.retro-layer[data-layer="3"] {
  color: #ffaa44;
  opacity: 0.35;
  transform: translateY(12vh);
}

.retro-layer[data-layer="4"] {
  color: #0dcfba;
  opacity: 0.25;
  transform: translateY(17vh);
}

.retro-layer[data-layer="5"] {
  color: #ff9933;
  opacity: 0.18;
  transform: translateY(24vh);
}

.retro-layer[data-layer="6"] {
  color: #13d5c2;
  opacity: 0.12;
  transform: translateY(31vh);
}

.retro-layer[data-layer="7"] {
  color: #ff7700;
  opacity: 0.08;
  transform: translateY(38vh);
}

.retro-layer[data-layer="8"] {
  color: #10b8a5;
  opacity: 0.05;
  transform: translateY(45vh);
}

/* Main Text Effects */
.main-text-with-effects {
  filter: blur(0.4px);
  text-shadow: 
    0 0 5px rgba(255, 161, 117, 0.8),
    0 0 10px rgba(255, 141, 47, 0.631),
    0 0 12px rgba(192, 94, 41, 0.4),
    0 0 8px rgba(255, 255, 255, 0.2),
    0 0 30px rgba(255, 255, 255, 0.2);
}

/* Soft Light Overlay */
.soft-light-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url('../noise.png');
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  pointer-events: none;
  z-index: 100;
}

/* Ensure the entire page scales properly */
@media (max-width: 768px) {
  .responsive-title {
    font-size: clamp(1.5rem, 10vw, 8rem);
  }
}

@media (max-width: 480px) {
  .responsive-title {
    font-size: clamp(1.2rem, 8vw, 6rem);
  }
}