/* ============================================
   ENHANCED ANIMATIONS — FAQ, Story, Contact
   ============================================ */

/* --- FAQ: Dandelion Seeds --- */
.faq-dandelion-seed {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

.faq-dandelion-seed svg {
    width: 12px;
    height: 18px;
}

.faq-dandelion-seed--1 { top: -5%; left: 10%; animation: dandelion-drift 25s linear 0s infinite; }
.faq-dandelion-seed--2 { top: -5%; left: 35%; animation: dandelion-drift 30s linear 5s infinite; }
.faq-dandelion-seed--3 { top: -5%; left: 55%; animation: dandelion-drift 22s linear 10s infinite; }
.faq-dandelion-seed--4 { top: -5%; left: 75%; animation: dandelion-drift 28s linear 3s infinite; }
.faq-dandelion-seed--5 { top: -5%; left: 90%; animation: dandelion-drift 26s linear 8s infinite; }
.faq-dandelion-seed--6 { top: -5%; left: 20%; animation: dandelion-drift 32s linear 15s infinite; }
.faq-dandelion-seed--7 { top: -5%; left: 65%; animation: dandelion-drift 24s linear 12s infinite; }

@keyframes dandelion-drift {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    5%   { opacity: 0.5; }
    50%  { opacity: 0.4; transform: translate(30px, 50vh) rotate(180deg); }
    95%  { opacity: 0.3; }
    100% { opacity: 0; transform: translate(50px, 105vh) rotate(360deg); }
}

/* --- FAQ: Fireflies --- */
.faq-firefly {
    position: absolute;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(212, 175, 55, 0.8) 0%, transparent 70%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

.faq-firefly--1 { bottom: 8%; left: 10%; animation: firefly-glow 3s ease-in-out 0s infinite; }
.faq-firefly--2 { bottom: 12%; left: 25%; animation: firefly-glow 2.5s ease-in-out 0.8s infinite; }
.faq-firefly--3 { bottom: 5%; right: 15%; animation: firefly-glow 3.5s ease-in-out 1.5s infinite; }
.faq-firefly--4 { bottom: 15%; right: 30%; animation: firefly-glow 2.8s ease-in-out 0.3s infinite; }
.faq-firefly--5 { bottom: 10%; left: 50%; animation: firefly-glow 3.2s ease-in-out 2.0s infinite; }
.faq-firefly--6 { bottom: 6%; right: 8%; animation: firefly-glow 2.6s ease-in-out 1.2s infinite; }
.faq-firefly--7 { bottom: 18%; left: 40%; animation: firefly-glow 3.8s ease-in-out 0.5s infinite; }
.faq-firefly--8 { bottom: 3%; right: 45%; animation: firefly-glow 2.9s ease-in-out 1.8s infinite; }

@keyframes firefly-glow {
    0%, 100% { opacity: 0; transform: translate(0, 0); }
    30%      { opacity: 0.7; transform: translate(3px, -5px); }
    60%      { opacity: 0.9; transform: translate(-2px, -8px); }
    80%      { opacity: 0.4; transform: translate(1px, -3px); }
}

/* --- Story: Lily Pads --- */
.story-lily-pad {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
}

.story-lily-pad svg {
    width: 30px;
    height: 20px;
}

.story-lily-pad--1 { bottom: 12%; left: 15%; animation: lily-pad-drift 8s ease-in-out infinite; }
.story-lily-pad--2 { bottom: 8%; left: 45%; animation: lily-pad-drift 10s ease-in-out 2s infinite; }
.story-lily-pad--3 { bottom: 15%; right: 20%; animation: lily-pad-drift 9s ease-in-out 4s infinite; }
.story-lily-pad--4 { bottom: 6%; right: 40%; animation: lily-pad-drift 11s ease-in-out 6s infinite; }

@keyframes lily-pad-drift {
    0%, 100% { transform: translateX(0) rotate(0deg); }
    25%      { transform: translateX(5px) rotate(2deg); }
    50%      { transform: translateX(8px) rotate(-1deg); }
    75%      { transform: translateX(3px) rotate(3deg); }
}

/* --- Story: Illustrated Bird (Heron) --- */
.story-heron {
    position: absolute;
    bottom: 18%;
    right: 12%;
    pointer-events: none;
    z-index: 2;
    opacity: 0.5;
}

.story-heron svg {
    width: 22px;
    height: 30px;
}

.story-heron-head {
    animation: heron-dip 14s ease-in-out infinite;
    transform-origin: center top;
}

@keyframes heron-dip {
    0%, 90%, 100% { transform: rotate(0deg); }
    93%           { transform: rotate(25deg); }
    96%           { transform: rotate(0deg); }
}

/* --- Story: Heart Ripple --- */
.story-heart-ripple {
    position: absolute;
    bottom: 10%;
    left: 50%;
    transform: translateX(-50%);
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    animation: heart-ripple-appear 32s ease-in-out infinite;
}

.story-heart-ripple svg {
    width: 40px;
    height: 35px;
}

@keyframes heart-ripple-appear {
    0%, 92%, 100% { opacity: 0; transform: translateX(-50%) scale(0.5); }
    95%           { opacity: 0.3; transform: translateX(-50%) scale(1); }
    98%           { opacity: 0.15; transform: translateX(-50%) scale(1.5); }
}

/* --- Contact: Singing Birds --- */
.contact-singing-bird {
    position: absolute;
    pointer-events: none;
    z-index: 1;
    opacity: 0.5;
}

.contact-singing-bird svg {
    width: 16px;
    height: 12px;
}

.contact-singing-bird--1 { top: 15%; left: 8%; }
.contact-singing-bird--2 { top: 22%; right: 10%; }
.contact-singing-bird--3 { top: 12%; right: 25%; }

.contact-music-note {
    position: absolute;
    top: -8px;
    right: -5px;
    font-size: 10px;
    color: #c9a96e;
    opacity: 0;
    pointer-events: none;
    animation: music-note-float 18s ease-out infinite;
}

.contact-singing-bird--2 .contact-music-note { animation-delay: 6s; }
.contact-singing-bird--3 .contact-music-note { animation-delay: 12s; }

@keyframes music-note-float {
    0%, 88%, 100% { opacity: 0; transform: translateY(0); }
    90%           { opacity: 0.7; transform: translateY(-5px); }
    94%           { opacity: 0.4; transform: translateY(-15px); }
    96%           { opacity: 0; transform: translateY(-22px); }
}

/* --- Contact: Blossom Shower (12 petals) --- */
.contact-petal {
    position: absolute;
    width: 6px;
    height: 6px;
    background: radial-gradient(circle, rgba(232, 196, 188, 0.6) 0%, transparent 70%);
    border-radius: 50% 50% 50% 0;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
}

.contact-petal--9 { top: -3%; left: 82%; animation: contact-petal-fall 18s linear 14s infinite; }
.contact-petal--10 { top: -3%; left: 28%; animation: contact-petal-fall 22s linear 3s infinite; }
.contact-petal--11 { top: -3%; left: 68%; animation: contact-petal-fall 19s linear 9s infinite; }
.contact-petal--12 { top: -3%; left: 42%; animation: contact-petal-fall 24s linear 17s infinite; }

@keyframes contact-petal-fall {
    0%   { opacity: 0; transform: translate(0, 0) rotate(0deg); }
    5%   { opacity: 0.5; }
    50%  { opacity: 0.4; transform: translate(15px, 50vh) rotate(180deg); }
    100% { opacity: 0; transform: translate(25px, 105vh) rotate(360deg); }
}

/* --- Contact: Extended Fireflies (15-18) --- */
.contact-firefly--11 { bottom: 15%; left: 18%; animation: firefly-glow 3.1s ease-in-out 0.4s infinite; }
.contact-firefly--12 { bottom: 20%; right: 22%; animation: firefly-glow 2.7s ease-in-out 1.6s infinite; }
.contact-firefly--13 { bottom: 8%; left: 55%; animation: firefly-glow 3.4s ease-in-out 2.2s infinite; }
.contact-firefly--14 { bottom: 25%; right: 40%; animation: firefly-glow 2.9s ease-in-out 0.9s infinite; }
.contact-firefly--15 { bottom: 12%; left: 70%; animation: firefly-glow 3.6s ease-in-out 1.3s infinite; }
.contact-firefly--16 { bottom: 18%; right: 55%; animation: firefly-glow 2.5s ease-in-out 2.8s infinite; }
.contact-firefly--17 { bottom: 6%; left: 35%; animation: firefly-glow 3.3s ease-in-out 0.7s infinite; }
.contact-firefly--18 { bottom: 22%; right: 12%; animation: firefly-glow 2.8s ease-in-out 1.9s infinite; }

/* --- Contact: Hover Botanical Sprig --- */
.contact-card::after {
    content: '';
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 30px;
    height: 30px;
    background: radial-gradient(circle at 30% 70%, rgba(181, 196, 177, 0.4) 0%, transparent 60%);
    border-radius: 50%;
    opacity: 0;
    transform: scale(0);
    transition: opacity 0.5s ease, transform 0.5s ease;
    pointer-events: none;
    z-index: 0;
}

.contact-card:hover::after {
    opacity: 1;
    transform: scale(1);
}

/* --- Contact: Garden Awakening Entrance --- */
.contact-content {
    animation: garden-awaken 2s ease-out;
}

@keyframes garden-awaken {
    0%   { filter: brightness(0.7) saturate(0.5); }
    100% { filter: brightness(1) saturate(1); }
}

/* --- Story: Ink-Write Title Reveal --- */
.story-heading {
    clip-path: inset(0 100% 0 0);
    opacity: 0;
}

.content--visible .story-heading {
    animation: ink-write-title 1.6s ease-out 0.3s forwards;
}

@keyframes ink-write-title {
    0% {
        clip-path: inset(0 100% 0 0);
        opacity: 0.3;
    }
    20% {
        opacity: 1;
    }
    100% {
        clip-path: inset(0 0% 0 0);
        opacity: 1;
    }
}

/* --- FAQ: Butterfly Landing --- */
.faq-butterfly {
    position: absolute;
    width: 28px;
    height: 22px;
    opacity: 0;
    z-index: 3;
    pointer-events: none;
    animation: faq-butterfly-visit 18s ease-in-out infinite;
}

.faq-butterfly svg {
    width: 100%;
    height: 100%;
}

.faq-butterfly--1 { top: 12%; right: 8%; animation-delay: 2s; }
.faq-butterfly--2 { top: 55%; left: 5%; animation-delay: 10s; }

@keyframes faq-butterfly-visit {
    0%, 85%, 100% { opacity: 0; transform: translate(0, 0) rotate(0deg) scale(0.8); }
    10%   { opacity: 0.6; transform: translate(-10px, -5px) rotate(-5deg) scale(1); }
    15%   { opacity: 0.7; transform: translate(-8px, 2px) rotate(3deg) scale(1); }
    50%   { opacity: 0.7; transform: translate(-12px, -3px) rotate(-2deg) scale(1); }
    55%   { opacity: 0.65; transform: translate(-6px, 4px) rotate(4deg) scale(1); }
    80%   { opacity: 0.5; transform: translate(5px, -8px) rotate(-3deg) scale(0.9); }
}

/* Butterfly wing flap */
.faq-butterfly .butterfly-wing--l,
.faq-butterfly .butterfly-wing--r {
    animation: butterfly-wing-flap 0.4s ease-in-out infinite alternate;
}
.faq-butterfly .butterfly-wing--r { animation-delay: 0.2s; }

@keyframes butterfly-wing-flap {
    0%   { transform: scaleX(1); }
    100% { transform: scaleX(0.7); }
}

/* --- Contact: Dewdrop Sparkles --- */
.contact-dewdrop {
    position: absolute;
    width: 5px;
    height: 7px;
    border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
    background: radial-gradient(circle at 30% 30%, rgba(255,255,255,0.9), rgba(200,220,210,0.4));
    opacity: 0;
    pointer-events: none;
    animation: dewdrop-sparkle 6s ease-in-out infinite;
}

.contact-dewdrop--1 { bottom: 25%; left: 12%; animation-delay: 0s; }
.contact-dewdrop--2 { bottom: 40%; left: 6%; animation-delay: 1.5s; }
.contact-dewdrop--3 { bottom: 30%; right: 8%; animation-delay: 3s; }
.contact-dewdrop--4 { bottom: 50%; right: 14%; animation-delay: 4.5s; }
.contact-dewdrop--5 { bottom: 18%; left: 22%; animation-delay: 2s; }
.contact-dewdrop--6 { bottom: 45%; right: 20%; animation-delay: 0.8s; }

@keyframes dewdrop-sparkle {
    0%, 100%   { opacity: 0; transform: scale(0.6); }
    20%        { opacity: 0.7; transform: scale(1); }
    40%        { opacity: 0.9; transform: scale(1.1); filter: brightness(1.4); }
    60%        { opacity: 0.6; transform: scale(1); }
    80%        { opacity: 0.3; transform: scale(0.8); }
}

/* --- Story: Petal Landing on Water --- */
.story-water-petal {
    position: absolute;
    bottom: 8%;
    width: 10px;
    height: 8px;
    border-radius: 50% 0 50% 50%;
    background: rgba(232, 196, 188, 0.35);
    opacity: 0;
    pointer-events: none;
    z-index: 2;
}

.story-water-petal--1 { left: 30%; animation: petal-land-water 14s ease-in-out 2s infinite; }
.story-water-petal--2 { left: 55%; animation: petal-land-water 14s ease-in-out 8s infinite; }
.story-water-petal--3 { left: 72%; animation: petal-land-water 14s ease-in-out 14s infinite; }

@keyframes petal-land-water {
    0%   { opacity: 0; transform: translateY(-200px) rotate(0deg); }
    40%  { opacity: 0.5; transform: translateY(-50px) rotate(120deg); }
    50%  { opacity: 0.6; transform: translateY(0) rotate(160deg); }
    55%  { opacity: 0.5; transform: translateY(2px) rotate(165deg) scale(0.9); }
    90%  { opacity: 0.3; transform: translateY(5px) rotate(170deg) scale(0.7); }
    100% { opacity: 0; transform: translateY(8px) rotate(175deg) scale(0.5); }
}