/**
 * Landing page motion — soft celebration / couples tone, matches brand pinks & purples.
 * Scoped to body.landing-page. Respects prefers-reduced-motion.
 */

@media (prefers-reduced-motion: reduce) {
    .landing-page__bg,
    .landing-page__bg * {
        animation: none !important;
    }

    .landing-hero__title,
    .landing-hero__text,
    .landing-hero__cta,
    .landing-hero__phone-wrap,
    .landing-hero__phone-wrap img {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }

    .landing-reveal {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
    }
}

html:has(body.landing-page) {
    background-color: #fff8fa;
}

body.landing-page {
    background-color: transparent;
}

/* ---- Ambient background (fixed, behind content) ---- */
.landing-page__bg {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Sit above ambient background (header already z-index 100 in theme) */
body.landing-page > section,
body.landing-page .landing-section-outer {
    position: relative;
    z-index: 1;
}

.landing-page__bg-gradient {
    position: absolute;
    inset: -25%;
    background:
        radial-gradient(ellipse 85% 55% at 15% 35%, rgba(242, 2, 107, 0.11), transparent 52%),
        radial-gradient(ellipse 75% 50% at 88% 18%, rgba(147, 65, 212, 0.1), transparent 48%),
        radial-gradient(ellipse 65% 45% at 72% 88%, rgba(255, 138, 175, 0.13), transparent 50%),
        linear-gradient(180deg, #fff8fa 0%, #fff5f9 35%, #fef5fb 100%);
    animation: landingMeshMove 22s ease-in-out infinite alternate;
}

@keyframes landingMeshMove {
    0% {
        transform: translate(0, 0) rotate(0deg);
    }
    100% {
        transform: translate(2.5%, -2.5%) rotate(2deg);
    }
}

.landing-page__blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(64px);
    opacity: 0.42;
    animation: landingBlobDrift 28s ease-in-out infinite;
    will-change: transform;
}

.landing-page__blob--1 {
    width: min(44vw, 400px);
    height: min(44vw, 400px);
    background: linear-gradient(145deg, #ff8aaf, #f2026b);
    top: -8%;
    left: -10%;
}

.landing-page__blob--2 {
    width: min(58vw, 540px);
    height: min(58vw, 540px);
    background: linear-gradient(210deg, #e8b4ff, #9341d4);
    bottom: 5%;
    right: -18%;
    animation-delay: -9s;
    animation-duration: 34s;
    opacity: 0.38;
}

.landing-page__blob--3 {
    width: min(38vw, 320px);
    height: min(38vw, 320px);
    background: linear-gradient(40deg, #ffc8e0, #f54590);
    top: 42%;
    left: 32%;
    opacity: 0.28;
    animation-delay: -16s;
    animation-duration: 26s;
}

@keyframes landingBlobDrift {
    0%,
    100% {
        transform: translate(0, 0) scale(1);
    }
    33% {
        transform: translate(6%, 6%) scale(1.06);
    }
    66% {
        transform: translate(-4%, 7%) scale(0.94);
    }
}

/* Soft sparkles */
.landing-page__sparkles {
    position: absolute;
    inset: 0;
}

.landing-page__sparkle {
    position: absolute;
    width: 3px;
    height: 3px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.95);
    box-shadow:
        0 0 10px 2px rgba(255, 182, 217, 0.55),
        0 0 20px 4px rgba(255, 255, 255, 0.15);
    animation: landingSparkle 5s ease-in-out infinite;
    opacity: 0;
}

.landing-page__sparkle--1 {
    top: 14%;
    left: 22%;
    animation-delay: 0.3s;
}

.landing-page__sparkle--2 {
    top: 28%;
    right: 16%;
    animation-delay: 1.1s;
}

.landing-page__sparkle--3 {
    top: 62%;
    left: 12%;
    animation-delay: 2.4s;
}

.landing-page__sparkle--4 {
    bottom: 22%;
    right: 28%;
    animation-delay: 0.8s;
}

.landing-page__sparkle--5 {
    top: 48%;
    left: 55%;
    animation-delay: 3.2s;
}

.landing-page__sparkle--6 {
    bottom: 38%;
    left: 40%;
    animation-delay: 1.8s;
}

@keyframes landingSparkle {
    0%,
    100% {
        opacity: 0;
        transform: scale(0.4);
    }
    40%,
    60% {
        opacity: 0.9;
        transform: scale(1);
    }
}

/* ---- Hero entrance (loads in view) ---- */
@keyframes landingFadeUp {
    from {
        opacity: 0;
        transform: translateY(2.4rem);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.landing-hero__title {
    animation: landingFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.05s both;
}

.landing-hero__text {
    animation: landingFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.18s both;
}

.landing-hero__cta {
    animation: landingFadeUp 0.85s cubic-bezier(0.22, 1, 0.36, 1) 0.32s both;
}

@keyframes landingPhoneFloat {
    0%,
    100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-14px);
    }
}

/* Wrapper fades in; float only on img so transform animations do not clash */
.landing-hero__phone-wrap {
    animation: landingFadeUp 1s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both;
}

.landing-hero__phone-wrap img {
    animation: landingPhoneFloat 7s ease-in-out 1s infinite;
}

/* Gentle shimmer on hero accent (theme pinks / magenta) */
.landing-hero__title .text-info {
    background: linear-gradient(
        105deg,
        #c4156e 0%,
        #f2026b 30%,
        #ff8aaf 55%,
        #d63384 100%
    );
    background-size: 220% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    -webkit-text-fill-color: transparent;
    animation: landingTextShine 9s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
    .landing-hero__title .text-info {
        background: none;
        color: #f2026b;
        -webkit-text-fill-color: #f2026b;
        animation: none;
    }
}

@keyframes landingTextShine {
    0%,
    100% {
        background-position: 0% center;
    }
    50% {
        background-position: 100% center;
    }
}

/* ---- Scroll reveal sections ---- */
.landing-reveal {
    opacity: 0;
    transform: translateY(2.8rem);
    transition:
        opacity 0.75s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.75s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: opacity, transform;
}

.landing-reveal.landing-reveal--in {
    opacity: 1;
    transform: translateY(0);
    will-change: auto;
}