/* ==========================================
   SOFTLYSTUDIOS — COMPLETE ANIMATIONS
   Clean version
========================================== */


/* 1. SCROLL REVEAL */

.soft-reveal {
    opacity: 0;
    transform: translateY(28px);
    transition:
        opacity 700ms ease,
        transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.soft-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
}

.soft-reveal-delay-1 {
    transition-delay: 100ms;
}

.soft-reveal-delay-2 {
    transition-delay: 200ms;
}

.soft-reveal-delay-3 {
    transition-delay: 300ms;
}


/* 2. CARD HOVER */

.soft-hover-lift {
    transition:
        transform 300ms ease,
        box-shadow 300ms ease;
}

.soft-hover-lift:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 45px rgba(30, 50, 35, .10);
}


/* 3. HERO ENTRANCE */

.hero .eyebrow,
.hero h1,
.hero-description,
.hero-actions,
.hero-trust {
    animation: softlyHeroReveal 850ms
        cubic-bezier(.22, 1, .36, 1) both;
}

.hero .eyebrow {
    animation-delay: 100ms;
}

.hero h1 {
    animation-delay: 220ms;
}

.hero-description {
    animation-delay: 360ms;
}

.hero-actions {
    animation-delay: 500ms;
}

.hero-trust {
    animation-delay: 650ms;
}

@keyframes softlyHeroReveal {
    from {
        opacity: 0;
        transform: translateY(35px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* 4. HERO VISUAL ENTRANCE */

.hero-visual {
    animation: softlyVisualEntrance 1100ms
        cubic-bezier(.22, 1, .36, 1)
        250ms both;
}

@keyframes softlyVisualEntrance {
    from {
        opacity: 0;
        transform: translateY(30px) scale(.94);
    }

    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}


/* 5. FLOATING CARDS */

.match-card {
    animation: softlyCardFloat 5s
        ease-in-out infinite;
}

.ingredient-card {
    animation: softlyCardFloat 6s
        ease-in-out -2s infinite;
}

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

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


/* ==========================================
   6. HEADER — CIRCLE TO PILL ANIMATION
========================================== */

/*
   Button remains aligned to the right.
   Circle expands toward the left.
   Navbar layout remains stable.
*/

/* Reserve the full button space */

.site-header .nav-wrapper {
    position: relative;
}

.site-header .softly-morph-btn {
    --morph-green: #3F5948;
    --morph-dark: #293E31;

    position: relative !important;
    display: block !important;

    width: 260px;
    height: 54px;

    min-width: 260px;
    min-height: 54px;

    flex: 0 0 260px;

    padding: 0 !important;
    margin: 0;

    box-sizing: border-box;

    border: none !important;
    border-radius: 999px !important;

    background: transparent !important;
    color: #FFFFFF !important;

    box-shadow: none !important;
    outline: none;

    overflow: visible;
    white-space: nowrap;

    text-decoration: none !important;
    cursor: pointer;

    isolation: isolate;
}

/* Green animated pill */

.site-header .softly-morph-btn::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;
    left: auto;
    bottom: auto;

    width: 54px;
    height: 54px;

    box-sizing: border-box;

    border: none;
    border-radius: 999px;

    background: var(--morph-green);

    z-index: -1;

    animation: softlyMorphPill 5s
        cubic-bezier(.65, 0, .35, 1)
        infinite;
}

/* Thin white outline follows pill */

.site-header .softly-morph-btn::after {
    content: "";

    position: absolute;

    top: 4px;
    right: 4px;
    left: auto;
    bottom: auto;

    width: 46px;
    height: 46px;

    box-sizing: border-box;

    border: 1px solid rgba(255,255,255,.9);
    border-radius: 999px;

    pointer-events: none;
    z-index: 3;

    animation: softlyMorphOutline 5s
        cubic-bezier(.65, 0, .35, 1)
        infinite;
}

/* Arrow icon */

.site-header .softly-morph-icon {
    position: absolute;

    top: 0;
    right: 0;
    left: auto;

    display: flex;
    align-items: center;
    justify-content: center;

    width: 54px;
    height: 54px;

    font-size: 23px;
    font-weight: 500;
    line-height: 1;

    color: #FFFFFF;

    z-index: 2;

    animation: softlyMorphArrow 5s
        ease-in-out infinite;
}

/* Button text */

.site-header .softly-morph-text {
    position: absolute;

    top: 50%;
    right: 58px;
    left: auto;

    display: block;

    width: max-content;

    font-family: "Manrope", sans-serif;
    font-size: 13px;
    font-weight: 800;
    line-height: 1.3;

    color: #FFFFFF;

    opacity: 0;

    transform: translate(10px, -50%);

    z-index: 2;

    animation: softlyMorphText 5s
        ease-in-out infinite;
}

/* Circle expands into pill */

@keyframes softlyMorphPill {
    0%, 14% {
        width: 54px;
    }

    36%, 68% {
        width: 260px;
    }

    90%, 100% {
        width: 54px;
    }
}

/* White outline expands with pill */

@keyframes softlyMorphOutline {
    0%, 14% {
        width: 46px;
    }

    36%, 68% {
        width: 252px;
    }

    90%, 100% {
        width: 46px;
    }
}

/* Text reveal */

@keyframes softlyMorphText {
    0%, 25% {
        opacity: 0;
        transform: translate(10px, -50%);
    }

    40%, 68% {
        opacity: 1;
        transform: translate(0, -50%);
    }

    80%, 100% {
        opacity: 0;
        transform: translate(10px, -50%);
    }
}

/* Arrow movement */

@keyframes softlyMorphArrow {
    0%, 14% {
        transform: rotate(-25deg);
    }

    36%, 68% {
        transform: rotate(0deg);
    }

    90%, 100% {
        transform: rotate(-25deg);
    }
}

/* Hover */

.site-header .softly-morph-btn:hover::before {
    background: var(--morph-dark);
}

/* Keyboard focus */

.site-header .softly-morph-btn:focus-visible {
    outline: 3px solid #D8B6A7 !important;
    outline-offset: 4px;
}


/* ==========================================
   7. OTHER BUTTONS — TEXT ERASE / REVEAL
========================================== */

/*
   Only text is animated.
   Button size and background stay unchanged.

   HTML:
   <span class="softly-erase-text">Button text</span>
*/

.softly-erase-text {
    display: inline-block;
    white-space: nowrap;

    clip-path: inset(0 0 0 0);

    animation: softlyEraseWipe 5s
        cubic-bezier(.65, 0, .35, 1)
        infinite;
}

@keyframes softlyEraseWipe {
    0%, 18% {
        clip-path: inset(0 0 0 0);
    }

    38%, 48% {
        clip-path: inset(0 0 0 100%);
    }

    68%, 100% {
        clip-path: inset(0 0 0 0);
    }
}

/* Different timing */

.hero-actions .softly-erase-text {
    animation-delay: -.4s;
}

.search-box .softly-erase-text {
    animation-delay: -1.2s;
}

.passport-content .softly-erase-text {
    animation-delay: -2s;
}


/* 8. OTHER BUTTON FOCUS */

.btn-primary:focus-visible,
.btn-outline:focus-visible,
.btn-secondary:focus-visible,
.search-box button:focus-visible {
    outline: 3px solid #D8B6A7 !important;
    outline-offset: 4px;
}


/* 9. MOBILE */

@media (max-width: 950px) {
    .site-header .softly-morph-btn {
        display: none !important;
    }
}


/* ==========================================
   10. REDUCED MOTION
========================================== */

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

    .soft-reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    .hero .eyebrow,
    .hero h1,
    .hero-description,
    .hero-actions,
    .hero-trust,
    .hero-visual,
    .match-card,
    .ingredient-card {
        animation: none !important;
        opacity: 1;
        transform: none;
    }

    .softly-erase-text {
        animation: none !important;
        clip-path: none;
    }

    .site-header .softly-morph-btn::before {
        width: 260px;
        animation: none !important;
    }

    .site-header .softly-morph-btn::after {
        width: 252px;
        animation: none !important;
    }

    .site-header .softly-morph-icon {
        animation: none !important;
        transform: none;
    }

    .site-header .softly-morph-text {
        animation: none !important;
        opacity: 1;
        transform: translateY(-50%);
    }
}