/* SVG Animation Package - Dependency-free standalone package
 * Based on svg-animation-particle-circle.css
 * Theme color integration with CSS variables
 */

/* Theme-based color variables for particles */
:root {
    --particle-color-1: #f40;     /* theme-color base */
    --particle-color-2: #f50;     /* theme-color +0.1 brightness */
    --particle-color-3: #f60;     /* theme-color +0.2 brightness */
    --particle-color-4: #f70;     /* theme-color +0.3 brightness */
    --particle-color-5: #f80;     /* theme-color +0.4 brightness */
    --explosion-color: #f30;      /* theme-color -0.1 brightness */
    --syui-color: #f40;           /* main theme color */
}

/* Core SVG button setup */
.likeButton {
    cursor: pointer;
    display: inline-block;
}

/* Remove debug animation and restore hover functionality */

.likeButton .border {
    fill: white;
}

/* Explosion circle - initially hidden */
.likeButton .explosion {
    transform-origin: center center;
    transform: scale(1);
    stroke: var(--explosion-color);
    fill: none;
    opacity: 0;
    stroke-width: 1;
}

/* Particle layer - initially hidden */
.likeButton .particleLayer {
    opacity: 0;
    transform: scale(0); /* Ensure particles start hidden */
}

.likeButton .particleLayer circle {
    opacity: 0;
    transform-origin: center center; /* Fixed from 250px 250px */
    transform: scale(0);
}

/* Syui logo - main animation target */
.likeButton .syui {
    fill: var(--syui-color);
    transform: scale(1);
    transform-origin: center center;
}

/* Hover trigger - replaces jQuery */
.likeButton:hover .explosion {
    animation: explosionAnime 800ms forwards;
}

.likeButton:hover .particleLayer {
    animation: particleLayerAnime 800ms forwards;
}

.likeButton:hover .syui,
.likeButton:hover path.syui {
    animation: syuiDeluxeAnime 400ms forwards;
}

/* Individual particle animations */
.likeButton:hover .particleLayer circle:nth-child(1) {
    animation: particleAnimate1 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(2) {
    animation: particleAnimate2 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(3) {
    animation: particleAnimate3 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(4) {
    animation: particleAnimate4 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(5) {
    animation: particleAnimate5 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(6) {
    animation: particleAnimate6 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(7) {
    animation: particleAnimate7 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(8) {
    animation: particleAnimate8 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(9) {
    animation: particleAnimate9 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(10) {
    animation: particleAnimate10 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(11) {
    animation: particleAnimate11 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(12) {
    animation: particleAnimate12 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(13) {
    animation: particleAnimate13 800ms;
    animation-fill-mode: forwards;
}

.likeButton:hover .particleLayer circle:nth-child(14) {
    animation: particleAnimate14 800ms;
    animation-fill-mode: forwards;
}

/* Keyframe animations */
@keyframes explosionAnime {
    0% {
        opacity: 0;
        transform: scale(0.01);
    }
    1% {
        opacity: 1;
        transform: scale(0.01);
    }
    5% {
        stroke-width: 200;
    }
    20% {
        stroke-width: 300;
    }
    50% {
        stroke: var(--particle-color-3);
        transform: scale(1.1);
        stroke-width: 1;
    }
    50.1% {
        stroke-width: 0;
    }
    100% {
        stroke: var(--particle-color-3);
        transform: scale(1.1);
        stroke-width: 0;
    }
}

@keyframes particleLayerAnime {
    0% {
        transform: translate(0, 0);
        opacity: 0;
    }
    30% {
        opacity: 0;
    }
    31% {
        opacity: 1;
    }
    60% {
        transform: translate(0, 0);
    }
    70% {
        opacity: 1;
    }
    100% {
        opacity: 0;
        transform: translate(0, -20px);
    }
}

/* Syui Deluxe Animation - Based on 2019 blog post */
@keyframes syuiDeluxeAnime {
    0% {
        fill: var(--syui-color);
        transform: scale(1) translate(0%, 0%);
    }
    40% {
        fill: color-mix(in srgb, var(--syui-color) 40%, transparent);
        transform: scale(1, 0.9) translate(-9%, 9%);
    }
    50% {
        fill: color-mix(in srgb, var(--syui-color) 70%, transparent);
        transform: scale(1, 0.9) translate(-7%, 7%);
    }
    60% {
        transform: scale(1) translate(-7%, 7%);
    }
    70% {
        transform: scale(1.04) translate(-5%, 5%);
    }
    80% {
        fill: color-mix(in srgb, var(--syui-color) 60%, transparent);
        transform: scale(1.04) translate(-5%, 5%);
    }
    90% {
        fill: var(--particle-color-5); /* 爆発の閃光 */
        transform: scale(1) translate(0%);
    }
    100% {
        fill: var(--syui-color);
        transform: scale(1, 1) translate(0%, 0%);
    }
}

/* Individual particle animations */
@keyframes particleAnimate1 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(-16px, -59px); }
    90% { transform: translate(-16px, -59px); }
    100% { opacity: 1; transform: translate(-16px, -59px); }
}

@keyframes particleAnimate2 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(41px, 43px); }
    90% { transform: translate(41px, 43px); }
    100% { opacity: 1; transform: translate(41px, 43px); }
}

@keyframes particleAnimate3 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(50px, -48px); }
    90% { transform: translate(50px, -48px); }
    100% { opacity: 1; transform: translate(50px, -48px); }
}

@keyframes particleAnimate4 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(-39px, 36px); }
    90% { transform: translate(-39px, 36px); }
    100% { opacity: 1; transform: translate(-39px, 36px); }
}

@keyframes particleAnimate5 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(-39px, 32px); }
    90% { transform: translate(-39px, 32px); }
    100% { opacity: 1; transform: translate(-39px, 32px); }
}

@keyframes particleAnimate6 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(48px, 6px); }
    90% { transform: translate(48px, 6px); }
    100% { opacity: 1; transform: translate(48px, 6px); }
}

@keyframes particleAnimate7 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(-69px, -36px); }
    90% { transform: translate(-69px, -36px); }
    100% { opacity: 1; transform: translate(-69px, -36px); }
}

@keyframes particleAnimate8 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(-12px, -52px); }
    90% { transform: translate(-12px, -52px); }
    100% { opacity: 1; transform: translate(-12px, -52px); }
}

@keyframes particleAnimate9 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(-43px, -21px); }
    90% { transform: translate(-43px, -21px); }
    100% { opacity: 1; transform: translate(-43px, -21px); }
}

@keyframes particleAnimate10 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(-10px, 47px); }
    90% { transform: translate(-10px, 47px); }
    100% { opacity: 1; transform: translate(-10px, 47px); }
}

@keyframes particleAnimate11 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(66px, -9px); }
    90% { transform: translate(66px, -9px); }
    100% { opacity: 1; transform: translate(66px, -9px); }
}

@keyframes particleAnimate12 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(40px, -45px); }
    90% { transform: translate(40px, -45px); }
    100% { opacity: 1; transform: translate(40px, -45px); }
}

@keyframes particleAnimate13 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(29px, 24px); }
    90% { transform: translate(29px, 24px); }
    100% { opacity: 1; transform: translate(29px, 24px); }
}

@keyframes particleAnimate14 {
    0% { transform: translate(0, 0); }
    30% { opacity: 1; transform: translate(0, 0); }
    80% { transform: translate(-10px, 50px); }
    90% { transform: translate(-10px, 50px); }
    100% { opacity: 1; transform: translate(-10px, 50px); }
}