/* =========================================================
   Dizzt's Shoal
   animations.css

   Animation responsibilities:
   - Wave movement
   - Cloud drift
   - Seagull flight
   - Bubble floating
   - Character idle motion
   - Shell / starfish subtle motion
   - Crab movement
   - Card entrance effects
   - Gentle title motion
   - Shore details
   ========================================================= */


/* =========================================================
   1. Animation Variables
   ========================================================= */

:root {
    --anim-wave-slow: 18s;
    --anim-wave-fast: 12s;

    --anim-cloud-slow: 55s;
    --anim-cloud-medium: 42s;

    --anim-float: 5.5s;
    --anim-float-slow: 7s;

    --anim-bubble: 8s;

    --anim-seagull: 38s;

    --anim-crab: 16s;
}


/* =========================================================
   2. Hero Character Idle
   ========================================================= */

.hero-character {
    animation:
        heroCharacterFloat
        var(--anim-float-slow)
        ease-in-out
        infinite;
}


@keyframes heroCharacterFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(0.35deg);
    }

}


/* =========================================================
   3. Hero Character Glow
   ========================================================= */

.hero-character-glow {
    animation:
        heroGlowPulse
        6s
        ease-in-out
        infinite;
}


@keyframes heroGlowPulse {

    0%,
    100% {
        opacity:
            0.72;

        transform:
            translate(-50%, -50%)
            scale(0.98);
    }

    50% {
        opacity:
            0.94;

        transform:
            translate(-50%, -50%)
            scale(1.04);
    }

}


/* =========================================================
   4. Hero Shell
   ========================================================= */

.hero-shell {
    animation:
        decorationFloatLeft
        5.8s
        ease-in-out
        infinite;
}


@keyframes decorationFloatLeft {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-5deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(2deg);
    }

}


/* =========================================================
   5. Hero Starfish
   ========================================================= */

.hero-starfish {
    animation:
        decorationFloatRight
        6.5s
        ease-in-out
        infinite;
}


@keyframes decorationFloatRight {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(6deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(-2deg);
    }

}


/* =========================================================
   6. Site Logo Animation
   ========================================================= */

.site-logo {
    animation:
        siteLogoFloat 6.5s ease-in-out infinite,
        siteLogoGradientFlow 8s ease-in-out infinite,
        siteLogoGlow 4.2s ease-in-out infinite;
}


.site-logo::after {
    animation:
        siteLogoUnderlineWave 5.5s ease-in-out infinite;
}


@keyframes siteLogoFloat {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-2px);
    }

}


@keyframes siteLogoGradientFlow {

    0% {
        background-position:
            0% 50%;
    }

    50% {
        background-position:
            100% 50%;
    }

    100% {
        background-position:
            0% 50%;
    }

}


@keyframes siteLogoGlow {

    0%,
    100% {
        filter:
            drop-shadow(0 3px 0 rgba(255, 255, 255, 0.9))
            drop-shadow(0 8px 14px rgba(72, 130, 150, 0.14));
    }

    50% {
        filter:
            drop-shadow(0 3px 0 rgba(255, 255, 255, 0.95))
            drop-shadow(0 10px 20px rgba(72, 130, 150, 0.24))
            drop-shadow(0 0 16px rgba(191, 221, 240, 0.3));
    }

}


@keyframes siteLogoUnderlineWave {

    0%,
    100% {
        transform:
            scaleX(1)
            translateY(0);

        opacity:
            0.7;
    }

    50% {
        transform:
            scaleX(1.08)
            translateY(1px);

        opacity:
            1;
    }

}


/* =========================================================
   7. Main Ocean Wave Back
   ========================================================= */

.ocean-wave-back {
    animation:
        oceanWaveBack
        var(--anim-wave-slow)
        ease-in-out
        infinite alternate;
}


@keyframes oceanWaveBack {

    0% {
        transform:
            translateX(-52%)
            translateY(0)
            scaleX(1);
    }

    50% {
        transform:
            translateX(-48%)
            translateY(-5px)
            scaleX(1.02);
    }

    100% {
        transform:
            translateX(-53%)
            translateY(2px)
            scaleX(1);
    }

}


/* =========================================================
   8. Main Ocean Wave Front
   ========================================================= */

.ocean-wave-front {
    animation:
        oceanWaveFront
        var(--anim-wave-fast)
        ease-in-out
        infinite alternate;
}


@keyframes oceanWaveFront {

    0% {
        transform:
            translateX(-49%)
            translateY(0)
            scaleX(1.01);
    }

    50% {
        transform:
            translateX(-52%)
            translateY(-7px)
            scaleX(1.025);
    }

    100% {
        transform:
            translateX(-47%)
            translateY(2px)
            scaleX(1);
    }

}


/* =========================================================
   9. Wave Divider
   ========================================================= */

.wave-divider img {
    animation:
        dividerWaveMove
        16s
        ease-in-out
        infinite alternate;
}


@keyframes dividerWaveMove {

    0% {
        transform:
            translateX(-51%);
    }

    50% {
        transform:
            translateX(-48%);
    }

    100% {
        transform:
            translateX(-52%);
    }

}


/* =========================================================
   10. Cloud Base Motion
   ========================================================= */

.cloud {
    transform-origin:
        center;

    will-change:
        transform;
}


/* =========================================================
   11. Cloud 1
   ========================================================= */

.cloud-1 {
    animation:
        cloudDriftOne
        var(--anim-cloud-slow)
        ease-in-out
        infinite alternate;
}


@keyframes cloudDriftOne {

    0% {
        transform:
            translateX(-15px)
            translateY(0);
    }

    50% {
        transform:
            translateX(35px)
            translateY(-4px);
    }

    100% {
        transform:
            translateX(70px)
            translateY(2px);
    }

}


/* =========================================================
   12. Cloud 2
   ========================================================= */

.cloud-2 {
    animation:
        cloudDriftTwo
        var(--anim-cloud-medium)
        ease-in-out
        infinite alternate;
}


@keyframes cloudDriftTwo {

    0% {
        transform:
            translateX(25px)
            translateY(0);
    }

    50% {
        transform:
            translateX(-18px)
            translateY(5px);
    }

    100% {
        transform:
            translateX(-55px)
            translateY(1px);
    }

}


/* =========================================================
   13. Cloud 3
   ========================================================= */

.cloud-3 {
    animation:
        cloudDriftThree
        48s
        ease-in-out
        infinite alternate;
}


@keyframes cloudDriftThree {

    0% {
        transform:
            translateX(-12px)
            translateY(0)
            scale(0.95);
    }

    50% {
        transform:
            translateX(28px)
            translateY(-5px)
            scale(1);
    }

    100% {
        transform:
            translateX(55px)
            translateY(3px)
            scale(0.96);
    }

}


/* =========================================================
   14. Seagull 1
   ========================================================= */

.seagull-1 {
    animation:
        seagullDriftOne
        13s
        ease-in-out
        infinite;
}


@keyframes seagullDriftOne {

    0%,
    100% {
        transform:
            translateY(0)
            translateX(0)
            rotate(-2deg);
    }

    25% {
        transform:
            translateY(-7px)
            translateX(8px)
            rotate(1deg);
    }

    50% {
        transform:
            translateY(-2px)
            translateX(15px)
            rotate(3deg);
    }

    75% {
        transform:
            translateY(-9px)
            translateX(7px)
            rotate(0deg);
    }

}


/* =========================================================
   15. Seagull 2
   ========================================================= */

.seagull-2 {
    animation:
        seagullDriftTwo
        16s
        ease-in-out
        infinite;
}


@keyframes seagullDriftTwo {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(2deg);
    }

    33% {
        transform:
            translate(-10px, -5px)
            rotate(-1deg);
    }

    66% {
        transform:
            translate(7px, -9px)
            rotate(3deg);
    }

}


/* =========================================================
   16. Bubble Base
   ========================================================= */

.bubble {
    will-change:
        transform,
        opacity;
}


/* =========================================================
   17. Bubble 1
   ========================================================= */

.bubble-1 {
    animation:
        bubbleFloatOne
        8s
        ease-in-out
        infinite;
}


@keyframes bubbleFloatOne {

    0%,
    100% {
        transform:
            translateY(0)
            translateX(0)
            scale(1);

        opacity:
            0.4;
    }

    50% {
        transform:
            translateY(-24px)
            translateX(6px)
            scale(1.05);

        opacity:
            0.7;
    }

}


/* =========================================================
   18. Bubble 2
   ========================================================= */

.bubble-2 {
    animation:
        bubbleFloatTwo
        10s
        ease-in-out
        infinite;
}


@keyframes bubbleFloatTwo {

    0%,
    100% {
        transform:
            translate(0, 0)
            scale(0.95);
    }

    50% {
        transform:
            translate(-8px, -31px)
            scale(1.08);
    }

}


/* =========================================================
   19. Bubble 3
   ========================================================= */

.bubble-3 {
    animation:
        bubbleFloatThree
        11s
        ease-in-out
        infinite;
}


@keyframes bubbleFloatThree {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-18px)
            rotate(4deg);
    }

}


/* =========================================================
   20. Bubble 4
   ========================================================= */

.bubble-4 {
    animation:
        bubbleFloatFour
        7s
        ease-in-out
        infinite;
}


@keyframes bubbleFloatFour {

    0%,
    100% {
        transform:
            translate(0, 0)
            scale(1);
    }

    50% {
        transform:
            translate(8px, -22px)
            scale(0.92);
    }

}


/* =========================================================
   21. Bubble 5
   ========================================================= */

.bubble-5 {
    animation:
        bubbleFloatFive
        9s
        ease-in-out
        infinite;
}


@keyframes bubbleFloatFive {

    0%,
    100% {
        transform:
            translate(0, 0);
    }

    50% {
        transform:
            translate(-5px, -26px);
    }

}


/* =========================================================
   22. Profile Image
   ========================================================= */

.profile-image {
    animation:
        profileIdle
        6.5s
        ease-in-out
        infinite;
}


@keyframes profileIdle {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-4px)
            rotate(0.4deg);
    }

}


/* =========================================================
   23. Profile Background Shape
   ========================================================= */

.profile-image-wrapper::before {
    animation:
        profileBlob
        10s
        ease-in-out
        infinite alternate;
}


@keyframes profileBlob {

    0% {
        border-radius:
            48% 52% 56% 44%
            /
            50% 46% 54% 50%;

        transform:
            scale(1);
    }

    50% {
        border-radius:
            55% 45% 48% 52%
            /
            46% 55% 45% 54%;

        transform:
            scale(1.025);
    }

    100% {
        border-radius:
            45% 55% 52% 48%
            /
            55% 47% 53% 45%;

        transform:
            scale(0.99);
    }

}


/* =========================================================
   24. Shore Clock Sign
   ========================================================= */

.clock-sign {
    animation:
        clockSignIdle
        7.5s
        ease-in-out
        infinite;
}


@keyframes clockSignIdle {

    0%,
    100% {
        transform:
            rotate(-0.3deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(0.3deg)
            translateY(-3px);
    }

}


/* =========================================================
   25. Clock Shell
   ========================================================= */

.clock-shell {
    animation:
        clockShellIdle
        5s
        ease-in-out
        infinite;
}


@keyframes clockShellIdle {

    0%,
    100% {
        transform:
            rotate(-8deg);
    }

    50% {
        transform:
            rotate(-2deg)
            translateY(-3px);
    }

}


/* =========================================================
   26. Clock Crab
   ========================================================= */

.clock-crab {
    animation:
        clockCrabIdle
        6s
        ease-in-out
        infinite;
}


@keyframes clockCrabIdle {

    0%,
    100% {
        transform:
            translateX(0)
            rotate(0deg);
    }

    35% {
        transform:
            translateX(-5px)
            rotate(-2deg);
    }

    70% {
        transform:
            translateX(4px)
            rotate(2deg);
    }

}


/* =========================================================
   27. Project Image Hover Idle
   ========================================================= */

.project-placeholder-decoration {
    animation:
        projectDecorationFloat
        6s
        ease-in-out
        infinite;
}


@keyframes projectDecorationFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-1deg);
    }

    50% {
        transform:
            translateY(-7px)
            rotate(1.5deg);
    }

}


/* =========================================================
   28. Section Decorative Line
   ========================================================= */

.section-heading::after {
    animation:
        sectionLineGlow
        5s
        ease-in-out
        infinite;
}


@keyframes sectionLineGlow {

    0%,
    100% {
        opacity:
            0.45;

        transform:
            scaleX(0.96);

        transform-origin:
            left center;
    }

    50% {
        opacity:
            0.75;

        transform:
            scaleX(1.04);
    }

}


/* =========================================================
   29. Social Card Character
   ========================================================= */

.social-card-art img {
    animation:
        socialCharacterIdle
        6.8s
        ease-in-out
        infinite;
}


.steam-card .social-card-art img {
    animation-delay:
        -2.5s;
}


@keyframes socialCharacterIdle {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-6px)
            rotate(0.8deg);
    }

}


/* =========================================================
   30. Social Background Blob
   ========================================================= */

.social-card-art::before {
    animation:
        socialBlobPulse
        8s
        ease-in-out
        infinite;
}


@keyframes socialBlobPulse {

    0%,
    100% {
        transform:
            scale(0.96)
            rotate(0deg);

        opacity:
            0.65;
    }

    50% {
        transform:
            scale(1.05)
            rotate(3deg);

        opacity:
            0.9;
    }

}


/* =========================================================
   31. Shore Shell
   ========================================================= */

.shell-left {
    animation:
        shoreShellIdle
        8s
        ease-in-out
        infinite;
}


@keyframes shoreShellIdle {

    0%,
    100% {
        transform:
            rotate(-8deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(-3deg)
            translateY(-3px);
    }

}


/* =========================================================
   32. Shore Starfish
   ========================================================= */

.starfish-right {
    animation:
        shoreStarfishIdle
        9s
        ease-in-out
        infinite;
}


@keyframes shoreStarfishIdle {

    0%,
    100% {
        transform:
            rotate(7deg)
            translateY(0);
    }

    50% {
        transform:
            rotate(1deg)
            translateY(-4px);
    }

}


/* =========================================================
   33. Shore Crab
   ========================================================= */

.crab-left {
    animation:
        shoreCrabWalk
        var(--anim-crab)
        ease-in-out
        infinite;
}


@keyframes shoreCrabWalk {

    0%,
    100% {
        transform:
            translateX(0)
            translateY(0)
            rotate(-1deg);
    }

    20% {
        transform:
            translateX(5px)
            translateY(-1px)
            rotate(1deg);
    }

    40% {
        transform:
            translateX(11px)
            translateY(0)
            rotate(-1deg);
    }

    60% {
        transform:
            translateX(7px)
            translateY(-2px)
            rotate(1deg);
    }

    80% {
        transform:
            translateX(3px)
            translateY(0)
            rotate(0deg);
    }

}


/* =========================================================
   34. Visitor Shell
   ========================================================= */

.visitor-shell {
    animation:
        visitorShellFloat
        6s
        ease-in-out
        infinite;
}


@keyframes visitorShellFloat {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(-4deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(3deg);
    }

}


/* =========================================================
   35. Visitor Counter Soft Glow
   ========================================================= */

.visitor-count {
    animation:
        visitorCounterGlow
        4.5s
        ease-in-out
        infinite;
}


@keyframes visitorCounterGlow {

    0%,
    100% {
        box-shadow:
            inset 0 2px 8px rgba(255, 255, 255, 0.5),
            0 0 0 rgba(140, 192, 235, 0);
    }

    50% {
        box-shadow:
            inset 0 2px 8px rgba(255, 255, 255, 0.56),
            0 0 18px rgba(140, 192, 235, 0.12);
    }

}


/* =========================================================
   36. Guestbook Starfish
   ========================================================= */

.guestbook-starfish {
    animation:
        guestbookStarfishIdle
        7s
        ease-in-out
        infinite;
}


@keyframes guestbookStarfishIdle {

    0%,
    100% {
        transform:
            rotate(4deg)
            scale(1);
    }

    50% {
        transform:
            rotate(-3deg)
            scale(1.035);
    }

}


/* =========================================================
   37. Shore Character
   ========================================================= */

.shore-character {
    animation:
        shoreCharacterIdle
        7.5s
        ease-in-out
        infinite;
}


@keyframes shoreCharacterIdle {

    0%,
    100% {
        transform:
            translateY(0)
            rotate(0deg);
    }

    50% {
        transform:
            translateY(-5px)
            rotate(-0.5deg);
    }

}


/* =========================================================
   38. Card Entrance Base
   ========================================================= */

.hero-content,
.hero-character-area,
.profile-card,
.shore-clock-card,
.project-card,
.note-card,
.social-card,
.visitor-widget,
.guestbook-card {
    animation:
        softReveal
        700ms
        ease
        both;
}


@keyframes softReveal {

    from {
        opacity:
            0;

        transform:
            translateY(15px);
    }

    to {
        opacity:
            1;

        transform:
            translateY(0);
    }

}


/* =========================================================
   39. Entrance Delays
   ========================================================= */

.hero-content {
    animation-delay:
        60ms;
}


.hero-character-area {
    animation-delay:
        160ms;
}


.profile-card {
    animation-delay:
        90ms;
}


.shore-clock-card {
    animation-delay:
        160ms;
}


.project-card:nth-child(1) {
    animation-delay:
        80ms;
}


.project-card:nth-child(2) {
    animation-delay:
        150ms;
}


.project-card:nth-child(3) {
    animation-delay:
        220ms;
}


.note-card:nth-child(1) {
    animation-delay:
        70ms;
}


.note-card:nth-child(2) {
    animation-delay:
        130ms;
}


.note-card:nth-child(3) {
    animation-delay:
        190ms;
}


.discord-card {
    animation-delay:
        90ms;
}


.steam-card {
    animation-delay:
        160ms;
}


/* =========================================================
   40. Button Press Feel
   ========================================================= */

.button:active {
    transition-duration:
        70ms;
}


/* =========================================================
   41. Navigation Active Pulse
   ========================================================= */

.nav-link.active {
    animation:
        activeNavSoftGlow
        5s
        ease-in-out
        infinite;
}


@keyframes activeNavSoftGlow {

    0%,
    100% {
        box-shadow:
            0 5px 14px rgba(92, 143, 158, 0.12);
    }

    50% {
        box-shadow:
            0 7px 18px rgba(92, 143, 158, 0.21);
    }

}


/* =========================================================
   42. Beach Texture Motion

   Extremely subtle movement to avoid a static background.
   ========================================================= */

.shore-section::before {
    animation:
        sandTextureMove
        35s
        linear
        infinite;
}


@keyframes sandTextureMove {

    from {
        background-position:
            0 0;
    }

    to {
        background-position:
            27px 27px;
    }

}


/* =========================================================
   43. Notes Hover Arrow
   ========================================================= */

.note-link span,
.section-link span,
.text-link span {
    transition:
        transform var(--transition-fast);
}


.note-link:hover span,
.section-link:hover span,
.text-link:hover span {
    transform:
        translateX(4px);
}


/* =========================================================
   44. Project Card Tags
   ========================================================= */

.project-tag {
    transition:
        transform var(--transition-fast),
        background var(--transition-fast);
}


.project-card:hover .project-tag {
    transform:
        translateY(-1px);
}


/* =========================================================
   45. Input Focus Soft Pop
   ========================================================= */

.guestbook-form input:focus,
.guestbook-form textarea:focus {
    transform:
        translateY(-1px);

    transition:
        transform var(--transition-fast),
        border-color var(--transition-fast),
        box-shadow var(--transition-fast),
        background var(--transition-fast);
}


/* =========================================================
   46. Footer Logo
   ========================================================= */

.footer-logo {
    animation:
        footerLogoIdle
        8s
        ease-in-out
        infinite;
}


@keyframes footerLogoIdle {

    0%,
    100% {
        transform:
            translateY(0);
    }

    50% {
        transform:
            translateY(-2px);
    }

}


/* =========================================================
   47. Optional Full Flying Seagull

   Add this class to a seagull element if you later want
   one bird to cross the entire screen.

   Example:
   <img class="decoration seagull flying-seagull" ...>
   ========================================================= */

.flying-seagull {
    position:
        fixed;

    left:
        -120px;

    top:
        18%;

    z-index:
        2;

    animation:
        flyAcrossScreen
        var(--anim-seagull)
        linear
        infinite;

    pointer-events:
        none;
}


@keyframes flyAcrossScreen {

    0% {
        transform:
            translateX(0)
            translateY(0)
            rotate(-2deg);

        opacity:
            0;
    }

    5% {
        opacity:
            0.7;
    }

    25% {
        transform:
            translateX(30vw)
            translateY(-12px)
            rotate(1deg);
    }

    50% {
        transform:
            translateX(60vw)
            translateY(10px)
            rotate(-1deg);
    }

    75% {
        transform:
            translateX(90vw)
            translateY(-8px)
            rotate(1deg);
    }

    95% {
        opacity:
            0.7;
    }

    100% {
        transform:
            translateX(calc(100vw + 240px))
            translateY(3px)
            rotate(0deg);

        opacity:
            0;
    }

}


/* =========================================================
   48. Optional Dolphin Jump

   This is intentionally NOT applied by default.

   Example:
   <img class="dolphin-jump" ...>
   ========================================================= */

.dolphin-jump {
    animation:
        dolphinJump
        9s
        ease-in-out
        infinite;
}


@keyframes dolphinJump {

    0%,
    70%,
    100% {
        transform:
            translateY(25px)
            rotate(-4deg);

        opacity:
            0;
    }

    75% {
        opacity:
            1;
    }

    82% {
        transform:
            translateY(-35px)
            rotate(5deg);

        opacity:
            1;
    }

    89% {
        transform:
            translateY(4px)
            rotate(12deg);

        opacity:
            0.9;
    }

    94% {
        opacity:
            0;
    }

}


/* =========================================================
   49. Mobile Motion Reduction
   ========================================================= */

@media (max-width: 767px) {

    .hero-character {
        animation-duration:
            8s;
    }


    .cloud {
        animation-duration:
            65s;
    }


    .bubble {
        opacity:
            0.4;
    }


    .ocean-wave-back {
        animation-duration:
            22s;
    }


    .ocean-wave-front {
        animation-duration:
            16s;
    }


    .shore-section::before {
        animation-duration:
            50s;
    }

}


/* =========================================================
   50. Small Mobile Motion Reduction
   ========================================================= */

@media (max-width: 480px) {

    .profile-image-wrapper::before,
    .section-heading::after,
    .visitor-count {
        animation:
            none;
    }


    .hero-shell,
    .hero-starfish {
        animation-duration:
            8s;
    }


    .crab-left {
        animation-duration:
            20s;
    }

}


/* =========================================================
   51. Touch Devices

   Avoid combining hover transformations with continuous
   animations on touch devices.
   ========================================================= */

@media (hover: none) {

    .project-card,
    .profile-card,
    .social-card,
    .note-card {
        transition:
            box-shadow var(--transition-base);
    }


    .project-card:hover,
    .profile-card:hover,
    .social-card:hover,
    .note-card:hover {
        transform:
            none;
    }

}


/* =========================================================
   52. Reduced Motion Accessibility
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .hero-character,
    .hero-character-glow,
    .hero-shell,
    .hero-starfish,
    .site-logo,

    .ocean-wave-back,
    .ocean-wave-front,
    .wave-divider img,

    .cloud-1,
    .cloud-2,
    .cloud-3,

    .seagull-1,
    .seagull-2,

    .bubble-1,
    .bubble-2,
    .bubble-3,
    .bubble-4,
    .bubble-5,

    .profile-image,
    .profile-image-wrapper::before,

    .clock-sign,
    .clock-shell,
    .clock-crab,

    .project-placeholder-decoration,

    .section-heading::after,

    .social-card-art img,
    .social-card-art::before,

    .shell-left,
    .starfish-right,
    .crab-left,

    .visitor-shell,
    .visitor-count,

    .guestbook-starfish,
    .shore-character,

    .footer-logo,
    .flying-seagull,
    .dolphin-jump,

    .shore-section::before,

    .nav-link.active {
        animation:
            none !important;
    }


    .hero-content,
    .hero-character-area,
    .profile-card,
    .shore-clock-card,
    .project-card,
    .note-card,
    .social-card,
    .visitor-widget,
    .guestbook-card {
        animation:
            none !important;

        opacity:
            1 !important;

        transform:
            none !important;
    }

}