/* =========================================
   RIFUGIO MICIOTTI SERENI
   World-Class Premium Design System
   ========================================= */

/* =========================================
   CSS VARIABLES
   ========================================= */
:root {
    /* Colors - Refined Natural Palette */
    --sage: #7D8B6F;
    --sage-light: #9BA78E;
    --sage-dark: #5C6B4D;
    --sage-glow: rgba(125, 139, 111, 0.3);

    --sand: #E8DFD4;
    --sand-light: #F5F1EB;
    --sand-dark: #D4C9BA;

    --terracotta: #C4785A;
    --terracotta-light: #D99B7F;
    --terracotta-dark: #A65E42;
    --terracotta-glow: rgba(196, 120, 90, 0.3);

    --cream: #FDFBF7;
    --warm-white: #FFFDF9;

    --charcoal: #2D2926;
    --charcoal-light: #4A4543;
    --charcoal-muted: #6B6560;

    /* Typography */
    --font-display: 'Fraunces', Georgia, serif;
    --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, sans-serif;

    /* Spacing */
    --space-2xs: 0.25rem;
    --space-xs: 0.5rem;
    --space-sm: 1rem;
    --space-md: 1.5rem;
    --space-lg: 2.5rem;
    --space-xl: 4rem;
    --space-2xl: 6rem;
    --space-3xl: 10rem;

    /* Transitions */
    --ease-out: cubic-bezier(0.25, 0.46, 0.45, 0.94);
    --ease-in-out: cubic-bezier(0.645, 0.045, 0.355, 1);
    --ease-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
    --ease-smooth: cubic-bezier(0.4, 0, 0.2, 1);

    /* Shadows */
    --shadow-xs: 0 1px 2px rgba(45, 41, 38, 0.04);
    --shadow-sm: 0 2px 8px rgba(45, 41, 38, 0.06);
    --shadow-md: 0 4px 20px rgba(45, 41, 38, 0.08);
    --shadow-lg: 0 8px 40px rgba(45, 41, 38, 0.12);
    --shadow-xl: 0 20px 60px rgba(45, 41, 38, 0.16);
    --shadow-glow-sage: 0 0 60px rgba(125, 139, 111, 0.25);
    --shadow-glow-terracotta: 0 0 60px rgba(196, 120, 90, 0.25);

    /* Border Radius */
    --radius-sm: 8px;
    --radius-md: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;
    --radius-full: 9999px;
}

/* =========================================
   RESET & BASE
   ========================================= */
*,
*::before,
*::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    font-size: 16px;
    scroll-padding-top: 100px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Performance: Disable smooth scroll for reduced motion */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

body {
    font-family: var(--font-body);
    background-color: var(--cream);
    color: var(--charcoal);
    line-height: 1.6;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    cursor: none;
    /* Performance: text rendering optimization */
    text-rendering: optimizeSpeed;
}


@media (max-width: 768px) {
    body {
        cursor: auto;
    }
}

img {
    max-width: 100%;
    height: auto;
    display: block;
    /* Performance optimization */
    object-fit: cover;
}

/* Lazy loaded images - prevent layout shift */
img[loading="lazy"] {
    min-height: 200px;
    background: linear-gradient(135deg, var(--sand-light) 0%, var(--sand) 100%);
}

a {
    text-decoration: none;
    color: inherit;
    cursor: none;
}

button {
    cursor: none;
}

@media (max-width: 768px) {

    a,
    button {
        cursor: pointer;
    }
}

/* =========================================
   CUSTOM CURSOR
   ========================================= */
.cursor {
    position: fixed;
    width: 24px;
    height: 24px;
    pointer-events: none;
    z-index: 10001;
    color: var(--sage);
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.8);
    transition: opacity 0.3s, transform 0.15s var(--ease-out);
    mix-blend-mode: exclusion;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.cursor.visible {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

.cursor.hover {
    transform: translate(-50%, -50%) scale(1.3);
    color: var(--terracotta);
}

.cursor.click {
    transform: translate(-50%, -50%) scale(0.9);
}

.cursor svg {
    width: 100%;
    height: 100%;
}

.cursor-trail {
    position: fixed;
    pointer-events: none;
    z-index: 10000;
}

@media (max-width: 768px) {

    .cursor,
    .cursor-trail {
        display: none !important;
    }
}

/* =========================================
   SCROLL PROGRESS
   ========================================= */
.scroll-progress {
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--sage), var(--terracotta));
    width: 0%;
    z-index: 10002;
    transition: width 0.1s linear;
}

/* =========================================
   ATMOSPHERIC EFFECTS
   ========================================= */
.atmosphere {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: hidden;
}

.falling-leaves {
    position: absolute;
    inset: 0;
}

.leaf-particle {
    position: absolute;
    width: 20px;
    height: 25px;
    opacity: 0.15;
    animation: fallLeaf linear infinite;
    color: var(--sage);
}

@keyframes fallLeaf {
    0% {
        transform: translateY(-100px) rotate(0deg) translateX(0);
        opacity: 0;
    }

    10% {
        opacity: 0.15;
    }

    90% {
        opacity: 0.15;
    }

    100% {
        transform: translateY(100vh) rotate(360deg) translateX(100px);
        opacity: 0;
    }
}

.light-rays {
    position: absolute;
    top: -50%;
    right: -20%;
    width: 80%;
    height: 150%;
    background: radial-gradient(ellipse at center, rgba(255, 253, 249, 0.4) 0%, transparent 70%);
    transform: rotate(-30deg);
    opacity: 0.5;
    animation: lightPulse 8s ease-in-out infinite;
}

@keyframes lightPulse {

    0%,
    100% {
        opacity: 0.3;
    }

    50% {
        opacity: 0.5;
    }
}

/* =========================================
   NAVIGATION - Adaptive Design
   ========================================= */
.nav {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
    padding: var(--space-md);

    /* Ultra-smooth transitions for adaptive design */
    transition:
        background 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        box-shadow 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        backdrop-filter 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
        border-image 0.8s cubic-bezier(0.4, 0, 0.2, 1);

    /* Initial state: glassmorphism integrated with hero background */
    background:
        linear-gradient(135deg,
            rgba(125, 139, 111, 0.05) 0%,
            rgba(253, 251, 247, 0.02) 50%,
            rgba(196, 120, 90, 0.03) 100%);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);

    /* Subtle border with gradient */
    border-bottom: 1px solid transparent;
    border-image: linear-gradient(90deg,
            rgba(125, 139, 111, 0.1) 0%,
            rgba(196, 120, 90, 0.08) 50%,
            rgba(125, 139, 111, 0.1) 100%) 1;
}

.nav::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 120% 100% at 50% 0%,
            rgba(125, 139, 111, 0.08) 0%,
            transparent 50%);
    opacity: 0;
    transition:
        opacity 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
    z-index: -1;
}

/* Shimmer effect during section transitions */
.nav::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg,
            transparent 0%,
            rgba(255, 255, 255, 0.4) 50%,
            transparent 100%);
    opacity: 0;
    pointer-events: none;
    z-index: 10;
}

.nav.section-transitioning::after {
    animation: navShimmer 0.8s ease-out;
}

@keyframes navShimmer {
    0% {
        left: -100%;
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    80% {
        opacity: 1;
        left: 100%;
    }

    100% {
        left: 100%;
        opacity: 0;
    }
}

.nav.scrolled {
    background:
        linear-gradient(135deg,
            rgba(253, 251, 247, 0.95) 0%,
            rgba(255, 253, 249, 0.92) 50%,
            rgba(253, 251, 247, 0.95) 100%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    padding: var(--space-sm) var(--space-md);
    box-shadow:
        0 4px 24px rgba(125, 139, 111, 0.08),
        0 1px 0 rgba(125, 139, 111, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);

    border-image: linear-gradient(90deg,
            rgba(125, 139, 111, 0.15) 0%,
            rgba(196, 120, 90, 0.12) 50%,
            rgba(125, 139, 111, 0.15) 100%) 1;
}

.nav.scrolled::before {
    opacity: 1;
}

/* =========================================
   ADAPTIVE NAVIGATION - Section-based Themes
   ========================================= */

/* Hero Section - Ethereal Glassmorphism */
.nav.nav-on-hero {
    background:
        linear-gradient(135deg,
            rgba(125, 139, 111, 0.05) 0%,
            rgba(253, 251, 247, 0.02) 50%,
            rgba(196, 120, 90, 0.03) 100%);
    border-image: linear-gradient(90deg,
            rgba(125, 139, 111, 0.1) 0%,
            rgba(196, 120, 90, 0.08) 50%,
            rgba(125, 139, 111, 0.1) 100%) 1;
}

.nav.nav-on-hero::before {
    background:
        radial-gradient(ellipse 120% 100% at 50% 0%,
            rgba(125, 139, 111, 0.08) 0%,
            transparent 50%);
}

/* Chi Siamo - Warm Beige Harmony */
.nav.nav-on-chi-siamo.scrolled {
    background:
        linear-gradient(135deg,
            rgba(245, 241, 237, 0.95) 0%,
            rgba(234, 229, 220, 0.92) 50%,
            rgba(245, 241, 237, 0.95) 100%);
    box-shadow:
        0 4px 24px rgba(125, 139, 111, 0.12),
        0 1px 0 rgba(125, 139, 111, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nav.nav-on-chi-siamo.scrolled::before {
    background:
        radial-gradient(ellipse 120% 100% at 50% 0%,
            rgba(125, 139, 111, 0.12) 0%,
            rgba(232, 223, 212, 0.08) 50%,
            transparent 70%);
}

.nav.nav-on-chi-siamo.scrolled .logo-svg {
    filter: drop-shadow(0 2px 8px rgba(125, 139, 111, 0.2));
}

/* Ospiti - Balanced Terracotta/Sage */
.nav.nav-on-ospiti.scrolled {
    background:
        linear-gradient(135deg,
            rgba(240, 235, 227, 0.95) 0%,
            rgba(245, 241, 235, 0.92) 50%,
            rgba(232, 223, 212, 0.95) 100%);
    box-shadow:
        0 4px 24px rgba(232, 180, 160, 0.15),
        0 4px 24px rgba(125, 139, 111, 0.1),
        0 1px 0 rgba(196, 120, 90, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nav.nav-on-ospiti.scrolled::before {
    background:
        radial-gradient(ellipse 100% 100% at 70% 0%,
            rgba(232, 180, 160, 0.15) 0%,
            transparent 50%),
        radial-gradient(ellipse 100% 100% at 30% 0%,
            rgba(125, 139, 111, 0.12) 0%,
            transparent 50%);
}

.nav.nav-on-ospiti.scrolled .logo-svg {
    filter: drop-shadow(0 2px 8px rgba(196, 120, 90, 0.2));
}

.nav.nav-on-ospiti.scrolled .logo-text-sub {
    color: var(--terracotta);
}

/* Storie - Sage/Terracotta Blend */
.nav.nav-on-storie.scrolled {
    background:
        linear-gradient(135deg,
            rgba(242, 237, 230, 0.95) 0%,
            rgba(232, 223, 212, 0.92) 50%,
            rgba(242, 237, 230, 0.95) 100%);
    box-shadow:
        0 4px 24px rgba(125, 139, 111, 0.15),
        0 4px 24px rgba(196, 120, 90, 0.12),
        0 1px 0 rgba(125, 139, 111, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nav.nav-on-storie.scrolled::before {
    background:
        radial-gradient(ellipse 110% 100% at 40% 0%,
            rgba(125, 139, 111, 0.15) 0%,
            transparent 50%),
        radial-gradient(ellipse 110% 100% at 60% 0%,
            rgba(196, 120, 90, 0.12) 0%,
            transparent 50%);
}

.nav.nav-on-storie.scrolled .nav-cta {
    box-shadow:
        0 6px 16px rgba(196, 120, 90, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

/* Sostieni - High Contrast on Dark Background */
.nav.nav-on-sostieni.scrolled {
    /* Solid background as fallback */
    background-color: rgb(253, 251, 247);
    background:
        linear-gradient(135deg,
            rgb(253, 251, 247) 0%,
            rgb(255, 253, 249) 50%,
            rgb(253, 251, 247) 100%);
    backdrop-filter: blur(40px) saturate(200%);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    box-shadow:
        0 12px 40px rgba(0, 0, 0, 0.45),
        0 4px 8px rgba(0, 0, 0, 0.25),
        0 1px 0 rgba(255, 255, 255, 0.6),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.12);
}

/* Anche quando non scrolled, sulla sezione sostieni deve essere visibile */
.nav.nav-on-sostieni {
    /* Solid background as fallback */
    background-color: rgb(253, 251, 247);
    background:
        linear-gradient(135deg,
            rgb(253, 251, 247) 0%,
            rgb(255, 253, 249) 50%,
            rgb(253, 251, 247) 100%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 2px 4px rgba(0, 0, 0, 0.2),
        0 1px 0 rgba(255, 255, 255, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.08);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.nav.nav-on-sostieni.scrolled::before {
    background:
        radial-gradient(ellipse 120% 100% at 50% 0%,
            rgba(125, 139, 111, 0.15) 0%,
            rgba(74, 90, 61, 0.08) 50%,
            transparent 70%);
    opacity: 1;
}

.nav.nav-on-sostieni .logo-svg,
.nav.nav-on-sostieni.scrolled .logo-svg {
    filter: drop-shadow(0 4px 16px rgba(125, 139, 111, 0.5));
    color: var(--sage-dark);
}

.nav.nav-on-sostieni .logo-text-main,
.nav.nav-on-sostieni.scrolled .logo-text-main {
    color: var(--charcoal);
    text-shadow:
        0 2px 8px rgba(255, 255, 255, 1),
        0 0 20px rgba(255, 255, 255, 0.5);
    font-weight: 600;
}

.nav.nav-on-sostieni .logo-text-sub,
.nav.nav-on-sostieni.scrolled .logo-text-sub {
    color: var(--sage-dark);
    font-weight: 600;
}

.nav.nav-on-sostieni .nav-link,
.nav.nav-on-sostieni.scrolled .nav-link {
    color: var(--charcoal);
    font-weight: 600;
    text-shadow: 0 1px 4px rgba(255, 255, 255, 0.8);
}

.nav.nav-on-sostieni .nav-cta,
.nav.nav-on-sostieni.scrolled .nav-cta {
    box-shadow:
        0 8px 24px rgba(125, 139, 111, 0.5),
        0 0 0 1px rgba(125, 139, 111, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

.nav.nav-on-sostieni .nav-cta .cta-bg,
.nav.nav-on-sostieni.scrolled .nav-cta .cta-bg {
    background: linear-gradient(135deg, var(--sage-dark) 0%, #3D4A31 100%);
}

.nav.nav-on-sostieni .nav-cta:hover,
.nav.nav-on-sostieni.scrolled .nav-cta:hover {
    box-shadow:
        0 12px 32px rgba(125, 139, 111, 0.6),
        0 0 0 2px rgba(255, 255, 255, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.6);
}

/* Toggle button visibility on dark section */
.nav.nav-on-sostieni .toggle-line,
.nav.nav-on-sostieni.scrolled .toggle-line {
    background: var(--charcoal);
    box-shadow: 0 1px 3px rgba(255, 255, 255, 0.5);
}

/* Responsive adjustments for adaptive nav */
@media (max-width: 900px) {

    .nav.nav-on-hero,
    .nav.nav-on-chi-siamo,
    .nav.nav-on-ospiti,
    .nav.nav-on-storie,
    .nav.nav-on-sostieni {
        backdrop-filter: blur(20px) saturate(180%);
        -webkit-backdrop-filter: blur(20px) saturate(180%);
    }
}

/* Subtle border glow on dark section */
.nav.nav-on-sostieni.scrolled {
    position: relative;
}

.nav.nav-on-sostieni.scrolled .nav-inner {
    position: relative;
}

/* Footer - Inherits Sostieni Dark Theme */
.nav.nav-on-footer.scrolled {
    background:
        linear-gradient(135deg,
            rgba(253, 251, 247, 0.98) 0%,
            rgba(255, 253, 249, 0.96) 50%,
            rgba(253, 251, 247, 0.98) 100%);
    backdrop-filter: blur(32px) saturate(200%);
    -webkit-backdrop-filter: blur(32px) saturate(200%);
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        0 2px 0 rgba(125, 139, 111, 0.25),
        inset 0 2px 0 rgba(255, 255, 255, 0.9);
}

.nav.nav-on-footer.scrolled .logo-svg {
    filter: drop-shadow(0 4px 12px rgba(125, 139, 111, 0.4));
    color: var(--sage-dark);
}

.nav.nav-on-footer.scrolled .logo-text-main {
    color: var(--charcoal);
    text-shadow: 0 2px 8px rgba(255, 255, 255, 0.9);
    font-weight: 600;
}

.nav.nav-on-footer.scrolled .nav-link {
    color: var(--charcoal);
    font-weight: 600;
}

/* Ensure nav is always visible and above all content */
.nav {
    will-change: background, box-shadow, backdrop-filter;
    z-index: 1000 !important;
    isolation: isolate;
}

/* Prevent flickering during transitions */
.nav * {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}

/* Force visibility on dark sections */
.nav.nav-on-sostieni,
.nav.nav-on-footer {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: all !important;
}

/* Ensure nav inner content is always visible */
.nav.nav-on-sostieni .nav-inner,
.nav.nav-on-sostieni.scrolled .nav-inner,
.nav.nav-on-footer .nav-inner,
.nav.nav-on-footer.scrolled .nav-inner {
    opacity: 1 !important;
    visibility: visible !important;
}

/* Make sure all nav elements are visible on dark sections */
.nav.nav-on-sostieni *,
.nav.nav-on-footer * {
    opacity: 1 !important;
}

/* Debug: uncomment to see nav boundaries on sostieni section */
/*
.nav.nav-on-sostieni,
.nav.nav-on-sostieni.scrolled {
    outline: 3px solid red !important;
}
*/

/* Ensure nav has proper stacking context */
.nav.nav-on-sostieni,
.nav.nav-on-sostieni.scrolled {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    /* Force GPU acceleration */
    will-change: transform, opacity;
    /* Ensure it's always on top */
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
}

/* Specific fix for Safari and iOS */
@supports (-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px)) {

    .nav.nav-on-sostieni,
    .nav.nav-on-sostieni.scrolled {
        -webkit-transform: translate3d(0, 0, 0);
        transform: translate3d(0, 0, 0);
    }
}

/* Performance optimization: disable animations on low-end devices */
@media (prefers-reduced-motion: reduce) {

    .nav,
    .nav::before,
    .nav::after,
    .logo-svg,
    .logo-text-main,
    .logo-text-sub,
    .nav-link,
    .nav-cta {
        transition-duration: 0.05s !important;
        animation: none !important;
    }
}

.nav-inner {
    max-width: 1400px;
    margin: 0 auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

/* Logo */
.nav-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    z-index: 1001;
    position: relative;
    padding: var(--space-2xs);
    border-radius: var(--radius-md);
    transition: all 0.4s var(--ease-smooth);
}

.nav-logo::before {
    content: '';
    position: absolute;
    inset: -2px;
    background: radial-gradient(circle at center,
            rgba(125, 139, 111, 0.15) 0%,
            transparent 70%);
    opacity: 0;
    border-radius: var(--radius-md);
    transition: opacity 0.4s var(--ease-smooth);
    z-index: -1;
}

.nav-logo:hover::before {
    opacity: 1;
}

.logo-svg {
    width: 44px;
    height: 44px;
    color: var(--sage);
    transition:
        transform 0.4s var(--ease-bounce),
        filter 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        color 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    filter: drop-shadow(0 2px 8px rgba(125, 139, 111, 0.15));
}

.nav.scrolled .logo-svg {
    filter: drop-shadow(0 2px 12px rgba(125, 139, 111, 0.25));
}

.nav-logo:hover .logo-svg {
    transform: scale(1.1) rotate(-5deg);
}

.logo-svg .logo-ear-left {
    transform-origin: 18px 18px;
    animation: earTwitchLeft 2.5s ease-in-out infinite;
}

.logo-svg .logo-ear-right {
    transform-origin: 32px 18px;
    animation: earTwitchRight 2.5s ease-in-out infinite;
    animation-delay: 0.3s;
}

@keyframes earTwitchLeft {

    0%,
    70%,
    100% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(-15deg);
    }

    80% {
        transform: rotate(10deg);
    }

    85% {
        transform: rotate(-8deg);
    }

    90% {
        transform: rotate(4deg);
    }
}

@keyframes earTwitchRight {

    0%,
    70%,
    100% {
        transform: rotate(0deg);
    }

    75% {
        transform: rotate(15deg);
    }

    80% {
        transform: rotate(-10deg);
    }

    85% {
        transform: rotate(8deg);
    }

    90% {
        transform: rotate(-4deg);
    }
}

.logo-svg .logo-whiskers line {
    transform-origin: right center;
    animation: whiskerMove 3s ease-in-out infinite;
}

.logo-svg .logo-whiskers line:nth-child(3),
.logo-svg .logo-whiskers line:nth-child(4) {
    transform-origin: left center;
    animation-delay: 0.3s;
}

@keyframes whiskerMove {

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

    50% {
        transform: rotate(3deg);
    }
}

.logo-text {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.logo-text-main {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--charcoal);
    transition:
        color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        text-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        font-weight 0.3s var(--ease-smooth);
    text-shadow: 0 1px 2px rgba(125, 139, 111, 0.1);
}

.nav.scrolled .logo-text-main {
    text-shadow: 0 2px 4px rgba(125, 139, 111, 0.15);
}

.logo-text-sub {
    font-size: 0.7rem;
    font-weight: 500;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sage);
    transition:
        color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s var(--ease-smooth);
}

.nav.scrolled .logo-text-sub {
    color: var(--sage-dark);
}

/* Nav Links */
.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.nav-link {
    position: relative;
    padding: var(--space-xs) 0;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--charcoal-muted);
    transition:
        color 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        text-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        font-weight 0.6s cubic-bezier(0.4, 0, 0.2, 1),
        transform 0.3s var(--ease-out);
    text-shadow: 0 1px 2px rgba(255, 255, 255, 0.5);
}

.nav.scrolled .nav-link {
    color: var(--charcoal);
    text-shadow: 0 1px 3px rgba(255, 255, 255, 0.8);
}

.nav-link:hover {
    color: var(--charcoal);
    text-shadow: 0 2px 4px rgba(125, 139, 111, 0.2);
}

.nav-link-line {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--sage);
    transition: width 0.3s var(--ease-out);
}

.nav-link:hover .nav-link-line {
    width: 100%;
}

/* Nav CTA */
.nav-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--warm-white);
    border-radius: var(--radius-full);
    overflow: hidden;
    transition:
        transform 0.3s var(--ease-out),
        box-shadow 0.8s cubic-bezier(0.4, 0, 0.2, 1),
        background 0.8s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 4px 12px rgba(125, 139, 111, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
}

.nav-cta .cta-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--sage) 0%, var(--sage-dark) 100%);
    transition: transform 0.3s var(--ease-out);
}

.nav-cta::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.15) 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.05) 100%);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
}

.nav-cta:hover::before {
    opacity: 1;
}

.nav.scrolled .nav-cta {
    box-shadow:
        0 6px 16px rgba(125, 139, 111, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
}

.nav-cta:hover .cta-bg {
    transform: scale(1.05);
}

.nav-cta .cta-text,
.nav-cta .cta-heart {
    position: relative;
    z-index: 1;
}

.nav-cta .cta-heart {
    width: 16px;
    height: 16px;
    animation: heartBeat 1.5s ease-in-out infinite;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

@keyframes heartBeat {

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

    25% {
        transform: scale(1.15);
    }

    50% {
        transform: scale(1);
    }

    75% {
        transform: scale(1.1);
    }
}

.nav-cta:hover {
    transform: translateY(-2px);
    box-shadow:
        0 8px 24px rgba(125, 139, 111, 0.35),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

/* Mobile Toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    gap: 6px;
    padding: var(--space-sm);
    background: none;
    border: none;
    z-index: 1001;
    position: relative;
    border-radius: var(--radius-sm);
    transition: background 0.3s var(--ease-smooth);
}

.nav-toggle:hover {
    background: rgba(125, 139, 111, 0.08);
}

.nav.scrolled .nav-toggle:hover {
    background: rgba(125, 139, 111, 0.12);
}

.toggle-line {
    width: 24px;
    height: 2px;
    background: var(--charcoal);
    border-radius: 2px;
    transition: all 0.3s var(--ease-out);
    transform-origin: center;
    box-shadow: 0 1px 2px rgba(125, 139, 111, 0.15);
}

.nav.scrolled .toggle-line {
    background: var(--charcoal);
    box-shadow: 0 1px 3px rgba(125, 139, 111, 0.2);
}

.nav-toggle.active .toggle-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 6px);
}

.nav-toggle.active .toggle-line:nth-child(2) {
    opacity: 0;
    transform: translateX(-10px);
}

.nav-toggle.active .toggle-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -6px);
}

@media (max-width: 900px) {
    .nav-links {
        display: none;
    }

    .nav-toggle {
        display: flex;
    }
}

/* Mobile Menu */
.mobile-menu {
    position: fixed;
    inset: 0;
    z-index: 999;
    visibility: hidden;
    overflow-y: auto;
}

.mobile-menu.active {
    visibility: visible;
}

.mobile-menu-bg {
    position: absolute;
    inset: 0;
    background:
        linear-gradient(135deg,
            rgba(253, 251, 247, 0.98) 0%,
            rgba(255, 253, 249, 0.95) 50%,
            rgba(253, 251, 247, 0.98) 100%);
    backdrop-filter: blur(24px) saturate(180%);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    opacity: 0;
    transition: opacity 0.4s var(--ease-out);
}

.mobile-menu-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 20%,
            rgba(125, 139, 111, 0.08) 0%,
            transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%,
            rgba(196, 120, 90, 0.06) 0%,
            transparent 50%);
}

.mobile-menu.active .mobile-menu-bg {
    opacity: 1;
}

.mobile-menu-content {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    overflow-y: auto;
    box-sizing: border-box;
}

.mobile-link {
    font-family: var(--font-display);
    font-size: 2.5rem;
    font-weight: 400;
    color: var(--charcoal);
    opacity: 0;
    transform: translateY(30px);
    transition: all 0.4s var(--ease-out), color 0.3s;
}

.mobile-link:hover {
    color: var(--sage);
}

.mobile-menu.active .mobile-link {
    opacity: 1;
    transform: translateY(0);
}

.mobile-menu.active .mobile-link:nth-child(1) {
    transition-delay: 0.1s;
}

.mobile-menu.active .mobile-link:nth-child(2) {
    transition-delay: 0.15s;
}

.mobile-menu.active .mobile-link:nth-child(3) {
    transition-delay: 0.2s;
}

.mobile-menu.active .mobile-link:nth-child(4) {
    transition-delay: 0.25s;
}

.mobile-cta {
    font-family: var(--font-body) !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    background: var(--sage);
    color: var(--warm-white) !important;
    padding: var(--space-sm) var(--space-xl);
    border-radius: var(--radius-full);
    margin-top: var(--space-md);
    display: inline-block;
    text-align: center;
    min-width: max-content;
}

.mobile-social {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    opacity: 0;
    transform: translateY(20px);
    transition: all 0.4s var(--ease-out) 0.3s;
}

.mobile-menu.active .mobile-social {
    opacity: 1;
    transform: translateY(0);
}

.mobile-social a {
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--sand-light);
    border-radius: var(--radius-md);
    color: var(--charcoal);
    transition: all 0.3s var(--ease-out);
}

.mobile-social a:hover {
    background: var(--sage);
    color: var(--warm-white);
    transform: translateY(-3px);
}

.mobile-social svg {
    width: 24px;
    height: 24px;
}

/* =========================================
   HERO SECTION
   ========================================= */
.hero {
    min-height: 100vh;
    min-height: 100dvh;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: var(--space-3xl) var(--space-md);
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    inset: 0;
    z-index: 0;
}

.hero-gradient {
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 80% 50% at 50% 0%, rgba(125, 139, 111, 0.08) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 80%, rgba(196, 120, 90, 0.06) 0%, transparent 50%),
        linear-gradient(180deg, var(--sand-light) 0%, var(--cream) 50%, var(--warm-white) 100%);
}

.hero-grain {
    position: absolute;
    inset: 0;
    opacity: 0.35;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    pointer-events: none;
}

.hero-orbs {
    position: absolute;
    inset: 0;
    overflow: hidden;
}

.orb {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.4;
    animation: orbFloat 20s ease-in-out infinite;
}

.orb-1 {
    width: 400px;
    height: 400px;
    background: var(--sage-light);
    top: -10%;
    left: -10%;
    animation-delay: 0s;
}

.orb-2 {
    width: 300px;
    height: 300px;
    background: var(--terracotta-light);
    bottom: 10%;
    right: -5%;
    animation-delay: -7s;
}

.orb-3 {
    width: 250px;
    height: 250px;
    background: var(--sand);
    top: 40%;
    left: 60%;
    animation-delay: -14s;
}

@keyframes orbFloat {

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

    25% {
        transform: translate(30px, -30px) scale(1.05);
    }

    50% {
        transform: translate(-20px, 20px) scale(0.95);
    }

    75% {
        transform: translate(20px, 10px) scale(1.02);
    }
}

/* Paw Particles */
.paw-particles {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.paw-particle {
    position: absolute;
    opacity: 0;
    animation: pawFloat 15s ease-in-out infinite;
    color: var(--sage);
}

@keyframes pawFloat {
    0% {
        opacity: 0;
        transform: translateY(100vh) rotate(0deg) scale(0.5);
    }

    10% {
        opacity: 0.15;
    }

    90% {
        opacity: 0.15;
    }

    100% {
        opacity: 0;
        transform: translateY(-100px) rotate(180deg) scale(1);
    }
}

/* Hero Content */
.hero-content {
    position: relative;
    z-index: 2;
    text-align: center;
    max-width: 900px;
}

/* Hero Badge */
.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    background: rgba(125, 139, 111, 0.1);
    border: 1px solid rgba(125, 139, 111, 0.2);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--sage-dark);
    margin-bottom: var(--space-lg);
}

.badge-icon {
    display: flex;
    animation: heartBeat 1.5s ease-in-out infinite;
}

.badge-icon svg {
    width: 16px;
    height: 16px;
    fill: var(--terracotta);
}

/* Hero Title */
.hero-title {
    font-family: var(--font-display);
    font-size: clamp(2.5rem, 7vw, 5rem);
    font-weight: 400;
    line-height: 1.1;
    color: var(--charcoal);
    margin-bottom: var(--space-lg);
}

.title-line {
    display: block;
    overflow: hidden;
}

.title-word {
    display: inline-block;
    margin-right: 0.2em;
}

.title-accent {
    color: var(--sage-dark);
    font-weight: 500;
}

.title-italic {
    font-style: italic;
    color: var(--terracotta);
}

/* Hero Subtitle */
.hero-subtitle {
    font-size: 1.15rem;
    color: var(--charcoal-muted);
    line-height: 1.7;
    margin-bottom: var(--space-xl);
}

.hide-mobile {
    display: inline;
}

@media (max-width: 768px) {
    .hide-mobile {
        display: none;
    }
}

/* Hero Actions */
.hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    justify-content: center;
    margin-bottom: var(--space-2xl);
}

/* Primary Button */
.btn-primary {
    position: relative;
    display: inline-flex;
    align-items: center;
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-full);
    overflow: hidden;
    transition: transform 0.3s var(--ease-out), box-shadow 0.3s var(--ease-out);
}

.btn-primary .btn-bg {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-dark) 100%);
    transition: transform 0.4s var(--ease-out);
}

.btn-primary:hover .btn-bg {
    transform: scale(1.05);
}

.btn-primary .btn-content {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--warm-white);
    font-weight: 600;
    font-size: 1rem;
}

.btn-primary .btn-icon {
    width: 18px;
    height: 18px;
    animation: heartBeat 1.5s ease-in-out infinite;
}

.btn-primary .btn-shine {
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
    transition: left 0.6s var(--ease-out);
}

.btn-primary:hover .btn-shine {
    left: 100%;
}

.btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-glow-terracotta);
}

/* Secondary Button */
.btn-secondary {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    font-weight: 500;
    font-size: 1rem;
    color: var(--charcoal);
    background: transparent;
    border: 2px solid var(--sand-dark);
    border-radius: var(--radius-full);
    transition: all 0.3s var(--ease-out);
}

.btn-secondary:hover {
    border-color: var(--sage);
    background: rgba(125, 139, 111, 0.08);
}

.btn-secondary .btn-arrow {
    width: 18px;
    height: 18px;
    transition: transform 0.3s var(--ease-out);
}

.btn-secondary:hover .btn-arrow {
    transform: translate(3px, -3px);
}

/* Outline Button */
.btn-outline {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    font-weight: 500;
    color: var(--sage-dark);
    background: transparent;
    border: 2px solid var(--sage);
    border-radius: var(--radius-full);
    transition: all 0.3s var(--ease-out);
}

.btn-outline:hover {
    background: var(--sage);
    color: var(--warm-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-glow-sage);
}

.btn-outline svg {
    width: 20px;
    height: 20px;
}

/* Hero Stats */
.hero-stats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xl);
}

.stat {
    text-align: center;
    position: relative;
}

.stat-number-wrap {
    display: flex;
    align-items: baseline;
    justify-content: center;
    gap: 2px;
}

.stat-number {
    font-family: var(--font-display);
    font-size: 3rem;
    font-weight: 500;
    color: var(--sage-dark);
    line-height: 1;
}

.stat-plus {
    font-family: var(--font-display);
    font-size: 1.5rem;
    color: var(--terracotta);
}

.stat-label {
    display: block;
    font-size: 0.85rem;
    color: var(--charcoal-muted);
    margin-top: var(--space-xs);
}

.stat-icon {
    position: absolute;
    top: -10px;
    right: -10px;
    width: 24px;
    height: 24px;
    color: var(--sand-dark);
    opacity: 0.5;
}

.stat-divider {
    width: 1px;
    height: 50px;
    position: relative;
}

.stat-divider span {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent, var(--sand-dark), transparent);
}

@media (max-width: 768px) {
    .hero-stats {
        flex-direction: column;
        gap: var(--space-lg);
    }

    .stat-divider {
        width: 60px;
        height: 1px;
    }

    .stat-divider span {
        background: linear-gradient(to right, transparent, var(--sand-dark), transparent);
    }

    .stat-icon {
        display: none;
    }
}

/* Hero Scroll Indicator */
.hero-scroll {
    position: absolute;
    bottom: var(--space-xl);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    color: var(--charcoal-muted);
}

.scroll-mouse {
    width: 24px;
    height: 38px;
    border: 2px solid var(--charcoal-muted);
    border-radius: 12px;
    position: relative;
    opacity: 0.5;
}

.scroll-wheel {
    position: absolute;
    top: 8px;
    left: 50%;
    transform: translateX(-50%);
    width: 4px;
    height: 8px;
    background: var(--charcoal-muted);
    border-radius: 2px;
    animation: scrollWheel 2s ease-in-out infinite;
}

@keyframes scrollWheel {

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

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

.scroll-text {
    font-size: 0.7rem;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    opacity: 0.5;
}

/* Hero Decorations */
.hero-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.decor-branch {
    position: absolute;
    height: 300px;
    color: var(--sage);
    opacity: 0.3;
}

.decor-branch-left {
    left: 2%;
    top: 20%;
    animation: sway 10s ease-in-out infinite;
}

.decor-branch-right {
    right: 2%;
    top: 30%;
    animation: sway 10s ease-in-out infinite reverse;
}

@keyframes sway {

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

    50% {
        transform: rotate(3deg);
    }
}

@media (max-width: 768px) {
    .hero-decor {
        display: none;
    }
}

/* =========================================
   CONTAINER & SECTION COMMON
   ========================================= */
.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

/* Section Labels */
.section-label {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.section-label.centered {
    justify-content: center;
}

.label-line {
    width: 40px;
    height: 2px;
    background: linear-gradient(90deg, var(--sage) 0%, var(--sage-dark) 100%);
    box-shadow:
        0 1px 2px rgba(125, 139, 111, 0.3),
        0 0 8px rgba(125, 139, 111, 0.2);
    border-radius: 1px;
}

.label-text {
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--sage);
    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.9),
        0 2px 4px rgba(255, 255, 255, 0.5),
        0 1px 1px rgba(0, 0, 0, 0.08);
}

/* Section Titles */
.section-title {
    font-family: var(--font-display);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--charcoal);
    margin-bottom: var(--space-md);
    text-shadow:
        0 2px 4px rgba(255, 255, 255, 0.9),
        0 4px 8px rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(0, 0, 0, 0.1);
}

.section-title.centered {
    text-align: center;
}

.section-title em {
    color: var(--sage-dark);
    font-style: italic;
    text-shadow:
        0 2px 4px rgba(255, 255, 255, 0.9),
        0 4px 8px rgba(255, 255, 255, 0.6),
        0 1px 2px rgba(125, 139, 111, 0.2);
}

.section-subtitle {
    font-size: 1.1rem;
    color: var(--charcoal-muted);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
    text-align: center;
}

.section-header {
    margin-bottom: var(--space-xl);
}

.section-header.light .label-text {
    color: rgba(255, 255, 255, 0.95);
    background: transparent;
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    font-weight: 700;
}

.section-header.light .label-line {
    background: rgba(255, 255, 255, 0.8);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}

.section-header.light .section-title {
    color: var(--warm-white);
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.2);
    font-weight: 500;
}

.section-header.light .section-title em {
    color: var(--sand-light);
    text-shadow:
        0 2px 8px rgba(0, 0, 0, 0.4),
        0 4px 16px rgba(0, 0, 0, 0.2);
}

.section-header.light .section-subtitle {
    color: rgba(255, 255, 255, 0.95);
    text-shadow: 0 2px 6px rgba(0, 0, 0, 0.3);
    font-weight: 500;
}

/* =========================================
   CHI SIAMO SECTION
   ========================================= */
.chi-siamo {
    padding: var(--space-3xl) 0;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(165deg, rgba(125, 139, 111, 0.15) 0%, transparent 40%),
        linear-gradient(-165deg, rgba(232, 223, 212, 0.6) 60%, transparent 100%),
        linear-gradient(to bottom, #F5F1ED 0%, #EAE5DC 100%);
}

.chi-siamo::before {
    content: '';
    position: absolute;
    top: -10%;
    left: -5%;
    width: 100%;
    height: 120%;
    background: url("data:image/svg+xml,%3Csvg width='120' height='120' viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 50 Q35 25 60 45 T100 50' stroke='%237D8B6F' stroke-width='2.5' fill='none' opacity='0.35'/%3E%3Cpath d='M10 75 Q30 50 50 70 T90 75' stroke='%239BA78E' stroke-width='2' fill='none' opacity='0.3'/%3E%3Cpath d='M30 90 Q50 70 70 88 T110 90' stroke='%235C6B4D' stroke-width='1.5' fill='none' opacity='0.25'/%3E%3Cellipse cx='28' cy='28' rx='8' ry='14' fill='%239BA78E' opacity='0.25' transform='rotate(-30 28 28)'/%3E%3Cellipse cx='85' cy='65' rx='10' ry='16' fill='%237D8B6F' opacity='0.22' transform='rotate(20 85 65)'/%3E%3Cellipse cx='55' cy='95' rx='7' ry='12' fill='%235C6B4D' opacity='0.18' transform='rotate(-15 55 95)'/%3E%3Cellipse cx='95' cy='30' rx='6' ry='10' fill='%239BA78E' opacity='0.2' transform='rotate(45 95 30)'/%3E%3C/svg%3E") repeat;
    background-size: 120px 120px;
    opacity: 1;
    animation: driftPattern 60s linear infinite;
    pointer-events: none;
}

.chi-siamo::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    height: 400px;
    background:
        radial-gradient(ellipse 1000px 400px at 80% 100%, rgba(196, 120, 90, 0.18), transparent),
        radial-gradient(ellipse 800px 300px at 20% 100%, rgba(125, 139, 111, 0.25), transparent);
    pointer-events: none;
}

@keyframes driftPattern {
    0% {
        transform: translate(0, 0);
    }

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

/* Floating decorative leaves */
.chi-siamo-leaves {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
}

.floating-leaf {
    position: absolute;
    width: 80px;
    height: 100px;
    background: url("data:image/svg+xml,%3Csvg viewBox='0 0 40 50' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M20 0C20 0 35 12 35 28C35 44 20 50 20 50C20 50 5 44 5 28C5 12 20 0 20 0Z' fill='%239BA78E' opacity='0.45'/%3E%3Cpath d='M20 5 L20 45' stroke='%237D8B6F' stroke-width='1.5' opacity='0.5'/%3E%3Cpath d='M20 15 Q25 20 20 25' stroke='%235C6B4D' stroke-width='1' opacity='0.4' fill='none'/%3E%3Cpath d='M20 25 Q15 30 20 35' stroke='%235C6B4D' stroke-width='1' opacity='0.4' fill='none'/%3E%3C/svg%3E") no-repeat center;
    background-size: contain;
    opacity: 0;
    animation: leafFloat 20s ease-in-out infinite;
    filter: drop-shadow(0 2px 8px rgba(125, 139, 111, 0.2));
}

.leaf-1 {
    top: 12%;
    right: 12%;
    animation-delay: 0s;
}

.leaf-2 {
    top: 55%;
    left: 8%;
    width: 70px;
    height: 88px;
    animation-delay: -7s;
    animation-duration: 25s;
}

.leaf-3 {
    top: 30%;
    right: 22%;
    width: 75px;
    height: 94px;
    animation-delay: -14s;
    animation-duration: 22s;
}

@keyframes leafFloat {

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

    10% {
        opacity: 0.85;
    }

    50% {
        opacity: 1;
        transform: translateY(-40px) rotate(180deg) scale(1.1);
    }

    90% {
        opacity: 0.85;
    }
}

.section-bg {
    position: absolute;
    inset: 0;
    pointer-events: none;
}

.bg-shape {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.bg-shape-1 {
    width: 700px;
    height: 700px;
    background: rgba(125, 139, 111, 0.25);
    top: -20%;
    right: -10%;
}

.bg-shape-2 {
    width: 600px;
    height: 600px;
    background: rgba(196, 120, 90, 0.18);
    bottom: -10%;
    left: -10%;
}

.chi-siamo-grid {
    display: grid;
    grid-template-columns: 1fr 1.2fr;
    gap: var(--space-2xl);
    align-items: center;
}

@media (max-width: 900px) {
    .chi-siamo-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

/* Visual Stack */
.chi-siamo-visual {
    position: relative;
}

.visual-stack {
    position: relative;
    padding: var(--space-lg);
}

.visual-card {
    position: relative;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    background: linear-gradient(135deg,
            rgba(253, 251, 247, 1) 0%,
            rgba(248, 243, 237, 1) 100%);
    padding: 12px;
}

.visual-card-main {
    z-index: 2;
}

.visual-card-secondary {
    position: absolute;
    bottom: -10%;
    right: -10%;
    width: 55%;
    z-index: 3;
    transform: rotate(3deg);
}

.card-image {
    position: relative;
    border-radius: calc(var(--radius-lg) - 6px);
    overflow: hidden;
    box-shadow:
        inset 0 0 0 1px rgba(125, 139, 111, 0.1),
        0 4px 12px rgba(0, 0, 0, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
}

.card-image img {
    width: 100%;
    height: auto;
    aspect-ratio: 4/3;
    object-fit: cover;
    object-position: center;
    display: block;
    transition: transform 0.5s var(--ease-out);

    /* Smooth transforms */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);
}

.visual-card:hover .card-image img {
    transform: scale(1.03) translate3d(0, 0, 0);
}

.image-placeholder {
    aspect-ratio: 4/3;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    background: linear-gradient(135deg, var(--sand-light) 0%, var(--sand) 100%);
    font-size: 0.9rem;
    color: var(--charcoal-muted);
}

.placeholder-icon {
    font-size: 3rem;
}

.card-frame {
    position: absolute;
    inset: 4px;
    border: 2px solid rgba(125, 139, 111, 0.15);
    border-radius: calc(var(--radius-lg) - 2px);
    pointer-events: none;
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.4) 0%,
            rgba(255, 255, 255, 0.1) 50%,
            rgba(125, 139, 111, 0.1) 100%);
    box-shadow:
        inset 0 1px 2px rgba(255, 255, 255, 0.8),
        inset 0 -1px 2px rgba(125, 139, 111, 0.1),
        0 0 0 1px rgba(255, 255, 255, 0.5);
    transition: all 0.4s var(--ease-out);
}

.visual-card:hover .card-frame {
    border-color: rgba(125, 139, 111, 0.3);
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.9),
        inset 0 -1px 3px rgba(125, 139, 111, 0.15),
        0 0 0 1px rgba(255, 255, 255, 0.7),
        0 2px 8px rgba(125, 139, 111, 0.15);
}

/* Inner mat board effect */
.card-frame::before {
    content: '';
    position: absolute;
    inset: 6px;
    border: 1px solid rgba(125, 139, 111, 0.08);
    border-radius: calc(var(--radius-lg) - 8px);
    background: linear-gradient(to bottom right,
            rgba(255, 255, 255, 0.3),
            transparent);
    pointer-events: none;
}

/* Outer frame highlight */
.card-frame::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg,
            rgba(255, 255, 255, 0.6) 0%,
            rgba(255, 255, 255, 0.1) 30%,
            transparent 50%);
    opacity: 0.5;
    pointer-events: none;
}

/* Floating Decorations */
.visual-float {
    position: absolute;
    color: var(--sage);
    opacity: 0.2;
    z-index: 1;
}

.visual-float-1 {
    width: 80px;
    top: -20px;
    right: 20%;
    animation: float 6s ease-in-out infinite;
}

.visual-float-2 {
    width: 50px;
    bottom: 30%;
    left: -20px;
    animation: float 6s ease-in-out infinite reverse;
}

@keyframes float {

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

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

/* Mobile optimization for framed images */
@media (max-width: 768px) {
    .visual-card {
        padding: 10px;
    }

    .card-frame {
        inset: 3px;
        border-width: 1.5px;
    }

    .card-frame::before {
        inset: 5px;
    }
}

@media (max-width: 480px) {
    .visual-card {
        padding: 8px;
    }

    .card-frame {
        inset: 2px;
        border-width: 1px;
    }

    .card-frame::before {
        inset: 4px;
    }
}

/* Content */
.chi-siamo-content {
    position: relative;
    z-index: 2;
}

.content-text {
    margin-bottom: var(--space-lg);
}

.text-lead {
    font-size: 1.2rem;
    line-height: 1.7;
    color: var(--charcoal);
    margin-bottom: var(--space-md);
    text-shadow:
        0 1px 3px rgba(255, 255, 255, 0.9),
        0 2px 6px rgba(255, 255, 255, 0.5),
        0 1px 1px rgba(0, 0, 0, 0.08);
    font-weight: 500;
}

.text-lead strong {
    color: var(--sage-dark);
    font-weight: 600;
    text-shadow:
        0 1px 3px rgba(255, 255, 255, 1),
        0 2px 6px rgba(255, 255, 255, 0.6),
        0 0 10px rgba(255, 255, 255, 0.4);
}

.content-text p {
    color: var(--charcoal-muted);
    line-height: 1.8;
    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.8),
        0 2px 4px rgba(255, 255, 255, 0.4),
        0 1px 1px rgba(0, 0, 0, 0.06);
    font-weight: 500;
}

/* Transparency Box */
.transparency-box {
    position: relative;
    margin-bottom: var(--space-lg);
}

.box-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(ellipse at center, var(--sage-glow) 0%, transparent 70%);
    opacity: 0.5;
    filter: blur(20px);
}

.box-content {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.85) 0%,
            rgba(245, 241, 237, 0.8) 100%),
        linear-gradient(135deg,
            rgba(125, 139, 111, 0.1) 0%,
            rgba(125, 139, 111, 0.05) 100%);
    border: 1px solid rgba(125, 139, 111, 0.25);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    backdrop-filter: blur(16px) saturate(150%);
    -webkit-backdrop-filter: blur(16px) saturate(150%);
    box-shadow:
        0 4px 16px rgba(125, 139, 111, 0.15),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(125, 139, 111, 0.1);
    transition: all 0.4s var(--ease-smooth);
}

.box-content:hover {
    background:
        linear-gradient(135deg,
            rgba(255, 255, 255, 0.92) 0%,
            rgba(245, 241, 237, 0.88) 100%),
        linear-gradient(135deg,
            rgba(125, 139, 111, 0.12) 0%,
            rgba(125, 139, 111, 0.08) 100%);
    border-color: rgba(125, 139, 111, 0.35);
    box-shadow:
        0 8px 24px rgba(125, 139, 111, 0.2),
        0 4px 12px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 1),
        inset 0 -1px 0 rgba(125, 139, 111, 0.15);
    transform: translateY(-2px);
}

.box-icon {
    flex-shrink: 0;
    width: 56px;
    height: 56px;
    background: linear-gradient(135deg, var(--sage) 0%, var(--sage-dark) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow:
        0 8px 24px rgba(125, 139, 111, 0.3),
        0 4px 8px rgba(125, 139, 111, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.25),
        inset 0 -1px 0 rgba(0, 0, 0, 0.15);
}

.box-icon svg {
    width: 28px;
    height: 28px;
    color: var(--warm-white);
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.box-text h4 {
    font-family: var(--font-display);
    font-size: 1.15rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: var(--space-xs);
    text-shadow:
        0 1px 3px rgba(255, 255, 255, 0.9),
        0 2px 6px rgba(255, 255, 255, 0.5),
        0 1px 1px rgba(0, 0, 0, 0.08);
}

.box-text p {
    font-size: 0.95rem;
    color: var(--charcoal-muted);
    line-height: 1.6;
    font-weight: 500;
    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.8),
        0 2px 4px rgba(255, 255, 255, 0.4),
        0 1px 1px rgba(0, 0, 0, 0.06);
}

.box-text strong {
    color: var(--sage-dark);
    font-weight: 700;
    text-shadow:
        0 1px 3px rgba(255, 255, 255, 1),
        0 2px 6px rgba(255, 255, 255, 0.6),
        0 0 10px rgba(255, 255, 255, 0.4);
}

.box-text em {
    color: var(--terracotta);
    font-style: italic;
    font-weight: 600;
    text-shadow:
        0 1px 3px rgba(255, 255, 255, 0.9),
        0 2px 6px rgba(255, 255, 255, 0.5);
}

/* Values Row */
.values-row {
    display: grid;
    grid-template-columns: repeat(3, auto);
    justify-content: start;
    gap: var(--space-sm);
}

/* Tanto Amore al centro sotto Alimentazione */
.value-chip:nth-child(4) {
    grid-column: 2;
}

.value-chip {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--sand-light);
    border-radius: var(--radius-full);
    transition: all 0.3s var(--ease-out);
    box-shadow:
        0 2px 4px rgba(0, 0, 0, 0.04),
        0 1px 2px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.value-chip:hover {
    background: var(--sand);
    transform: translateY(-2px);
    box-shadow:
        0 4px 8px rgba(125, 139, 111, 0.15),
        0 2px 4px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.chip-icon {
    font-size: 1.2rem;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.1));
}

.chip-text {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--charcoal);
    text-shadow:
        0 1px 2px rgba(255, 255, 255, 0.8),
        0 1px 1px rgba(0, 0, 0, 0.05);
}

/* Responsive: su mobile torna a layout flessibile */
@media (max-width: 768px) {
    .values-row {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }

    .value-chip:nth-child(4) {
        grid-column: auto;
    }
}

/* =========================================
   OSPITI (CATS) SECTION
   ========================================= */
.ospiti {
    padding: var(--space-3xl) 0;
    position: relative;
    overflow: hidden;
    background:
        radial-gradient(circle 700px at 85% 20%, rgba(232, 180, 160, 0.22), transparent),
        radial-gradient(circle 900px at 15% 80%, rgba(125, 139, 111, 0.20), transparent),
        linear-gradient(180deg, #F0EBE3 0%, #F5F1EB 50%, #E8DFD4 100%);
}

/* Decorative paw prints background pattern */
.ospiti::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        /* Prima zampa - più grande e visibile */
        radial-gradient(circle 7px at 15% 12%, rgba(125, 139, 111, 0.35) 100%, transparent),
        radial-gradient(circle 4px at 17.5% 9%, rgba(125, 139, 111, 0.35) 100%, transparent),
        radial-gradient(circle 4px at 12.5% 9%, rgba(125, 139, 111, 0.35) 100%, transparent),
        radial-gradient(circle 4px at 13% 15%, rgba(125, 139, 111, 0.35) 100%, transparent),
        radial-gradient(circle 4px at 19% 15%, rgba(125, 139, 111, 0.35) 100%, transparent),
        radial-gradient(ellipse 12px 10px at 16% 18%, rgba(92, 107, 77, 0.4) 100%, transparent),

        /* Seconda zampa */
        radial-gradient(circle 6px at 78% 40%, rgba(196, 120, 90, 0.3) 100%, transparent),
        radial-gradient(circle 4px at 80% 37%, rgba(196, 120, 90, 0.3) 100%, transparent),
        radial-gradient(circle 4px at 76% 37%, rgba(196, 120, 90, 0.3) 100%, transparent),
        radial-gradient(circle 4px at 77% 43%, rgba(196, 120, 90, 0.3) 100%, transparent),
        radial-gradient(circle 4px at 81% 43%, rgba(196, 120, 90, 0.3) 100%, transparent),
        radial-gradient(ellipse 11px 9px at 79% 46%, rgba(166, 94, 66, 0.35) 100%, transparent),

        /* Terza zampa */
        radial-gradient(circle 6px at 45% 70%, rgba(125, 139, 111, 0.28) 100%, transparent),
        radial-gradient(circle 4px at 47% 67%, rgba(125, 139, 111, 0.28) 100%, transparent),
        radial-gradient(circle 4px at 43% 67%, rgba(125, 139, 111, 0.28) 100%, transparent),
        radial-gradient(circle 4px at 44% 73%, rgba(125, 139, 111, 0.28) 100%, transparent),
        radial-gradient(circle 4px at 48% 73%, rgba(125, 139, 111, 0.28) 100%, transparent),
        radial-gradient(ellipse 11px 9px at 46% 76%, rgba(92, 107, 77, 0.32) 100%, transparent),

        /* Quarta zampa */
        radial-gradient(circle 5px at 88% 65%, rgba(155, 167, 142, 0.25) 100%, transparent),
        radial-gradient(circle 3px at 90% 63%, rgba(155, 167, 142, 0.25) 100%, transparent),
        radial-gradient(circle 3px at 86% 63%, rgba(155, 167, 142, 0.25) 100%, transparent),
        radial-gradient(circle 3px at 87% 67%, rgba(155, 167, 142, 0.25) 100%, transparent),
        radial-gradient(circle 3px at 91% 67%, rgba(155, 167, 142, 0.25) 100%, transparent),
        radial-gradient(ellipse 9px 7px at 89% 69%, rgba(125, 139, 111, 0.28) 100%, transparent),

        /* Quinta zampa */
        radial-gradient(circle 5px at 25% 85%, rgba(196, 120, 90, 0.22) 100%, transparent),
        radial-gradient(circle 3px at 27% 83%, rgba(196, 120, 90, 0.22) 100%, transparent),
        radial-gradient(circle 3px at 23% 83%, rgba(196, 120, 90, 0.22) 100%, transparent),
        radial-gradient(circle 3px at 24% 87%, rgba(196, 120, 90, 0.22) 100%, transparent),
        radial-gradient(circle 3px at 28% 87%, rgba(196, 120, 90, 0.22) 100%, transparent),
        radial-gradient(ellipse 9px 7px at 26% 89%, rgba(166, 94, 66, 0.25) 100%, transparent);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
    animation: pawFloat 40s ease-in-out infinite alternate;
}

@keyframes pawFloat {
    0% {
        transform: translateY(0);
    }

    100% {
        transform: translateY(-20px);
    }
}

/* Floating organic shapes */
.ospiti::after {
    content: '';
    position: absolute;
    top: 8%;
    right: 3%;
    width: 400px;
    height: 400px;
    background: radial-gradient(ellipse at center, rgba(125, 139, 111, 0.25), rgba(155, 167, 142, 0.15) 50%, transparent 75%);
    border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
    filter: blur(40px);
    animation: morphBlob 20s ease-in-out infinite;
    pointer-events: none;
}

@keyframes morphBlob {

    0%,
    100% {
        border-radius: 63% 37% 54% 46% / 55% 48% 52% 45%;
        transform: rotate(0deg) scale(1);
    }

    33% {
        border-radius: 42% 58% 70% 30% / 45% 65% 35% 55%;
        transform: rotate(120deg) scale(1.15);
    }

    66% {
        border-radius: 58% 42% 45% 55% / 70% 40% 60% 30%;
        transform: rotate(240deg) scale(0.95);
    }
}

.cats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

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

@media (max-width: 600px) {
    .cats-grid {
        grid-template-columns: 1fr;
        max-width: 400px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Cat Card */
.cat-card {
    position: relative;
    border-radius: var(--radius-xl);
    transition: transform 0.3s var(--ease-out);
}

.cat-card:hover {
    z-index: 10;
    transform: scale(1.05);
}

.card-inner {
    background: var(--cream);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    transition: all 0.4s var(--ease-out);
}

.cat-card:hover .card-inner {
    box-shadow: var(--shadow-xl);
}

.card-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(ellipse at center, var(--sage-glow) 0%, transparent 70%);
    opacity: 0;
    filter: blur(30px);
    transition: opacity 0.4s var(--ease-out);
    z-index: -1;
}

.cat-card:hover .card-glow {
    opacity: 0.6;
}

/* Card Image */
.cat-card .card-image {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cat-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--sand-light) 0%, var(--sand) 100%);
    font-size: 5rem;
}

/* Card Badge */
.card-badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    backdrop-filter: blur(10px);
}

.badge-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {

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

    50% {
        opacity: 0.5;
        transform: scale(1.3);
    }
}

.badge-seeking {
    background: rgba(196, 120, 90, 0.9);
    color: var(--warm-white);
}

.badge-seeking .badge-dot {
    background: var(--warm-white);
}

.badge-support {
    background: rgba(125, 139, 111, 0.9);
    color: var(--warm-white);
}

.badge-support .badge-dot {
    background: var(--warm-white);
}

/* Card Overlay */
.card-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, transparent 40%, rgba(45, 41, 38, 0.8) 100%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: var(--space-lg);
    opacity: 0;
    transition: opacity 0.3s var(--ease-out);
}

.cat-card:hover .card-overlay,
.cat-card.active .card-overlay {
    opacity: 1;
}

.overlay-btn {
    padding: var(--space-sm) var(--space-lg);
    background: var(--terracotta);
    color: var(--warm-white);
    font-weight: 600;
    font-size: 0.85rem;
    border-radius: var(--radius-full);
    transform: translateY(20px);
    opacity: 0;
    transition: all 0.3s var(--ease-out) 0.1s;
}

.cat-card:hover .overlay-btn,
.cat-card.active .overlay-btn {
    transform: translateY(0);
    opacity: 1;
}

.overlay-btn:hover {
    background: var(--terracotta-dark);
    transform: scale(1.05);
}

/* Card Content */
.cat-card .card-content {
    padding: var(--space-md);
}

.content-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    margin-bottom: var(--space-sm);
}

.cat-name {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--charcoal);
}

.cat-age {
    font-size: 0.85rem;
    color: var(--sage);
    font-weight: 500;
}

.cat-bio {
    font-size: 0.9rem;
    color: var(--charcoal-muted);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.cat-traits {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.trait {
    padding: var(--space-2xs) var(--space-sm);
    background: var(--sand-light);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--charcoal-muted);
    transition: all 0.3s var(--ease-out);
}

.trait-special {
    background: linear-gradient(135deg, var(--terracotta-light), var(--terracotta));
    color: var(--warm-white);
    font-weight: 600;
}

/* Real Cat Photos */
.cat-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
    /* Eliminates white space below images */
    vertical-align: middle;
}

/* Couple Card (Nina & Johnny) - Clean Design */
.cat-card-couple {
    /* Standard single column, no grid spanning */
}

.card-image-couple {
    position: relative;
    aspect-ratio: 1;
    overflow: hidden;
}

.couple-photos {
    position: relative;
    width: 100%;
    height: 100%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
}

.couple-photo {
    position: relative;
    overflow: hidden;
}

.couple-photo .cat-photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.couple-divider {
    position: relative;
    width: 2px;
    background: linear-gradient(to bottom, transparent, rgba(253, 251, 247, 0.8), transparent);
    z-index: 5;
}

.couple-photo-right {
    position: relative;
}

.couple-tag {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    background: rgba(253, 251, 247, 0.95);
    backdrop-filter: blur(10px);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--terracotta-dark);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    box-shadow: var(--shadow-sm);
    z-index: 6;
}

.couple-tag svg {
    width: 12px;
    height: 12px;
    color: var(--terracotta);
}

/* Veteran Badge for Long-time Residents */
.badge-veteran {
    background: linear-gradient(135deg, var(--sage-dark), var(--sage));
    color: var(--warm-white);
    font-weight: 700;
}

/* Cats CTA */
.cats-cta {
    text-align: center;
}

.cats-cta p {
    color: var(--charcoal-muted);
    margin-bottom: var(--space-md);
}

/* =========================================
   STORIE (TIMELINE) SECTION
   ========================================= */
.storie {
    padding: var(--space-3xl) 0;
    position: relative;
    overflow: hidden;
    background:
        linear-gradient(135deg, rgba(125, 139, 111, 0.18) 0%, transparent 50%),
        linear-gradient(-135deg, rgba(196, 120, 90, 0.15) 50%, transparent 100%),
        linear-gradient(to bottom, #F2EDE6 0%, #E8DFD4 100%);
}

/* Flowing organic lines background */
.storie::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        url("data:image/svg+xml,%3Csvg width='1200' height='800' viewBox='0 0 1200 800' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 200 Q300 100 600 200 T1200 200' stroke='%237D8B6F' stroke-width='4' fill='none' opacity='0.3'/%3E%3Cpath d='M0 250 Q300 150 600 250 T1200 250' stroke='%239BA78E' stroke-width='3' fill='none' opacity='0.25'/%3E%3Cpath d='M0 400 Q300 300 600 400 T1200 400' stroke='%235C6B4D' stroke-width='5' fill='none' opacity='0.28'/%3E%3Cpath d='M0 450 Q300 350 600 450 T1200 450' stroke='%239BA78E' stroke-width='3' fill='none' opacity='0.22'/%3E%3Cpath d='M0 600 Q300 500 600 600 T1200 600' stroke='%23C4785A' stroke-width='4' fill='none' opacity='0.2'/%3E%3Cpath d='M100 100 Q250 30 400 100 Q550 170 700 100' stroke='%237D8B6F' stroke-width='2.5' fill='none' opacity='0.35'/%3E%3Cpath d='M700 150 Q850 80 1000 150 Q1150 220 1200 150' stroke='%239BA78E' stroke-width='2.5' fill='none' opacity='0.3'/%3E%3Cpath d='M0 700 Q150 650 300 700 Q450 750 600 700' stroke='%235C6B4D' stroke-width='2' fill='none' opacity='0.25'/%3E%3C/svg%3E");
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
}

/* Cat silhouettes decorations */
.storie::after {
    content: '';
    position: absolute;
    top: 5%;
    right: 5%;
    width: 180px;
    height: 135px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.25' fill='%237D8B6F'%3E%3Cellipse cx='15' cy='12' rx='8' ry='12' transform='rotate(-20 15 12)'/%3E%3Cellipse cx='65' cy='12' rx='8' ry='12' transform='rotate(20 65 12)'/%3E%3Cellipse cx='40' cy='35' rx='25' ry='20'/%3E%3Cellipse cx='20' cy='42' rx='6' ry='5'/%3E%3Cellipse cx='60' cy='42' rx='6' ry='5'/%3E%3Cpath d='M25 50 Q30 52 35 50' stroke='%235C6B4D' stroke-width='1.5' fill='none'/%3E%3Cpath d='M45 50 Q50 52 55 50' stroke='%235C6B4D' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='30' cy='28' r='3' fill='%23FDFBF7'/%3E%3Ccircle cx='50' cy='28' r='3' fill='%23FDFBF7'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
    animation: catSway 8s ease-in-out infinite;
}

@keyframes catSway {

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

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

/* Additional decorative elements */
.storie-decor {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
}

.storie-blob {
    position: absolute;
    border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    filter: blur(50px);
    opacity: 0.6;
}

.storie-blob-1 {
    width: 550px;
    height: 550px;
    background: radial-gradient(circle, rgba(125, 139, 111, 0.5), rgba(92, 107, 77, 0.3) 50%, transparent);
    top: 5%;
    left: -10%;
    animation: blobDrift1 25s ease-in-out infinite;
}

.storie-blob-2 {
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(196, 120, 90, 0.4), rgba(166, 94, 66, 0.25) 50%, transparent);
    bottom: 10%;
    right: -5%;
    animation: blobDrift2 30s ease-in-out infinite reverse;
}

@keyframes blobDrift1 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg);
        border-radius: 40% 60% 70% 30% / 40% 50% 60% 50%;
    }

    25% {
        transform: translate(30px, -20px) rotate(90deg);
        border-radius: 60% 40% 30% 70% / 50% 60% 40% 50%;
    }

    50% {
        transform: translate(50px, 10px) rotate(180deg);
        border-radius: 50% 50% 50% 50% / 60% 40% 60% 40%;
    }

    75% {
        transform: translate(20px, 30px) rotate(270deg);
        border-radius: 45% 55% 60% 40% / 55% 45% 55% 45%;
    }
}

@keyframes blobDrift2 {

    0%,
    100% {
        transform: translate(0, 0) rotate(0deg) scale(1);
        border-radius: 50% 50% 40% 60% / 50% 50% 50% 50%;
    }

    33% {
        transform: translate(-40px, 20px) rotate(120deg) scale(1.1);
        border-radius: 40% 60% 50% 50% / 60% 40% 50% 50%;
    }

    66% {
        transform: translate(-20px, -30px) rotate(240deg) scale(0.95);
        border-radius: 55% 45% 45% 55% / 45% 55% 45% 55%;
    }
}

/* Additional cat on the left */
.storie-cat-left {
    position: absolute;
    bottom: 8%;
    left: 4%;
    width: 140px;
    height: 105px;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 80 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg opacity='0.3' fill='%23C4785A'%3E%3Cellipse cx='15' cy='12' rx='8' ry='12' transform='rotate(-25 15 12)'/%3E%3Cellipse cx='65' cy='12' rx='8' ry='12' transform='rotate(25 65 12)'/%3E%3Cellipse cx='40' cy='35' rx='25' ry='20'/%3E%3Cellipse cx='20' cy='42' rx='6' ry='5'/%3E%3Cellipse cx='60' cy='42' rx='6' ry='5'/%3E%3Cpath d='M28 50 Q32 52 36 50' stroke='%23A65E42' stroke-width='1.5' fill='none'/%3E%3Cpath d='M44 50 Q48 52 52 50' stroke='%23A65E42' stroke-width='1.5' fill='none'/%3E%3Ccircle cx='32' cy='28' r='2.5' fill='%23FDFBF7'/%3E%3Ccircle cx='48' cy='28' r='2.5' fill='%23FDFBF7'/%3E%3Cellipse cx='40' cy='32' rx='2' ry='2.5' fill='%23A65E42'/%3E%3C/g%3E%3C/svg%3E");
    background-size: contain;
    background-repeat: no-repeat;
    opacity: 1;
    pointer-events: none;
    animation: catSwayReverse 9s ease-in-out infinite;
}

@keyframes catSwayReverse {

    0%,
    100% {
        transform: rotate(3deg) translateY(0) translateX(0);
    }

    50% {
        transform: rotate(-3deg) translateY(-8px) translateX(5px);
    }
}

/* Scattered paw prints */
.storie-paws {
    position: absolute;
    inset: 0;
    background-image:
        /* Prima zampa - in alto a sinistra */
        radial-gradient(circle 4px at 12% 18%, rgba(125, 139, 111, 0.25) 100%, transparent),
        radial-gradient(circle 2.5px at 13.5% 16%, rgba(125, 139, 111, 0.25) 100%, transparent),
        radial-gradient(circle 2.5px at 10.5% 16%, rgba(125, 139, 111, 0.25) 100%, transparent),
        radial-gradient(circle 2.5px at 11% 20%, rgba(125, 139, 111, 0.25) 100%, transparent),
        radial-gradient(circle 2.5px at 14% 20%, rgba(125, 139, 111, 0.25) 100%, transparent),
        radial-gradient(ellipse 7px 5px at 12.5% 22%, rgba(92, 107, 77, 0.28) 100%, transparent),

        /* Seconda zampa - al centro */
        radial-gradient(circle 3.5px at 48% 35%, rgba(196, 120, 90, 0.22) 100%, transparent),
        radial-gradient(circle 2px at 49.5% 33.5%, rgba(196, 120, 90, 0.22) 100%, transparent),
        radial-gradient(circle 2px at 46.5% 33.5%, rgba(196, 120, 90, 0.22) 100%, transparent),
        radial-gradient(circle 2px at 47% 36.5%, rgba(196, 120, 90, 0.22) 100%, transparent),
        radial-gradient(circle 2px at 50% 36.5%, rgba(196, 120, 90, 0.22) 100%, transparent),
        radial-gradient(ellipse 6px 4px at 48.5% 38.5%, rgba(166, 94, 66, 0.25) 100%, transparent),

        /* Terza zampa - in basso a destra */
        radial-gradient(circle 3px at 85% 82%, rgba(125, 139, 111, 0.2) 100%, transparent),
        radial-gradient(circle 2px at 86.5% 80.5%, rgba(125, 139, 111, 0.2) 100%, transparent),
        radial-gradient(circle 2px at 83.5% 80.5%, rgba(125, 139, 111, 0.2) 100%, transparent),
        radial-gradient(circle 2px at 84% 83.5%, rgba(125, 139, 111, 0.2) 100%, transparent),
        radial-gradient(circle 2px at 87% 83.5%, rgba(125, 139, 111, 0.2) 100%, transparent),
        radial-gradient(ellipse 5px 4px at 85.5% 85%, rgba(92, 107, 77, 0.22) 100%, transparent);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    pointer-events: none;
    animation: pawsGently 35s ease-in-out infinite alternate;
}

@keyframes pawsGently {

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

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

.timeline {
    position: relative;
    max-width: 800px;
    margin: 0 auto;
    padding: var(--space-xl) 0;
}

.timeline-line {
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--sand-dark);
    transform: translateX(-50%);
}

.timeline-progress {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 0%;
    background: linear-gradient(180deg, var(--sage) 0%, var(--terracotta) 100%);
    transition: height 0.3s var(--ease-out);
}

@media (max-width: 768px) {
    .timeline-line {
        left: 20px;
    }
}

/* Timeline Item */
.timeline-item {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.timeline-item:nth-child(even) {
    direction: rtl;
}

.timeline-item:nth-child(even) .timeline-content {
    direction: ltr;
}

@media (max-width: 768px) {

    .timeline-item,
    .timeline-item:nth-child(even) {
        grid-template-columns: 1fr;
        padding-left: 60px;
        direction: ltr;
    }
}

/* Timeline Marker */
.timeline-marker {
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    z-index: 2;
}

@media (max-width: 768px) {
    .timeline-marker {
        left: 20px;
    }
}

.marker-dot {
    width: 16px;
    height: 16px;
    background: var(--sage);
    border: 3px solid var(--cream);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
}

.marker-pulse {
    position: absolute;
    inset: -8px;
    border: 2px solid var(--sage);
    border-radius: 50%;
    opacity: 0;
    animation: markerPulse 2s ease-out infinite;
}

@keyframes markerPulse {
    0% {
        transform: scale(0.8);
        opacity: 0.8;
    }

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

.marker-future .marker-dot {
    background: var(--terracotta);
}

.marker-future .marker-pulse {
    border-color: var(--terracotta);
}

/* Timeline Content */
.timeline-content {
    background: var(--warm-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
    transition: all 0.3s var(--ease-out);
}

.timeline-item:nth-child(odd) .timeline-content {
    grid-column: 2;
}

@media (max-width: 768px) {
    .timeline-item:nth-child(odd) .timeline-content {
        grid-column: 1;
    }
}

.timeline-content:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

.timeline-date {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sage);
    margin-bottom: var(--space-xs);
}

.timeline-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--charcoal);
    margin-bottom: var(--space-sm);
}

.timeline-text {
    font-size: 0.95rem;
    color: var(--charcoal-muted);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.timeline-image {
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.timeline-image img {
    width: 100%;
    height: 100%;
    display: block;
    aspect-ratio: 16/9;
    object-fit: cover;
    object-position: center;
    /* Eliminates white space below images */
    vertical-align: middle;

    /* Smooth transforms */
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    transform: translate3d(0, 0, 0);

    transition: transform 0.5s var(--ease-out);
}

.timeline-item:hover .timeline-image img {
    transform: scale(1.03) translate3d(0, 0, 0);
}

.timeline-image .image-placeholder {
    aspect-ratio: 16/9;
    font-size: 2rem;
}

/* === SPECIFIC IMAGE ADJUSTMENTS === */

/* 1. Charlotte - Zoom per riempire i bordi bianchi */
.cat-card img[src*="Charlotte.jpeg"],
.cat-card img[alt*="Charlotte"] {
    transform: scale(1.35) translate3d(55px, 0, 0);
    transition: transform 0.5s var(--ease-out);
}

/* Charlotte - Riduce traslazione su schermi piccoli */
@media (max-width: 768px) {
    .cat-card img[src*="Charlotte.jpeg"],
    .cat-card img[alt*="Charlotte"] {
        transform: scale(1.35) translate3d(25px, 0, 0);
    }
}

@media (max-width: 480px) {
    .cat-card img[src*="Charlotte.jpeg"],
    .cat-card img[alt*="Charlotte"] {
        transform: scale(1.35) translate3d(15px, 0, 0);
    }
}

/* 2. Da 1 a 23 Ospiti - Abbassa il centro per evitare taglio sotto */
.timeline-item:nth-child(2) .timeline-image img,
img[src*="cuccia provvisoria.jpeg"] {
    object-position: center 65%;
}

.timeline-item:nth-child(2):hover .timeline-image img {
    transform: scale(1.03) translate3d(0, 0, 0);
}

.timeline-item:first-child .timeline-image img {
    object-position: center center;
}

.timeline-cta {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--terracotta);
    color: var(--warm-white);
    font-weight: 600;
    font-size: 0.9rem;
    border-radius: var(--radius-full);
    transition: all 0.3s var(--ease-out);
}

.timeline-cta:hover {
    background: var(--terracotta-dark);
    transform: translateX(5px);
}

.timeline-cta svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s var(--ease-out);
}

.timeline-cta:hover svg {
    transform: translateX(3px);
}

.timeline-item-future .timeline-content {
    background: linear-gradient(135deg, rgba(196, 120, 90, 0.1) 0%, rgba(196, 120, 90, 0.05) 100%);
    border: 1px dashed var(--terracotta-light);
}

/* =========================================
   SOSTIENI (DONATE) SECTION
   ========================================= */
.sostieni {
    padding: var(--space-3xl) 0;
    position: relative;
    overflow: hidden;
    /* Ensure section doesn't interfere with fixed nav */
    isolation: isolate;
}

.sostieni-bg {
    position: absolute;
    inset: 0;
    z-index: -1;
}

.sostieni-bg .bg-gradient {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--sage-dark) 0%, #4A5A3D 50%, var(--sage) 100%);
}

.sostieni-bg .bg-pattern {
    position: absolute;
    inset: 0;
    opacity: 0.08;
    background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M40 5C40 5 60 25 60 45C60 65 40 75 40 75C40 75 20 65 20 45C20 25 40 5 40 5Z' fill='%23ffffff'/%3E%3C/svg%3E");
    background-size: 80px 80px;
}

.bg-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(100px);
}

.bg-glow-1 {
    width: 400px;
    height: 400px;
    background: rgba(196, 120, 90, 0.3);
    top: -10%;
    left: -10%;
}

.bg-glow-2 {
    width: 300px;
    height: 300px;
    background: rgba(255, 255, 255, 0.1);
    bottom: -5%;
    right: -5%;
}

.sostieni .container {
    position: relative;
    z-index: 1;
}

/* Donation Grid */
.donation-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

@media (max-width: 900px) {
    .donation-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin-left: auto;
        margin-right: auto;
    }
}

/* Donation Card */
.donation-card {
    position: relative;
    display: block;
    border-radius: var(--radius-xl);
    overflow: hidden;
    transition: all 0.4s var(--ease-out);
    transform-style: preserve-3d;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.12),
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

.donation-card:hover {
    transform: translateY(-12px);
    box-shadow:
        0 16px 48px rgba(0, 0, 0, 0.18),
        0 8px 24px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

/* Paper Effect */
.card-paper {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, #FFFEFB 0%, var(--cream) 100%);
}

.paper-texture {
    position: absolute;
    inset: 0;
    opacity: 0.02;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 512 512' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
}

.paper-fold {
    position: absolute;
    top: 0;
    right: 0;
    width: 60px;
    height: 60px;
    background: linear-gradient(135deg, transparent 50%, var(--sand) 50%);
    opacity: 0.5;
}

/* Card Ribbon */
.card-ribbon {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 10;
    background: linear-gradient(135deg, #FF6B35 0%, #F7931E 100%);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    padding: 8px 16px;
    border-radius: var(--radius-full);
    box-shadow:
        0 4px 12px rgba(255, 107, 53, 0.4),
        0 2px 4px rgba(0, 0, 0, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.3);
    transform: translateY(0);
    transition: all 0.3s var(--ease-out);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.card-ribbon span {
    display: flex;
    align-items: center;
    gap: 4px;
}

.donation-card:hover .card-ribbon {
    transform: translateY(-2px);
    box-shadow:
        0 6px 16px rgba(255, 107, 53, 0.5),
        0 4px 8px rgba(0, 0, 0, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.4);
}

.donation-card-featured .card-paper {
    background: linear-gradient(135deg, #FFF9F6 0%, var(--cream) 100%);
}

.donation-card-featured:hover {
    box-shadow: var(--shadow-glow-terracotta);
}

@media (max-width: 900px) {
    .donation-card-featured {
        grid-column: span 1;
    }
}

/* Card Content */
.donation-card .card-content {
    position: relative;
    padding: var(--space-xl);
    z-index: 1;
}

.card-icon {
    position: relative;
    width: 80px;
    height: 80px;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    transition: all 0.4s var(--ease-out);
}

.card-icon i {
    font-size: 48px;
    transition: transform 0.4s var(--ease-out);
}

.donation-card:hover .card-icon {
    transform: translateY(-4px);
}

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

/* Amazon Icon */
.card-icon-amazon {
    background: linear-gradient(135deg, #FFFFFF 0%, #FFF9F0 100%);
    box-shadow:
        0 4px 20px rgba(255, 153, 0, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.card-icon-amazon i {
    color: #FF9900;
}

/* PayPal Icon */
.card-icon-paypal {
    background: linear-gradient(135deg, #FFFFFF 0%, #F0F7FF 100%);
    box-shadow:
        0 4px 20px rgba(0, 112, 186, 0.25),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.card-icon-paypal i {
    color: #0070BA;
}

/* Teaming Icon */
.card-icon-teaming {
    background: linear-gradient(135deg, #FFFFFF 0%, #EFFFF9 100%);
    box-shadow:
        0 4px 20px rgba(0, 212, 161, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.card-icon-teaming i {
    color: #00D4A1;
}

/* GoFundMe Icon */
.card-icon-gofundme {
    background: linear-gradient(135deg, #FFFFFF 0%, #EFFFEF 100%);
    box-shadow:
        0 4px 20px rgba(2, 169, 92, 0.3),
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

.card-icon-gofundme i {
    color: #02A95C;
}

/* Hover Effects per Brand */
.donation-card:hover .card-icon-amazon {
    box-shadow:
        0 8px 28px rgba(255, 153, 0, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.donation-card:hover .card-icon-paypal {
    box-shadow:
        0 8px 28px rgba(0, 112, 186, 0.35),
        0 4px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.donation-card:hover .card-icon-teaming {
    box-shadow:
        0 8px 28px rgba(0, 212, 161, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}

.donation-card:hover .card-icon-gofundme {
    box-shadow:
        0 8px 28px rgba(2, 169, 92, 0.4),
        0 4px 12px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 1);
}


.icon-featured .icon-bg {
    background: linear-gradient(135deg, var(--terracotta-light) 0%, var(--terracotta) 100%);
}

.card-highlight {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 14px;
    background: linear-gradient(135deg, rgba(255, 107, 53, 0.12) 0%, rgba(247, 147, 30, 0.08) 100%);
    color: #D35400;
    font-size: 0.75rem;
    font-weight: 700;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-sm);
    border: 1px solid rgba(255, 107, 53, 0.2);
    box-shadow:
        0 2px 8px rgba(255, 107, 53, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.donation-card .card-title {
    font-family: var(--font-display);
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-bottom: var(--space-sm);
    text-shadow: none;
    line-height: 1.3;
}

.donation-card .card-desc {
    font-size: 0.95rem;
    color: var(--charcoal-muted);
    line-height: 1.7;
    margin-bottom: var(--space-md);
    text-shadow: none;
    font-weight: 400;
}

.card-action {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--terracotta);
    transition: all 0.3s var(--ease-out);
    text-shadow: none;
}

.card-action svg {
    width: 18px;
    height: 18px;
    transition: transform 0.3s var(--ease-out);
}

.donation-card:hover .card-action {
    color: var(--terracotta-dark);
}

.donation-card:hover .card-action svg {
    transform: translate(4px, -4px);
}

/* Card Seal */
.card-seal {
    display: none;
}

.seal-featured {
    display: none;
}

/* Trust Section */
.trust-section {
    margin-top: var(--space-xl);
}

.trust-badges {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: rgba(255, 255, 255, 0.9);
    font-size: 0.9rem;
    font-weight: 500;
}

.trust-badge svg {
    width: 24px;
    height: 24px;
    opacity: 0.8;
}

/* =========================================
   FOOTER
   ========================================= */
.footer {
    background: var(--charcoal);
    color: var(--sand-light);
    position: relative;
}

.footer-wave {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    transform: translateY(-99%);
    color: var(--charcoal);
    line-height: 0;
}

.footer-wave svg {
    display: block;
    width: 100%;
    height: 80px;
}

.footer-content {
    padding: var(--space-2xl) 0 var(--space-lg);
}

.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-xl);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

@media (max-width: 768px) {
    .footer-main {
        grid-template-columns: 1fr;
        text-align: center;
    }
}

/* Footer Brand */
.footer-brand {
    max-width: 300px;
}

@media (max-width: 768px) {
    .footer-brand {
        max-width: none;
        margin: 0 auto;
    }
}

.footer-head {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    margin-top: 10px;
    /* Abbassare un po' il tutto */
}

.footer-logo {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: 0;
}

.footer-logo .logo-svg {
    width: 40px;
    height: 40px;
    color: var(--sage-light);
}

.footer-logo .logo-text {
    font-family: var(--font-display);
    font-size: 1.25rem;
    font-weight: 500;
    color: var(--sand-light);
}

.footer-tagline {
    font-size: 0.95rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.footer-social {
    display: flex;
    gap: var(--space-sm);
}

@media (max-width: 768px) {
    .footer-social {
        justify-content: center;
    }
}

.social-link {
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: var(--sand-light);
    transition: all 0.3s var(--ease-out);
}

.social-link:hover {
    background: var(--sage);
    transform: translateY(-3px);
}

.social-link svg {
    width: 20px;
    height: 20px;
}

/* Footer Links */
.footer-links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

@media (max-width: 600px) {
    .footer-links {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
    }
}

.footer-col h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 500;
    color: var(--sand-light);
    margin-bottom: var(--space-md);
}

.footer-col a {
    display: block;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    padding: var(--space-xs) 0;
    transition: color 0.3s var(--ease-out);
}

.footer-col a:hover {
    color: var(--sage-light);
}

.footer-address {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.8;
}

.footer-address-link {
    display: block;
    margin-top: 1.5rem;
    font-size: 0.9rem;
    color: var(--sage-light);
    transition: color 0.3s var(--ease-out);
}

.footer-address-link:hover {
    color: var(--sand-light);
    text-decoration: underline;
}

/* Footer Bottom */
.footer-bottom {
    text-align: center;
}

.footer-bottom p {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.5);
    margin-bottom: var(--space-sm);
}

/* Legal Links */
.footer-legal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}

.legal-link {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.6);
    transition: all 0.3s var(--ease-out);
    text-decoration: none;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
}

.legal-link:hover {
    color: rgba(255, 255, 255, 0.95);
    background: rgba(255, 255, 255, 0.1);
}

.legal-divider {
    color: rgba(255, 255, 255, 0.3);
    font-size: 0.8rem;
}

/* =========================================
   LEGAL MODALS
   ========================================= */
.legal-modal {
    position: fixed;
    inset: 0;
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-md);
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s var(--ease-out);
}

.legal-modal.active {
    opacity: 1;
    visibility: visible;
}

.modal-overlay {
    position: absolute;
    inset: 0;
    background: rgba(45, 41, 38, 0.85);
    backdrop-filter: blur(12px) saturate(150%);
    -webkit-backdrop-filter: blur(12px) saturate(150%);
    cursor: pointer;
}

.modal-container {
    position: relative;
    max-width: 800px;
    max-height: 90vh;
    width: 100%;
    background:
        linear-gradient(135deg,
            rgba(253, 251, 247, 0.98) 0%,
            rgba(255, 253, 249, 0.95) 100%);
    border-radius: var(--radius-xl);
    box-shadow:
        0 24px 64px rgba(0, 0, 0, 0.3),
        0 12px 32px rgba(0, 0, 0, 0.2),
        inset 0 2px 0 rgba(255, 255, 255, 0.9),
        inset 0 -1px 0 rgba(125, 139, 111, 0.1);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.4s var(--ease-out);
}

.legal-modal.active .modal-container {
    transform: scale(1) translateY(0);
}

/* Modal Header */
.modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg) var(--space-xl);
    border-bottom: 1px solid rgba(125, 139, 111, 0.15);
    background: linear-gradient(135deg,
            rgba(125, 139, 111, 0.05) 0%,
            transparent 100%);
}

.modal-header h2 {
    font-family: var(--font-display);
    font-size: clamp(1.5rem, 3vw, 2rem);
    font-weight: 600;
    color: var(--charcoal);
    margin: 0;
}

.modal-close {
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(125, 139, 111, 0.1);
    border: none;
    border-radius: var(--radius-md);
    color: var(--charcoal);
    cursor: pointer;
    transition: all 0.3s var(--ease-out);
}

.modal-close:hover {
    background: rgba(125, 139, 111, 0.2);
    transform: rotate(90deg);
}

.modal-close svg {
    width: 20px;
    height: 20px;
}

/* Modal Content */
.modal-content {
    flex: 1;
    overflow-y: auto;
    padding: var(--space-xl);
    -webkit-overflow-scrolling: touch;
}

/* Scrollbar Styling */
.modal-content::-webkit-scrollbar {
    width: 8px;
}

.modal-content::-webkit-scrollbar-track {
    background: rgba(125, 139, 111, 0.05);
    border-radius: 4px;
}

.modal-content::-webkit-scrollbar-thumb {
    background: rgba(125, 139, 111, 0.3);
    border-radius: 4px;
    transition: background 0.3s;
}

.modal-content::-webkit-scrollbar-thumb:hover {
    background: rgba(125, 139, 111, 0.5);
}

.modal-intro {
    font-size: 0.85rem;
    color: var(--sage-dark);
    font-style: italic;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid rgba(125, 139, 111, 0.1);
}

.legal-section {
    margin-bottom: var(--space-xl);
}

.legal-section h3 {
    font-family: var(--font-display);
    font-size: 1.3rem;
    font-weight: 600;
    color: var(--sage-dark);
    margin-bottom: var(--space-sm);
}

.legal-section h4 {
    font-family: var(--font-display);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--charcoal);
    margin-top: var(--space-md);
    margin-bottom: var(--space-xs);
}

.legal-section p {
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--charcoal-muted);
    margin-bottom: var(--space-sm);
}

.legal-section ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: var(--space-md);
}

.legal-section li {
    position: relative;
    padding-left: var(--space-lg);
    margin-bottom: var(--space-xs);
    font-size: 0.95rem;
    line-height: 1.7;
    color: var(--charcoal-muted);
}

.legal-section li::before {
    content: '•';
    position: absolute;
    left: var(--space-sm);
    color: var(--sage);
    font-weight: bold;
    font-size: 1.2rem;
}

.legal-section strong {
    color: var(--charcoal);
    font-weight: 600;
}

.legal-section a {
    color: var(--sage-dark);
    text-decoration: underline;
    transition: color 0.3s var(--ease-out);
}

.legal-section a:hover {
    color: var(--sage);
}

/* Mobile Responsive */
@media (max-width: 768px) {
    .legal-modal {
        padding: var(--space-sm);
    }

    .modal-container {
        max-height: 95vh;
        border-radius: var(--radius-lg);
    }

    .modal-header {
        padding: var(--space-md) var(--space-lg);
    }

    .modal-header h2 {
        font-size: 1.5rem;
    }

    .modal-content {
        padding: var(--space-lg);
    }

    .legal-section h3 {
        font-size: 1.2rem;
    }

    .legal-section h4 {
        font-size: 1rem;
    }

    .legal-section p,
    .legal-section li {
        font-size: 0.9rem;
    }
}

/* =========================================
   REVEAL ANIMATIONS
   ========================================= */
[data-reveal] {
    opacity: 0;
    transition: opacity 0.8s var(--ease-out), transform 0.8s var(--ease-out);
}

[data-reveal="fade-up"] {
    transform: translateY(40px);
}

[data-reveal="fade-down"] {
    transform: translateY(-40px);
}

[data-reveal="fade-left"] {
    transform: translateX(40px);
}

[data-reveal="fade-right"] {
    transform: translateX(-40px);
}

[data-reveal].revealed {
    opacity: 1;
    transform: translate(0, 0);
}

/* =========================================
   DYNAMIC SCROLL EFFECTS
   Performance-optimized animations
   ========================================= */

/* Parallax Layers - GPU accelerated */
[data-parallax] {
    transition: transform 0.1s linear;
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
}

/* Scroll Fade */
[data-scroll-fade] {
    transition: opacity 0.15s ease-out, transform 0.15s ease-out;
    transform: translate3d(0, 0, 0);
}

/* Horizontal Slide */
[data-scroll-slide] {
    transition: transform 0.2s cubic-bezier(0.25, 0.46, 0.45, 0.94), opacity 0.2s ease-out;
}

[data-scroll-slide="left"] {
    transform: translate3d(100px, 0, 0);
    opacity: 0;
}

[data-scroll-slide="right"] {
    transform: translate3d(-100px, 0, 0);
    opacity: 0;
}

[data-scroll-slide].scroll-active {
    transform: translate3d(0, 0, 0);
    opacity: 1;
}

/* Scale on Scroll */
[data-scroll-scale] {
    transition: transform 0.3s var(--ease-out), opacity 0.3s var(--ease-out);
}

/* Blur on Scroll - expensive, use sparingly */
[data-scroll-blur] {
    transition: filter 0.2s ease-out, opacity 0.2s ease-out;
}

/* Rotate on Scroll */
[data-scroll-rotate] {
    transition: transform 0.15s ease-out;
}

/* Split Text Animation - lettere che appaiono una per una */
.split-text {
    overflow: hidden;
}

.split-text .char {
    display: inline-block;
    opacity: 0;
    transform: translateY(100%) rotateX(-80deg);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.split-text.animate-in .char {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* Stagger children with cascade effect */
.split-text .char:nth-child(1) {
    transition-delay: 0.02s;
}

.split-text .char:nth-child(2) {
    transition-delay: 0.04s;
}

.split-text .char:nth-child(3) {
    transition-delay: 0.06s;
}

.split-text .char:nth-child(4) {
    transition-delay: 0.08s;
}

.split-text .char:nth-child(5) {
    transition-delay: 0.10s;
}

.split-text .char:nth-child(6) {
    transition-delay: 0.12s;
}

.split-text .char:nth-child(7) {
    transition-delay: 0.14s;
}

.split-text .char:nth-child(8) {
    transition-delay: 0.16s;
}

.split-text .char:nth-child(9) {
    transition-delay: 0.18s;
}

.split-text .char:nth-child(10) {
    transition-delay: 0.20s;
}

.split-text .char:nth-child(n+11) {
    transition-delay: 0.22s;
}

/* Word Wave Animation */
.word-wave .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(40px) rotateX(-15deg);
    transform-origin: center bottom;
    transition: opacity 0.6s var(--ease-bounce), transform 0.7s var(--ease-bounce);
}

.word-wave.animate-in .word {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* Stagger delays per word wave - usato con transition-delay inline */
.word-wave .title-line:nth-child(1) .word {
    transition-delay: calc(var(--i, 0) * 0.1s);
}

.word-wave .title-line:nth-child(2) .word {
    transition-delay: calc(0.3s + var(--i, 0) * 0.1s);
}

.word-wave .title-line:nth-child(3) .word {
    transition-delay: calc(0.6s + var(--i, 0) * 0.1s);
}

/* Magnetic Hover with Scroll Momentum */
.scroll-magnetic {
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Scroll Progress Elements */
[data-scroll-progress] {
    --scroll-progress: 0;
    will-change: transform, opacity, clip-path;
}

/* Clip Path Reveal */
[data-clip-reveal] {
    clip-path: inset(100% 0 0 0);
    transition: clip-path 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

[data-clip-reveal].revealed {
    clip-path: inset(0 0 0 0);
}

[data-clip-reveal="left"] {
    clip-path: inset(0 100% 0 0);
}

[data-clip-reveal="left"].revealed {
    clip-path: inset(0 0 0 0);
}

[data-clip-reveal="right"] {
    clip-path: inset(0 0 0 100%);
}

[data-clip-reveal="right"].revealed {
    clip-path: inset(0 0 0 0);
}

[data-clip-reveal="center"] {
    clip-path: inset(0 50% 0 50%);
}

[data-clip-reveal="center"].revealed {
    clip-path: inset(0 0 0 0);
}

/* Perspective Tilt on Scroll */
[data-scroll-tilt] {
    transform-style: preserve-3d;
    perspective: 1000px;
    will-change: transform;
}

[data-scroll-tilt]>* {
    transition: transform 0.3s var(--ease-out);
}

/* Stagger Grid Animation */
.stagger-grid>* {
    opacity: 0;
    transform: translateY(40px) scale(0.95);
    transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
}

.stagger-grid.animate-in>*:nth-child(1) {
    transition-delay: 0.1s;
}

.stagger-grid.animate-in>*:nth-child(2) {
    transition-delay: 0.2s;
}

.stagger-grid.animate-in>*:nth-child(3) {
    transition-delay: 0.3s;
}

.stagger-grid.animate-in>*:nth-child(4) {
    transition-delay: 0.4s;
}

.stagger-grid.animate-in>*:nth-child(5) {
    transition-delay: 0.5s;
}

.stagger-grid.animate-in>*:nth-child(6) {
    transition-delay: 0.6s;
}

.stagger-grid.animate-in>*:nth-child(n+7) {
    transition-delay: 0.7s;
}

.stagger-grid.animate-in>* {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Floating Animation on Scroll */
[data-scroll-float] {
    animation: scrollFloat 3s ease-in-out infinite paused;
}

[data-scroll-float].in-view {
    animation-play-state: running;
}

@keyframes scrollFloat {

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

    25% {
        transform: translateY(-10px) rotate(2deg);
    }

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

    75% {
        transform: translateY(-10px) rotate(-2deg);
    }
}

/* Glow Pulse on Scroll */
[data-scroll-glow] {
    position: relative;
}

[data-scroll-glow]::after {
    content: '';
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle, var(--sage-glow) 0%, transparent 70%);
    opacity: 0;
    transition: opacity 0.5s ease-out;
    pointer-events: none;
    z-index: -1;
    border-radius: inherit;
}

[data-scroll-glow].in-view::after {
    animation: glowPulse 2s ease-in-out infinite;
}

@keyframes glowPulse {

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

    50% {
        opacity: 0.6;
        transform: scale(1.05);
    }
}

/* Morph Shape on Scroll */
.scroll-morph {
    transition: border-radius 0.5s var(--ease-out);
}

.scroll-morph.morphed {
    border-radius: 50%;
}

/* Counter Scroll Animation */
[data-scroll-counter] {
    font-variant-numeric: tabular-nums;
}

/* Horizontal Marquee triggered by scroll */
.scroll-marquee {
    display: flex;
    overflow: hidden;
    white-space: nowrap;
}

.scroll-marquee-content {
    display: flex;
    animation: marqueeScroll 20s linear infinite paused;
}

.scroll-marquee.in-view .scroll-marquee-content {
    animation-play-state: running;
}

@keyframes marqueeScroll {
    0% {
        transform: translateX(0);
    }

    100% {
        transform: translateX(-50%);
    }
}

/* 3D Card Flip on Scroll */
[data-scroll-flip] {
    perspective: 1200px;
}

[data-scroll-flip] .flip-inner {
    transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    transform-style: preserve-3d;
}

[data-scroll-flip].flipped .flip-inner {
    transform: rotateY(180deg);
}

/* Elastic Bounce Entry */
[data-scroll-bounce] {
    opacity: 0;
    transform: translateY(60px) scale(0.8);
    transition: opacity 0.6s ease-out, transform 0.8s var(--ease-bounce);
}

[data-scroll-bounce].in-view {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Skew on Scroll */
[data-scroll-skew] {
    transition: transform 0.3s var(--ease-out);
}

/* Draw SVG Path on Scroll */
[data-scroll-draw] path,
[data-scroll-draw] line,
[data-scroll-draw] circle {
    stroke-dasharray: 1000;
    stroke-dashoffset: 1000;
    transition: stroke-dashoffset 1.5s ease-out;
}

[data-scroll-draw].in-view path,
[data-scroll-draw].in-view line,
[data-scroll-draw].in-view circle {
    stroke-dashoffset: 0;
}

/* Hero Section Parallax Enhancements */
.hero-content {
    position: relative;
    z-index: 2;
}

.hero .orb {
    will-change: transform;
}

/* Section divider with scroll animation */
.scroll-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sage), transparent);
    transform: scaleX(0);
    transition: transform 1s var(--ease-out);
}

.scroll-divider.in-view {
    transform: scaleX(1);
}

/* Image reveal mask */
.scroll-image-reveal {
    overflow: hidden;
    position: relative;
}

.scroll-image-reveal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--sage);
    z-index: 1;
    transform-origin: right;
    transform: scaleX(1);
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.scroll-image-reveal.revealed::before {
    transform: scaleX(0);
}

.scroll-image-reveal img {
    transform: scale(1.2);
    transition: transform 1.2s var(--ease-out);
}

.scroll-image-reveal.revealed img {
    transform: scale(1);
}

/* Text Highlight on Scroll */
[data-scroll-highlight] {
    background-image: linear-gradient(transparent 60%, var(--sage-glow) 60%);
    background-size: 0% 100%;
    background-repeat: no-repeat;
    transition: background-size 0.6s var(--ease-out);
}

[data-scroll-highlight].in-view {
    background-size: 100% 100%;
}

/* Sticky Section with Progress */
.scroll-sticky-section {
    position: relative;
}

.scroll-sticky-content {
    position: sticky;
    top: 100px;
}

/* Zoom In/Out on Scroll */
[data-scroll-zoom="in"] {
    transform: scale(0.8);
    opacity: 0.5;
    transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}

[data-scroll-zoom="in"].in-view {
    transform: scale(1);
    opacity: 1;
}

[data-scroll-zoom="out"] {
    transform: scale(1.2);
    opacity: 0.5;
    transition: transform 0.5s var(--ease-out), opacity 0.5s var(--ease-out);
}

[data-scroll-zoom="out"].in-view {
    transform: scale(1);
    opacity: 1;
}

/* Hero Title Word Wave Enhancement */
.hero-title.word-wave {
    perspective: 1000px;
}

.hero-title.word-wave .word {
    display: inline-block;
    opacity: 0;
    transform: translateY(50px) rotateX(-20deg);
    transform-origin: center bottom;
    transition:
        opacity 0.7s cubic-bezier(0.34, 1.56, 0.64, 1),
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-title.word-wave.animate-in .word {
    opacity: 1;
    transform: translateY(0) rotateX(0);
}

/* Stagger each word in hero title */
.hero-title.word-wave .title-line:nth-child(1) .word:nth-child(1) {
    transition-delay: 0.1s;
}

.hero-title.word-wave .title-line:nth-child(1) .word:nth-child(2) {
    transition-delay: 0.2s;
}

.hero-title.word-wave .title-line:nth-child(1) .word:nth-child(3) {
    transition-delay: 0.3s;
}

.hero-title.word-wave .title-line:nth-child(2) .word:nth-child(1) {
    transition-delay: 0.4s;
}

.hero-title.word-wave .title-line:nth-child(2) .word:nth-child(2) {
    transition-delay: 0.5s;
}

.hero-title.word-wave .title-line:nth-child(2) .word:nth-child(3) {
    transition-delay: 0.6s;
}

.hero-title.word-wave .title-line:nth-child(3) .word:nth-child(1) {
    transition-delay: 0.7s;
}

.hero-title.word-wave .title-line:nth-child(3) .word:nth-child(2) {
    transition-delay: 0.8s;
}

/* Stats parallax effect */
.hero-stats {
    will-change: transform, opacity;
}

/* Smooth section transitions */
section {
    will-change: transform, opacity;
}

/* Enhanced scroll image reveal */
.scroll-image-reveal {
    overflow: hidden;
    position: relative;
}

.scroll-image-reveal::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, var(--sage) 0%, var(--sage-dark) 100%);
    z-index: 2;
    transform-origin: right center;
    transform: scaleX(1);
    transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}

.scroll-image-reveal.revealed::before {
    transform: scaleX(0);
}

.scroll-image-reveal img {
    transform: scale(1.15);
    transition: transform 1.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    transition-delay: 0.2s;
}

.scroll-image-reveal.revealed img {
    transform: scale(1);
}

/* Timeline images enhancement */
.timeline-image.scroll-image-reveal::before {
    background: linear-gradient(135deg, var(--terracotta) 0%, var(--terracotta-dark) 100%);
}

/* Visual card scroll reveal refinement */
.visual-card.scroll-image-reveal::before {
    border-radius: var(--radius-lg);
}

/* Scroll bounce with subtle rotation */
[data-scroll-bounce] {
    opacity: 0;
    transform: translateY(60px) scale(0.9) rotate(-2deg);
    transition:
        opacity 0.6s ease-out,
        transform 0.8s var(--ease-bounce);
}

[data-scroll-bounce].in-view {
    opacity: 1;
    transform: translateY(0) scale(1) rotate(0deg);
}

/* Floating elements animation when in view */
[data-scroll-float] {
    transition: transform 0.3s ease-out;
}

[data-scroll-float].in-view {
    animation: gentleFloat 4s ease-in-out infinite;
}

@keyframes gentleFloat {

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

    25% {
        transform: translateY(-8px) rotate(1deg);
    }

    50% {
        transform: translateY(-15px) rotate(0deg);
    }

    75% {
        transform: translateY(-8px) rotate(-1deg);
    }
}

/* Value chips glow effect */
.value-chip[data-scroll-glow] {
    position: relative;
    overflow: visible;
}

.value-chip[data-scroll-glow]::after {
    content: '';
    position: absolute;
    inset: -10px;
    background: radial-gradient(circle, var(--sage-glow) 0%, transparent 70%);
    opacity: 0;
    border-radius: var(--radius-full);
    transition: opacity 0.4s ease-out;
    z-index: -1;
}

.value-chip[data-scroll-glow].in-view::after {
    animation: chipGlow 2.5s ease-in-out infinite;
}

@keyframes chipGlow {

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

    50% {
        opacity: 0.5;
        transform: scale(1.1);
    }
}

/* Scroll progress on sections */
.section-label .label-line {
    transform-origin: center;
    transition: transform 0.8s cubic-bezier(0.77, 0, 0.175, 1);
}

.section-header .label-line {
    transform: scaleX(0);
}

[data-reveal].revealed .label-line,
.section-header.animate-in .label-line {
    transform: scaleX(1);
}

/* Parallax elements smooth transitions */
[data-parallax] {
    transition: transform 0.15s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* Stagger grid enhanced delays */
.stagger-grid.cats-grid>*:nth-child(1) {
    transition-delay: 0.05s;
}

.stagger-grid.cats-grid>*:nth-child(2) {
    transition-delay: 0.15s;
}

.stagger-grid.cats-grid>*:nth-child(3) {
    transition-delay: 0.25s;
}

.stagger-grid.cats-grid>*:nth-child(4) {
    transition-delay: 0.35s;
}

.stagger-grid.cats-grid>*:nth-child(5) {
    transition-delay: 0.45s;
}

.stagger-grid.cats-grid>*:nth-child(6) {
    transition-delay: 0.55s;
}

.stagger-grid.donation-grid>*:nth-child(1) {
    transition-delay: 0.1s;
}

.stagger-grid.donation-grid>*:nth-child(2) {
    transition-delay: 0.2s;
}

.stagger-grid.donation-grid>*:nth-child(3) {
    transition-delay: 0.3s;
}

.stagger-grid.donation-grid>*:nth-child(4) {
    transition-delay: 0.4s;
}

.stagger-grid.donation-grid>*:nth-child(5) {
    transition-delay: 0.5s;
}

/* Values row stagger */
.stagger-grid.values-row>*:nth-child(1) {
    transition-delay: 0.1s;
}

.stagger-grid.values-row>*:nth-child(2) {
    transition-delay: 0.2s;
}

.stagger-grid.values-row>*:nth-child(3) {
    transition-delay: 0.3s;
}

.stagger-grid.values-row>*:nth-child(4) {
    transition-delay: 0.4s;
}

/* Hero stats stagger */
.stagger-grid.hero-stats>.stat:nth-child(1) {
    transition-delay: 0.1s;
}

.stagger-grid.hero-stats>.stat-divider:nth-child(2) {
    transition-delay: 0.2s;
}

.stagger-grid.hero-stats>.stat:nth-child(3) {
    transition-delay: 0.3s;
}

.stagger-grid.hero-stats>.stat-divider:nth-child(4) {
    transition-delay: 0.4s;
}

.stagger-grid.hero-stats>.stat:nth-child(5) {
    transition-delay: 0.5s;
}

/* Cat cards scroll animation enhancement */
.stagger-grid.cats-grid .cat-card {
    opacity: 0;
    transform: translateY(60px) scale(0.95) perspective(1000px) rotateX(5deg);
    transition:
        opacity 0.7s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stagger-grid.cats-grid.animate-in .cat-card {
    opacity: 1;
    transform: translateY(0) scale(1) perspective(1000px) rotateX(0);
}

/* Donation cards scroll animation */
.stagger-grid.donation-grid .donation-card {
    opacity: 0;
    transform: translateY(50px) scale(0.95);
    transition:
        opacity 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94),
        transform 0.7s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.stagger-grid.donation-grid.animate-in .donation-card {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* Timeline items enhanced animation */
.timeline-item {
    opacity: 0;
    transition: opacity 0.8s ease-out, transform 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.timeline-item[data-reveal="fade-right"] {
    transform: translateX(-60px) rotate(-2deg);
}

.timeline-item[data-reveal="fade-left"] {
    transform: translateX(60px) rotate(2deg);
}

.timeline-item.revealed {
    opacity: 1;
    transform: translateX(0) rotate(0);
}

/* Transparency box glow animation */
.transparency-box {
    position: relative;
}

.transparency-box .box-glow {
    position: absolute;
    inset: -20px;
    background: radial-gradient(circle at center, var(--sage-glow) 0%, transparent 70%);
    opacity: 0;
    border-radius: var(--radius-lg);
    z-index: -1;
    animation: none;
    transition: opacity 0.5s ease-out;
}

.transparency-box:hover .box-glow {
    opacity: 0.4;
}

/* Scroll-triggered counter number pop */
.stat-number {
    display: inline-block;
    transition: transform 0.3s var(--ease-bounce);
}

.stat.revealed .stat-number {
    animation: numberPop 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes numberPop {
    0% {
        transform: scale(0.5);
        opacity: 0;
    }

    50% {
        transform: scale(1.2);
    }

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

/* Disable parallax on mobile for performance */
@media (max-width: 768px) {
    [data-parallax] {
        transform: none !important;
    }

    .hero-content,
    .hero-badge,
    .hero-title,
    .hero-subtitle,
    .hero-actions,
    .hero-stats,
    .hero-scroll {
        transform: none !important;
    }

    .orb {
        transform: none !important;
    }

    /* Simplified animations on mobile */
    .stagger-grid.cats-grid .cat-card,
    .stagger-grid.donation-grid .donation-card {
        transform: translateY(30px);
    }

    .stagger-grid.cats-grid.animate-in .cat-card,
    .stagger-grid.donation-grid.animate-in .donation-card {
        transform: translateY(0);
    }

    /* Disable 3D transforms on mobile */
    .hero-title.word-wave .word {
        transform: translateY(30px);
    }

    .hero-title.word-wave.animate-in .word {
        transform: translateY(0);
    }
}

/* =========================================
   ACCESSIBILITY
   ========================================= */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }

    html {
        scroll-behavior: auto;
    }
}

:focus-visible {
    outline: 3px solid var(--sage);
    outline-offset: 3px;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* =========================================
   PERFORMANCE & MOBILE OPTIMIZATIONS
   ========================================= */

/* Touch optimization for mobile */
@media (hover: none) and (pointer: coarse) {

    /* Larger touch targets */
    .nav-link,
    .legal-link,
    .btn-primary,
    .btn-secondary,
    .btn-outline,
    .donation-card,
    .cat-card {
        min-height: 44px;
        min-width: 44px;
    }

    /* Remove hover effects on touch devices */
    *:hover {
        transition-duration: 0s;
    }

    /* Optimize animations */
    * {
        animation-duration: 0.5s !important;
    }
}

/* Tablet breakpoint (601px - 899px) */
@media (min-width: 601px) and (max-width: 899px) {
    .hero-title {
        font-size: 2.5rem;
    }

    .donation-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .cats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .nav-links {
        gap: var(--space-md);
    }
}

/* Small mobile (max 375px) */
@media (max-width: 375px) {
    :root {
        --space-xl: 3rem;
        --space-2xl: 4rem;
        --space-3xl: 6rem;
    }

    .hero-title {
        font-size: 1.75rem;
    }

    .section-title {
        font-size: 1.75rem;
    }

    .nav-logo .logo-text-main {
        font-size: 1rem;
    }

    .donation-grid,
    .cats-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    /* Mobile menu optimization for very small screens */
    .mobile-link {
        font-size: 1.75rem;
        padding: var(--space-xs) var(--space-sm);
    }

    .mobile-menu-content {
        padding: var(--space-lg) var(--space-md);
        gap: var(--space-sm);
    }
}

/* Landscape mobile optimization */
@media (max-height: 500px) and (orientation: landscape) {
    .hero {
        min-height: auto;
        padding: var(--space-xl) var(--space-md);
    }

    .hero-scroll {
        display: none;
    }

    .mobile-menu-content {
        flex-direction: row;
        flex-wrap: wrap;
        gap: var(--space-md);
        padding: var(--space-md);
        overflow-y: auto;
    }

    .mobile-link {
        font-size: 1.5rem;
        padding: var(--space-xs) var(--space-sm);
        white-space: nowrap;
    }

    .mobile-social {
        width: 100%;
        justify-content: center;
        margin-top: var(--space-sm);
    }
}

/* High DPI screens */
@media (-webkit-min-device-pixel-ratio: 2),
(min-resolution: 192dpi) {
    img {
        image-rendering: -webkit-optimize-contrast;
        image-rendering: crisp-edges;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    /* Add dark mode variables if needed */
    /* Currently maintaining light theme always */
}

/* Performance: Reduce motion for accessibility */
@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }

    .cursor,
    .cursor-trail,
    .paw-particles,
    .falling-leaves {
        display: none !important;
    }
}

/* Print styles */
@media print {

    .nav,
    .mobile-menu,
    .cursor,
    .cursor-trail,
    .atmosphere,
    .scroll-progress,
    .hero-scroll,
    .modal-overlay {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    a[href]::after {
        content: ' (' attr(href) ')';
    }
}

/* Connection-aware loading */
@media (prefers-reduced-data: reduce) {

    /* Disable background images and decorations on slow connections */
    .hero-bg,
    .section-bg,
    .bg-shape,
    .hero-orbs,
    .hero-decor,
    .storie-decor {
        display: none;
    }

    /* Disable animations */
    * {
        animation: none !important;
        transition: none !important;
    }
}

/* Forced colors mode (high contrast) */
@media (forced-colors: active) {
    * {
        forced-color-adjust: auto;
    }

    .btn-primary,
    .btn-secondary,
    .donation-card,
    .cat-card {
        border: 2px solid;
    }
}

/* GPU acceleration for smooth scrolling */
.hero,
.chi-siamo,
.ospiti,
.storie,
.sostieni {
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
}

/* Contain paint for better performance */
.cat-card,
.donation-card,
.modal-container {
    contain: layout paint;
}

/* Optimize font rendering */
body {
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    font-feature-settings: 'kern' 1, 'liga' 1;
}

/* Prevent text overflow on all devices */
h1,
h2,
h3,
h4,
h5,
h6,
p,
li,
span,
a {
    word-wrap: break-word;
    overflow-wrap: break-word;
    hyphens: none;
    -webkit-hyphens: none;
}

/* Smooth scrolling optimization */
html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* Loading skeleton for images */
@supports (aspect-ratio: 1) {
    img[loading='lazy'] {
        aspect-ratio: 1;
    }
}


/* Additional responsive optimizations for grid layouts */
@media (max-width: 768px) {

    /* Optimize card layouts for mobile */
    .cat-card,
    .donation-card {
        transform: none !important;
    }

    /* Disable complex animations on mobile for performance */
    .card-glow,
    .box-glow,
    .visual-float {
        display: none;
    }

    /* Simplify navigation on mobile */
    .nav-logo .logo-svg {
        width: 36px;
        height: 36px;
    }

    /* Better mobile menu - Fixed layout issues */
    .mobile-menu-content {
        padding: var(--space-xl) var(--space-lg);
        gap: var(--space-md);
        width: 100%;
        max-width: 100vw;
        box-sizing: border-box;
    }

    .mobile-link {
        font-size: 2rem;
        padding: var(--space-sm) var(--space-md);
        line-height: 1.3;
        text-align: center;
        width: 100%;
        max-width: 90vw;
        white-space: nowrap;
        overflow: visible;
        word-wrap: normal;
    }

    .mobile-cta {
        white-space: nowrap;
        padding: var(--space-sm) var(--space-lg) !important;
    }

    /* Optimize timeline for mobile */
    .timeline-line {
        left: 20px;
    }

    .timeline-marker {
        left: 0;
    }

    /* Footer optimization */
    .footer-links {
        flex-direction: column;
        gap: var(--space-lg);
    }

    /* Modal optimization for small screens */
    .modal-container {
        margin: var(--space-sm);
        max-height: calc(100vh - var(--space-md) * 2);
    }
}

/* Medium devices (tablets) */
@media (min-width: 769px) and (max-width: 1024px) {
    .container {
        max-width: 90%;
    }

    .hero-title {
        font-size: 3rem;
    }

    .cats-grid,
    .donation-grid {
        gap: var(--space-lg);
    }
}

/* Large devices optimization */
@media (min-width: 1441px) {
    .container {
        max-width: 1400px;
    }

    .hero-title {
        font-size: 4rem;
    }
}

/* Ultra-wide screens */
@media (min-width: 1920px) {
    :root {
        font-size: 18px;
    }

    .container {
        max-width: 1600px;
    }
}

/* Optimize for foldable devices */
@media (min-width: 600px) and (max-width: 900px) and (orientation: portrait) {
    .donation-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }

    .cats-grid {
        grid-template-columns: 1fr;
        max-width: 500px;
        margin: 0 auto;
    }
}

/* =========================================
   MOBILE ANIMATION OPTIMIZATION
   Slower, smoother animations for mobile devices
   ========================================= */
@media (max-width: 768px) {

    /* Slow down all background particle animations (2-3x slower) */
    .leaf-particle {
        animation-duration: 45s !important;
        /* Was 15-25s, now 45s */
    }

    .paw-particle {
        animation-duration: 36s !important;
        /* Was 12-20s, now 36s */
    }

    /* Slow down floating leaves */
    .floating-leaf {
        animation-duration: 50s !important;
        /* Was 20-25s, now 50s */
    }

    .leaf-1 {
        animation-duration: 55s !important;
    }

    .leaf-2 {
        animation-duration: 50s !important;
    }

    .leaf-3 {
        animation-duration: 52s !important;
    }

    /* Slow down light rays pulse */
    .light-rays {
        animation-duration: 18s !important;
        /* Was 8s, now 18s */
    }

    /* Slow down background drift pattern */
    .chi-siamo::before {
        animation-duration: 120s !important;
        /* Was 60s, now 120s */
    }

    /* Slow down paw float */
    .ospiti::before {
        animation-duration: 80s !important;
        /* Was 40s, now 80s */
    }

    /* Slow down morph blob */
    .ospiti::after {
        animation-duration: 45s !important;
        /* Was 20s, now 45s */
    }

    /* Slow down cat sway */
    .storie::after {
        animation-duration: 18s !important;
        /* Was 8s, now 18s */
    }

    /* Slow down blob drift animations */
    .storie-blob-1 {
        animation-duration: 55s !important;
        /* Was 25s, now 55s */
    }

    .storie-blob-2 {
        animation-duration: 65s !important;
        /* Was 30s, now 65s */
    }

    /* Slow down cat sway reverse */
    .storie-cat-left {
        animation-duration: 20s !important;
        /* Was 9s, now 20s */
    }

    /* Slow down float animation for visual elements */
    .visual-float-1,
    .visual-float-2 {
        animation-duration: 14s !important;
        /* Was 6s, now 14s */
    }

    /* Slow down orb float */
    [class*="hero-orb"] {
        animation-duration: 45s !important;
        /* Was 20s, now 45s */
    }

    /* Reduce blur intensity on mobile for better performance */
    .bg-shape,
    .storie-blob,
    .ospiti::after {
        filter: blur(60px) !important;
        /* Reduced from 100px/50px/40px */
    }

    /* Optimize scroll wheel animation */
    .scroll-indicator {
        animation-duration: 4s !important;
        /* Was 2s, now 4s */
    }

    /* Slow down badge pulse */
    .badge-dot {
        animation-duration: 3.5s !important;
        /* Was 2s, now 3.5s */
    }

    /* Slow down cat ear twitch animations in logo */
    .logo-svg .logo-ear-left,
    .logo-svg .logo-ear-right {
        animation-duration: 6s !important;
        /* Was 2.5s, now 6s */
    }

    /* Reduce particle opacity for subtler effect */
    .leaf-particle,
    .paw-particle {
        opacity: 0.08 !important;
        /* Reduced from 0.15 */
    }
}

/* Extra optimization for very small screens */
@media (max-width: 480px) {

    /* Further reduce blur for performance */
    .bg-shape,
    .storie-blob,
    .ospiti::after,
    .chi-siamo::before {
        filter: blur(40px) !important;
    }

    /* Hide some decorative elements on very small screens */
    .storie-cat-left,
    .visual-float-2 {
        display: none;
    }

    /* Further reduce particle opacity */
    .leaf-particle,
    .paw-particle {
        opacity: 0.05 !important;
    }
}

/* =========================================
   SOCIAL BUTTONS
   ========================================= */
.cats-social-links {
    display: flex;
    gap: var(--space-md);
    justify-content: center;
    flex-wrap: wrap;
    margin-top: var(--space-sm);
}

.btn-social-small {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid var(--terracotta);
    color: var(--terracotta);
    border-radius: var(--radius-full);
    font-weight: 600;
    font-size: 0.9rem;
    transition: all 0.3s var(--ease-out);
    text-decoration: none;
}

.btn-social-small:hover {
    background: var(--terracotta);
    color: var(--warm-white);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.btn-social-small svg {
    width: 20px;
    height: 20px;
}

/* =========================================
   ADOPTION MODAL
   ========================================= */
.adoption-container {
    max-width: 500px;
    background: linear-gradient(135deg, #FFF9F6 0%, #FFF 100%);
    border: 1px solid rgba(255, 107, 53, 0.1);
}

.adoption-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding-bottom: var(--space-2xl);
}

.adoption-links {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    width: 100%;
    max-width: 350px;
}

.btn-adoption {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-lg);
    text-decoration: none;
    transition: all 0.3s var(--ease-out);
    border: 1px solid transparent;
}

.btn-adoption svg {
    width: 24px;
    height: 24px;
    flex-shrink: 0;
}

.btn-adoption strong {
    font-size: 1.1rem;
    flex-grow: 1;
    text-align: left;
}

.btn-adoption span {
    font-size: 0.85rem;
    opacity: 0.8;
}

/* Instagram */
.btn-instagram {
    background: linear-gradient(45deg, #f09433 0%, #e6683c 25%, #dc2743 50%, #cc2366 75%, #bc1888 100%);
    color: white;
    box-shadow: 0 4px 15px rgba(220, 39, 67, 0.25);
}

.btn-instagram:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(220, 39, 67, 0.35);
}

/* Facebook */
.btn-facebook {
    background: #1877F2;
    color: white;
    box-shadow: 0 4px 15px rgba(24, 119, 242, 0.25);
}

.btn-facebook:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px rgba(24, 119, 242, 0.35);
}

/* Email */
.btn-email {
    background: white;
    color: var(--charcoal);
    border-color: var(--terracotta-light);
    box-shadow: var(--shadow-sm);
}

.btn-email:hover {
    background: var(--terracotta-light);
    transform: translateY(-3px);
}

/* Charlotte Image Position Adjustment */
.cats-grid .cat-card:first-child .cat-photo {
    object-position: center 45%;
}

/* =========================================
   PERFORMANCE OPTIMIZATIONS
   Ultra-fast loading for all devices
   ========================================= */

/* GPU Acceleration for animated elements */
.hero-content,
.cat-card,
.donation-card,
.timeline-item,
.visual-card,
[data-reveal],
[data-parallax] {
    transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
}


/* Font display swap for faster text rendering */
@font-face {
    font-display: swap;
}

/* Reduce motion for battery saver / slow devices */
@media (prefers-reduced-motion: reduce),
(update: slow) {

    *,
    *::before,
    *::after {
        animation-duration: 0.001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.001ms !important;
        scroll-behavior: auto !important;
    }

    [data-parallax],
    [data-scroll-float],
    [data-scroll-glow],
    .orb,
    .paw-particle,
    .leaf-particle,
    .floating-leaf {
        animation: none !important;
        transform: none !important;
    }

    .scroll-image-reveal::before {
        display: none;
    }
}

/* Data saver mode - minimal animations */
@media (prefers-reduced-data: reduce) {

    .hero-orbs,
    .paw-particles,
    .falling-leaves,
    .atmosphere,
    .chi-siamo-leaves,
    .storie-decor {
        display: none !important;
    }

    .hero-bg {
        background: var(--cream);
    }
}

/* Low-end devices: simplified experience */
@media (max-width: 768px) and (hover: none) {

    /* Disable complex blur effects */
    .nav {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(253, 251, 247, 0.98) !important;
    }

    /* Simplify shadows */
    .cat-card,
    .donation-card,
    .visual-card {
        box-shadow: var(--shadow-sm);
    }

    /* Disable floating animations */
    .floating-leaf,
    .paw-particle,
    .leaf-particle {
        display: none;
    }

    /* Simpler transforms */
    [data-reveal] {
        transform: translateY(20px);
    }

    [data-reveal].revealed {
        transform: translateY(0);
    }

    /* Reduce particles */
    .hero-orbs .orb {
        display: none;
    }

    .hero-orbs .orb:first-child {
        display: block;
        opacity: 0.2;
    }
}

/* Very small screens optimization */
@media (max-width: 375px) {

    /* Reduce spacing */
    :root {
        --space-lg: 2rem;
        --space-xl: 3rem;
        --space-2xl: 4rem;
        --space-3xl: 5rem;
    }

    /* Disable all decorative elements */
    .bg-shape,
    .bg-glow,
    .storie-blob,
    .hero-decor {
        display: none;
    }

    /* Simplify cards */
    .card-glow {
        display: none;
    }
}

/* High contrast mode support */
@media (prefers-contrast: high) {
    :root {
        --sage: #4A5A3E;
        --terracotta: #A65E42;
        --charcoal: #000000;
    }

    .nav-link,
    .btn-primary,
    .btn-secondary {
        border: 2px solid currentColor;
    }
}

/* Print optimization */
@media print {

    .nav,
    .cursor,
    .scroll-progress,
    .atmosphere,
    .hero-scroll,
    .paw-particles,
    .preloader,
    .mobile-menu,
    .hero-decor,
    .storie-decor,
    .bg-shape,
    .bg-glow {
        display: none !important;
    }

    body {
        background: white;
        color: black;
    }

    section {
        page-break-inside: avoid;
    }

    .cat-card,
    .donation-card {
        break-inside: avoid;
        box-shadow: none;
        border: 1px solid #ccc;
    }
}

/* Disable animations when page not visible (battery saving) */
.page-hidden *,
.page-hidden *::before,
.page-hidden *::after {
    animation-play-state: paused !important;
}

/* Image optimization hints */
img[loading="lazy"] {
    /* Smooth loading transition */
    transition: opacity 0.3s ease-out;
}

/* Efficient scrollbar */
::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

::-webkit-scrollbar-track {
    background: var(--sand-light);
}

::-webkit-scrollbar-thumb {
    background: var(--sage-light);
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--sage);
}

/* Firefox scrollbar */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--sage-light) var(--sand-light);
}

/* Force hardware acceleration only when animating */
.animating {
    will-change: transform, opacity;
}

/* Remove will-change after animation completes */
.animation-complete {
    will-change: auto;
}

/* Specific fix for Charlotte's photo on mobile */
@media (max-width: 768px) {
    .cat-photo-charlotte {
        /* Scale up to allow shifting if width fits exactly */
        transform: scale(1.15) translateX(-10px);
        object-position: center !important;
    }
}