/* Dedicated fullscreen loader for the plant-growing animation */
.loader-screen {
  position: fixed;
  inset: 0;
  z-index: 2147483647;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: max(24px, env(safe-area-inset-top)) max(24px, env(safe-area-inset-right)) max(24px, env(safe-area-inset-bottom)) max(24px, env(safe-area-inset-left));
  min-height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 28%, rgba(107, 190, 143, 0.28), transparent 28%),
    radial-gradient(circle at 50% 72%, rgba(231, 199, 126, 0.14), transparent 25%),
    linear-gradient(180deg, #07110d 0%, #071513 44%, #040807 100%);
  backdrop-filter: blur(4px) saturate(110%);
  -webkit-backdrop-filter: blur(4px) saturate(110%);
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  pointer-events: auto;
  isolation: isolate;
  contain: layout paint style;
  will-change: opacity, transform;
  transition:
    opacity 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.72s;
}

.loader-screen::before,
.loader-screen::after {
  content: '';
  position: absolute;
  inset: -18%;
  pointer-events: none;
}

.loader-screen::before {
  background:
    radial-gradient(circle at 50% 50%, rgba(111, 214, 152, 0.16), transparent 42%),
    radial-gradient(circle at 50% 50%, rgba(255, 227, 164, 0.08), transparent 58%);
  filter: blur(20px);
  animation: loaderAuraPulse 4.8s ease-in-out infinite;
}

.loader-screen::after {
  inset: 12% auto auto 50%;
  width: min(68vmin, 420px);
  height: min(68vmin, 420px);
  transform: translateX(-50%);
  border-radius: 50%;
  background:
    radial-gradient(circle, rgba(155, 229, 171, 0.18) 0%, rgba(92, 183, 118, 0.12) 34%, transparent 68%);
  filter: blur(24px);
  opacity: 0.9;
  animation: loaderHaloDrift 6.5s ease-in-out infinite;
}

.loader-screen.is-hiding {
  opacity: 0;
  transform: scale(1.012);
  visibility: hidden;
  pointer-events: none;
}

body.loading {
  overflow: hidden;
  overscroll-behavior: none;
  touch-action: none;
}

body.loading > header,
body.loading > main,
body.loading > footer,
body.loading > .feedback-modal-backdrop {
  opacity: 0.01;
  
  pointer-events: none;
}

body.loading > main,
body.loading > footer {
  transform: translateY(14px);
  transition:
    opacity 0.45s ease,
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0.45s;
}

body.loading > header {
  transition:
    opacity 0.45s ease,
    visibility 0s linear 0.45s;
}

body.loaded > header,
body.loaded > main,
body.loaded > footer,
body.loaded > .feedback-modal-backdrop {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

body.loaded > main,
body.loaded > footer {
  transform: translateY(0);
  transition:
    opacity 0.55s ease,
    transform 0.72s cubic-bezier(0.22, 1, 0.36, 1),
    visibility 0s linear 0s;
}

body.loaded > header {
  transition:
    opacity 0.55s ease,
    visibility 0s linear 0s;
}

html.loader-skip body.loading {
  overflow: auto;
  overscroll-behavior: auto;
  touch-action: auto;
}

html.loader-skip body.loading > header,
html.loader-skip body.loading > main,
html.loader-skip body.loading > footer,
html.loader-skip body.loading > .feedback-modal-backdrop {
  opacity: 1 !important;
  visibility: visible !important;
  pointer-events: auto !important;
}

html.loader-skip body.loading > main,
html.loader-skip body.loading > footer {
  transform: none !important;
  transition: none !important;
}

html.loader-skip .loader-screen {
  display: none !important;
}

.loader-plant {
  position: relative;
  width: min(72vw, 340px);
  max-width: 340px;
  max-height: 72svh;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateZ(0);
  filter: drop-shadow(0 26px 38px rgba(0, 0, 0, 0.28));
  animation: loaderFloat 5.8s ease-in-out infinite;
}

.loader-plant::before {
  content: '';
  position: absolute;
  inset: -12%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(108, 213, 142, 0.24) 0%, rgba(108, 213, 142, 0.12) 28%, transparent 70%);
  filter: blur(18px);
  animation: loaderGlow 4.4s ease-in-out infinite;
}

.loader-plant svg {
  position: relative;
  z-index: 1;
  display: block;
  width: 100%;
  height: auto;
  max-height: 72svh;
  overflow: visible;
  transform-origin: center center;
  animation: loaderBreath 4.8s ease-in-out infinite;
}

.loader-plant svg * {
  transform-box: fill-box;
}

#loaderPlantAnimation #shadow {
  transform-origin: center center;
}

#loaderPlantAnimation #tree {
  transform-origin: center bottom;
}

@keyframes loaderFloat {
  0%,
  100% {
    transform: translate3d(0, 0, 0);
  }

  50% {
    transform: translate3d(0, -8px, 0);
  }
}

@keyframes loaderGlow {
  0%,
  100% {
    opacity: 0.68;
    transform: scale(0.96);
  }

  50% {
    opacity: 1;
    transform: scale(1.04);
  }
}

@keyframes loaderBreath {
  0%,
  100% {
    filter: saturate(1) brightness(1);
  }

  50% {
    filter: saturate(1.08) brightness(1.06);
  }
}

@keyframes loaderAuraPulse {
  0%,
  100% {
    opacity: 0.5;
    transform: scale(0.98);
  }

  50% {
    opacity: 0.9;
    transform: scale(1.02);
  }
}

@keyframes loaderHaloDrift {
  0%,
  100% {
    transform: translateX(-50%) translateY(0) scale(0.98);
  }

  50% {
    transform: translateX(-50%) translateY(-10px) scale(1.04);
  }
}

@media (max-width: 640px) {
  .loader-plant {
    width: min(82vw, 290px);
    max-width: 290px;
  }
}

@media (max-width: 420px) {
  .loader-screen {
    padding: max(18px, env(safe-area-inset-top)) max(18px, env(safe-area-inset-right)) max(18px, env(safe-area-inset-bottom)) max(18px, env(safe-area-inset-left));
  }

  .loader-plant {
    width: min(88vw, 250px);
    max-width: 250px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .loader-screen,
  .loader-screen::before,
  .loader-screen::after,
  .loader-plant,
  .loader-plant::before,
  .loader-plant svg,
  #loaderPlantAnimation #shadow,
  #loaderPlantAnimation #tree {
    animation: none !important;
  }

  .loader-screen {
    transition-duration: 0.25s;
  }

  .loader-plant {
    filter: none;
  }
}

/* FIX: Hide animation elements initially to prevent Flash of Unstyled Content */
#loaderPlantAnimation #shadow {
  transform-origin: 15px 8px;
  opacity: 0;
  transform: scale(0);
}

#loaderPlantAnimation #tree {
  transform-origin: 154px bottom;
  opacity: 0;
  transform: scale(0) translateY(20px);
}