/* ===================================================
   Forest Animation System
   Pure CSS — trees, clouds, sun, birds, falling leaves
   Extracted from northfrontenac.info landing page
   =================================================== */

/* ---- Sun ---- */

.sun {
  position: fixed;
  top: 6%;
  right: 12%;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, #FFF9C4 0%, #FFD54F 40%, rgba(255,213,79,0) 70%);
  border-radius: 50%;
  box-shadow:
    0 0 60px rgba(255,193,7,0.4),
    0 0 120px rgba(255,193,7,0.2);
  animation: pulse-sun 4s ease-in-out infinite;
  z-index: 1;
  pointer-events: none;
}

@keyframes pulse-sun {
  0%, 100% { transform: scale(1); opacity: 0.95; }
  50% { transform: scale(1.08); opacity: 1; }
}

/* ---- Clouds ---- */

.cloud {
  position: fixed;
  background: white;
  border-radius: 50px;
  opacity: 0.7;
  z-index: 2;
  pointer-events: none;
}
.cloud::before, .cloud::after {
  content: '';
  position: absolute;
  background: white;
  border-radius: 50%;
}
.cloud-1 {
  width: 120px; height: 40px;
  top: 8%; left: -5%;
  animation: drift 45s linear infinite;
}
.cloud-1::before { width: 50px; height: 50px; top: -25px; left: 20px; }
.cloud-1::after { width: 70px; height: 55px; top: -30px; left: 50px; }

.cloud-2 {
  width: 90px; height: 30px;
  top: 14%; left: -10%;
  animation: drift 60s linear infinite;
  animation-delay: -20s;
  opacity: 0.5;
}
.cloud-2::before { width: 40px; height: 40px; top: -20px; left: 15px; }
.cloud-2::after { width: 55px; height: 45px; top: -25px; left: 35px; }

.cloud-3 {
  width: 140px; height: 45px;
  top: 5%; left: -15%;
  animation: drift 70s linear infinite;
  animation-delay: -35s;
  opacity: 0.55;
}
.cloud-3::before { width: 60px; height: 55px; top: -28px; left: 25px; }
.cloud-3::after { width: 80px; height: 60px; top: -32px; left: 60px; }

@keyframes drift {
  from { transform: translateX(0); }
  to { transform: translateX(calc(100vw + 200px)); }
}

/* ---- Forest Scene ---- */

.forest-scene {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 45vh;
  z-index: 3;
  pointer-events: none;
}

/* For interior pages — smaller scene in footer only */
.forest-scene-footer {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 180px;
  z-index: 1;
  pointer-events: none;
  overflow: hidden;
}

/* ---- Ground ---- */

.ground {
  position: absolute;
  bottom: 0;
  left: -5%;
  right: -5%;
  height: 18vh;
  background: linear-gradient(180deg, #4CAF50 0%, #388E3C 30%, #2E7D32 100%);
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
}
.ground::before {
  content: '';
  position: absolute;
  top: -3vh;
  left: -2%;
  right: -2%;
  height: 6vh;
  background: linear-gradient(180deg, transparent, #4CAF50);
  border-radius: 50%;
}

/* Footer-sized ground */
.forest-scene-footer .ground {
  height: 80px;
}
.forest-scene-footer .ground::before {
  height: 20px;
  top: -10px;
}

/* ---- Trees — CSS Pine Trees ---- */

.tree {
  position: absolute;
  bottom: 12vh;
}
.tree .trunk {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  background: linear-gradient(90deg, #5D4037, #795548, #5D4037);
  border-radius: 2px;
}
.tree .canopy {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: solid transparent;
  border-right: solid transparent;
  border-bottom: solid;
}

/* Footer trees sit on smaller ground */
.forest-scene-footer .tree {
  bottom: 50px;
  transform: scale(0.6);
  transform-origin: bottom center;
}

/* Tree 1 */
.tree-1 { left: 3%; }
.tree-1 .trunk { width: 10px; height: 45px; }
.tree-1 .c1 { bottom: 35px; border-left-width: 35px; border-right-width: 35px; border-bottom-width: 50px; border-bottom-color: #1B5E20; }
.tree-1 .c2 { bottom: 65px; border-left-width: 28px; border-right-width: 28px; border-bottom-width: 45px; border-bottom-color: #2E7D32; }
.tree-1 .c3 { bottom: 92px; border-left-width: 20px; border-right-width: 20px; border-bottom-width: 38px; border-bottom-color: #388E3C; }

/* Tree 2 */
.tree-2 { left: 10%; }
.tree-2 .trunk { width: 14px; height: 55px; }
.tree-2 .c1 { bottom: 42px; border-left-width: 48px; border-right-width: 48px; border-bottom-width: 65px; border-bottom-color: #1B5E20; }
.tree-2 .c2 { bottom: 82px; border-left-width: 38px; border-right-width: 38px; border-bottom-width: 55px; border-bottom-color: #2E7D32; }
.tree-2 .c3 { bottom: 118px; border-left-width: 26px; border-right-width: 26px; border-bottom-width: 45px; border-bottom-color: #43A047; }

/* Tree 3 */
.tree-3 { left: 20%; }
.tree-3 .trunk { width: 8px; height: 35px; }
.tree-3 .c1 { bottom: 28px; border-left-width: 25px; border-right-width: 25px; border-bottom-width: 38px; border-bottom-color: #2E7D32; }
.tree-3 .c2 { bottom: 52px; border-left-width: 18px; border-right-width: 18px; border-bottom-width: 32px; border-bottom-color: #43A047; }
.tree-3 .c3 { bottom: 72px; border-left-width: 12px; border-right-width: 12px; border-bottom-width: 26px; border-bottom-color: #66BB6A; }

/* Tree 4 */
.tree-4 { left: 30%; }
.tree-4 .trunk { width: 12px; height: 50px; }
.tree-4 .c1 { bottom: 40px; border-left-width: 42px; border-right-width: 42px; border-bottom-width: 58px; border-bottom-color: #1B5E20; }
.tree-4 .c2 { bottom: 76px; border-left-width: 33px; border-right-width: 33px; border-bottom-width: 50px; border-bottom-color: #2E7D32; }
.tree-4 .c3 { bottom: 108px; border-left-width: 22px; border-right-width: 22px; border-bottom-width: 40px; border-bottom-color: #388E3C; }

/* Tree 5 */
.tree-5 { right: 5%; }
.tree-5 .trunk { width: 14px; height: 55px; }
.tree-5 .c1 { bottom: 42px; border-left-width: 50px; border-right-width: 50px; border-bottom-width: 68px; border-bottom-color: #1B5E20; }
.tree-5 .c2 { bottom: 85px; border-left-width: 40px; border-right-width: 40px; border-bottom-width: 58px; border-bottom-color: #2E7D32; }
.tree-5 .c3 { bottom: 122px; border-left-width: 28px; border-right-width: 28px; border-bottom-width: 46px; border-bottom-color: #43A047; }

/* Tree 6 */
.tree-6 { right: 15%; }
.tree-6 .trunk { width: 10px; height: 42px; }
.tree-6 .c1 { bottom: 33px; border-left-width: 32px; border-right-width: 32px; border-bottom-width: 46px; border-bottom-color: #2E7D32; }
.tree-6 .c2 { bottom: 63px; border-left-width: 24px; border-right-width: 24px; border-bottom-width: 40px; border-bottom-color: #388E3C; }
.tree-6 .c3 { bottom: 90px; border-left-width: 16px; border-right-width: 16px; border-bottom-width: 32px; border-bottom-color: #66BB6A; }

/* Tree 7 */
.tree-7 { right: 28%; }
.tree-7 .trunk { width: 12px; height: 48px; }
.tree-7 .c1 { bottom: 38px; border-left-width: 44px; border-right-width: 44px; border-bottom-width: 60px; border-bottom-color: #1B5E20; }
.tree-7 .c2 { bottom: 76px; border-left-width: 34px; border-right-width: 34px; border-bottom-width: 52px; border-bottom-color: #2E7D32; }
.tree-7 .c3 { bottom: 110px; border-left-width: 24px; border-right-width: 24px; border-bottom-width: 42px; border-bottom-color: #43A047; }

/* Tree 8 */
.tree-8 { left: 42%; }
.tree-8 .trunk { width: 16px; height: 60px; }
.tree-8 .c1 { bottom: 48px; border-left-width: 55px; border-right-width: 55px; border-bottom-width: 72px; border-bottom-color: #1B5E20; }
.tree-8 .c2 { bottom: 95px; border-left-width: 44px; border-right-width: 44px; border-bottom-width: 62px; border-bottom-color: #2E7D32; }
.tree-8 .c3 { bottom: 136px; border-left-width: 32px; border-right-width: 32px; border-bottom-width: 50px; border-bottom-color: #388E3C; }

/* Tree 9 */
.tree-9 { left: 55%; }
.tree-9 .trunk { width: 8px; height: 32px; }
.tree-9 .c1 { bottom: 25px; border-left-width: 22px; border-right-width: 22px; border-bottom-width: 34px; border-bottom-color: #2E7D32; }
.tree-9 .c2 { bottom: 48px; border-left-width: 16px; border-right-width: 16px; border-bottom-width: 28px; border-bottom-color: #43A047; }
.tree-9 .c3 { bottom: 66px; border-left-width: 10px; border-right-width: 10px; border-bottom-width: 22px; border-bottom-color: #66BB6A; }

/* Tree 10 */
.tree-10 { left: 65%; }
.tree-10 .trunk { width: 11px; height: 46px; }
.tree-10 .c1 { bottom: 36px; border-left-width: 38px; border-right-width: 38px; border-bottom-width: 54px; border-bottom-color: #1B5E20; }
.tree-10 .c2 { bottom: 70px; border-left-width: 30px; border-right-width: 30px; border-bottom-width: 46px; border-bottom-color: #2E7D32; }
.tree-10 .c3 { bottom: 100px; border-left-width: 20px; border-right-width: 20px; border-bottom-width: 36px; border-bottom-color: #43A047; }

/* ---- Falling Leaves ---- */

.leaf {
  position: fixed;
  width: 12px;
  height: 12px;
  background: #66BB6A;
  border-radius: 0 50% 50% 50%;
  opacity: 0.6;
  z-index: 4;
  pointer-events: none;
  animation: fall linear infinite;
}
.leaf:nth-child(1) { left: 10%; width: 10px; height: 10px; background: #81C784; animation-duration: 12s; animation-delay: 0s; }
.leaf:nth-child(2) { left: 25%; width: 8px; height: 8px; background: #A5D6A7; animation-duration: 15s; animation-delay: -3s; }
.leaf:nth-child(3) { left: 45%; width: 14px; height: 14px; background: #43A047; animation-duration: 18s; animation-delay: -7s; }
.leaf:nth-child(4) { left: 60%; width: 9px; height: 9px; background: #66BB6A; animation-duration: 14s; animation-delay: -2s; }
.leaf:nth-child(5) { left: 78%; width: 11px; height: 11px; background: #81C784; animation-duration: 16s; animation-delay: -9s; }
.leaf:nth-child(6) { left: 90%; width: 7px; height: 7px; background: #C8E6C9; animation-duration: 20s; animation-delay: -5s; }
.leaf:nth-child(7) { left: 35%; width: 10px; height: 10px; background: #FFD54F; animation-duration: 17s; animation-delay: -11s; }
.leaf:nth-child(8) { left: 70%; width: 13px; height: 13px; background: #AED581; animation-duration: 13s; animation-delay: -4s; }

@keyframes fall {
  0% { top: -5%; transform: rotate(0deg) translateX(0); opacity: 0.7; }
  25% { transform: rotate(90deg) translateX(30px); }
  50% { transform: rotate(180deg) translateX(-20px); opacity: 0.5; }
  75% { transform: rotate(270deg) translateX(25px); }
  100% { top: 95%; transform: rotate(360deg) translateX(0); opacity: 0; }
}

/* ---- Birds ---- */

.bird {
  position: fixed;
  z-index: 5;
  pointer-events: none;
  animation: fly linear infinite;
}
.bird span {
  display: inline-block;
  font-size: 0;
  width: 3px;
  height: 1px;
  background: #37474F;
  border-radius: 50%;
  position: relative;
}
.bird span::before, .bird span::after {
  content: '';
  position: absolute;
  top: -3px;
  width: 12px;
  height: 4px;
  border-top: 2px solid #546E7A;
  border-radius: 50%;
}
.bird span::before { right: 2px; transform: rotate(-15deg); }
.bird span::after { left: 2px; transform: rotate(15deg); }

.bird-1 { top: 16%; animation-duration: 25s; }
.bird-2 { top: 12%; animation-duration: 30s; animation-delay: -10s; }
.bird-3 { top: 22%; animation-duration: 35s; animation-delay: -18s; }

@keyframes fly {
  0% { left: -30px; }
  100% { left: calc(100vw + 30px); }
}

/* ---- Reduced Motion ---- */

@media (prefers-reduced-motion: reduce) {
  .leaf, .cloud, .bird, .sun { animation: none !important; }
  .leaf { opacity: 0.4; top: 50%; }
}