/* ============================================
   ABOUT PAGE SPECIFIC STYLES
   Prefix: .about_
   ============================================ */

    /* Hero Section - Enhanced with Painter Animations */
    .about_hero {
        position: relative;
        padding: var(--space-xl) 0 var(--space-2xl);
        background: linear-gradient(135deg, #FDF8F3 0%, #FAF5EF 50%, #F5EDE4 100%);
        overflow: hidden;
        min-height: 90vh;
        display: flex;
        align-items: center;
    }

    /* Viewport Animation for Hero - Entrance Effect */
    .about_hero-content {
        position: relative;
        z-index: 2;
        display: grid;
        grid-template-columns: 1fr 1.2fr;
        gap: 4rem;
        align-items: center;
        max-width: 1400px;
        margin: 0 auto;
        padding: 0 2rem;
        animation: heroEntranceSlide 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
        opacity: 0;
    }

    @keyframes heroEntranceSlide {
        0% {
            opacity: 0;
            transform: translateY(60px);
        }

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

    .about_hero-bg {
        position: absolute;
        inset: 0;
        z-index: 0;
        overflow: hidden;
    }

    /* ===== PAINTER ANIMATIONS ===== */

    /* Paint Brush Stroke Animation */
    .about_hero-brush {
        position: absolute;
        height: 4px;
        border-radius: 4px;
        opacity: 0;
        filter: blur(1px);
    }

    .about_hero-brush--1 {
        width: 0;
        top: 15%;
        left: 5%;
        background: linear-gradient(90deg, transparent, var(--artist-primary), var(--artist-accent));
        animation: brushStroke 4s ease-out infinite;
        animation-delay: 0s;
    }

    .about_hero-brush--2 {
        width: 0;
        top: 75%;
        right: 10%;
        background: linear-gradient(270deg, transparent, var(--artist-accent-dark), var(--artist-primary));
        animation: brushStroke 5s ease-out infinite;
        animation-delay: 2s;
    }

    .about_hero-brush--3 {
        width: 0;
        top: 45%;
        left: 60%;
        background: linear-gradient(90deg, transparent, rgba(90, 123, 139, 0.8), transparent);
        animation: brushStroke 6s ease-out infinite;
        animation-delay: 1s;
    }

    @keyframes brushStroke {
        0% {
            width: 0;
            opacity: 0;
        }

        15% {
            opacity: 0.8;
        }

        50% {
            width: 250px;
            opacity: 0.6;
        }

        100% {
            width: 350px;
            opacity: 0;
        }
    }

    /* Paint Drip Animation */
    .about_hero-drip {
        position: absolute;
        width: 6px;
        height: 0;
        border-radius: 0 0 50% 50%;
        opacity: 0;
    }

    .about_hero-drip--1 {
        top: 0;
        left: 15%;
        background: linear-gradient(180deg, var(--artist-primary), transparent);
        animation: paintDrip 8s ease-in infinite;
        animation-delay: 0s;
    }

    .about_hero-drip--2 {
        top: 0;
        left: 35%;
        background: linear-gradient(180deg, var(--artist-accent), transparent);
        animation: paintDrip 10s ease-in infinite;
        animation-delay: 3s;
    }

    .about_hero-drip--3 {
        top: 0;
        right: 20%;
        background: linear-gradient(180deg, rgba(90, 123, 139, 0.8), transparent);
        animation: paintDrip 7s ease-in infinite;
        animation-delay: 5s;
    }

    @keyframes paintDrip {
        0% {
            height: 0;
            opacity: 0;
        }

        10% {
            opacity: 0.7;
        }

        70% {
            height: 150px;
            opacity: 0.5;
        }

        100% {
            height: 200px;
            opacity: 0;
        }
    }

    /* Color Palette Splash Animation */
    .about_hero-splash {
        position: absolute;
        border-radius: 50%;
        opacity: 0;
        filter: blur(40px);
    }

    .about_hero-splash--1 {
        width: 300px;
        height: 300px;
        top: -50px;
        right: 5%;
        background: radial-gradient(circle, rgba(212, 165, 116, 0.4) 0%, transparent 70%);
        animation: splashPulse 6s ease-in-out infinite;
    }

    .about_hero-splash--2 {
        width: 250px;
        height: 250px;
        bottom: 10%;
        left: 0;
        background: radial-gradient(circle, rgba(139, 90, 90, 0.35) 0%, transparent 70%);
        animation: splashPulse 8s ease-in-out infinite;
        animation-delay: 2s;
    }

    .about_hero-splash--3 {
        width: 200px;
        height: 200px;
        top: 40%;
        right: 30%;
        background: radial-gradient(circle, rgba(90, 123, 139, 0.3) 0%, transparent 70%);
        animation: splashPulse 5s ease-in-out infinite;
        animation-delay: 4s;
    }

    @keyframes splashPulse {

        0%,
        100% {
            transform: scale(0.8);
            opacity: 0.3;
        }

        50% {
            transform: scale(1.2);
            opacity: 0.7;
        }
    }

    /* Artist Palette Floating Element */
    .about_hero-palette {
        position: absolute;
        bottom: 10%;
        right: 5%;
        width: 120px;
        height: 80px;
        opacity: 0.15;
        animation: paletteFloat 12s ease-in-out infinite;
    }

    .about_hero-palette::before {
        content: '';
        position: absolute;
        width: 100%;
        height: 100%;
        background:
            radial-gradient(circle at 20% 30%, var(--artist-primary) 8px, transparent 8px),
            radial-gradient(circle at 40% 50%, var(--artist-accent) 6px, transparent 6px),
            radial-gradient(circle at 60% 25%, rgba(90, 123, 139, 0.8) 7px, transparent 7px),
            radial-gradient(circle at 75% 55%, rgba(180, 140, 100, 0.9) 5px, transparent 5px),
            radial-gradient(circle at 85% 30%, rgba(200, 100, 100, 0.7) 6px, transparent 6px);
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        background-color: rgba(250, 245, 240, 0.8);
        box-shadow: 0 5px 20px rgba(0, 0, 0, 0.1);
    }

    @keyframes paletteFloat {

        0%,
        100% {
            transform: translateY(0) rotate(-5deg);
        }

        50% {
            transform: translateY(-20px) rotate(5deg);
        }
    }

    /* Canvas Frame Effect on Image */
    .about_hero-canvas-frame {
        position: absolute;
        inset: -15px;
        border: 3px solid rgba(139, 90, 90, 0.15);
        border-radius: calc(var(--radius-xl) + 10px);
        pointer-events: none;
        animation: canvasReveal 1.5s ease-out 0.5s forwards;
        opacity: 0;
    }

    .about_hero-canvas-frame::before {
        content: '';
        position: absolute;
        inset: -8px;
        border: 1px solid rgba(212, 165, 116, 0.2);
        border-radius: calc(var(--radius-xl) + 18px);
    }

    @keyframes canvasReveal {
        0% {
            opacity: 0;
            transform: scale(0.95);
        }

        100% {
            opacity: 1;
            transform: scale(1);
        }
    }

    /* Paint Dots Floating Animation */
    .about_hero-dot {
        position: absolute;
        border-radius: 50%;
        animation: dotFloat 10s ease-in-out infinite;
    }

    .about_hero-dot--1 {
        width: 12px;
        height: 12px;
        top: 20%;
        left: 8%;
        background: var(--artist-primary);
        box-shadow: 0 0 20px var(--artist-primary);
        animation-delay: 0s;
    }

    .about_hero-dot--2 {
        width: 8px;
        height: 8px;
        top: 60%;
        left: 12%;
        background: var(--artist-accent);
        box-shadow: 0 0 15px var(--artist-accent);
        animation-delay: 2s;
    }

    .about_hero-dot--3 {
        width: 10px;
        height: 10px;
        top: 30%;
        right: 8%;
        background: rgba(90, 123, 139, 0.8);
        box-shadow: 0 0 18px rgba(90, 123, 139, 0.5);
        animation-delay: 4s;
    }

    .about_hero-dot--4 {
        width: 6px;
        height: 6px;
        bottom: 25%;
        right: 15%;
        background: rgba(180, 140, 100, 0.9);
        box-shadow: 0 0 12px rgba(180, 140, 100, 0.6);
        animation-delay: 6s;
    }

    @keyframes dotFloat {

        0%,
        100% {
            transform: translateY(0) translateX(0) scale(1);
            opacity: 0.6;
        }

        25% {
            transform: translateY(-25px) translateX(10px) scale(1.3);
            opacity: 1;
        }

        50% {
            transform: translateY(-10px) translateX(-15px) scale(0.9);
            opacity: 0.8;
        }

        75% {
            transform: translateY(-35px) translateX(5px) scale(1.1);
            opacity: 0.9;
        }
    }

    .about_hero-image {
        position: relative;
    }

    .about_hero-image-wrapper {
        position: relative;
        width: 100%;
        max-width: 450px;
        margin: 0 auto;
    }

    .about_hero-img {
        width: 100%;
        aspect-ratio: 4/5;
        object-fit: cover;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-strong);
    }

    .about_hero-img-placeholder {
        width: 100%;
        aspect-ratio: 4/5;
        background: linear-gradient(145deg,
                #FDF8F3 0%,
                rgba(212, 165, 116, 0.15) 30%,
                rgba(139, 90, 90, 0.1) 60%,
                rgba(90, 123, 139, 0.08) 100%);
        border-radius: var(--radius-xl);
        box-shadow:
            0 25px 50px -12px rgba(139, 90, 90, 0.25),
            0 0 0 1px rgba(212, 165, 116, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.6);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        position: relative;
        overflow: hidden;
    }

    .about_hero-img-placeholder::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:
            linear-gradient(45deg, transparent 48%, rgba(212, 165, 116, 0.1) 50%, transparent 52%),
            linear-gradient(-45deg, transparent 48%, rgba(139, 90, 90, 0.08) 50%, transparent 52%);
        background-size: 30px 30px;
        animation: placeholderPattern 20s linear infinite;
        opacity: 0.5;
    }

    @keyframes placeholderPattern {
        0% {
            background-position: 0 0, 0 0;
        }

        100% {
            background-position: 60px 60px, -60px 60px;
        }
    }

    .about_hero-img-placeholder span {
        font-family: var(--font-accent);
        font-size: 10rem;
        background: linear-gradient(135deg, var(--artist-primary), var(--artist-accent-dark));
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
        position: relative;
        z-index: 1;
        text-shadow: none;
        filter: drop-shadow(0 4px 6px rgba(139, 90, 90, 0.2));
    }

    .about_hero-img-placeholder p {
        font-family: var(--font-heading);
        font-size: 1rem;
        font-weight: 500;
        color: var(--artist-muted);
        position: relative;
        z-index: 1;
        letter-spacing: 0.05em;
    }

    .about_hero-frame {
        position: absolute;
        inset: 15px;
        border: 2px solid var(--artist-accent);
        border-radius: var(--radius-xl);
        opacity: 0.6;
        pointer-events: none;
    }

    .about_hero-accent {
        position: absolute;
        bottom: -20px;
        right: -20px;
        width: 150px;
        height: 150px;
        background: linear-gradient(135deg, var(--artist-accent), var(--artist-accent-dark));
        border-radius: var(--radius-xl);
        opacity: 0.8;
        z-index: -1;
    }

    .about_hero-text {
        max-width: 600px;
    }

    .about_hero-label {
        display: inline-flex;
        align-items: center;
        gap: 0.5rem;
        padding: 0.5rem 1rem;
        background: rgba(139, 90, 90, 0.1);
        border: 1px solid rgba(139, 90, 90, 0.2);
        border-radius: var(--radius-full);
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--artist-primary);
        margin-bottom: 1.5rem;
    }

    .about_hero-title {
        font-family: var(--font-heading);
        font-size: clamp(2.5rem, 5vw, 4rem);
        font-weight: 600;
        line-height: 1.15;
        color: var(--artist-dark);
        margin-bottom: 1.5rem;
    }

    .about_hero-title .accent {
        font-family: var(--font-accent);
        color: var(--artist-primary);
        font-weight: 400;
    }

    .about_hero-desc {
        font-size: 1.125rem;
        line-height: 1.8;
        color: var(--artist-muted);
        margin-bottom: 2rem;
    }

    .about_hero-social {
        display: flex;
        gap: 1rem;
    }

    .about_hero-social-btn {
        width: 50px;
        height: 50px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: white;
        border-radius: var(--radius-full);
        color: var(--artist-dark);
        font-size: 1.25rem;
        box-shadow: var(--shadow-soft);
        text-decoration: none;
        transition: var(--transition-smooth);
    }

    .about_hero-social-btn:hover {
        transform: translateY(-4px);
        box-shadow: var(--shadow-medium);
    }

    .about_hero-social-btn.youtube:hover {
        background: #FF0000;
        color: white;
    }

    .about_hero-social-btn.instagram:hover {
        background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
        color: white;
    }

    .about_hero-social-btn.email:hover {
        background: var(--artist-primary);
        color: white;
    }

    @media (max-width: 1024px) {
        .about_hero-content {
            grid-template-columns: 1fr;
            text-align: center;
        }

        .about_hero-text {
            max-width: 100%;
            order: 2;
        }

        .about_hero-image {
            order: 1;
        }

        .about_hero-image-wrapper {
            max-width: 350px;
        }

        .about_hero-social {
            justify-content: center;
        }
    }

    /* ============================================
   STORY SECTION - Watercolor Ink Theme
   ============================================ */

    .about_story {
        padding: var(--space-2xl) 0;
        background: linear-gradient(180deg,
                #ffffff 0%,
                #fdfbf8 30%,
                #faf6f0 60%,
                #f8f2ea 100%);
        position: relative;
        overflow: hidden;
    }

    /* Watercolor Wash Background */
    .about_story-wash {
        position: absolute;
        border-radius: 50%;
        filter: blur(80px);
        opacity: 0;
        animation: washFloat 18s ease-in-out infinite;
    }

    .about_story-wash--1 {
        width: 500px;
        height: 400px;
        top: -10%;
        left: -10%;
        background: radial-gradient(circle,
                rgba(212, 165, 116, 0.15) 0%,
                rgba(212, 165, 116, 0.05) 50%,
                transparent 70%);
        animation-delay: 0s;
    }

    .about_story-wash--2 {
        width: 400px;
        height: 350px;
        top: 40%;
        right: -15%;
        background: radial-gradient(circle,
                rgba(139, 90, 90, 0.12) 0%,
                rgba(139, 90, 90, 0.04) 50%,
                transparent 70%);
        animation-delay: 6s;
    }

    .about_story-wash--3 {
        width: 350px;
        height: 300px;
        bottom: -10%;
        left: 30%;
        background: radial-gradient(circle,
                rgba(90, 123, 139, 0.1) 0%,
                rgba(90, 123, 139, 0.03) 50%,
                transparent 70%);
        animation-delay: 12s;
    }

    @keyframes washFloat {

        0%,
        100% {
            opacity: 0.3;
            transform: translate(0, 0) scale(1);
        }

        33% {
            opacity: 0.6;
            transform: translate(30px, -20px) scale(1.15);
        }

        66% {
            opacity: 0.4;
            transform: translate(-20px, 15px) scale(0.9);
        }
    }

    /* Floating Ink Drops */
    .about_story-drop {
        position: absolute;
        width: 6px;
        height: 8px;
        background: var(--artist-accent);
        border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
        opacity: 0.3;
        animation: dropFloat 12s ease-in-out infinite;
    }

    .about_story-drop--1 {
        top: 15%;
        left: 8%;
        animation-delay: 0s;
    }

    .about_story-drop--2 {
        top: 35%;
        right: 12%;
        animation-delay: 2s;
        width: 5px;
        height: 7px;
    }

    .about_story-drop--3 {
        top: 65%;
        left: 5%;
        animation-delay: 4s;
        background: var(--artist-primary);
    }

    .about_story-drop--4 {
        top: 80%;
        right: 8%;
        animation-delay: 6s;
        width: 4px;
        height: 6px;
    }

    @keyframes dropFloat {

        0%,
        100% {
            transform: translateY(0) rotate(0deg);
            opacity: 0.3;
        }

        50% {
            transform: translateY(-15px) rotate(10deg);
            opacity: 0.5;
        }
    }

    /* Decorative Lines */
    .about_story-line {
        position: absolute;
        height: 1px;
        background: linear-gradient(90deg,
                transparent,
                rgba(212, 165, 116, 0.3),
                transparent);
        animation: lineShimmer 8s ease-in-out infinite;
    }

    .about_story-line--1 {
        width: 200px;
        top: 20%;
        left: 5%;
        transform: rotate(-5deg);
    }

    .about_story-line--2 {
        width: 150px;
        top: 50%;
        right: 10%;
        transform: rotate(8deg);
        animation-delay: 4s;
    }

    @keyframes lineShimmer {

        0%,
        100% {
            opacity: 0.2;
        }

        50% {
            opacity: 0.5;
        }
    }

    .about_story-content {
        max-width: 900px;
        margin: 0 auto;
        position: relative;
        z-index: 2;
    }

    /* Enhanced Quote with Animation */
    .about_story-quote {
        font-family: var(--font-accent);
        font-size: clamp(1.75rem, 4vw, 2.5rem);
        color: var(--artist-primary);
        text-align: center;
        margin-bottom: 3rem;
        line-height: 1.4;
        position: relative;
        padding: 2rem 3rem;
        background: rgba(255, 255, 255, 0.6);
        border-radius: 20px;
        box-shadow: 0 10px 40px rgba(139, 90, 90, 0.08);
        backdrop-filter: blur(10px);
        opacity: 0;
        transform: translateY(40px) scale(0.95);
        animation: quoteReveal 1s ease-out forwards;
        animation-play-state: paused;
    }

    .about_story.in-view .about_story-quote {
        animation-play-state: running;
    }

    @keyframes quoteReveal {
        0% {
            opacity: 0;
            transform: translateY(40px) scale(0.95);
        }

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

    /* Animated Quote Marks */
    .about_story-quote::before,
    .about_story-quote::after {
        content: '"';
        font-size: 5rem;
        color: var(--artist-accent);
        position: absolute;
        font-family: Georgia, serif;
        line-height: 1;
        opacity: 0;
        animation: quoteMarkReveal 0.8s ease-out forwards;
        animation-play-state: paused;
    }

    .about_story.in-view .about_story-quote::before,
    .about_story.in-view .about_story-quote::after {
        animation-play-state: running;
    }

    .about_story-quote::before {
        top: 0.5rem;
        left: 0.5rem;
        animation-delay: 0.3s;
    }

    .about_story-quote::after {
        bottom: 0;
        right: 0.5rem;
        animation-delay: 0.5s;
    }

    @keyframes quoteMarkReveal {
        0% {
            opacity: 0;
            transform: scale(0.5) rotate(-20deg);
        }

        100% {
            opacity: 0.5;
            transform: scale(1) rotate(0deg);
        }
    }

    .about_story-text {
        font-size: 1.125rem;
        line-height: 2;
        color: var(--artist-dark);
    }

    /* Staggered Paragraph Reveal */
    .about_story-text p {
        margin-bottom: 1.5rem;
        padding-left: 1.5rem;
        border-left: 3px solid transparent;
        opacity: 0;
        transform: translateX(-30px);
        animation: paragraphReveal 0.8s ease-out forwards;
        animation-play-state: paused;
        transition: border-color 0.3s ease;
    }

    .about_story.in-view .about_story-text p {
        animation-play-state: running;
    }

    .about_story-text p:nth-child(1) {
        animation-delay: 0.4s;
    }

    .about_story-text p:nth-child(2) {
        animation-delay: 0.6s;
    }

    .about_story-text p:nth-child(3) {
        animation-delay: 0.8s;
    }

    .about_story-text p:nth-child(4) {
        animation-delay: 1s;
    }

    .about_story-text p:hover {
        border-left-color: var(--artist-accent);
    }

    .about_story-text p:last-child {
        margin-bottom: 0;
    }

    @keyframes paragraphReveal {
        0% {
            opacity: 0;
            transform: translateX(-30px);
        }

        100% {
            opacity: 1;
            transform: translateX(0);
        }
    }

    /* Glowing Highlight Effect */
    .about_story-highlight {
        background: linear-gradient(120deg,
                rgba(212, 165, 116, 0.3) 0%,
                rgba(212, 165, 116, 0.4) 50%,
                rgba(212, 165, 116, 0.3) 100%);
        background-size: 200% auto;
        padding: 0.1em 0.4em;
        border-radius: 4px;
        position: relative;
        animation: highlightGlow 3s ease-in-out infinite;
    }

    @keyframes highlightGlow {

        0%,
        100% {
            background-position: 0% center;
            box-shadow: 0 0 0 rgba(212, 165, 116, 0);
        }

        50% {
            background-position: 100% center;
            box-shadow: 0 0 15px rgba(212, 165, 116, 0.3);
        }
    }

    /* ============================================
   PHILOSOPHY SECTION - Artistic Design
   ============================================ */

    .about_philosophy {
        padding: var(--space-2xl) 0;
        background: var(--artist-cream);
        position: relative;
        overflow: hidden;
    }

    .about_philosophy::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background:
            radial-gradient(ellipse 80% 50% at 20% 30%, rgba(212, 165, 116, 0.1) 0%, transparent 50%),
            radial-gradient(ellipse 60% 40% at 80% 70%, rgba(139, 90, 90, 0.08) 0%, transparent 50%);
        pointer-events: none;
    }

    .about_philosophy-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 2rem;
        margin-top: 3rem;
        position: relative;
        z-index: 1;
    }

    .about_philosophy-card {
        background: white;
        padding: 2.5rem 2rem;
        border-radius: var(--radius-xl);
        text-align: center;
        box-shadow:
            0 10px 40px -10px rgba(139, 90, 90, 0.15),
            0 0 0 1px rgba(212, 165, 116, 0.08);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    /* Watercolor wash background effect */
    .about_philosophy-card::after {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: linear-gradient(135deg,
                rgba(212, 165, 116, 0.05) 0%,
                transparent 50%,
                rgba(90, 123, 139, 0.03) 100%);
        opacity: 0;
        transition: opacity 0.4s ease;
        pointer-events: none;
    }

    .about_philosophy-card:hover::after {
        opacity: 1;
    }

    .about_philosophy-card::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 4px;
        background: linear-gradient(90deg,
                var(--artist-primary),
                var(--artist-accent),
                rgba(90, 123, 139, 0.6));
        background-size: 200% 100%;
        transform: scaleX(0);
        transform-origin: left;
        transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .about_philosophy-card:hover {
        transform: translateY(-12px) scale(1.02);
        box-shadow:
            0 25px 50px -15px rgba(139, 90, 90, 0.25),
            0 0 0 1px rgba(212, 165, 116, 0.15);
    }

    .about_philosophy-card:hover::before {
        transform: scaleX(1);
        animation: shimmerGradient 2s ease infinite;
    }

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

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

    .about_philosophy-icon {
        width: 80px;
        height: 80px;
        margin: 0 auto 1.5rem;
        background: var(--artist-light);
        border-radius: var(--radius-lg);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2.5rem;
        transition: var(--transition-smooth);
    }

    .about_philosophy-card:hover .about_philosophy-icon {
        transform: scale(1.1) rotate(5deg);
    }

    .about_philosophy-title {
        font-family: var(--font-heading);
        font-size: 1.25rem;
        font-weight: 600;
        color: var(--artist-dark);
        margin-bottom: 0.75rem;
    }

    .about_philosophy-desc {
        font-size: 0.9375rem;
        color: var(--artist-muted);
        line-height: 1.7;
    }

    @media (max-width: 1024px) {
        .about_philosophy-grid {
            grid-template-columns: repeat(2, 1fr);
        }
    }

    @media (max-width: 640px) {
        .about_philosophy-grid {
            grid-template-columns: 1fr;
        }
    }

    /* ============================================
   MISSION SECTION - Cosmic Inspiration Theme
   ============================================ */

    .about_mission {
        padding: var(--space-2xl) 0;
        background: linear-gradient(180deg,
                #0d0d0d 0%,
                #151520 30%,
                #1a1a2e 60%,
                #16213e 100%);
        color: white;
        text-align: center;
        position: relative;
        overflow: hidden;
        min-height: 60vh;
        display: flex;
        align-items: center;
    }

    /* Starfield Background */
    .about_mission-stars {
        position: absolute;
        inset: 0;
        background-image:
            radial-gradient(2px 2px at 20px 30px, #fff, transparent),
            radial-gradient(2px 2px at 40px 70px, rgba(255, 255, 255, 0.8), transparent),
            radial-gradient(1px 1px at 90px 40px, #fff, transparent),
            radial-gradient(2px 2px at 160px 120px, rgba(255, 255, 255, 0.9), transparent),
            radial-gradient(1px 1px at 230px 80px, #fff, transparent),
            radial-gradient(2px 2px at 300px 150px, rgba(255, 255, 255, 0.7), transparent),
            radial-gradient(1px 1px at 380px 60px, #fff, transparent),
            radial-gradient(2px 2px at 450px 200px, rgba(255, 255, 255, 0.8), transparent),
            radial-gradient(1px 1px at 520px 100px, #fff, transparent),
            radial-gradient(2px 2px at 600px 180px, rgba(255, 255, 255, 0.9), transparent);
        background-size: 650px 250px;
        animation: starsTwinkle 8s ease-in-out infinite alternate;
    }

    .about_mission-stars--2 {
        background-size: 800px 300px;
        animation-delay: 2s;
        animation-duration: 10s;
        opacity: 0.7;
    }

    @keyframes starsTwinkle {
        0% {
            opacity: 0.4;
        }

        50% {
            opacity: 0.8;
        }

        100% {
            opacity: 0.5;
        }
    }

    /* Nebula Clouds */
    .about_mission-nebula {
        position: absolute;
        border-radius: 50%;
        filter: blur(60px);
        opacity: 0;
        animation: nebulaFloat 20s ease-in-out infinite;
    }

    .about_mission-nebula--1 {
        width: 400px;
        height: 400px;
        top: -10%;
        left: -5%;
        background: radial-gradient(circle,
                rgba(139, 90, 130, 0.3) 0%,
                rgba(90, 100, 150, 0.2) 40%,
                transparent 70%);
        animation-delay: 0s;
    }

    .about_mission-nebula--2 {
        width: 350px;
        height: 350px;
        top: 20%;
        right: -10%;
        background: radial-gradient(circle,
                rgba(100, 130, 180, 0.25) 0%,
                rgba(139, 90, 90, 0.15) 50%,
                transparent 70%);
        animation-delay: 5s;
    }

    .about_mission-nebula--3 {
        width: 300px;
        height: 300px;
        bottom: -15%;
        left: 30%;
        background: radial-gradient(circle,
                rgba(212, 165, 116, 0.2) 0%,
                rgba(180, 100, 120, 0.15) 45%,
                transparent 70%);
        animation-delay: 10s;
    }

    @keyframes nebulaFloat {

        0%,
        100% {
            opacity: 0.3;
            transform: translate(0, 0) scale(1);
        }

        25% {
            opacity: 0.6;
            transform: translate(20px, -15px) scale(1.1);
        }

        50% {
            opacity: 0.5;
            transform: translate(-10px, 10px) scale(0.95);
        }

        75% {
            opacity: 0.7;
            transform: translate(15px, 5px) scale(1.05);
        }
    }

    /* Ethereal Light Rays */
    .about_mission-rays {
        position: absolute;
        inset: 0;
        background:
            linear-gradient(105deg,
                transparent 40%,
                rgba(212, 165, 116, 0.03) 45%,
                rgba(212, 165, 116, 0.08) 50%,
                rgba(212, 165, 116, 0.03) 55%,
                transparent 60%),
            linear-gradient(75deg,
                transparent 35%,
                rgba(139, 90, 90, 0.02) 40%,
                rgba(139, 90, 90, 0.06) 45%,
                rgba(139, 90, 90, 0.02) 50%,
                transparent 55%);
        animation: raysShimmer 12s ease-in-out infinite;
    }

    @keyframes raysShimmer {

        0%,
        100% {
            opacity: 0.3;
            transform: translateX(-5%);
        }

        50% {
            opacity: 0.8;
            transform: translateX(5%);
        }
    }

    /* Floating Cosmic Dust */
    .about_mission-dust {
        position: absolute;
        width: 4px;
        height: 4px;
        background: rgba(255, 255, 255, 0.8);
        border-radius: 50%;
        box-shadow: 0 0 10px rgba(255, 255, 255, 0.5);
        animation: dustFloat 15s linear infinite;
    }

    .about_mission-dust--1 {
        top: 20%;
        left: 10%;
        animation-delay: 0s;
    }

    .about_mission-dust--2 {
        top: 40%;
        left: 25%;
        animation-delay: 3s;
        width: 3px;
        height: 3px;
    }

    .about_mission-dust--3 {
        top: 60%;
        left: 70%;
        animation-delay: 6s;
    }

    .about_mission-dust--4 {
        top: 30%;
        left: 80%;
        animation-delay: 9s;
        width: 2px;
        height: 2px;
    }

    .about_mission-dust--5 {
        top: 70%;
        left: 40%;
        animation-delay: 12s;
        width: 3px;
        height: 3px;
    }

    @keyframes dustFloat {
        0% {
            opacity: 0;
            transform: translateY(0) translateX(0);
        }

        10% {
            opacity: 1;
        }

        90% {
            opacity: 1;
        }

        100% {
            opacity: 0;
            transform: translateY(-100px) translateX(50px);
        }
    }

    /* Shooting Star Effect */
    .about_mission-shooting-star {
        position: absolute;
        width: 100px;
        height: 2px;
        background: linear-gradient(90deg, rgba(255, 255, 255, 0.8), transparent);
        border-radius: 50%;
        opacity: 0;
        animation: shootingStar 8s ease-in-out infinite;
    }

    .about_mission-shooting-star--1 {
        top: 15%;
        left: 60%;
        transform: rotate(-30deg);
        animation-delay: 0s;
    }

    .about_mission-shooting-star--2 {
        top: 35%;
        left: 20%;
        transform: rotate(-25deg);
        animation-delay: 4s;
    }

    @keyframes shootingStar {

        0%,
        90%,
        100% {
            opacity: 0;
            transform: translateX(0) rotate(-30deg);
        }

        5% {
            opacity: 1;
        }

        15% {
            opacity: 0;
            transform: translateX(-200px) rotate(-30deg);
        }
    }

    /* Glowing Orb Center */
    .about_mission-glow {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 300px;
        height: 300px;
        background: radial-gradient(circle,
                rgba(212, 165, 116, 0.15) 0%,
                rgba(139, 90, 90, 0.08) 30%,
                transparent 70%);
        border-radius: 50%;
        filter: blur(40px);
        animation: glowPulse 6s ease-in-out infinite;
    }

    @keyframes glowPulse {

        0%,
        100% {
            transform: translate(-50%, -50%) scale(1);
            opacity: 0.5;
        }

        50% {
            transform: translate(-50%, -50%) scale(1.2);
            opacity: 0.8;
        }
    }

    /* Content with Viewport Animation */
    .about_mission-content {
        position: relative;
        z-index: 2;
        max-width: 800px;
        margin: 0 auto;
        padding: 0 2rem;
    }

    /* Viewport reveal animations for mission elements */
    .about_mission-title {
        font-family: var(--font-heading);
        font-size: clamp(2rem, 4vw, 3rem);
        font-weight: 600;
        color: #ffffff !important;
        margin-bottom: 1.5rem;
        text-shadow: 0 2px 30px rgba(212, 165, 116, 0.3);
        opacity: 0;
        transform: translateY(30px);
        animation: missionReveal 1s ease-out forwards;
        animation-play-state: paused;
    }

    .about_mission-text {
        font-size: 1.25rem;
        line-height: 1.8;
        color: rgba(255, 255, 255, 0.9);
        margin-bottom: 2.5rem;
        opacity: 0;
        transform: translateY(30px);
        animation: missionReveal 1s ease-out 0.3s forwards;
        animation-play-state: paused;
    }

    .about_mission-highlight {
        font-family: var(--font-accent);
        font-size: 1.75rem;
        color: var(--artist-accent);
        text-shadow: 0 0 30px rgba(212, 165, 116, 0.4);
        opacity: 0;
        transform: translateY(30px) scale(0.95);
        animation: missionHighlightReveal 1.2s ease-out 0.6s forwards;
        animation-play-state: paused;
    }

    /* When section is in view, play animations */
    .about_mission.in-view .about_mission-title,
    .about_mission.in-view .about_mission-text,
    .about_mission.in-view .about_mission-highlight {
        animation-play-state: running;
    }

    @keyframes missionReveal {
        0% {
            opacity: 0;
            transform: translateY(30px);
        }

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

    @keyframes missionHighlightReveal {
        0% {
            opacity: 0;
            transform: translateY(30px) scale(0.95);
        }

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

    /* ============================================
   CONNECT CTA SECTION
   ============================================ */

    .about_connect {
        padding: var(--space-2xl) 0;
        background: var(--artist-light);
    }

    .about_connect-content {
        max-width: 600px;
        margin: 0 auto;
        text-align: center;
    }

    .about_connect-title {
        font-family: var(--font-heading);
        font-size: 2.5rem;
        font-weight: 600;
        color: var(--artist-dark);
        margin-bottom: 1rem;
    }

    .about_connect-desc {
        font-size: 1.125rem;
        color: var(--artist-muted);
        margin-bottom: 2rem;
        line-height: 1.7;
    }

    .about_connect-cards {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 1.5rem;
        margin-bottom: 2rem;
    }

    .about_connect-card {
        background: white;
        padding: 2rem 1.5rem;
        border-radius: var(--radius-xl);
        box-shadow: var(--shadow-soft);
        text-decoration: none;
        color: inherit;
        transition: var(--transition-smooth);
    }

    .about_connect-card:hover {
        transform: translateY(-8px);
        box-shadow: var(--shadow-medium);
    }

    .about_connect-card-icon {
        width: 60px;
        height: 60px;
        margin: 0 auto 1rem;
        background: var(--artist-light);
        border-radius: var(--radius-full);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.5rem;
        transition: var(--transition-smooth);
    }

    .about_connect-card:hover .about_connect-card-icon {
        transform: scale(1.1);
    }

    .about_connect-card.youtube .about_connect-card-icon {
        color: #FF0000;
    }

    .about_connect-card.youtube:hover .about_connect-card-icon {
        background: #FF0000;
        color: white;
    }

    .about_connect-card.instagram .about_connect-card-icon {
        color: #E4405F;
    }

    .about_connect-card.instagram:hover .about_connect-card-icon {
        background: linear-gradient(45deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888);
        color: white;
    }

    .about_connect-card.email .about_connect-card-icon {
        color: var(--artist-primary);
    }

    .about_connect-card.email:hover .about_connect-card-icon {
        background: var(--artist-primary);
        color: white;
    }

    .about_connect-card-label {
        font-size: 0.75rem;
        text-transform: uppercase;
        letter-spacing: 0.1em;
        color: var(--artist-muted);
        margin-bottom: 0.25rem;
    }

    .about_connect-card-value {
        font-family: var(--font-heading);
        font-size: 1rem;
        font-weight: 600;
        color: var(--artist-dark);
    }

    @media (max-width: 640px) {
        .about_connect-cards {
            grid-template-columns: 1fr;
        }
    }

    /* ============================================
       SCROLL REVEAL ANIMATIONS
       ============================================ */

    /* Base hidden state for reveal elements */
    .about_reveal {
        opacity: 0;
        transform: translateY(60px);
        transition: all 0.8s cubic-bezier(0.16, 1, 0.3, 1);
    }

    .about_reveal.about_revealed {
        opacity: 1;
        transform: translateY(0);
    }

    /* Slide from left */
    .about_reveal--left {
        transform: translateX(-80px);
    }

    .about_reveal--left.about_revealed {
        transform: translateX(0);
    }

    /* Slide from right */
    .about_reveal--right {
        transform: translateX(80px);
    }

    .about_reveal--right.about_revealed {
        transform: translateX(0);
    }

    /* Zoom in */
    .about_reveal--zoom {
        transform: scale(0.8);
    }

    .about_reveal--zoom.about_revealed {
        transform: scale(1);
    }

    /* Staggered delay for cards */
    .about_reveal--delay-1 {
        transition-delay: 0.1s;
    }

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

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

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

    /* Enhanced Philosophy Icons */
    .about_philosophy-icon {
        width: 70px;
        height: 70px;
        margin: 0 auto 1.5rem;
        background: linear-gradient(135deg, rgba(212, 165, 116, 0.15), rgba(139, 90, 90, 0.1));
        border-radius: var(--radius-xl);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 1.75rem;
        color: var(--artist-primary);
        transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
        position: relative;
        overflow: hidden;
    }

    .about_philosophy-icon::before {
        content: '';
        position: absolute;
        inset: 0;
        background: linear-gradient(135deg, var(--artist-primary), var(--artist-accent));
        opacity: 0;
        transition: opacity 0.4s ease;
    }

    .about_philosophy-icon i {
        position: relative;
        z-index: 1;
    }

    .about_philosophy-card:hover .about_philosophy-icon {
        transform: scale(1.1) rotate(5deg);
    }

    .about_philosophy-card:hover .about_philosophy-icon::before {
        opacity: 1;
    }

    .about_philosophy-card:hover .about_philosophy-icon i {
        color: white;
    }

    /* Enhanced Hero Image Placeholder */
    .about_hero-img-placeholder {
        width: 100%;
        aspect-ratio: 4/5;
        background: linear-gradient(145deg,
                #FDF8F3 0%,
                rgba(212, 165, 116, 0.2) 25%,
                rgba(139, 90, 90, 0.15) 50%,
                rgba(90, 123, 139, 0.1) 75%,
                #FDF8F3 100%);
        border-radius: var(--radius-xl);
        box-shadow:
            0 30px 60px -15px rgba(139, 90, 90, 0.3),
            0 0 0 1px rgba(212, 165, 116, 0.15),
            inset 0 2px 0 rgba(255, 255, 255, 0.8);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 1.5rem;
        position: relative;
        overflow: hidden;
        animation: placeholderGlow 4s ease-in-out infinite;
    }

    @keyframes placeholderGlow {

        0%,
        100% {
            box-shadow:
                0 30px 60px -15px rgba(139, 90, 90, 0.3),
                0 0 0 1px rgba(212, 165, 116, 0.15),
                inset 0 2px 0 rgba(255, 255, 255, 0.8);
        }

        50% {
            box-shadow:
                0 35px 70px -15px rgba(139, 90, 90, 0.4),
                0 0 30px rgba(212, 165, 116, 0.2),
                inset 0 2px 0 rgba(255, 255, 255, 0.8);
        }
    }

    .about_hero-img-placeholder::before {
        content: '';
        position: absolute;
        top: -50%;
        left: -50%;
        width: 200%;
        height: 200%;
        background: conic-gradient(from 0deg,
                transparent 0deg,
                rgba(212, 165, 116, 0.1) 60deg,
                transparent 120deg,
                rgba(139, 90, 90, 0.08) 180deg,
                transparent 240deg,
                rgba(90, 123, 139, 0.06) 300deg,
                transparent 360deg);
        animation: placeholderRotate 20s linear infinite;
    }

    @keyframes placeholderRotate {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }

    .about_hero-img-placeholder span {
        font-family: var(--font-accent);
        font-size: 12rem;
        background: linear-gradient(135deg,
                var(--artist-primary) 0%,
                var(--artist-accent) 50%,
                var(--artist-accent-dark) 100%);
        -webkit-background-clip: text;
        -webkit-text-fill-color: transparent;
        background-clip: text;
        line-height: 1;
        position: relative;
        z-index: 1;
        filter: drop-shadow(0 8px 12px rgba(139, 90, 90, 0.25));
        animation: letterFloat 4s ease-in-out infinite;
    }

    @keyframes letterFloat {

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

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

    .about_hero-img-placeholder p {
        font-family: var(--font-heading);
        font-size: 1.1rem;
        font-weight: 500;
        color: var(--artist-dark);
        position: relative;
        z-index: 1;
        letter-spacing: 0.08em;
        opacity: 0.8;
    }

    /* Decorative brush strokes on placeholder */
    .about_hero-img-placeholder::after {
        content: '';
        position: absolute;
        bottom: 10%;
        left: 50%;
        transform: translateX(-50%);
        width: 60%;
        height: 3px;
        background: linear-gradient(90deg,
                transparent,
                rgba(212, 165, 116, 0.5),
                rgba(139, 90, 90, 0.4),
                transparent);
        border-radius: 2px;
    }