/* --- Keyframes --- */

/* Subtle organic morphing for the image frame */
@keyframes morphing-frame {
    0% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }

    50% {
        border-radius: 30% 60% 70% 40% / 50% 60% 30% 60%;
    }

    100% {
        border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%;
    }
}

/* Gentle floating/breathing effect */
@keyframes float {
    0% {
        transform: translateY(0);
    }

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

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

/* Pulse effect for subtle emphasis */
@keyframes pulse-soft {
    0% {
        box-shadow: 0 0 0 0 rgba(213, 169, 160, 0.4);
    }

    70% {
        box-shadow: 0 0 0 15px rgba(213, 169, 160, 0);
    }

    100% {
        box-shadow: 0 0 0 0 rgba(213, 169, 160, 0);
    }
}

/* =========================================== */
/* SCROLL ENTRANCE ANIMATIONS                  */
/* =========================================== */

/* Base state for all scroll animations */
.scroll-fade-up,
.scroll-fade-left,
.scroll-fade-right,
.scroll-fade-scale,
.scroll-fade-rotate {
    opacity: 0;
    transition: all 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Fade Up */
.scroll-fade-up {
    transform: translateY(40px);
}

.scroll-fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Fade Left */
.scroll-fade-left {
    transform: translateX(-50px);
}

.scroll-fade-left.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade Right */
.scroll-fade-right {
    transform: translateX(50px);
}

.scroll-fade-right.visible {
    opacity: 1;
    transform: translateX(0);
}

/* Fade Scale */
.scroll-fade-scale {
    transform: scale(0.9);
}

.scroll-fade-scale.visible {
    opacity: 1;
    transform: scale(1);
}

/* Fade Rotate */
.scroll-fade-rotate {
    transform: translateY(30px) rotate(-3deg);
}

.scroll-fade-rotate.visible {
    opacity: 1;
    transform: translateY(0) rotate(0);
}

/* Stagger Delays */
.delay-1 {
    transition-delay: 0.1s;
}

.delay-2 {
    transition-delay: 0.2s;
}

.delay-3 {
    transition-delay: 0.3s;
}

.delay-4 {
    transition-delay: 0.4s;
}

.delay-5 {
    transition-delay: 0.5s;
}

.delay-6 {
    transition-delay: 0.6s;
}

/* Section entrance */
section {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.6s ease, transform 0.6s ease;
}

section.visible {
    opacity: 1;
    transform: translateY(0);
}

/* Hero should always be visible */
.intro-hero {
    opacity: 1;
    transform: none;
}

/* --- Classes --- */

.animate-morph {
    animation: morphing-frame 20s ease-in-out infinite;
    border: 4px solid var(--primary-rose);
    /* Rose border matching site theme */
    overflow: hidden;
    /* Ensures image stays inside shape */
    box-shadow: var(--shadow-hover);
}


.animate-float {
    animation: float 6s ease-in-out infinite;
}

/* --- Concept Section Animations --- */

/* Gradient Text Animation */
.animate-text-gradient {
    background: linear-gradient(90deg, var(--primary-rose-dark), var(--primary-rose), #d5a9a0, var(--primary-rose-dark));
    background-size: 300%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: gradient-flow 6s ease infinite;
}

@keyframes gradient-flow {
    0% {
        background-position: 0% 50%;
    }

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

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

/* Cool Frame Animation */
/* Cool Frame Animation (White/Gold for Rose Bg) */
.cool-frame {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: visible;
    margin: 20px;
}

.cool-frame img {
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.15);
    /* Stronger shadow for contrast */
    position: relative;
    z-index: 2;
}

.cool-frame::before {
    content: '';
    position: absolute;
    top: -15px;
    left: -15px;
    right: 15px;
    bottom: 15px;
    border: 2px solid rgba(255, 255, 255, 0.6);
    /* White Translucent */
    border-radius: 20px;
    z-index: 0;
    animation: frame-float 5s ease-in-out infinite alternate;
}

.cool-frame::after {
    content: '';
    position: absolute;
    top: 15px;
    left: 15px;
    right: -15px;
    bottom: -15px;
    border: 2px solid rgba(255, 255, 255, 0.3);
    /* Lower opacity White */
    border-radius: 20px;
    z-index: 0;
    animation: frame-float-reverse 6s ease-in-out infinite alternate;
}

@keyframes frame-float {
    0% {
        transform: translate(0, 0);
    }

    100% {
        transform: translate(5px, 5px);
    }
}

@keyframes frame-float-reverse {
    0% {
        transform: translate(0, 0);
    }

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

/* --- Creative Title Design (Inverted) --- */
.creative-title {
    position: relative;
    display: inline-block;
    font-weight: 300;
    letter-spacing: 1px;
    margin-bottom: 2rem;
    color: var(--white);
    /* White base text */
}

.creative-title .creative-highlight {
    font-weight: 700;
    font-style: italic;
    /* White/Gold Gradient */
    background: linear-gradient(120deg, #ffffff 0%, #ffe4e1 25%, #fff 50%, #ffe4e1 75%, #ffffff 100%);
    background-size: 200% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: shine-text 4s linear infinite;
    position: relative;
    font-size: 1.25em;
    /* Slightly larger */
    padding: 0 5px;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Moving Underline (White) */
.creative-title::after {
    content: '';
    position: absolute;
    bottom: -10px;
    left: 0;
    width: 60px;
    height: 4px;
    background: linear-gradient(to right, #ffffff, rgba(255, 255, 255, 0.4));
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.creative-title:hover::after {
    width: 100%;
}

@keyframes shine-text {
    to {
        background-position: 200% center;
    }
}