@charset "UTF-8";

#bubble-layer {
    position: fixed;
    inset: 0;
    z-index: 9999999; /* UIより上に配置 */
    pointer-events: none; /* UI操作はすべて貫通 */
    overflow: hidden;
}

.bubble-anim {
    position: absolute;
    pointer-events: none; /* バブル自体も貫通 */
    /* animation: bubbleMove 4s ease-in-out forwards; */
    transform-origin: center;
    transform: rotate(var(--init-rotate, 0deg));
}

@keyframes bubble-melt {
  0%   { transform: scaleY(1) scaleX(1) rotate(var(--init-rotate, 0deg)); opacity: 1; filter: blur(1px);}
    50%  { transform: scaleY(1.2) scaleX(0.9) rotate(var(--init-rotate, 0deg)); opacity: 0.8; filter: blur(1.5px);}
    100% { transform: scaleY(0) scaleX(1.1) rotate(var(--init-rotate, 0deg)); opacity: 0; filter: blur(2px);}
}

.bubble-melt {
  animation-name: bubble-melt;
  animation-duration: 3s;
  animation-timing-function: ease-in;
  animation-fill-mode: forwards;
}

@keyframes bubbleMove {
    0%   { opacity: 0; transform: scale(0.3) rotate(var(--init-rotate, 0deg)); }
    10%  { opacity: 1; transform: scale(1.1) rotate(calc(var(--init-rotate, 0deg) + 5deg)); }
    50%  { transform: scale(0.95) rotate(calc(var(--init-rotate, 0deg) - 3deg)); }
    80%  { transform: scale(1.05) rotate(calc(var(--init-rotate, 0deg) + 2deg)); }
    100% { opacity: 0; transform: rotate(var(--init-rotate, 0deg)); }
}

.bubble-move {
    animation: bubbleMove 4s ease-in-out forwards;
}

/* 強化ブルブル(上下左右ランダム振動) */
@keyframes bubbleShake {
    0%   { transform: rotate(var(--init-rotate, 0deg)) translate(0,0); }
    20%  { transform: rotate(var(--init-rotate, 0deg)) translate(3px,-3px); }
    40%  { transform: rotate(var(--init-rotate, 0deg)) translate(-3px,3px); }
    60%  { transform: rotate(var(--init-rotate, 0deg)) translate(4px,1px); }
    80%  { transform: rotate(var(--init-rotate, 0deg)) translate(-2px,-4px); }
    100% { transform: rotate(var(--init-rotate, 0deg)) translate(0,0); }
}
.bubble-shake {
    animation: bubbleShake 0.25s infinite linear;
}

/* 膨張 */
@keyframes bubblePulse {
    0%   { transform: rotate(var(--init-rotate,0deg)) scale(1); }
    50%  { transform: rotate(var(--init-rotate,0deg)) scale(1.28); }
    100% { transform: rotate(var(--init-rotate,0deg)) scale(1); }
}
.bubble-pulse {
    animation: bubblePulse 3s infinite ease-in-out;
}

/* 漂う */
@keyframes bubbleDrift {
    0%   { transform: rotate(var(--init-rotate,0deg)) translate(0,0); }
    50%  { transform: rotate(var(--init-rotate,0deg)) translate(6px,-9px); }
    100% { transform: rotate(var(--init-rotate,0deg)) translate(0,0); }
}
.bubble-drift {
    animation: bubbleDrift 5s infinite ease-in-out;
}

/* 微回転 */
@keyframes bubbleRotate {
    0%   { transform: rotate(var(--init-rotate,0deg)); }
    50%  { transform: rotate(calc(var(--init-rotate,0deg) + 4deg)); }
    100% { transform: rotate(var(--init-rotate,0deg)); }
}
.bubble-rotate {
    animation: bubbleRotate 4s infinite ease-in-out;
}

/* 弾む（bounce） */
@keyframes bubbleBounce {
    0%,100% { transform: rotate(var(--init-rotate,0deg)) translateY(0); }
    25%     { transform: rotate(var(--init-rotate,0deg)) translateY(-15px); }
    50%     { transform: rotate(var(--init-rotate,0deg)) translateY(0); }
    75%     { transform: rotate(var(--init-rotate,0deg)) translateY(-8px); }
}
.bubble-bounce {
    animation: bubbleBounce 1.6s infinite ease-in-out;
}

/* パカッと開閉（pop） */
@keyframes bubblePop {
    0%   { transform: rotate(var(--init-rotate,0deg)) scale(0.8); opacity: 0.7; }
    40%  { transform: rotate(var(--init-rotate,0deg)) scale(1.3); opacity: 1; }
    100% { transform: rotate(var(--init-rotate,0deg)) scale(1); opacity: 1; }
}
.bubble-pop {
    animation: bubblePop 1.2s infinite ease-in-out;
}


@media screen and (min-width: 1025px)
{

}