/* Desert Dunes - CSS Art Piece
   Techniques: clip-path, gradients, animations, pseudo-elements, blend modes */

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

:root {
  /* Sunset palette */
  --sky-top: #1a0a2e;
  --sky-mid: #6b2d5c;
  --sky-warm: #d4576b;
  --sky-orange: #f4a259;
  --sky-yellow: #f8e16c;

  /* Sand palette */
  --sand-light: #e8c872;
  --sand-mid: #d4a84b;
  --sand-warm: #c9913a;
  --sand-deep: #a67235;
  --sand-shadow: #8b5a2b;
  --sand-dark: #6b4423;

  /* Sun */
  --sun-core: #fff7e0;
  --sun-glow: #ffd194;

  /* Text */
  --text-light: rgba(255, 255, 255, 0.95);
  --text-muted: rgba(255, 255, 255, 0.7);
}

html, body {
  height: 100%;
  overflow-x: hidden;
}

body {
  font-family: 'Georgia', 'Times New Roman', serif;
  background: var(--sand-dark);
}

/* Main scene container */
.desert-scene {
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}

/* Sky gradient */
.sky {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    var(--sky-top) 0%,
    var(--sky-mid) 25%,
    var(--sky-warm) 50%,
    var(--sky-orange) 70%,
    var(--sky-yellow) 90%,
    var(--sand-light) 100%
  );
  z-index: 0;
}

/* Sun element */
.sun {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(80px, 15vw, 150px);
  height: clamp(80px, 15vw, 150px);
  background: radial-gradient(
    circle,
    var(--sun-core) 0%,
    var(--sun-glow) 40%,
    rgba(255, 200, 100, 0.5) 60%,
    rgba(255, 150, 50, 0.2) 80%,
    transparent 100%
  );
  border-radius: 50%;
  box-shadow:
    0 0 60px 30px rgba(255, 215, 100, 0.4),
    0 0 120px 60px rgba(255, 180, 80, 0.2),
    0 0 200px 100px rgba(255, 150, 50, 0.1);
  animation: sunPulse 4s ease-in-out infinite;
}

.sun-rays {
  position: absolute;
  bottom: 30%;
  left: 50%;
  transform: translateX(-50%);
  width: clamp(200px, 40vw, 400px);
  height: clamp(200px, 40vw, 400px);
  background: conic-gradient(
    from 0deg,
    transparent 0deg,
    rgba(255, 220, 150, 0.15) 10deg,
    transparent 20deg,
    transparent 30deg,
    rgba(255, 220, 150, 0.1) 40deg,
    transparent 50deg,
    transparent 60deg,
    rgba(255, 220, 150, 0.12) 70deg,
    transparent 80deg,
    transparent 90deg,
    rgba(255, 220, 150, 0.08) 100deg,
    transparent 110deg,
    transparent 120deg,
    rgba(255, 220, 150, 0.15) 130deg,
    transparent 140deg,
    transparent 150deg,
    rgba(255, 220, 150, 0.1) 160deg,
    transparent 170deg,
    transparent 180deg,
    rgba(255, 220, 150, 0.12) 190deg,
    transparent 200deg,
    transparent 210deg,
    rgba(255, 220, 150, 0.08) 220deg,
    transparent 230deg,
    transparent 240deg,
    rgba(255, 220, 150, 0.15) 250deg,
    transparent 260deg,
    transparent 270deg,
    rgba(255, 220, 150, 0.1) 280deg,
    transparent 290deg,
    transparent 300deg,
    rgba(255, 220, 150, 0.12) 310deg,
    transparent 320deg,
    transparent 330deg,
    rgba(255, 220, 150, 0.08) 340deg,
    transparent 350deg,
    transparent 360deg
  );
  border-radius: 50%;
  animation: raysSpin 60s linear infinite;
  mix-blend-mode: screen;
}

@keyframes sunPulse {
  0%, 100% { transform: translateX(-50%) scale(1); opacity: 1; }
  50% { transform: translateX(-50%) scale(1.05); opacity: 0.9; }
}

@keyframes raysSpin {
  from { transform: translateX(-50%) rotate(0deg); }
  to { transform: translateX(-50%) rotate(360deg); }
}

/* Wind particles */
.wind-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 10;
}

.particle {
  position: absolute;
  width: 3px;
  height: 3px;
  background: var(--sand-light);
  border-radius: 50%;
  opacity: 0;
  animation: windDrift 8s ease-in-out infinite;
}

.particle:nth-child(1) { left: 5%; top: 60%; animation-delay: 0s; animation-duration: 6s; }
.particle:nth-child(2) { left: 15%; top: 70%; animation-delay: 1s; animation-duration: 7s; }
.particle:nth-child(3) { left: 25%; top: 55%; animation-delay: 0.5s; animation-duration: 8s; }
.particle:nth-child(4) { left: 35%; top: 75%; animation-delay: 2s; animation-duration: 6.5s; }
.particle:nth-child(5) { left: 45%; top: 65%; animation-delay: 1.5s; animation-duration: 7.5s; }
.particle:nth-child(6) { left: 55%; top: 58%; animation-delay: 0.8s; animation-duration: 8.5s; }
.particle:nth-child(7) { left: 65%; top: 72%; animation-delay: 2.5s; animation-duration: 6s; }
.particle:nth-child(8) { left: 75%; top: 62%; animation-delay: 1.2s; animation-duration: 7s; }
.particle:nth-child(9) { left: 85%; top: 68%; animation-delay: 0.3s; animation-duration: 8s; }
.particle:nth-child(10) { left: 10%; top: 80%; animation-delay: 1.8s; animation-duration: 6.5s; }
.particle:nth-child(11) { left: 50%; top: 78%; animation-delay: 2.2s; animation-duration: 7.5s; }
.particle:nth-child(12) { left: 90%; top: 56%; animation-delay: 0.6s; animation-duration: 8.5s; }

@keyframes windDrift {
  0% {
    transform: translate(0, 0) scale(0.5);
    opacity: 0;
  }
  10% {
    opacity: 0.6;
  }
  50% {
    transform: translate(100px, -30px) scale(1);
    opacity: 0.4;
  }
  90% {
    opacity: 0.2;
  }
  100% {
    transform: translate(200px, -60px) scale(0.3);
    opacity: 0;
  }
}

/* Dunes container */
.dunes {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 60vh;
  z-index: 5;
}

/* Individual dune layers */
.dune {
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 100%;
}

/* Far dune - lightest, furthest back */
.dune-far {
  height: 45%;
  background:
    linear-gradient(
      135deg,
      var(--sand-light) 0%,
      var(--sand-mid) 50%,
      var(--sand-warm) 100%
    );
  clip-path: polygon(
    0% 100%,
    0% 60%,
    5% 55%,
    15% 40%,
    25% 35%,
    35% 42%,
    45% 30%,
    55% 35%,
    65% 25%,
    75% 38%,
    85% 32%,
    95% 45%,
    100% 40%,
    100% 100%
  );
  z-index: 1;
  animation: duneSway 20s ease-in-out infinite;
}

/* Add sand texture overlay */
.dune-far::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      45deg,
      transparent 0px,
      transparent 2px,
      rgba(255, 255, 255, 0.03) 2px,
      rgba(255, 255, 255, 0.03) 4px
    );
  pointer-events: none;
}

/* Mid dune */
.dune-mid {
  height: 50%;
  background:
    linear-gradient(
      145deg,
      var(--sand-mid) 0%,
      var(--sand-warm) 40%,
      var(--sand-deep) 100%
    );
  clip-path: polygon(
    0% 100%,
    0% 50%,
    8% 45%,
    18% 55%,
    28% 35%,
    38% 45%,
    48% 30%,
    58% 40%,
    68% 28%,
    78% 42%,
    88% 35%,
    100% 50%,
    100% 100%
  );
  z-index: 2;
  animation: duneSway 18s ease-in-out infinite reverse;
}

.dune-mid::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      50deg,
      transparent 0px,
      transparent 3px,
      rgba(0, 0, 0, 0.02) 3px,
      rgba(0, 0, 0, 0.02) 6px
    );
  pointer-events: none;
}

/* Near dune */
.dune-near {
  height: 40%;
  background:
    linear-gradient(
      160deg,
      var(--sand-warm) 0%,
      var(--sand-deep) 50%,
      var(--sand-shadow) 100%
    );
  clip-path: polygon(
    0% 100%,
    0% 55%,
    10% 50%,
    20% 60%,
    30% 40%,
    40% 50%,
    50% 35%,
    60% 48%,
    70% 38%,
    80% 52%,
    90% 45%,
    100% 55%,
    100% 100%
  );
  z-index: 3;
  animation: duneSway 15s ease-in-out infinite;
}

.dune-near::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      55deg,
      transparent 0px,
      transparent 4px,
      rgba(0, 0, 0, 0.03) 4px,
      rgba(0, 0, 0, 0.03) 8px
    );
  pointer-events: none;
}

/* Front dune - darkest, closest */
.dune-front {
  height: 30%;
  background:
    linear-gradient(
      170deg,
      var(--sand-deep) 0%,
      var(--sand-shadow) 40%,
      var(--sand-dark) 100%
    );
  clip-path: polygon(
    0% 100%,
    0% 60%,
    12% 55%,
    24% 65%,
    36% 45%,
    48% 55%,
    60% 40%,
    72% 52%,
    84% 48%,
    100% 60%,
    100% 100%
  );
  z-index: 4;
  animation: duneSway 12s ease-in-out infinite reverse;
}

.dune-front::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      60deg,
      transparent 0px,
      transparent 5px,
      rgba(0, 0, 0, 0.04) 5px,
      rgba(0, 0, 0, 0.04) 10px
    );
  pointer-events: none;
}

/* Ripple effect on dunes */
.dune-front::after {
  content: '';
  position: absolute;
  bottom: 30%;
  left: 20%;
  width: 60%;
  height: 40%;
  background:
    repeating-linear-gradient(
      85deg,
      transparent 0px,
      transparent 8px,
      rgba(255, 255, 255, 0.05) 8px,
      rgba(255, 255, 255, 0.05) 10px,
      transparent 10px,
      transparent 18px
    );
  pointer-events: none;
}

@keyframes duneSway {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(0.5%);
  }
}

/* Content overlay */
.content {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 2rem;
  text-align: center;
  color: var(--text-light);
}

/* Header */
.header {
  margin-bottom: 3rem;
}

.title {
  font-size: clamp(2.5rem, 8vw, 5rem);
  font-weight: 400;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  text-shadow:
    0 2px 4px rgba(0, 0, 0, 0.3),
    0 4px 20px rgba(0, 0, 0, 0.2);
  margin-bottom: 0.5rem;
  animation: titleFade 2s ease-out;
}

.subtitle {
  font-size: clamp(1rem, 3vw, 1.5rem);
  font-style: italic;
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
  animation: titleFade 2s ease-out 0.3s backwards;
}

@keyframes titleFade {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Poem */
.poem {
  max-width: 600px;
  margin-bottom: 3rem;
}

.verse {
  font-size: clamp(1rem, 2.5vw, 1.25rem);
  line-height: 1.8;
  margin-bottom: 2rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4);
  animation: verseFade 1.5s ease-out backwards;
}

.verse:nth-child(1) { animation-delay: 0.5s; }
.verse:nth-child(2) { animation-delay: 0.8s; }
.verse:nth-child(3) { animation-delay: 1.1s; }

@keyframes verseFade {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Footer */
.footer {
  margin-top: auto;
  padding-top: 2rem;
}

.quote {
  font-size: clamp(0.9rem, 2vw, 1.1rem);
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 1.5rem;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
}

.nav-link {
  display: inline-block;
  color: var(--text-light);
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 4px;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  transition: all 0.3s ease;
  backdrop-filter: blur(5px);
  background: rgba(255, 255, 255, 0.1);
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.2);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
}

/* Responsive adjustments */
@media (max-width: 768px) {
  .content {
    padding: 1.5rem;
    justify-content: flex-start;
    padding-top: 15vh;
  }

  .dunes {
    height: 50vh;
  }

  .sun {
    bottom: 40%;
  }

  .sun-rays {
    bottom: 40%;
  }

  .header {
    margin-bottom: 2rem;
  }

  .poem {
    margin-bottom: 2rem;
  }

  .verse {
    margin-bottom: 1.5rem;
  }
}

@media (max-width: 480px) {
  .title {
    letter-spacing: 0.1em;
  }

  .particle {
    width: 2px;
    height: 2px;
  }
}

/* Prefer reduced motion */
@media (prefers-reduced-motion: reduce) {
  .sun,
  .sun-rays,
  .particle,
  .dune,
  .title,
  .subtitle,
  .verse {
    animation: none;
  }

  .particle {
    opacity: 0.3;
  }
}

/* Dark mode adjustments - even warmer night desert */
@media (prefers-color-scheme: dark) {
  :root {
    --sky-top: #0a0512;
    --sky-mid: #1a0a2e;
    --sky-warm: #3d1c4f;
    --sky-orange: #6b2d5c;
    --sky-yellow: #a04050;
  }

  .sun {
    background: radial-gradient(
      circle,
      #ffe4c4 0%,
      #ffb07a 40%,
      rgba(255, 150, 100, 0.3) 70%,
      transparent 100%
    );
    box-shadow:
      0 0 40px 20px rgba(255, 180, 120, 0.3),
      0 0 80px 40px rgba(255, 120, 80, 0.15);
  }
}