/**
 * Landing Page Custom Styles
 * Calm, affirming, editorial design with ambient animations
 */

/* ============================================
   CUSTOM PROPERTIES
   ============================================ */
:root {
    --landing-ease: cubic-bezier(0.22, 1, 0.36, 1);
    --landing-pink: #FFC0CB;
    --landing-blue: #ADD8E6;
    --landing-white: #FFFFFF;
}

/* ============================================
   BACKGROUND GRADIENTS & HERO STYLES
   ============================================ */
.landing-hero-gradient {
    background: linear-gradient(
        180deg,
        rgba(255, 192, 203, 0.15) 0%,
        rgba(173, 216, 230, 0.12) 25%,
        rgba(255, 255, 255, 1) 50%,
        rgba(173, 216, 230, 0.12) 75%,
        rgba(255, 192, 203, 0.15) 100%
    );
    position: relative;
}

.landing-hero-gradient::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
    background-color: #FFFFFF;
}

/* Hero section with background image */
.landing-hero-bg {
    position: relative;
}

.landing-hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.05;
    pointer-events: none;
    z-index: 1;
}

/* White wave divider at bottom of hero */
.landing-hero-wave {
    -webkit-transform: scale(-1, -1);
    -moz-transform: scale(-1, -1);
    -o-transform: scale(-1, -1);
    transform: scale(-1, -1);
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 100%;
    height: 120px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 120' preserveAspectRatio='none'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' opacity='.25' fill='%23ffffff'/%3E%3Cpath d='M0,0V15.81C13,36.92,27.64,56.86,47.69,72.05,99.41,111.27,165,111,224.58,91.58c31.15-10.15,60.09-26.07,89.67-39.8,40.92-19,84.73-46,130.83-49.67,36.26-2.85,70.9,9.42,98.6,31.56,31.77,25.39,62.32,62,103.63,73,40.44,10.79,81.35-6.69,119.13-24.28s75.16-39,116.92-43.05c59.73-5.85,113.28,22.88,168.9,38.84,30.2,8.66,59,6.17,87.09-7.5,22.43-10.89,48-26.93,60.65-49.24V0Z' opacity='.5' fill='%23ffffff'/%3E%3Cpath d='M0,0V5.63C149.93,59,314.09,71.32,475.83,42.57c43-7.64,84.23-20.12,127.61-26.46,59-8.63,112.48,12.24,165.56,35.4C827.93,77.22,886,95.24,951.2,90c86.53-7,172.46-45.71,248.8-84.81V0Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: cover;
    background-repeat: no-repeat;
    z-index: 10;
    pointer-events: none;
}

.landing-hero-bg > *:not(.landing-hero-wave) {
    position: relative;
    z-index: 2;
}

/* Ambient gradient drift animation */
@keyframes gradient-drift {
    0%, 100% {
        background-position: 0% 50%;
    }
    50% {
        background-position: 100% 50%;
    }
}

.landing-hero-gradient-animated {
    background-size: 200% 200%;
    animation: gradient-drift 14s var(--landing-ease) infinite;
}

/* ============================================
   SCROLL REVEAL ANIMATIONS
   ============================================ */
.landing-fade-in-up {
    opacity: 0;
    transform: translateY(16px);
    transition: opacity 550ms var(--landing-ease),
                transform 550ms var(--landing-ease);
}

.landing-fade-in-up.animate-in {
    opacity: 1;
    transform: translateY(0);
}

.landing-fade-in-left {
    opacity: 0;
    transform: translateX(-16px);
    transition: opacity 550ms var(--landing-ease),
                transform 550ms var(--landing-ease);
}

.landing-fade-in-left.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.landing-fade-in-right {
    opacity: 0;
    transform: translateX(16px);
    transition: opacity 550ms var(--landing-ease),
                transform 550ms var(--landing-ease);
}

.landing-fade-in-right.animate-in {
    opacity: 1;
    transform: translateX(0);
}

.landing-scale-in {
    opacity: 0;
    transform: scale(0.95);
    transition: opacity 550ms var(--landing-ease),
                transform 550ms var(--landing-ease);
}

.landing-scale-in.animate-in {
    opacity: 1;
    transform: scale(1);
}

/* Blur reveal effect */
.landing-blur-reveal {
    filter: blur(6px);
    transition: filter 250ms var(--landing-ease);
}

.landing-blur-reveal.animate-in {
    filter: blur(0);
}

/* ============================================
   FLOATING ANIMATION
   ============================================ */
@keyframes landing-float {
    0%, 100% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-8px);
    }
}

.landing-float {
    animation: landing-float 9s var(--landing-ease) infinite;
}

/* ============================================
   CARD HOVER EFFECTS
   ============================================ */
.landing-card {
    transition: transform 180ms var(--landing-ease),
                box-shadow 180ms var(--landing-ease),
                border-color 180ms var(--landing-ease);
}

.landing-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08);
}

/* ============================================
   BUTTON EFFECTS
   ============================================ */
.landing-btn {
    transition: transform 120ms var(--landing-ease),
                box-shadow 120ms var(--landing-ease),
                background 180ms var(--landing-ease);
}

.landing-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.12);
}

.landing-btn:active {
    transform: scale(0.98);
}

.landing-btn-glow {
    position: relative;
    overflow: hidden;
}

.landing-btn-glow::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.3);
    transform: translate(-50%, -50%);
    transition: width 600ms var(--landing-ease),
                height 600ms var(--landing-ease);
}

.landing-btn-glow:hover::before {
    width: 300px;
    height: 300px;
}

/* ============================================
   HEADER TRANSPARENCY
   ============================================ */
.landing-header {
    transition: background-color 300ms var(--landing-ease),
                backdrop-filter 300ms var(--landing-ease),
                box-shadow 300ms var(--landing-ease);
}

.landing-header.scrolled {
    background-color: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}

/* Navigation link colors - white initially, colored when scrolled */
.landing-header .landing-nav-link {
    color: black;
    transition: color 300ms var(--landing-ease);
}

.landing-header.scrolled .landing-nav-link {
    color: #334155; /* slate-700 */
}

.landing-header .landing-nav-link:hover {
    color: rgba(255, 255, 255, 0.8);
}

.landing-header.scrolled .landing-nav-link:hover {
    color: #ec4899; /* pink-600 */
}

/* Logo text colors */
.landing-header .landing-logo-text {
    color: #2a2a2c;
    transition: color 300ms var(--landing-ease);
}

.landing-header.scrolled .landing-logo-text {
    background: linear-gradient(to right, #ec86b5, #8ab7ff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}

/* ============================================
   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;
    }

    .landing-fade-in-up,
    .landing-fade-in-left,
    .landing-fade-in-right,
    .landing-scale-in {
        opacity: 0;
        transform: none;
        transition: opacity 150ms ease;
    }

    .landing-fade-in-up.animate-in,
    .landing-fade-in-left.animate-in,
    .landing-fade-in-right.animate-in,
    .landing-scale-in.animate-in {
        opacity: 1;
    }

    .landing-blur-reveal {
        filter: none;
    }

    .landing-float {
        animation: none;
    }

    .landing-hero-gradient-animated {
        animation: none;
    }
}

/* ============================================
   TYPOGRAPHY UTILITIES
   ============================================ */
.landing-text-balance {
    text-wrap: balance;
}

.landing-max-read {
    max-width: 65ch;
}

/* ============================================
   TRUST CHIPS
   ============================================ */
.landing-trust-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.8);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 9999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: #475569;
    backdrop-filter: blur(8px);
}

.landing-trust-chip i {
    color: #10b981;
}

/* ============================================
   HERO TEXT READABILITY
   ============================================ */
.landing-hero-text {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
                 0 1px 3px rgba(0, 0, 0, 0.1);
}

.landing-hero-text-backdrop {
    background: rgba(255, 255, 255, 0.75);
    backdrop-filter: blur(8px);
    border-radius: 1rem;
    padding: 2rem;
}