/* ========================================
   Floating Shapes
   1) Burst outward from center on load
   2) Then float continuously
   ======================================== */

.floating-shapes {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  pointer-events: none;
  z-index: 1;
  overflow: hidden;
}

.shape {
  position: absolute;
  opacity: 0;
}

/* --- Shape types --- */
.shape-circle  { border-radius: 50%; }
.shape-triangle {
  background: transparent !important;
  width: 0 !important;
  height: 0 !important;
  border-left-style: solid;
  border-right-style: solid;
  border-bottom-style: solid;
  border-left-color: transparent;
  border-right-color: transparent;
}
.shape-square  { border-radius: 4px; }

/* --- Colors --- */
.color-blue   { background: #0874C7; }
.color-orange { background: #D98345; }
.color-green  { background: #5BAD6F; }
.color-yellow { background: #E8BF4B; }
.color-coral  { background: #E07265; }
.color-purple { background: #9B6BBF; }

.shape-triangle.color-blue   { border-bottom-color: #0874C7; }
.shape-triangle.color-orange { border-bottom-color: #D98345; }
.shape-triangle.color-green  { border-bottom-color: #5BAD6F; }
.shape-triangle.color-yellow { border-bottom-color: #E8BF4B; }
.shape-triangle.color-coral  { border-bottom-color: #E07265; }
.shape-triangle.color-purple { border-bottom-color: #9B6BBF; }

/* ---- Burst: fly outward from center ---- */
@keyframes shape-burst {
  0%   { transform: translate(var(--tx, 0px), var(--ty, 0px)) scale(0.2) rotate(var(--r0, 20deg)); opacity: 0; }
  60%  { opacity: 1; }
  100% { transform: translate(0, 0) scale(1) rotate(0deg); opacity: 1; }
}

/* ---- Float: gentle bob after burst ---- */
@keyframes float-a {
  0%   { transform: translateY(0px)   rotate(0deg); }
  25%  { transform: translateY(-18px) rotate(6deg); }
  50%  { transform: translateY(-6px)  rotate(-3deg); }
  75%  { transform: translateY(-14px) rotate(4deg); }
  100% { transform: translateY(0px)   rotate(0deg); }
}
@keyframes float-b {
  0%   { transform: translateY(0px)   rotate(0deg); }
  30%  { transform: translateY(-22px) rotate(-7deg); }
  60%  { transform: translateY(-10px) rotate(5deg); }
  100% { transform: translateY(0px)   rotate(0deg); }
}
@keyframes float-c {
  0%   { transform: translateY(0px)   rotate(0deg); }
  20%  { transform: translateY(-12px) rotate(8deg); }
  55%  { transform: translateY(-24px) rotate(-5deg); }
  80%  { transform: translateY(-8px)  rotate(3deg); }
  100% { transform: translateY(0px)   rotate(0deg); }
}

/* --------------------------------------------------------
   Individual shapes
   Each has:
     shape-burst  (one-shot, fills forwards then float takes over)
   + float-X      (infinite, delay = burst ends ≈ 1s)
   --tx/--ty = starting offset toward viewport center
   --r0      = initial rotation for burst spin
   -------------------------------------------------------- */

/* 1: large triangle — top-left, blue */
.shape-1 {
  top: 8%; left: 3%;
  --tx: 38vw; --ty: 32vh; --r0: -40deg;
  border-left-width: 48px; border-right-width: 48px; border-bottom-width: 82px;
  animation:
    shape-burst 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.04s forwards,
    float-a     7s   ease-in-out                         1.0s infinite;
}

/* 2: small circle — top-right, orange */
.shape-2 {
  top: 6%; right: 6%;
  --tx: -36vw; --ty: 34vh; --r0: 30deg;
  width: 42px; height: 42px;
  animation:
    shape-burst 0.50s cubic-bezier(0.34, 1.56, 0.64, 1) 0.10s forwards,
    float-b     9s   ease-in-out                         1.0s infinite;
}

/* 3: medium square — upper-right, green */
.shape-3 {
  top: 18%; right: 12%;
  --tx: -28vw; --ty: 24vh; --r0: 20deg;
  width: 54px; height: 54px;
  animation:
    shape-burst 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) 0.18s forwards,
    float-c     8s   ease-in-out                         1.0s infinite;
}

/* 4: small triangle — mid-left, yellow */
.shape-4 {
  top: 38%; left: 5%;
  --tx: 34vw; --ty: 8vh; --r0: -25deg;
  border-left-width: 26px; border-right-width: 26px; border-bottom-width: 46px;
  animation:
    shape-burst 0.48s cubic-bezier(0.34, 1.56, 0.64, 1) 0.26s forwards,
    float-b    11s   ease-in-out                         1.0s infinite;
}

/* 5: medium circle — mid-right, coral */
.shape-5 {
  top: 42%; right: 4%;
  --tx: -36vw; --ty: 4vh; --r0: 15deg;
  width: 66px; height: 66px;
  animation:
    shape-burst 0.50s cubic-bezier(0.34, 1.56, 0.64, 1) 0.08s forwards,
    float-a    10s   ease-in-out                         1.0s infinite;
}

/* 6: small square — upper-left, coral */
.shape-6 {
  top: 25%; left: 8%;
  --tx: 30vw; --ty: 18vh; --r0: 35deg;
  width: 34px; height: 34px;
  animation:
    shape-burst 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) 0.16s forwards,
    float-c     6s   ease-in-out                         1.0s infinite;
}

/* 7: large circle — lower-right, purple */
.shape-7 {
  bottom: 20%; right: 8%;
  --tx: -32vw; --ty: -22vh; --r0: -20deg;
  width: 90px; height: 90px;
  animation:
    shape-burst 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) 0.32s forwards,
    float-b    13s   ease-in-out                         1.0s infinite;
}

/* 8: medium triangle — lower-left, green */
.shape-8 {
  bottom: 25%; left: 6%;
  --tx: 32vw; --ty: -18vh; --r0: 30deg;
  border-left-width: 38px; border-right-width: 38px; border-bottom-width: 66px;
  animation:
    shape-burst 0.52s cubic-bezier(0.34, 1.56, 0.64, 1) 0.22s forwards,
    float-a     9s   ease-in-out                         1.0s infinite;
}

/* 9: small circle — lower-left bottom, blue */
.shape-9 {
  bottom: 8%; left: 14%;
  --tx: 26vw; --ty: -34vh; --r0: -15deg;
  width: 30px; height: 30px;
  animation:
    shape-burst 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) 0.14s forwards,
    float-c     7s   ease-in-out                         1.0s infinite;
}

/* 10: small square — lower-right, yellow */
.shape-10 {
  bottom: 10%; right: 16%;
  --tx: -24vw; --ty: -30vh; --r0: 25deg;
  width: 38px; height: 38px;
  animation:
    shape-burst 0.46s cubic-bezier(0.34, 1.56, 0.64, 1) 0.28s forwards,
    float-b     8s   ease-in-out                         1.0s infinite;
}

/* 11: triangle — center-right, orange */
.shape-11 {
  top: 60%; right: 18%;
  --tx: -22vw; --ty: -8vh; --r0: -30deg;
  border-left-width: 20px; border-right-width: 20px; border-bottom-width: 36px;
  animation:
    shape-burst 0.42s cubic-bezier(0.34, 1.56, 0.64, 1) 0.20s forwards,
    float-a    12s   ease-in-out                         1.0s infinite;
}

/* 12: medium square — upper-center, blue */
.shape-12 {
  top: 12%; left: 22%;
  --tx: 20vw; --ty: 28vh; --r0: 20deg;
  width: 45px; height: 45px;
  animation:
    shape-burst 0.50s cubic-bezier(0.34, 1.56, 0.64, 1) 0.36s forwards,
    float-c    10s   ease-in-out                         1.0s infinite;
}

/* 13: small circle — mid-left, purple */
.shape-13 {
  top: 55%; left: 16%;
  --tx: 24vw; --ty: -4vh; --r0: -25deg;
  width: 28px; height: 28px;
  animation:
    shape-burst 0.46s cubic-bezier(0.34, 1.56, 0.64, 1) 0.30s forwards,
    float-b     8s   ease-in-out                         1.0s infinite;
}

/* 14: triangle — top-center, coral */
.shape-14 {
  top: 3%; left: 42%;
  --tx: 6vw; --ty: 38vh; --r0: 40deg;
  border-left-width: 30px; border-right-width: 30px; border-bottom-width: 52px;
  animation:
    shape-burst 0.44s cubic-bezier(0.34, 1.56, 0.64, 1) 0.06s forwards,
    float-a    11s   ease-in-out                         1.0s infinite;
}

/* 15: large square — center-bottom, green */
.shape-15 {
  top: 70%; left: 40%;
  --tx: 6vw; --ty: -16vh; --r0: 15deg;
  width: 72px; height: 72px;
  animation:
    shape-burst 0.56s cubic-bezier(0.34, 1.56, 0.64, 1) 0.40s forwards,
    float-c    14s   ease-in-out                         1.0s infinite;
}

/* ========================================
   一時停止: 浮遊アニメーションを非表示
   再開するときはこのブロックを削除する
   ======================================== */
.floating-shapes { display: none !important; }

/* ---- モバイル: 数を絞る ---- */
@media (max-width: 768px) {
  .shape-4  { opacity: 0 !important; animation: none !important; }
  .shape-6  { opacity: 0 !important; animation: none !important; }
  .shape-9  { opacity: 0 !important; animation: none !important; }
  .shape-10 { opacity: 0 !important; animation: none !important; }
  .shape-11 { opacity: 0 !important; animation: none !important; }
  .shape-12 { opacity: 0 !important; animation: none !important; }
  .shape-13 { opacity: 0 !important; animation: none !important; }
  .shape-14 { display: none; }
  .shape-15 { opacity: 0 !important; animation: none !important; }
}