/*
 * Les mots naissent et meurent - Yona Labadie-Fausel
 * Alternative Design Theme (Test/Smokescreen)
 * Inspired by "Modèle communiqué.jpg" - Beige/Cream Palette
 */

/* Root Variables - Creamy Beige/Cream Theme */
:root {
    --color-bg-light: #F9F6F1;
    --color-bg-lighter: #FBF9F6;
    --color-text-dark: #3A3530;
    --color-text-secondary: #7A7470;
    --color-accent-gray: #C5BBB0;
    --color-botanical: #A89E92;
    --color-border-light: #EDE5DC;
    --color-botanical-light: #D4C9BC;
    --font-serif: 'Playfair Display', 'Lora', serif;
    --font-sans: 'Montserrat', 'Inter', sans-serif;
}

/* Global Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: var(--font-sans);
    background-color: var(--color-bg-light);
    color: var(--color-text-dark);
    line-height: 1.6;
    overflow-x: hidden;
    position: relative;
}

/* Rain Canvas Background - Botanical Soft Elements */
#rain-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 0;
    pointer-events: none;
    opacity: 0.08;
    display: none; /* Hide rain effect for light theme */
}

/* Ensure all content is above the canvas */
header, main, footer {
    position: relative;
    z-index: 1;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-serif);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-text-dark);
}

p {
    margin-bottom: 1rem;
    color: var(--color-text-secondary);
}

a {
    color: var(--color-botanical);
    text-decoration: none;
    transition: color 0.3s ease;
}

a:hover {
    color: var(--color-text-dark);
}

/* Header Styles */
header {
    transition: all 0.3s ease;
    background-color: rgba(245, 245, 240, 0.95) !important;
    border-bottom: 1px solid var(--color-border-light);
}

header.scrolled {
    background-color: rgba(245, 245, 240, 0.98) !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
}

header .text-gray-200,
header .text-gray-300,
header .text-white {
    color: var(--color-text-dark) !important;
}

header a {
    color: var(--color-text-dark) !important;
}

header a:hover {
    color: var(--color-botanical) !important;
}

header .hover\:text-red-700:hover {
    color: var(--color-botanical) !important;
}

/* Hero Section */
.hero-bg {
    background: linear-gradient(135deg, #FAFAF8 0%, #F5F5F0 50%, #F0EEE8 100%) !important;
    position: relative;
    color: var(--color-text-dark) !important;
}

.hero-bg::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(circle at 20% 50%, rgba(156, 168, 159, 0.05) 0%, transparent 50%),
        radial-gradient(circle at 80% 50%, rgba(156, 168, 159, 0.05) 0%, transparent 50%);
    animation: pulse-subtle 8s ease-in-out infinite;
}

@keyframes pulse-subtle {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}

.hero-bg .text-white,
.hero-bg .text-gray-400 {
    color: var(--color-text-dark) !important;
}

.hero-bg .text-gray-400 {
    color: var(--color-text-secondary) !important;
}

/* Background color overrides for sections */
.bg-black {
    background-color: var(--color-bg-light) !important;
}

.bg-zinc-900,
.bg-gray-900 {
    background-color: var(--color-bg-lighter) !important;
    border-color: var(--color-border-light) !important;
}

.bg-gradient-to-r,
.bg-gradient-to-b {
    background: linear-gradient(135deg, rgba(245, 245, 240, 0.8) 0%, rgba(218, 214, 207, 0.8) 100%) !important;
}

/* Text color overrides */
.text-white,
.text-gray-200,
.text-gray-300 {
    color: var(--color-text-dark) !important;
}

.text-gray-400,
.text-gray-500 {
    color: var(--color-text-secondary) !important;
}

.text-zinc-600,
.text-gray-600 {
    color: var(--color-text-secondary) !important;
}

.placeholder-zinc-600::placeholder,
.placeholder-gray-600::placeholder {
    color: var(--color-accent-gray) !important;
    opacity: 1;
}

/* Border colors */
.border-zinc-700,
.border-zinc-800,
.border-gray-700,
.border-red-700 {
    border-color: var(--color-border-light) !important;
}

.border-red-900 {
    border-color: var(--color-botanical) !important;
}

/* Input/Textarea styles */
input,
textarea,
select {
    background-color: white !important;
    border-color: var(--color-border-light) !important;
    color: var(--color-text-dark) !important;
}

input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-botanical) !important;
    box-shadow: 0 0 0 3px rgba(156, 168, 159, 0.1) !important;
}

/* Button styles */
.bg-red-900,
.bg-red-800 {
    background-color: var(--color-botanical) !important;
    color: white !important;
}

.bg-red-900:hover,
.bg-red-800:hover {
    background-color: #8B9A90 !important;
}

.hover\:bg-red-800:hover {
    background-color: #8B9A90 !important;
}

/* Card/Box styles */
.bg-black.p-8,
.bg-zinc-900.p-8,
.bg-gray-900.p-8 {
    background-color: white !important;
    border-color: var(--color-border-light) !important;
}

/* Flicker animation - adjust for light theme */
.flicker-word {
    animation: flicker-subtle 2s ease-in-out infinite;
    color: var(--color-botanical);
}

@keyframes flicker-subtle {
    0%, 100% { opacity: 0.8; }
    50% { opacity: 1; }
}

/* Typography animation */
.typing-animation {
    border-right: 3px solid var(--color-botanical);
    animation: blink-cursor 0.7s infinite;
}

@keyframes blink-cursor {
    0%, 50% { border-color: var(--color-botanical); }
    51%, 100% { border-color: transparent; }
}

/* Scroll animation classes */
.scroll-fade-in {
    opacity: 0;
    animation: fadeInUp 0.6s ease forwards;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Mobile Menu */
#mobile-menu {
    background-color: var(--color-bg-light) !important;
    border-top: 1px solid var(--color-border-light);
}

#mobile-menu a:hover {
    background-color: rgba(156, 168, 159, 0.1) !important;
}

/* Footer */
footer {
    background-color: var(--color-bg-lighter) !important;
    border-top: 1px solid var(--color-border-light);
    color: var(--color-text-secondary) !important;
}

footer a {
    color: var(--color-botanical) !important;
}

footer a:hover {
    color: var(--color-text-dark) !important;
}

/* Status badges */
.status-badge {
    background-color: rgba(156, 168, 159, 0.1);
    color: var(--color-botanical);
}

/* Shadows - softer for light theme */
.shadow-lg {
    box-shadow: 0 10px 15px rgba(0, 0, 0, 0.08) !important;
}

.shadow-xl {
    box-shadow: 0 20px 25px rgba(0, 0, 0, 0.1) !important;
}

.shadow-2xl {
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.08) !important;
}

/* Gradients */
.bg-gradient-to-b {
    background: linear-gradient(to bottom, rgba(245, 245, 240, 0.5) 0%, rgba(218, 214, 207, 0.5) 100%) !important;
}

/* Botanical decorative elements */
.botanical-accent::before,
.botanical-accent::after {
    color: var(--color-botanical);
    opacity: 0.3;
}

/* Focus states */
:focus-visible {
    outline-color: var(--color-botanical) !important;
}

.focus\:ring-red-800:focus {
    --tw-ring-color: var(--color-botanical) !important;
}

.focus\:ring-2:focus {
    --tw-ring-offset-color: var(--color-bg-light) !important;
}

/* Hover states for links */
.hover\:text-red-700:hover {
    color: var(--color-botanical) !important;
}

.hover\:bg-red-800:hover {
    background-color: #8B9A90 !important;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    body {
        font-size: 16px;
    }

    h1, h2, h3 {
        line-height: 1.3;
    }
}

/* Print styles */
@media print {
    body {
        background-color: white;
    }

    .no-print {
        display: none;
    }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

/* ====================================
   BOTANICAL ANIMATIONS - Cute & Grief
   ==================================== */

/* Botanical leaf floating animation */
@keyframes float-leaf {
    0%, 100% { transform: translateY(0px) rotate(0deg); opacity: 0; }
    10% { opacity: 0.6; }
    50% { transform: translateY(-30px) rotate(10deg); }
    90% { opacity: 0.6; }
    100% { transform: translateY(0px) rotate(0deg); opacity: 0; }
}

/* Gentle sway animation */
@keyframes gentle-sway {
    0%, 100% { transform: translateX(0px) rotate(0deg); }
    25% { transform: translateX(-8px) rotate(-2deg); }
    75% { transform: translateX(8px) rotate(2deg); }
}

/* Soft fade in and out */
@keyframes fade-breathe {
    0%, 100% { opacity: 0.3; }
    50% { opacity: 0.7; }
}

/* Slow spiral float */
@keyframes spiral-float {
    0% { transform: translateY(0) translateX(0) rotate(0deg); opacity: 0; }
    10% { opacity: 0.5; }
    50% { transform: translateY(-40px) translateX(15px) rotate(180deg); opacity: 0.7; }
    90% { opacity: 0.5; }
    100% { transform: translateY(0) translateX(0) rotate(360deg); opacity: 0; }
}

/* Botanical leaf particles for hero section */
.botanical-particle-hero {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    width: 40px;
    height: 40px;
    animation: float-leaf 6s ease-in-out infinite;
}

/* Botanical leaf particles for sections */
.botanical-particle {
    position: absolute;
    pointer-events: none;
    opacity: 0;
    width: 32px;
    height: 32px;
    animation: gentle-sway 4s ease-in-out infinite;
}

/* Book section - slower, melancholic animation */
#livre {
    position: relative;
}

#livre .botanical-particle {
    animation: fade-breathe 5s ease-in-out infinite;
    width: 30px;
    height: 30px;
}

/* Extraits section - contemplative float */
#extraits {
    position: relative;
}

#extraits .botanical-particle {
    animation: spiral-float 7s ease-in-out infinite;
    opacity: 0.4;
}

/* Wall section - graceful upward movement */
#wall {
    position: relative;
}

#wall .botanical-particle {
    animation: float-leaf 5s ease-in-out infinite;
}

/* Blog section - gentle dance */
#blog {
    position: relative;
}

#blog .botanical-particle {
    animation: gentle-sway 4.5s ease-in-out infinite;
    animation-delay: var(--delay, 0s);
}

/* Author section - tender movements */
#auteure {
    position: relative;
}

#auteure .botanical-particle {
    animation: fade-breathe 6s ease-in-out infinite;
    width: 36px;
    height: 36px;
}

/* Botanical background decoration for hero */
.hero-bg::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background:
        radial-gradient(ellipse at 10% 20%, var(--color-botanical-light) 0%, transparent 25%),
        radial-gradient(ellipse at 90% 30%, var(--color-botanical-light) 0%, transparent 25%),
        radial-gradient(ellipse at 50% 90%, var(--color-botanical) 0%, transparent 30%);
    opacity: 0.05;
    animation: fade-breathe 8s ease-in-out infinite;
    pointer-events: none;
}

/* Section-specific background animations */
#livre::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, var(--color-botanical) 0%, transparent 40%);
    opacity: 0.03;
    animation: fade-breathe 6s ease-in-out infinite;
    pointer-events: none;
}

#extraits::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, transparent 0%, var(--color-botanical-light) 50%, transparent 100%);
    opacity: 0.03;
    animation: gentle-sway 7s ease-in-out infinite;
    pointer-events: none;
}

#wall::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(ellipse 60% 100% at 50% 0%, var(--color-botanical-light) 0%, transparent 50%);
    opacity: 0.04;
    animation: fade-breathe 5s ease-in-out infinite;
    pointer-events: none;
}

#blog::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: conic-gradient(from 0deg, var(--color-botanical-light), transparent, var(--color-botanical-light));
    opacity: 0.02;
    animation: gentle-sway 8s ease-in-out infinite;
    pointer-events: none;
}

#auteure::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 50% 50%, var(--color-botanical) 0%, transparent 50%);
    opacity: 0.04;
    animation: fade-breathe 7s ease-in-out infinite;
    pointer-events: none;
}

/* ====================================
   ANIMATED BOTANICAL LEAF SVG
   ==================================== */

/* Create animated leaf element using ::before pseudo-element */
.botanical-leaf {
    position: absolute;
    width: 32px;
    height: 32px;
    pointer-events: none;
}

.botanical-leaf::before {
    content: '';
    position: absolute;
    width: 100%;
    height: 100%;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="%23A89E92" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M12 2C12 2 8 6 8 12c0 4.418 2.686 8 4 8s4-3.582 4-8c0-6 -4-10 -4-10Z" fill="%23A89E92" opacity="0.7"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    animation: float-leaf 6s ease-in-out infinite;
    opacity: 0.6;
}

.botanical-particle:not(.botanical-particle-hero) {
    font-size: 0 !important; /* Hide emoji text */
}

/* Override botanical particles with SVG leaves */
.botanical-particle::before {
    content: '';
    position: absolute;
    width: 24px;
    height: 24px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23D4C9BC"><path d="M12 2C12 2 8 6 8 12c0 4.418 2.686 8 4 8s4-3.582 4-8c0-6 -4-10 -4-10Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    opacity: 0.6;
    left: 0;
    top: 0;
}

/* Botanical particle hero section leaves */
.botanical-particle-hero::before {
    content: '';
    position: absolute;
    width: 28px;
    height: 28px;
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%23D4C9BC"><path d="M12 2C12 2 8 6 8 12c0 4.418 2.686 8 4 8s4-3.582 4-8c0-6 -4-10 -4-10Z"/></svg>');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    left: 0;
    top: 0;
}