/* ========================================
   Floating SVG Background Elements
   JIS-Style Animation (School Theme)
   ======================================== */

/* ========== FLOATING ELEMENTS CONTAINER ========== */
/* Full viewport – icons are positioned on left & right side margins only */
.floating-bg-container {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

/* ========== INDIVIDUAL FLOATING ELEMENT ========== */
.floating-svg {
  position: absolute;
  opacity: 0.9;
  will-change: transform;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 2px 4px rgba(26, 54, 94, 0.15)) saturate(1.4);
}

/* Image within floating element */
.floating-svg img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

/* ========== SIZE VARIATIONS ========== */
.floating-svg--xs {
  width: 36px;
  height: 36px;
}

.floating-svg--sm {
  width: 52px;
  height: 52px;
}

.floating-svg--md {
  width: 72px;
  height: 72px;
}

.floating-svg--lg {
  width: 96px;
  height: 96px;
}

.floating-svg--xl {
  width: 120px;
  height: 120px;
}

/* ========== JIS-STYLE ANIMATIONS ========== */
/* Bottom to Top - Gentle Rise */
@keyframes floatBottomToTop {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(-20px) rotate(5deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* Top to Bottom - Gentle Fall */
@keyframes floatTopToBottom {
  0% {
    transform: translateY(0) rotate(0deg);
  }
  50% {
    transform: translateY(20px) rotate(-5deg);
  }
  100% {
    transform: translateY(0) rotate(0deg);
  }
}

/* Horizontal Sway */
@keyframes gentleSway {
  0%, 100% {
    transform: translateX(0);
  }
  50% {
    transform: translateX(15px);
  }
}

/* Combined Float + Sway */
@keyframes floatAndSway {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
  25% {
    transform: translateY(-10px) translateX(8px) rotate(3deg);
  }
  50% {
    transform: translateY(-20px) translateX(0) rotate(0deg);
  }
  75% {
    transform: translateY(-10px) translateX(-8px) rotate(-3deg);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg);
  }
}

/* Slow Drift */
@keyframes slowDrift {
  0% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
  }
  33% {
    transform: translateY(-15px) translateX(10px) rotate(5deg) scale(1.02);
  }
  66% {
    transform: translateY(-5px) translateX(-10px) rotate(-3deg) scale(0.98);
  }
  100% {
    transform: translateY(0) translateX(0) rotate(0deg) scale(1);
  }
}

/* ========== ANIMATION CLASSES ========== */
.floating-svg.float-up {
  animation: floatBottomToTop 3.5s linear infinite;
}

.floating-svg.float-down {
  animation: floatTopToBottom 3.5s linear infinite;
}

.floating-svg.float-sway {
  animation: floatAndSway 6s ease-in-out infinite;
}

.floating-svg.float-drift {
  animation: slowDrift 8s ease-in-out infinite;
}

/* ========== POSITION VARIATIONS ========== */
/* Icons on LEFT & RIGHT side gutters only — clear of center content */

/* --- LEFT SIDE (0% – 10%) --- */
.floating-svg:nth-child(1) {
  left: 1%;
  top: 12%;
  animation-delay: 0s;
  animation-duration: 3.2s;
}

.floating-svg:nth-child(2) {
  left: 5%;
  top: 38%;
  animation-delay: -0.5s;
  animation-duration: 3.8s;
}

.floating-svg:nth-child(3) {
  left: 2%;
  top: 62%;
  animation-delay: -1s;
  animation-duration: 3.5s;
}

.floating-svg:nth-child(4) {
  left: 7%;
  top: 85%;
  animation-delay: -1.5s;
  animation-duration: 4s;
}

.floating-svg:nth-child(5) {
  left: 3%;
  top: 50%;
  animation-delay: -2s;
  animation-duration: 3.3s;
}

/* --- RIGHT SIDE (90% – 99%) --- */
.floating-svg:nth-child(6) {
  right: 1%;
  left: auto;
  top: 15%;
  animation-delay: -0.8s;
  animation-duration: 3.7s;
}

.floating-svg:nth-child(7) {
  right: 5%;
  left: auto;
  top: 42%;
  animation-delay: -2.5s;
  animation-duration: 3.4s;
}

.floating-svg:nth-child(8) {
  right: 2%;
  left: auto;
  top: 68%;
  animation-delay: -1.2s;
  animation-duration: 4.2s;
}

.floating-svg:nth-child(9) {
  right: 7%;
  left: auto;
  top: 88%;
  animation-delay: -0.3s;
  animation-duration: 3.6s;
}

/* Additional elements on sides */
.floating-svg:nth-child(10) {
  left: 6%;
  top: 25%;
  animation-delay: -1.8s;
}

.floating-svg:nth-child(11) {
  right: 4%;
  left: auto;
  top: 8%;
  animation-delay: -2.2s;
}

.floating-svg:nth-child(12) {
  right: 6%;
  left: auto;
  top: 55%;
  animation-delay: -0.6s;
}

/* ========== PAPER ROCKET HORIZONTAL FLIGHT ========== */
.paper-rocket-container {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  z-index: 100;
  overflow: hidden;
}

/* Paper rocket wrapper - positioned by JS */
.paper-rocket-wrapper {
  pointer-events: none;
  z-index: 101;
}

.paper-rocket {
  width: 40px;
  height: 40px;
  will-change: transform;
  transition: transform 0.05s linear;
}

.paper-rocket img {
  width: 100%;
  height: 100%;
  filter: drop-shadow(2px 3px 5px rgba(0, 0, 0, 0.25));
}

/* Flight path SVG line styling */
.flight-path-svg {
  overflow: visible;
}

.flight-path-line {
  stroke-dasharray: 8 6;
  stroke-linecap: round;
  transition: opacity 0.5s ease-out;
}

/* ========== SECTION-SPECIFIC FLOATING ========== */
/* Only show floating elements in certain sections */
.section-with-floating {
  position: relative;
}

.section-floating-elements {
  position: absolute;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

/* ========== ACCESSIBILITY ========== */
@media (prefers-reduced-motion: reduce) {
  .floating-svg {
    animation: none !important;
    opacity: 0.06;
  }

  .paper-rocket-wrapper,
  .flight-path-svg {
    display: none !important;
  }
}

/* ========== PERFORMANCE - MOBILE ========== */
@media (max-width: 768px) {
  .floating-bg-container {
    display: none;
  }

  .paper-rocket-container {
    display: none;
  }
}

/* Tablets - reduced elements */
@media (min-width: 769px) and (max-width: 1024px) {
  .floating-svg {
    opacity: 0.7;
  }

  .floating-svg:nth-child(n+7) {
    display: none;
  }
}

/* ========== Z-INDEX LAYERING ========== */
.paper-rocket-container {
  z-index: 5; /* Above content but below modals */
}

/* Content should be above floating elements */
main,
.section,
.container {
  position: relative;
  z-index: 1;
}