/* === About Page Styling === */

body {
  margin: 0;
  padding: 0;
  background-color: #1f1f1f; /* dark gray */
  font-family: 'Lora', serif;
  color: #f0f0f0; /* soft white */
  line-height: 1.8;
}

.about-container {
  max-width: 900px;
  margin: 80px auto;
  padding: 20px;
  text-align: center;
}

/* Image */
.about-image img {
  width: 100%;
  max-width: 600px;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(255, 255, 255, 0.1);
  margin-bottom: 40px;
}

/* Title */
.about-title {
  font-size: 2.5rem;
  letter-spacing: 1px;
  margin-bottom: 40px;
  color: #ffffff;
  text-shadow: 0 0 8px rgba(255, 255, 255, 0.15);
}

/* Text */
.about-text p {
  font-size: 1.1rem;
  margin-bottom: 25px;
  text-align: justify;
  color: #e5e5e5;
}

/* Links inside text */
.about-text a {
  color: #6eb1ff;
  text-decoration: none;
}

.about-text a:hover {
  text-decoration: underline;
}

/* Mobile optimization */
@media (max-width: 768px) {
  .about-title {
    font-size: 2rem;
  }
  .about-text p {
    font-size: 1rem;
  }
}

/* -------------------------
   Fog / moving cloud overlay
   Put this at the end of style.css
   ------------------------- */
.fog-overlay{
  position: fixed;    /* covers all background*/
  inset: 0;              /* top:0; right:0; bottom:0; left:0; */
  pointer-events: none;  /* click-through */
  overflow: hidden;
  z-index: -1;           /* put it behind main content; adjust if needed */
}

/* If your hero/site container is position: static, set parent to relative.
   Example: .hero { position: relative; } so fog-overlay sits relative to it. */

.fog-layer{
  position: absolute;
  left: 50%;
  top: 50%;
  width: 140%;          /* big so it covers edges */
  height: 140%;
  max-width: 2500px;
  max-height: 1600px;
  transform: translate(-50%, -50%);
  background-image: url('../img/fog.png'); /* <-- path to your fog file */
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover; /* contain|cover tweak to taste */
  opacity: 0.85;
  filter: blur(4px) saturate(0.9) contrast(0.95);
  mix-blend-mode: screen; /* or lighten; try remove if undesirable */
  will-change: transform, opacity;
}

/* create subtle, different motion for each layer */
.fog-layer:nth-child(1){
  animation: fogDrift 30s linear infinite;
  opacity: 0.85;
  transform-origin: 45% 50%;
  z-index: -6;
}
.fog-layer:nth-child(2){
  animation: fogDrift 45s linear infinite;
  animation-delay: -10s;
  opacity: 0.62;
  transform-origin: 50% 50%;
  filter: blur(5px) saturate(0.8);
  z-index: -5;
}
.fog-layer:nth-child(3){
  animation: fogDrift 25s linear infinite;
  animation-delay: -8s;
  opacity: 0.45;
  filter: blur(6px) saturate(0.8) brightness(0.95);
  z-index: -4;
}
.fog-layer:nth-child(4){
  animation: fogDrift 55s linear infinite;
  animation-delay: -20s;
  opacity: 0.28;
  filter: blur(8px) saturate(0.7);
  z-index: -3;
}
.fog-layer:nth-child(5){
  animation: fogDrift 35s linear infinite;
  animation-delay: -15s;
  opacity: 0.18;
  filter: blur(10px) brightness(0.95) saturate(0.7);
  z-index: -2;
}

/* motion keyframes: slight horizontal+vertical drift + slow scale */
@keyframes fogDrift {
  0% {
    transform: translate(-60%, -60%) scale(1) rotate(0deg);
  }
  50% {
    transform: translate(-40%, -45%) scale(1.1) rotate(1deg);
  }
  100% {
    transform: translate(-60%, -60%) scale(1) rotate(0deg);
  }
}



/* If you want fog to be on top of content, change .fog-overlay z-index to > content
   and remove pointer-events:none if you want interaction (not recommended). */