/* ============================================
   The Feeling — Botanical Layer System
   ============================================
   Reusable floral decoration layers for story
   pages. Independent from page content.

   - Layering above / below paper (z-index)
   - Subtle, GPU-accelerated idle animations
   - Reduced-motion support
   - Mobile clamps
   ============================================ */

/* --------------------------------------------------
   Base layer
   -------------------------------------------------- */

.botanical-layer {
  position: absolute;
  z-index: 2;                     /* default: above paper */
  pointer-events: none;
  line-height: 0;
  opacity: 1;
  transform: translate3d(
    var(--parallax-x, 0px),
    var(--parallax-y, 0px),
    0
  );
  will-change: transform;
  user-select: none;
  -webkit-user-select: none;
}

/* Layers that should sit behind the paper */
.botanical-layer--below {
  z-index: 1;
}

/* Hidden while below a page's current progression level */
.botanical-layer--hidden {
  display: none !important;
}

/* --------------------------------------------------
   Art element
   -------------------------------------------------- */

.botanical-layer__art {
  display: block;
  transform: rotate(var(--layer-rotation, 0deg));
  transform-origin: center center;
}

.botanical-layer__svg,
.botanical-layer__img {
  display: block;
  width: 100%;
  height: auto;
}

.botanical-layer__img {
  background: transparent;
}

/* --------------------------------------------------
   Idle animations — intentionally almost invisible.
   Transform + opacity only (GPU accelerated).
   -------------------------------------------------- */

.botanical-layer__art--breathe {
  animation: botanical-breathe 9s ease-in-out infinite;
}

.botanical-layer__art--float {
  animation: botanical-float 14s ease-in-out infinite;
}

.botanical-layer__art--drift {
  animation: botanical-drift 18s ease-in-out infinite;
}

/* NOTE: each keyframe composes the layer's rotation
   (var(--layer-rotation)) so rotation is never lost
   while an idle animation runs. */

@keyframes botanical-breathe {
  0%, 100% { transform: rotate(var(--layer-rotation, 0deg)) scale(1); }
  50%      { transform: rotate(var(--layer-rotation, 0deg)) scale(1.015); }
}

@keyframes botanical-float {
  0%, 100% { transform: rotate(var(--layer-rotation, 0deg)) translateY(0); }
  50%      { transform: rotate(var(--layer-rotation, 0deg)) translateY(-3px); }
}

@keyframes botanical-drift {
  0%, 100% { transform: rotate(var(--layer-rotation, 0deg)) translate(0, 0) rotate(0deg); }
  33%      { transform: rotate(var(--layer-rotation, 0deg)) translate(2px, -2px) rotate(1.5deg); }
  66%      { transform: rotate(var(--layer-rotation, 0deg)) translate(-2px, 1px) rotate(-1deg); }
}

/* --------------------------------------------------
   Reduced motion
   -------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .botanical-layer__art {
    animation: none !important;
  }

  .botanical-layer {
    transform: none;
  }
}

/* --------------------------------------------------
   Mobile — keep botanicals small and out of the way
   -------------------------------------------------- */

@media (max-width: 480px) {
  .botanical-layer {
    max-width: 38vw;
  }
}