/*
Theme Name: Extendable Child
Theme URI: http://example.com/extendable-child
Description: Child theme for Momen
Author: Momen.Food
Author URI: http://Momen.Food
Template: extendable
Version: 1.0.0
Text Domain: extendable-child
*/

/* You can add your custom CSS below */


:root {
  --speed-mult: 1;
}

#animated-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
  background: #ffffff;
}

#animated-bg > svg, #animated-bg .layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

#animated-bg::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  mix-blend-mode: multiply;
  opacity: 0.02;
  background: radial-gradient(60% 60% at 50% 40%, rgba(0,0,0,0.02), transparent 40%);
}

.star {
  fill: var(--accent, #a1bc3a);
  opacity: 0.7;
  transform-origin: center;
  filter: drop-shadow(0 0 3px rgba(161,188,58,0.4));
}

.star.twinkle {
  animation: twinkle calc(6s * var(--speed-mult)) ease-in-out infinite alternate;
}

.star.float {
  animation: floatY calc(22s * var(--speed-mult)) linear infinite;
}

.shooting-star {
  fill: none;
  stroke: var(--accent, #a1bc3a);
  stroke-width: 1.5px;
  stroke-linecap: round;
  filter: drop-shadow(0 0 5px rgba(161, 188, 58, 0.6));
  animation: shootingStar calc(20s * var(--speed-mult)) linear infinite;
  opacity: 0;
  transform: translateX(-100vw);
}

.far-forest {
  animation: moveForestFar calc(40s * var(--speed-mult)) linear infinite alternate;
}

.close-forest {
  animation: moveForestClose calc(30s * var(--speed-mult)) linear infinite alternate;
}

.tree {
  fill: #333333;
  stroke: none;
  opacity: 0.8;
}

.leaf {
  fill: var(--accent, #a1bc3a);
  opacity: 0.015;
  transform-origin: center;
  animation: leafDrift calc(18s * var(--speed-mult)) linear infinite;
}

@keyframes twinkle {
  from { opacity: 0.2; transform: scale(.7); }
  to { opacity: 0.8; transform: scale(1.1); }
}

@keyframes floatY {
  from { transform: translateY(-6vh); }
  to { transform: translateY(6vh); }
}

@keyframes leafDrift {
  0% { transform: translateY(0) rotate(0); }
  50% { transform: translateY(-8vh) rotate(20deg); }
  100% { transform: translateY(0) rotate(0); }
}

@keyframes shootingStar {
  0%, 90% { transform: translateX(-100vw); opacity: 0; }
  92% { opacity: 1; }
  100% { transform: translate(200vw, -100vh); opacity: 0; }
}

@keyframes moveForestFar {
  from { transform: translateX(-5%); }
  to { transform: translateX(5%); }
}

@keyframes moveForestClose {
  from { transform: translateX(5%); }
  to { transform: translateX(-5%); }
}

[data-variant] { opacity: 1; }

[data-variant] .variant { opacity: 0; transition: opacity .4s ease; }

[data-variant="starry"] .variant.starry { opacity: 1; }

[data-variant="starry"] .variant.forest {
  opacity: 1;
  mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 70%);
  -webkit-mask-image: linear-gradient(to top, rgba(0,0,0,0.6) 0%, transparent 70%);
}

@media (prefers-reduced-motion: reduce) {
  .star.twinkle, .star.float, .leaf, .shooting-star, .far-forest, .close-forest {
    animation: none !important;
  }
}