/* ============================================================
   Phyca株式会社 — CSS Animation Enhancements
   Append to phyca-custom.css or load separately
   ============================================================ */

/* ============================================================
   1. Floating Ocean Particles (CSS-only, .phyca-hero)
   Two layers at different speeds for parallax depth
   ============================================================ */
.phyca-hero::before,
.phyca-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 2;
    pointer-events: none;
    will-change: transform;
}

/* Layer 1 — small bright particles, slow drift */
.phyca-hero::before {
    width: 3px; height: 3px;
    background: transparent;
    box-shadow:
        120px 80vh 0 0 rgba(43,187,201,0.35),
        340px 70vh 0 1px rgba(115,189,124,0.3),
        560px 90vh 0 0 rgba(255,255,255,0.2),
        780px 60vh 0 1px rgba(43,187,201,0.25),
        200px 85vh 0 0 rgba(115,189,124,0.2),
        900px 75vh 0 1px rgba(255,255,255,0.15),
        450px 95vh 0 0 rgba(26,155,165,0.3),
        670px 65vh 0 1px rgba(43,187,201,0.2),
        80px  55vh 0 0 rgba(255,255,255,0.25),
        1020px 88vh 0 1px rgba(115,189,124,0.2);
    animation: phyca-particles-slow 18s linear infinite;
}

/* Layer 2 — larger dim particles, faster drift */
.phyca-hero::after {
    width: 4px; height: 4px;
    background: transparent;
    box-shadow:
        250px 90vh 0 1px rgba(26,155,165,0.15),
        500px 80vh 0 2px rgba(43,187,201,0.12),
        750px 95vh 0 1px rgba(115,189,124,0.1),
        100px 70vh 0 2px rgba(255,255,255,0.08),
        600px 85vh 0 1px rgba(26,155,165,0.12),
        850px 78vh 0 2px rgba(43,187,201,0.1),
        380px 92vh 0 1px rgba(115,189,124,0.08);
    animation: phyca-particles-fast 12s linear infinite;
}

@keyframes phyca-particles-slow {
    0%   { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(-110vh); opacity: 0; }
}
@keyframes phyca-particles-fast {
    0%   { transform: translateY(0); opacity: 0.8; }
    100% { transform: translateY(-120vh); opacity: 0; }
}

/* ============================================================
   2. Animated Wave Border on .phyca-cta
   Inline SVG wave that scrolls horizontally
   ============================================================ */
.phyca-cta {
    position: relative;
    overflow: hidden;
}
.phyca-cta::before {
    content: '';
    position: absolute;
    top: -1px; left: 0;
    width: 200%; height: 40px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 40'%3E%3Cpath d='M0 20 Q150 0 300 20 T600 20 T900 20 T1200 20 V40 H0Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 600px 40px;
    animation: phyca-cta-wave 8s linear infinite;
    z-index: 1;
}

@keyframes phyca-cta-wave {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-600px); }
}

/* ============================================================
   3a. Seaweed/Kelp Leaf — before .phyca-service-detail__title
   ============================================================ */
.phyca-service-detail__title::before {
    content: '';
    display: inline-block;
    width: 20px; height: 20px;
    margin-right: 8px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M12 22c0-8-6-12-6-18C6 2 12 2 12 2s6 0 6 2c0 6-6 10-6 18z' fill='%2373BD7C' opacity='0.7'/%3E%3Cpath d='M12 22V4' stroke='%231A9BA5' stroke-width='1.2'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ============================================================
   3b. Water Droplet — before .phyca-pmvv__label
   ============================================================ */
.phyca-pmvv__label::before {
    content: '';
    display: inline-block;
    width: 14px; height: 14px;
    margin-right: 6px;
    vertical-align: middle;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C12 2 5 11 5 16a7 7 0 0014 0C19 11 12 2 12 2z' fill='%232BBBC9' opacity='0.6'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ============================================================
   3c. Wave Line — after .phyca-section__title-ja
   ============================================================ */
.phyca-section__title-ja::after {
    content: '';
    display: block;
    width: 80px; height: 8px;
    margin: 12px auto 0;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 8'%3E%3Cpath d='M0 4 Q10 0 20 4 T40 4 T60 4 T80 4' fill='none' stroke='%231A9BA5' stroke-width='1.5' opacity='0.5'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ============================================================
   3d. Fish Silhouette — floating in .phyca-section--alt
   ============================================================ */
.phyca-section--alt {
    position: relative;
}
.phyca-section--alt::after {
    content: '';
    position: absolute;
    top: 30%; right: 5%;
    width: 80px; height: 40px;
    opacity: 0.04;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 80 40'%3E%3Cpath d='M10 20C10 10 25 4 45 12L70 4V36L45 28C25 36 10 30 10 20z' fill='%23183868'/%3E%3Ccircle cx='22' cy='19' r='2' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    animation: phyca-fish-drift 20s ease-in-out infinite;
}

@keyframes phyca-fish-drift {
    0%, 100% { transform: translate(0, 0); }
    25%      { transform: translate(-20px, 8px); }
    50%      { transform: translate(-10px, -5px); }
    75%      { transform: translate(15px, 3px); }
}

/* ============================================================
   3e. Coral/Seaweed Cluster — .phyca-message bottom-right
   ============================================================ */
.phyca-message {
    position: relative;
}
.phyca-message::after {
    content: '';
    position: absolute;
    bottom: -10px; right: -20px;
    width: 120px; height: 100px;
    opacity: 0.06;
    pointer-events: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 100'%3E%3Cpath d='M40 100C40 60 20 40 20 10' stroke='%2373BD7C' stroke-width='3' fill='none'/%3E%3Cpath d='M60 100C60 55 45 35 50 5' stroke='%231A9BA5' stroke-width='3' fill='none'/%3E%3Cpath d='M80 100C80 65 95 45 85 15' stroke='%2373BD7C' stroke-width='2.5' fill='none'/%3E%3Ccircle cx='30' cy='85' r='8' fill='%231A9BA5' opacity='0.4'/%3E%3Ccircle cx='70' cy='78' r='6' fill='%2373BD7C' opacity='0.3'/%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
}

/* ============================================================
   4. Micro-Animations
   ============================================================ */

/* Service card image — continuous slow zoom "breathing" */
.phyca-service-card__img img {
    animation: phyca-breathe 6s ease-in-out infinite;
}
@keyframes phyca-breathe {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.03); }
}

/* PMVV item — border grows on hover with spring ease */
.phyca-pmvv__item {
    transition: border-left-width 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}
.phyca-pmvv__item:hover {
    border-left-width: 6px;
}

/* "Phyca" big text — gradient color shift */
.phyca-about-name__title {
    background-size: 200% 100%;
    animation: phyca-gradient-shift 6s ease-in-out infinite;
}
@keyframes phyca-gradient-shift {
    0%, 100% { background-position: 0% 50%; }
    50%      { background-position: 100% 50%; }
}

/* Hero logo — gentle floating */
.phyca-hero__logo {
    animation: phyca-logo-float 4s ease-in-out infinite;
}
@keyframes phyca-logo-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-3px); }
}

/* ============================================================
   5. Service Detail Number — decorative gradient ring
   ============================================================ */
.phyca-service-detail__num {
    position: relative;
    z-index: 1;
}
.phyca-service-detail__num::before {
    content: '';
    position: absolute;
    top: 50%; left: -8px;
    width: 48px; height: 48px;
    transform: translateY(-50%);
    border-radius: 50%;
    border: 2px solid transparent;
    background:
        linear-gradient(var(--phyca-off-white), var(--phyca-off-white)) padding-box,
        var(--phyca-gradient) border-box;
    z-index: -1;
    opacity: 0.6;
}

/* ============================================================
   6. Footer Enhancement — wave top border & bubble dots
   ============================================================ */
.site-footer {
    position: relative;
}
.site-footer::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 4px;
    background:
        repeating-linear-gradient(
            90deg,
            var(--phyca-navy) 0px,
            var(--phyca-teal) 80px,
            var(--phyca-cyan) 160px,
            var(--phyca-green) 240px,
            var(--phyca-navy) 320px
        );
    background-size: 320px 4px;
    animation: phyca-footer-wave 12s linear infinite;
}
.site-footer::after {
    content: '';
    position: absolute;
    top: 12px; left: 0; right: 0;
    height: 60px;
    pointer-events: none;
    opacity: 0.08;
    background-image:
        radial-gradient(circle 2px at 10% 30%, var(--phyca-cyan) 100%, transparent 100%),
        radial-gradient(circle 1.5px at 25% 60%, var(--phyca-teal) 100%, transparent 100%),
        radial-gradient(circle 1px at 45% 20%, var(--phyca-green) 100%, transparent 100%),
        radial-gradient(circle 2px at 60% 50%, var(--phyca-cyan) 100%, transparent 100%),
        radial-gradient(circle 1px at 75% 35%, var(--phyca-teal) 100%, transparent 100%),
        radial-gradient(circle 1.5px at 90% 55%, var(--phyca-green) 100%, transparent 100%);
}

@keyframes phyca-footer-wave {
    0%   { background-position: 0 0; }
    100% { background-position: 320px 0; }
}

/* ============================================================
   7. Accessibility — Reduced Motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    .phyca-hero::before,
    .phyca-hero::after,
    .phyca-service-card__img img,
    .phyca-hero__logo,
    .phyca-about-name__title,
    .phyca-section--alt::after,
    .phyca-cta::before,
    .site-footer::before {
        animation: none !important;
    }
    .phyca-pmvv__item {
        transition: none !important;
    }
}