/* ============================================================
   WALLPAPER — Flawless CSS-only Windows XP "Bliss" Replica
   ============================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* --- Container & Sky --- */
.bliss-container {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  z-index: 0;
  /* Deep cerulean to pale horizon gradient */
  background: linear-gradient(
    170deg,
    #0b49bd 0%,
    #1967d2 15%,
    #3485e9 35%,
    #65b2f6 55%,
    #9ed0ff 75%,
    #c6e5ff 88%,
    #dff2ff 100%
  );
  pointer-events: none;
}

/* --- Atmosphere & Lighting --- */
.atmosphere {
  position: absolute;
  inset: 0;
  background:
    /* Far right sun corona */
    radial-gradient(circle at 80% 30%, rgba(255, 255, 255, 0.4) 0%, transparent 40%),
    /* Central horizon haze */
    radial-gradient(ellipse at 50% 70%, rgba(255, 255, 255, 0.25) 0%, transparent 60%);
  pointer-events: none;
}

/* High-altitude wispy streaks */
.cirrus {
  position: absolute;
  top: 5%;
  left: -10%;
  width: 120%;
  height: 30%;
  background: repeating-linear-gradient(
    165deg,
    transparent 0%,
    rgba(255, 255, 255, 0.1) 4%,
    rgba(255, 255, 255, 0.25) 5%,
    transparent 8%
  );
  filter: blur(8px);
  transform: rotate(-5deg);
  opacity: 0.7;
}

/* --- Cumulus Clouds (Volumetric) --- */
.cloud {
  position: absolute;
  background: #fff;
  border-radius: 100px;
  /* Internal blue shadow gives the cloud physical depth and a dark underside */
  box-shadow:
    inset -5px -10px 20px rgba(130, 185, 250, 0.4),
    0 8px 15px rgba(0, 0, 0, 0.05);
  filter: blur(1px) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6));
}

.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: #fff;
  border-radius: 50%;
}

/* Right massive cluster */
.cloud-right {
  top: 30%;
  right: 12%;
  width: 200px;
  height: 70px;
}
.cloud-right::before {
  width: 120px; height: 120px;
  top: -60px; left: 30px;
  box-shadow: inset -8px -8px 15px rgba(130, 185, 250, 0.3);
}
.cloud-right::after {
  width: 90px; height: 90px;
  top: -30px; left: 110px;
}

/* Center dominant cluster */
.cloud-center {
  top: 36%;
  left: 48%;
  width: 150px;
  height: 55px;
}
.cloud-center::before {
  width: 90px; height: 90px;
  top: -45px; left: 20px;
  box-shadow: inset -5px -5px 10px rgba(130, 185, 250, 0.2);
}
.cloud-center::after {
  width: 70px; height: 70px;
  top: -20px; left: 90px;
}

/* Left puff */
.cloud-left {
  top: 38%;
  left: 18%;
  width: 110px;
  height: 40px;
}
.cloud-left::before {
  width: 60px; height: 60px;
  top: -25px; left: 25px;
}

/* Far left trailing wisp */
.cloud-far-left {
  top: 42%;
  left: 2%;
  width: 80px;
  height: 30px;
  opacity: 0.8;
}
.cloud-far-left::before {
  width: 40px; height: 40px;
  top: -15px; left: 20px;
}

/* --- Topography (Rolling Hills) --- */

/* Distant darker mountain range (Right) */
.hill-bg {
  position: absolute;
  bottom: 25vh;
  right: -5vw;
  width: 55vw;
  height: 35vh;
  /* Organic asymmetrical curve */
  border-radius: 40% 60% 0 0 / 100% 100% 0 0;
  /* Muted greens mixed with atmospheric blue haze */
  background: linear-gradient(120deg, #43742f 0%, #294e1d 100%);
  box-shadow: inset 0 20px 40px rgba(160, 210, 255, 0.4);
  transform: rotate(3deg);
}

/* Distant supporting ridge (Left) */
.hill-bg-left {
  position: absolute;
  bottom: 20vh;
  left: -10vw;
  width: 40vw;
  height: 30vh;
  border-radius: 50% 50% 0 0 / 100% 100% 0 0;
  background: linear-gradient(140deg, #4a7d34 0%, #2f5621 100%);
  box-shadow: inset 0 15px 30px rgba(160, 210, 255, 0.5);
}

/* The iconic main foreground hill */
.hill-main {
  position: absolute;
  bottom: -15vh;
  left: -25vw;
  /* Massive width to create a gentle, sweeping arc mathematically */
  width: 150vw; 
  height: 78vh;
  border-radius: 48% 52% 0 0 / 100% 100% 0 0;
  
  /* Layer 1: Vivid base green */
  background-color: #5bb21f;
  
  /* Layer 2: Painted light and shadows using gradients */
  background-image:
    /* Brilliant sunlit peak */
    radial-gradient(ellipse at 30% 15%, #b1e83f 0%, rgba(142, 212, 42, 0.85) 30%, transparent 60%),
    /* Deep valley shadow on the bottom right */
    radial-gradient(ellipse at 75% 70%, #154506 0%, #2a7310 45%, transparent 75%),
    /* Soft shading on the far left edge */
    radial-gradient(ellipse at 10% 50%, rgba(60, 115, 20, 0.4) 0%, transparent 50%),
    /* Global directional lighting wash */
    linear-gradient(105deg, rgba(160, 220, 50, 0.4) 0%, rgba(90, 165, 30, 0.2) 40%, rgba(25, 75, 5, 0.8) 100%);
  
  /* Crisp highlight on the ridge edge against the sky */
  box-shadow: inset 0 3px 6px rgba(255, 255, 255, 0.3);
  transform: rotate(-3.5deg);
}

/* ============================================================
   BLISS ENHANCEMENTS — Fine-tuning texture and organic shapes
   ============================================================ */

/* 1. Deepen the sky to match the iconic XP blue */
.bliss-container {
  background: linear-gradient(
    170deg,
    #0536b1 0%,
    #1353ce 15%,
    #2c77e8 35%,
    #59a7f5 55%,
    #8ec9ff 75%,
    #bee0ff 88%,
    #dff2ff 100%
  ) !important;
}

/* 2. Break up the perfectly straight cirrus lines into wisps */
.cirrus {
  background: 
    repeating-linear-gradient(
      165deg,
      transparent 0%,
      rgba(255, 255, 255, 0.08) 3%,
      rgba(255, 255, 255, 0.2) 4%,
      transparent 7%
    ),
    radial-gradient(ellipse at 50% 50%, rgba(255,255,255,0.1) 0%, transparent 60%) !important;
  filter: blur(12px) !important;
  opacity: 0.8 !important;
}

/* 3. Make clouds more organic, less like perfect pills */
/* We add multiple box-shadows to the existing pseudo elements to spawn extra cloud "puffs" around them */
.cloud-right::before {
  box-shadow: 
    inset -8px -8px 15px rgba(130, 185, 250, 0.3),
    40px 20px 0 -20px #fff,
    -30px 40px 0 -30px #fff,
    60px 50px 0 -40px #fff !important;
}
.cloud-right::after {
  box-shadow: 
    -40px -10px 0 -10px #fff,
    20px -20px 0 -20px #fff !important;
}

.cloud-center::before {
  box-shadow: 
    inset -5px -5px 10px rgba(130, 185, 250, 0.2),
    30px 20px 0 -15px #fff,
    -20px 30px 0 -20px #fff !important;
}
.cloud-center::after {
  box-shadow: 
    -30px -10px 0 -10px #fff,
    15px -15px 0 -15px #fff !important;
}

.cloud-left::before {
  box-shadow: 
    20px 10px 0 -10px #fff,
    -10px 15px 0 -15px #fff !important;
}

/* 4. Add subtle grass texturing, shadows and highlight bands to the main hill */
.hill-main {
  background-image:
    /* Deep shadow in bottom left corner */
    radial-gradient(circle at 10% 90%, #0d2f04 0%, transparent 40%),
    /* Rolling shadow band traversing the hill horizontally */
    radial-gradient(ellipse at 50% 85%, rgba(15, 60, 5, 0.6) 0%, transparent 60%),
    /* Distinct bright yellow-green patch on the left slope */
    radial-gradient(ellipse at 25% 25%, #a6ea31 0%, rgba(142, 212, 42, 0.5) 20%, transparent 50%),
    /* Add subtle noise-like repeating diagonal stripes for grass texture */
    repeating-linear-gradient(
      115deg,
      rgba(255, 255, 255, 0.03) 0px,
      rgba(255, 255, 255, 0.03) 2px,
      transparent 2px,
      transparent 6px
    ),
    /* Re-include the previous base gradients to blend */
    radial-gradient(ellipse at 30% 15%, #b1e83f 0%, rgba(142, 212, 42, 0.85) 30%, transparent 60%),
    radial-gradient(ellipse at 75% 70%, #154506 0%, #2a7310 45%, transparent 75%),
    radial-gradient(ellipse at 10% 50%, rgba(60, 115, 20, 0.4) 0%, transparent 50%),
    linear-gradient(105deg, rgba(160, 220, 50, 0.4) 0%, rgba(90, 165, 30, 0.2) 40%, rgba(25, 75, 5, 0.8) 100%) !important;
}

  /* 5. Add a subtle darker foreground element at the very bottom right 
   (the original photo has a slight dark shadowed area at the bottom right corner) */
.hill-main::after {
  content: '';
  position: absolute;
  bottom: 0;
  right: 0;
  width: 40vw;
  height: 20vh;
  background: radial-gradient(ellipse at 100% 100%, rgba(10, 40, 2, 0.8) 0%, transparent 70%);
  border-radius: 100% 0 0 0;
  pointer-events: none;
}

/* ============================================================
   ANIMATIONS — Ambient movement
   ============================================================ */

/* Atmospheric pulse (Sun corona fading slightly) */
@keyframes ambient-pulse {
  0%   { opacity: 0.9; transform: scale(1); }
  50%  { opacity: 1.1; transform: scale(1.05); }
  100% { opacity: 0.9; transform: scale(1); }
}

.atmosphere {
  animation: ambient-pulse 12s ease-in-out infinite;
}

/* Cirrus streaks drifting */
@keyframes cirrus-drift {
  0%   { transform: rotate(-5deg) translateX(0); }
  50%  { transform: rotate(-5deg) translateX(6%); }
  100% { transform: rotate(-5deg) translateX(0); }
}

.cirrus {
  animation: cirrus-drift 24s ease-in-out infinite;
}

/* Cloud floating (Horizontal drift) */
@keyframes cloud-float {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(35px); }
  100% { transform: translateX(0); }
}

@keyframes cloud-float-slow {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(-25px); }
  100% { transform: translateX(0); }
}

@keyframes cloud-float-fast {
  0%   { transform: translateX(0); }
  50%  { transform: translateX(50px); }
  100% { transform: translateX(0); }
}

.cloud-right { animation: cloud-float 20s ease-in-out infinite; }
.cloud-center { animation: cloud-float-slow 28s ease-in-out infinite; }
.cloud-left { animation: cloud-float-fast 16s ease-in-out infinite; }
.cloud-far-left { animation: cloud-float 22s ease-in-out infinite; }