/* ============================================================
   Part 7 — Background（背景・パーティクル） cards 091–105
   All classes / keyframes prefixed p01- … p15-
   ============================================================ */

/* ---------- 091 Bubbles (p01-) ---------- */
.p01-b{
  position:absolute;
  left:var(--x);
  bottom:-40px;
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  background:radial-gradient(circle at 32% 30%,
    rgba(255,255,255,.95) 0 16%,
    rgba(255,255,255,.3) 44%,
    rgba(255,255,255,.12) 100%);
  border:2px solid rgba(255,255,255,.7);
  animation:p01-rise var(--t) ease-in-out var(--d) infinite;
}
@keyframes p01-rise{
  0%{transform:translate(0,0);opacity:0}
  10%{opacity:1}
  25%{transform:translate(7px,-52px)}
  50%{transform:translate(-7px,-102px)}
  75%{transform:translate(6px,-152px)}
  90%{opacity:.9}
  100%{transform:translate(0,-205px);opacity:.4}
}

/* ---------- 092 Confetti (p02-) ---------- */
.p02-f{
  position:absolute;
  top:-16px;
  left:var(--x);
  width:7px;
  height:11px;
  border-radius:2px;
  background:var(--fc,#fff);
  animation:p02-fall var(--t) linear var(--d) infinite;
}
@keyframes p02-fall{
  0%{transform:translate(0,-6px) rotate(0deg)}
  50%{transform:translate(var(--sw,8px),82px) rotate(calc(var(--r,540deg) / 2))}
  100%{transform:translate(0,180px) rotate(var(--r,540deg))}
}

/* ---------- 093 Snowfall (p03-) ---------- */
.p03-flake{
  position:absolute;
  top:-12px;
  left:var(--x);
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  background:#fff;
  opacity:.95;
  animation:p03-fall var(--t) ease-in-out var(--d) infinite;
}
@keyframes p03-fall{
  0%{transform:translate(0,0)}
  25%{transform:translate(9px,45px)}
  50%{transform:translate(-7px,90px)}
  75%{transform:translate(8px,135px)}
  100%{transform:translate(0,175px)}
}

/* ---------- 094 Rain (p04-) ---------- */
.p04-drop{
  position:absolute;
  top:-26px;
  left:var(--x);
  width:3px;
  height:17px;
  border-radius:2px;
  background:rgba(255,255,255,.85);
  animation:p04-fall var(--t) linear var(--d) infinite;
}
@keyframes p04-fall{
  0%{transform:translate(0,0) rotate(11deg)}
  100%{transform:translate(-38px,195px) rotate(11deg)}
}

/* ---------- 095 Starfield (p05-) ---------- */
.p05-star{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s,4px);
  height:var(--s,4px);
  border-radius:50%;
  background:#fff;
  animation:p05-twinkle var(--t,2s) ease-in-out var(--d,0s) infinite;
}
@keyframes p05-twinkle{
  0%,100%{opacity:.15;transform:scale(.7)}
  50%{opacity:1;transform:scale(1)}
}
.p05-spark{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s,18px);
  height:var(--s,18px);
  background:#fff;
  clip-path:polygon(50% 0,61% 39%,100% 50%,61% 61%,50% 100%,39% 61%,0 50%,39% 39%);
  animation:p05-shine var(--t,2.4s) ease-in-out var(--d,0s) infinite;
}
@keyframes p05-shine{
  0%,100%{opacity:.2;transform:scale(.55) rotate(0deg)}
  50%{opacity:1;transform:scale(1) rotate(22deg)}
}

/* ---------- 096 Drifting Blobs (p06-) ---------- */
.p06-blob{
  position:absolute;
  border-radius:50%;
  background:rgba(255,255,255,.42);
  filter:blur(10px);
}
.p06-b1{width:88px;height:88px;left:8px;top:8px;animation:p06-d1 4.4s ease-in-out infinite}
.p06-b2{width:70px;height:70px;right:14px;top:26px;animation:p06-d2 3.8s ease-in-out -1.4s infinite}
.p06-b3{width:96px;height:96px;left:64px;bottom:-24px;animation:p06-d3 4.2s ease-in-out -2.6s infinite}
@keyframes p06-d1{
  0%,100%{transform:translate(0,0) scale(1)}
  33%{transform:translate(36px,24px) scale(1.15)}
  66%{transform:translate(10px,44px) scale(.9)}
}
@keyframes p06-d2{
  0%,100%{transform:translate(0,0) scale(1)}
  40%{transform:translate(-42px,26px) scale(.85)}
  70%{transform:translate(-14px,-8px) scale(1.1)}
}
@keyframes p06-d3{
  0%,100%{transform:translate(0,0) scale(1)}
  30%{transform:translate(-30px,-22px) scale(1.1)}
  65%{transform:translate(26px,-36px) scale(.9)}
}

/* ---------- 097 Stripe Scroll (p07-) ---------- */
.p07-stripes{
  position:absolute;
  inset:0;
  animation:p07-scroll linear infinite;
}
.p07-far{
  background:repeating-linear-gradient(45deg,
    rgba(255,255,255,.14) 0 12px,
    rgba(255,255,255,0) 12px 24px);
  animation-duration:3.2s;
}
.p07-near{
  background:repeating-linear-gradient(45deg,
    rgba(255,255,255,.32) 0 12px,
    rgba(255,255,255,0) 12px 24px);
  background-position:12px 0;
  animation-duration:1.6s;
}
@keyframes p07-scroll{
  to{background-position:33.94px 0}
}
.p07-near{animation-name:p07-scroll}
/* note: .p07-near loops its own 33.94px period from its offset start —
   the keyframe animates background-position for both layers */

/* ---------- 098 Polka Pop (p08-) ---------- */
.p08-dot{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s);
  height:var(--s);
  border-radius:50%;
  background:#fff;
  transform:scale(0);
  animation:p08-pop 3.9s ease var(--d,0s) infinite;
}
@keyframes p08-pop{
  0%{transform:scale(0)}
  6%{transform:scale(1.28)}
  10%{transform:scale(.94)}
  13%{transform:scale(1)}
  62%{transform:scale(1)}
  68%{transform:scale(1.22)}
  74%{transform:scale(0)}
  100%{transform:scale(0)}
}

/* ---------- 099 Aurora (p09-) ---------- */
.p09-ribbon{
  position:absolute;
  width:172px;
  height:34px;
  border-radius:50%;
  background:rgba(255,255,255,.55);
  filter:blur(9px);
}
.p09-r1{top:18px;left:12px;animation:p09-w1 4.4s ease-in-out infinite}
.p09-r2{top:56px;left:28px;animation:p09-w2 3.8s ease-in-out -1.3s infinite}
.p09-r3{top:94px;left:2px;animation:p09-w3 4.2s ease-in-out -2.2s infinite}
@keyframes p09-w1{
  0%,100%{transform:skewX(-18deg) translateX(0) rotate(-3deg);opacity:.28}
  50%{transform:skewX(14deg) translateX(22px) rotate(3deg);opacity:.6}
}
@keyframes p09-w2{
  0%,100%{transform:skewX(16deg) translateX(10px) rotate(2deg);opacity:.55}
  50%{transform:skewX(-14deg) translateX(-16px) rotate(-4deg);opacity:.25}
}
@keyframes p09-w3{
  0%,100%{transform:skewX(-12deg) translateX(-6px) rotate(2deg);opacity:.3}
  50%{transform:skewX(18deg) translateX(26px) rotate(-2deg);opacity:.55}
}

/* ---------- 100 Fireflies (p10-) ---------- */
.p10-fly{
  position:absolute;
  width:7px;
  height:7px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 0 10px 3px rgba(255,255,255,.6);
}
.p10-f1{left:38px;top:42px;animation:p10-w1 4.2s ease-in-out infinite,p10-flick 1.3s ease-in-out infinite}
.p10-f2{left:150px;top:34px;animation:p10-w2 3.6s ease-in-out infinite,p10-flick 1.1s ease-in-out infinite}
.p10-f3{left:66px;top:98px;animation:p10-w3 4.5s ease-in-out infinite,p10-flick 1.5s ease-in-out infinite}
.p10-f4{left:158px;top:92px;animation:p10-w4 3.9s ease-in-out infinite,p10-flick 1.2s ease-in-out infinite}
.p10-f5{left:104px;top:60px;animation:p10-w5 4.3s ease-in-out infinite,p10-flick 1.4s ease-in-out infinite}
@keyframes p10-w1{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(30px,16px)}
  50%{transform:translate(12px,40px)}
  75%{transform:translate(-16px,22px)}
}
@keyframes p10-w2{
  0%,100%{transform:translate(0,0)}
  30%{transform:translate(-26px,20px)}
  60%{transform:translate(-8px,-16px)}
}
@keyframes p10-w3{
  0%,100%{transform:translate(0,0)}
  25%{transform:translate(20px,-24px)}
  55%{transform:translate(38px,4px)}
  80%{transform:translate(10px,18px)}
}
@keyframes p10-w4{
  0%,100%{transform:translate(0,0)}
  35%{transform:translate(-22px,-14px)}
  70%{transform:translate(12px,-28px)}
}
@keyframes p10-w5{
  0%,100%{transform:translate(0,0)}
  20%{transform:translate(12px,20px)}
  45%{transform:translate(-24px,32px)}
  75%{transform:translate(-32px,4px)}
}
@keyframes p10-flick{
  0%,100%{opacity:1}
  50%{opacity:.2}
}

/* ---------- 101 Waves (p11-) ---------- */
.p11-wave{
  position:absolute;
  left:0;
  bottom:-2px;
  display:block;
}
.p11-back{
  width:480px;
  height:58px;
  animation:p11-slide 4.4s linear infinite;
}
.p11-front{
  width:480px;
  height:42px;
  animation:p11-slide 2.4s linear infinite;
}
.p11-bp{fill:var(--cd)}
.p11-fp{fill:#fff}
@keyframes p11-slide{
  0%{transform:translateX(0)}
  100%{transform:translateX(-120px)}
}

/* ---------- 102 Petal Fall (p12-) ---------- */
.p12-petal{
  position:absolute;
  top:-22px;
  left:var(--x);
  width:16px;
  height:16px;
  background:rgba(255,255,255,.95);
  border-radius:0 50% 50% 50%;
  animation:p12-fall var(--t) ease-in-out var(--d) infinite;
}
@keyframes p12-fall{
  0%{transform:translate(0,0) rotate(40deg)}
  25%{transform:translate(15px,42px) rotate(105deg)}
  50%{transform:translate(-9px,84px) rotate(160deg)}
  75%{transform:translate(13px,128px) rotate(225deg)}
  100%{transform:translate(-4px,182px) rotate(290deg)}
}

/* ---------- 103 Steam (p13-) ---------- */
.p13-scene{
  position:relative;
  width:92px;
  height:112px;
}
.p13-mug{
  position:absolute;
  bottom:0;
  left:12px;
  width:56px;
  height:42px;
  background:#fff;
  border-radius:7px 7px 15px 15px;
}
.p13-mug::after{
  content:"";
  position:absolute;
  right:-15px;
  top:7px;
  width:12px;
  height:18px;
  border:6px solid #fff;
  border-left:none;
  border-radius:0 12px 12px 0;
}
.p13-heart{
  position:absolute;
  left:23px;
  top:16px;
  width:11px;
  height:11px;
  background:var(--cd);
  transform:rotate(45deg);
}
.p13-heart::before,
.p13-heart::after{
  content:"";
  position:absolute;
  width:11px;
  height:11px;
  border-radius:50%;
  background:var(--cd);
}
.p13-heart::before{left:-6px;top:0}
.p13-heart::after{top:-6px;left:0}
.p13-steam{
  position:absolute;
  bottom:48px;
  width:7px;
  height:26px;
  border-radius:6px;
  background:rgba(255,255,255,.85);
  opacity:0;
  animation:p13-rise 2.6s ease-in-out var(--d,0s) infinite;
}
.p13-s1{left:22px}
.p13-s2{left:40px;--d:-0.9s}
.p13-s3{left:58px;--d:-1.7s}
@keyframes p13-rise{
  0%{transform:translate(0,12px) scaleY(.5);opacity:0}
  25%{transform:translate(4px,-4px) scaleY(1);opacity:.9}
  50%{transform:translate(-4px,-20px) scaleY(1)}
  75%{transform:translate(4px,-34px) scaleY(1.05);opacity:.45}
  100%{transform:translate(0,-46px) scaleY(1.1);opacity:0}
}

/* ---------- 104 Sparkles (p14-) ---------- */
.p14-sp{
  position:absolute;
  left:var(--x);
  top:var(--y);
  width:var(--s);
  height:var(--s);
  background:#fff;
  clip-path:polygon(50% 0,60% 40%,100% 50%,60% 60%,50% 100%,40% 60%,0 50%,40% 40%);
  transform:scale(0);
  animation:p14-blink var(--t,2.2s) ease-in-out var(--d,0s) infinite;
}
@keyframes p14-blink{
  0%,100%{transform:scale(0) rotate(0deg);opacity:0}
  18%{transform:scale(1.15) rotate(16deg);opacity:1}
  32%{transform:scale(.88) rotate(26deg)}
  52%{transform:scale(1) rotate(40deg);opacity:1}
  78%{transform:scale(0) rotate(62deg);opacity:0}
}

/* ---------- 105 Checker Wave (p15-) ---------- */
.p15-board{
  display:grid;
  grid-template-columns:repeat(4,26px);
  grid-template-rows:repeat(4,26px);
  gap:5px;
  perspective:520px;
}
.p15-tile{
  position:relative;
  transform-style:preserve-3d;
  animation:p15-flip 3s ease-in-out var(--d,0s) infinite;
}
.p15-tile::before,
.p15-tile::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:7px;
  backface-visibility:hidden;
}
.p15-tile::before{background:#fff}
.p15-tile::after{background:var(--cd);transform:rotateY(180deg)}
@keyframes p15-flip{
  0%{transform:rotateY(0deg)}
  30%{transform:rotateY(180deg)}
  50%{transform:rotateY(180deg)}
  80%{transform:rotateY(360deg)}
  100%{transform:rotateY(360deg)}
}