/* ================================================
   ANIMATIONS & TRANSITIONS — Mindful Echo
   ================================================ */

/* ------------------------------------------------
   PAGE ENTER / EXIT TRANSITIONS
   ------------------------------------------------ */

body {
    animation: pageFadeIn 0.45s ease-out both;
}

@keyframes pageFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Exit/enter transitions are handled entirely in js/animations.js
   using inline styles so the JS can coordinate timing with fetching. */


/* ------------------------------------------------
   HEADER — compact + shadow on scroll
   ------------------------------------------------ */

.site-header {
    transition: padding 0.35s ease, box-shadow 0.35s ease, background-color 0.35s ease;
}

.site-header.scrolled {
    padding: 1rem 0;
    box-shadow: 0 4px 32px rgba(42, 58, 42, 0.08);
}


/* ------------------------------------------------
   NAV LINKS — sliding underline
   ------------------------------------------------ */

.main-nav a {
    position: relative;
    padding-bottom: 2px;
}

.main-nav a::after {
    content: '';
    position: absolute;
    bottom: -3px;
    left: 0;
    width: 0;
    height: 1.5px;
    background-color: var(--accent);
    border-radius: 2px;
    transition: width 0.28s cubic-bezier(0.4, 0, 0.2, 1);
}

.main-nav a:hover::after,
.main-nav a.current::after {
    width: 100%;
}


/* ------------------------------------------------
   HERO — staggered entrance
   ------------------------------------------------ */

.hero h1 {
    animation: heroSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.15s both;
}

.hero .subhead,
.hero .hero-subtitle {
    animation: heroSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.3s both;
}

.hero .app-actions,
.hero .cta-buttons {
    animation: heroSlideUp 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.45s both;
}

@keyframes heroSlideUp {
    from {
        opacity: 0;
        transform: translateY(28px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}


/* ------------------------------------------------
   SCROLL REVEAL — applied via JS
   ------------------------------------------------ */

.reveal {
    opacity: 0;
    transform: translateY(36px);
    transition: opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    transition-delay: var(--reveal-delay, 0s);
}

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

/* Fade-only variant for elements that shouldn't move */
.reveal-fade {
    opacity: 0;
    transition: opacity 0.7s ease;
    transition-delay: var(--reveal-delay, 0s);
}

.reveal-fade.is-visible {
    opacity: 1;
}


/* ------------------------------------------------
   BUTTONS — ripple shimmer
   ------------------------------------------------ */

.btn,
.button {
    position: relative;
    overflow: hidden;
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease,
                background-color 0.25s ease,
                border-color 0.25s ease,
                color 0.25s ease;
}

.btn::after,
.button::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    background: rgba(255, 255, 255, 0.18);
    border-radius: 50%;
    transform: translate(-50%, -50%);
    transition: width 0.55s ease, height 0.55s ease, opacity 0.55s ease;
    opacity: 0;
    pointer-events: none;
}

.btn:hover::after,
.button:hover::after {
    width: 320px;
    height: 320px;
    opacity: 1;
}

/* Disabled/non-link button */
span.btn,
span.button {
    cursor: default;
    opacity: 0.65;
}

span.btn:hover::after,
span.button:hover::after {
    width: 0;
    height: 0;
}


/* ------------------------------------------------
   APP CARD — lift on hover
   ------------------------------------------------ */

.app-card {
    transition: box-shadow 0.4s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-card:hover {
    box-shadow: 0 16px 48px rgba(42, 58, 42, 0.13);
    transform: translateY(-5px);
}


/* ------------------------------------------------
   FEATURE CARDS (about page)
   ------------------------------------------------ */

.feature-card {
    transition: box-shadow 0.35s ease,
                transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s ease;
}

.feature-card:hover {
    border-color: var(--sage-300);
}


/* ------------------------------------------------
   ETHICS LIST — indent on hover
   ------------------------------------------------ */

.ethics-list li {
    transition: color 0.2s ease, padding-left 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ethics-list li:hover {
    color: var(--sage-700);
    padding-left: 2.75rem;
}


/* ------------------------------------------------
   APP FEATURES LIST — nudge on hover
   ------------------------------------------------ */

.app-features li {
    transition: color 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.app-features li:hover {
    color: var(--sage-700);
    transform: translateX(5px);
}


/* ------------------------------------------------
   STEP NUMBERS (about page)
   ------------------------------------------------ */

.step-number {
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.3s ease;
}

.process-step:hover .step-number {
    transform: scale(1.12);
    box-shadow: 0 8px 24px rgba(74, 93, 74, 0.28);
}


/* ------------------------------------------------
   LOGO — subtle hover scale
   ------------------------------------------------ */

.header-logo a {
    display: inline-block;
    transition: opacity 0.2s ease, transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.header-logo a:hover {
    opacity: 0.85;
    transform: scale(1.02);
}


/* ------------------------------------------------
   FOOTER LINKS — colour fade
   ------------------------------------------------ */

.footer a,
.footer-nav a {
    transition: color 0.2s ease, opacity 0.2s ease;
}


/* ------------------------------------------------
   CLOSING SECTION — breathe
   ------------------------------------------------ */

.closing-text p {
    font-style: italic;
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.8s cubic-bezier(0.22, 1, 0.36, 1),
                transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.closing-text p:nth-child(2) {
    transition-delay: 0.18s;
}

.closing-text p.is-visible {
    opacity: 1;
    transform: translateY(0);
}


/* ------------------------------------------------
   POLICY SECTIONS
   ------------------------------------------------ */

.policy-section {
    transition: opacity 0.6s ease, transform 0.6s ease;
}


/* ------------------------------------------------
   DECORATIVE HORIZONTAL RULE REVEAL
   ------------------------------------------------ */

.section-divider {
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sage-300), transparent);
    border: none;
    margin: 0;
    transform: scaleX(0);
    transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1);
}

.section-divider.is-visible {
    transform: scaleX(1);
}


/* ------------------------------------------------
   REDUCED MOTION SUPPORT
   ------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    .reveal,
    .reveal-fade {
        opacity: 1;
        transform: none;
    }

    .closing-text p {
        opacity: 1;
        transform: none;
    }
}