/* Spring decoration — EP Classroom. Pure CSS/SVG, no images, no feTurbulence. */
:root { --sp-garland-h: 30px; }

body.spring-decor-active { padding-top: var(--sp-garland-h); }
body.spring-decor-active .app-layout { height: calc(100vh - var(--sp-garland-h)); }

/* Dark base behind everything */
#spring-decor-bg {
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(ellipse 60% 45% at 8% 100%, rgba(74, 222, 128, .14), transparent 70%),
    radial-gradient(ellipse 55% 40% at 95% 10%, rgba(249, 168, 212, .12), transparent 70%),
    #0d1117;
}

/* Photo: sized to the .page-wrapper rect (same approach as the World Cup one), edges faded by mask */
#spring-decor-img {
  position: fixed; z-index: 0; pointer-events: none;
  background:
    linear-gradient(rgba(13, 17, 23, .30), rgba(13, 17, 23, .30)),
    url('../images/spring/spring-bg.webp') center / cover no-repeat;
  -webkit-mask-image:
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    linear-gradient(to right,  transparent 0%, #000 12%, #000 88%, transparent 100%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-composite: intersect;
}
body.spring-decor-active .page-wrapper { position: relative; z-index: 1; }

#spring-decor-root {
  position: fixed; inset: 0; z-index: 2; overflow: hidden; pointer-events: none;
}
#spring-decor-root * { pointer-events: none; }
/* Petals & critters: above all panels, below modals (modals start at z 9001) */
/* z-index 0: por encima de la foto de fondo pero DETRÁS de la hoja de notas (.page-wrapper, z 1), así no tapa el texto */
#spring-decor-fx { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; }
#spring-decor-fx * { pointer-events: none; }

.sp-garland { position: absolute; top: 0; left: 0; width: 100%; height: 46px; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, .4)); }
.sp-grass   { position: absolute; bottom: 0; left: 0; width: 100%; height: 64px; }

/* Petals */
.sp-petal { position: absolute; top: -24px; animation: sp-fall linear infinite; opacity: 0; }
.sp-petal i {
  display: block; border-radius: 150% 0 150% 0; opacity: .8;
  animation: sp-sway ease-in-out infinite alternate;
}
@keyframes sp-fall {
  0%   { transform: translateY(-30px) rotate(0deg); opacity: 0; }
  8%   { opacity: .85; }
  92%  { opacity: .85; }
  100% { transform: translateY(108vh) rotate(300deg); opacity: 0; }
}
@keyframes sp-sway {
  from { transform: translateX(-22px) rotate(-25deg); }
  to   { transform: translateX(22px) rotate(25deg); }
}

/* Butterflies & bees */
.sp-critter { position: absolute; left: 0; will-change: transform; }
.sp-critter.ltr { animation: sp-cross-ltr linear forwards; }
.sp-critter.rtl { animation: sp-cross-rtl linear forwards; }
@keyframes sp-cross-ltr { from { transform: translateX(-80px); } to { transform: translateX(calc(100vw + 80px)); } }
@keyframes sp-cross-rtl { from { transform: translateX(calc(100vw + 80px)); } to { transform: translateX(-80px); } }
.sp-critter .bob { animation: sp-bob ease-in-out infinite alternate; }
.sp-critter.rtl .bob svg { transform: scaleX(-1); }
.sp-critter img { max-width: none; height: auto; }
@keyframes sp-bob { from { transform: translateY(-26px); } to { transform: translateY(26px); } }
.sp-wing { transform-origin: 50% 50%; animation: sp-flap .35s ease-in-out infinite alternate; }
@keyframes sp-flap { from { transform: scaleY(1); } to { transform: scaleY(.35); } }

@media (max-width: 700px) {
  :root { --sp-garland-h: 22px; }
  .sp-garland { height: 34px; }
  .sp-grass { height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  .sp-petal, .sp-petal i, .sp-critter, .sp-critter .bob, .sp-wing { animation: none !important; }
  .sp-petal { opacity: 0; }
}