/**
 * Flavor Welcome - Pantalla de bienvenida
 *
 * Lógica de colores automática:
 * - Tema CLARO: usa --color-text-body (oscuro sobre papel beige)
 * - Tema OSCURO: usa --color-bg-primary (el fondo oscuro del tema)
 * - El papel siempre es beige claro, necesitamos colores oscuros encima
 *
 * Usa la clase .theme-dark en body (añadida por NUO Demo Tools y Flavour Chromas)
 */

/* ========================================
   CSS Variables - Por defecto: tema CLARO
   Usa --color-text-body para todo (color oscuro sobre papel beige)
   ======================================== */
.flavor-welcome {
    --welcome-content-color: var(--color-text-body, #4A4A4A);
    --welcome-text-heading: var(--welcome-content-color);
    --welcome-text-body: var(--welcome-content-color);
    --welcome-text-muted: var(--welcome-content-color);
    --welcome-btn-color: var(--welcome-content-color);
}

/* ========================================
   Tema OSCURO - Usa --color-bg-primary (el fondo oscuro)
   ======================================== */
.theme-dark .flavor-welcome,
body.theme-dark .flavor-welcome {
    --welcome-content-color: var(--color-bg-primary, #1A2A3A);
}

/* ========================================
   Base
   ======================================== */

.flavor-welcome {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
}

.flavor-welcome.is-hidden {
    display: none;
}

/* Backdrop - usa color del tema */
.flavor-welcome__backdrop {
    position: absolute;
    inset: 0;
    background-color: var(--welcome-backdrop, var(--color-bg-primary, #f8f4eb));
    opacity: 1;
    transition: opacity 1.5s ease 0.3s;
}

/* Textura opcional del backdrop - controlada por CSS variable del tema */
.flavor-welcome__backdrop::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image: var(--welcome-backdrop-texture, none);
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: var(--welcome-backdrop-texture-opacity, 0.3);
    pointer-events: none;
}

.flavor-welcome.is-closing .flavor-welcome__backdrop {
    opacity: 0;
}

/* Scroll container - efecto desenrollado */
.flavor-welcome__scroll {
    position: relative;
    z-index: 1;
    min-width: 500px;
    max-width: 500px;
    width: 100%;
    transform: scaleY(0);
    transform-origin: center top;
    animation: unroll 1.2s cubic-bezier(0.34, 1.15, 0.64, 1) 0.3s forwards;
    /* Sombra con drop-shadow para que respete el clip-path */
    filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.08))
            drop-shadow(0 12px 24px rgba(0, 0, 0, 0.1))
            drop-shadow(0 24px 48px rgba(0, 0, 0, 0.06));
}

@keyframes unroll {
    0% {
        transform: scaleY(0);
        opacity: 0;
    }
    30% {
        opacity: 1;
    }
    100% {
        transform: scaleY(1);
        opacity: 1;
    }
}

.flavor-welcome.is-closing .flavor-welcome__scroll {
    animation: rollUp 0.5s cubic-bezier(0.36, 0, 0.66, -0.56) forwards;
}

@keyframes rollUp {
    0% {
        transform: scaleY(1) translateY(0);
        opacity: 1;
    }
    100% {
        transform: scaleY(0) translateY(-50px);
        opacity: 0;
    }
}

/* Paper con textura */
.flavor-welcome__paper {
    background: var(--welcome-paper-bg, #efe7d8);
    padding: 3rem 2rem;
    position: relative;
    /* Máscara con bordes rasgados naturales - ondulaciones suaves orgánicas */
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0.5,1.5 Q3,0.8 6,1.8 Q10,0.5 14,1.2 Q18,2.2 22,0.8 Q26,1.5 30,0.5 Q35,1.8 40,1 Q45,0.3 50,1.5 Q55,0.8 60,1.8 Q65,0.5 70,1.2 Q75,2 80,0.8 Q85,1.5 90,1 Q95,0.5 99,1.5 Q99.5,5 99.2,10 Q100,15 99.5,20 Q99,25 99.5,30 Q100,35 99.2,40 Q99.5,45 99,50 Q99.5,55 99.2,60 Q100,65 99.5,70 Q99,75 99.5,80 Q100,85 99.2,90 Q99.5,95 99,98.5 Q95,99.5 90,98.8 Q85,99.5 80,98.5 Q75,99.2 70,98.8 Q65,99.5 60,98.5 Q55,99 50,98.5 Q45,99.5 40,98.8 Q35,99 30,99.5 Q25,98.5 20,99 Q15,98.5 10,99.2 Q5,98.8 1,98.5 Q0.5,95 0.8,90 Q0,85 0.5,80 Q1,75 0.5,70 Q0,65 0.8,60 Q0.5,55 1,50 Q0.5,45 0.8,40 Q0,35 0.5,30 Q1,25 0.5,20 Q0,15 0.8,10 Q0.5,5 0.5,1.5 Z' fill='white'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M0.5,1.5 Q3,0.8 6,1.8 Q10,0.5 14,1.2 Q18,2.2 22,0.8 Q26,1.5 30,0.5 Q35,1.8 40,1 Q45,0.3 50,1.5 Q55,0.8 60,1.8 Q65,0.5 70,1.2 Q75,2 80,0.8 Q85,1.5 90,1 Q95,0.5 99,1.5 Q99.5,5 99.2,10 Q100,15 99.5,20 Q99,25 99.5,30 Q100,35 99.2,40 Q99.5,45 99,50 Q99.5,55 99.2,60 Q100,65 99.5,70 Q99,75 99.5,80 Q100,85 99.2,90 Q99.5,95 99,98.5 Q95,99.5 90,98.8 Q85,99.5 80,98.5 Q75,99.2 70,98.8 Q65,99.5 60,98.5 Q55,99 50,98.5 Q45,99.5 40,98.8 Q35,99 30,99.5 Q25,98.5 20,99 Q15,98.5 10,99.2 Q5,98.8 1,98.5 Q0.5,95 0.8,90 Q0,85 0.5,80 Q1,75 0.5,70 Q0,65 0.8,60 Q0.5,55 1,50 Q0.5,45 0.8,40 Q0,35 0.5,30 Q1,25 0.5,20 Q0,15 0.8,10 Q0.5,5 0.5,1.5 Z' fill='white'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

/* Textura de papel - siempre visible */
.flavor-welcome__paper::after {
    content: '';
    position: absolute;
    inset: 0;
    /* Textura de papel con iluminación difusa - igual que tema dust */
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23faf6ef' surfaceScale='1.2'%3E%3CfeDistantLight azimuth='45' elevation='60'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E");
    background-repeat: repeat;
    background-size: 200px 200px;
    opacity: 0.35;
    pointer-events: none;
    z-index: 0;
}

/* Borde hand-drawn del papel */
.flavor-welcome__paper::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
    color: var(--welcome-text-muted);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3,2 Q8,1 15,3 L40,1 Q60,4 85,2 L97,3 Q99,2 98,8 L99,30 Q97,55 99,80 L98,97 Q99,99 92,98 L60,99 Q40,96 20,99 L5,98 Q1,99 2,92 L1,70 Q3,45 1,20 L2,5 Q1,1 3,2 Z' fill='none' stroke='white' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M3,2 Q8,1 15,3 L40,1 Q60,4 85,2 L97,3 Q99,2 98,8 L99,30 Q97,55 99,80 L98,97 Q99,99 92,98 L60,99 Q40,96 20,99 L5,98 Q1,99 2,92 L1,70 Q3,45 1,20 L2,5 Q1,1 3,2 Z' fill='none' stroke='white' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    pointer-events: none;
    z-index: 2;
}

/* Content con animaciones escalonadas */
.flavor-welcome__content {
    position: relative;
    z-index: 1;
    text-align: center;
}

/* Pre-título */
.flavor-welcome__pretitle {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.875rem;
    font-weight: 400;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    color: var(--welcome-text-muted);
    margin: 0 0 0.75rem;
    opacity: 0;
    transform: translateY(10px);
    animation: contentFadeUp 0.6s ease 1.2s forwards;
}

/* Título - nombres */
.flavor-welcome__title {
    font-family: var(--font-heading, 'Great Vibes', cursive);
    font-size: clamp(2.5rem, 8vw, 3.5rem);
    font-weight: 400;
    line-height: 1.2;
    color: var(--welcome-text-heading);
    margin: 0 0 1rem;
    opacity: 0;
    transform: translateY(10px);
    animation: contentFadeUp 0.6s ease 1.4s forwards;
}

/* Fecha */
.flavor-welcome__date {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    color: var(--welcome-text-muted);
    margin: 0 0 1.5rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid var(--welcome-border, rgba(61, 53, 41, 0.2));
    opacity: 0;
    transform: translateY(10px);
    animation: contentFadeUp 0.6s ease 1.6s forwards;
}

/* Mensaje */
.flavor-welcome__message {
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 1rem;
    line-height: 1.6;
    color: var(--welcome-text-body);
    margin: 0 0 2rem;
    opacity: 0;
    transform: translateY(10px);
    animation: contentFadeUp 0.6s ease 1.8s forwards;
}

@keyframes contentFadeUp {
    0% {
        opacity: 0;
        transform: translateY(10px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Botón */
.flavor-welcome__btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 2rem;
    background: transparent;
    border: none;
    color: var(--welcome-btn-color);
    font-family: var(--font-body, 'Lato', sans-serif);
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    cursor: pointer;
    position: relative;
    opacity: 0;
    transform: translateY(10px);
    animation: contentFadeUp 0.6s ease 2s forwards;
    transition: transform 0.2s ease;
}

.flavor-welcome__btn:hover {
    transform: scale(1.02);
}

.flavor-welcome__btn:active {
    transform: scale(0.98);
}

/* Borde hand-drawn del botón */
.flavor-welcome__btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background-color: currentColor;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M4,3 Q10,1 20,3 L50,2 Q80,4 100,2 L116,3 Q119,2 118,8 L119,18 Q117,22 119,32 L117,37 Q119,39 110,38 L70,39 Q50,36 30,39 L8,38 Q2,39 3,32 L2,22 Q4,18 2,8 L3,5 Q2,1 4,3 Z' fill='none' stroke='white' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 40' preserveAspectRatio='none'%3E%3Cpath d='M4,3 Q10,1 20,3 L50,2 Q80,4 100,2 L116,3 Q119,2 118,8 L119,18 Q117,22 119,32 L117,37 Q119,39 110,38 L70,39 Q50,36 30,39 L8,38 Q2,39 3,32 L2,22 Q4,18 2,8 L3,5 Q2,1 4,3 Z' fill='none' stroke='white' stroke-width='1' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E");
    -webkit-mask-size: 100% 100%;
    mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.flavor-welcome__btn span {
    position: relative;
    z-index: 1;
}

/* Closing state */
.flavor-welcome.is-closing .flavor-welcome__pretitle,
.flavor-welcome.is-closing .flavor-welcome__title,
.flavor-welcome.is-closing .flavor-welcome__date,
.flavor-welcome.is-closing .flavor-welcome__message,
.flavor-welcome.is-closing .flavor-welcome__btn {
    opacity: 0;
    transition: opacity 0.15s ease;
}

/* Responsive */
@media (max-width: 540px) {
    .flavor-welcome__scroll {
        min-width: calc(100vw - 3rem);
        max-width: calc(100vw - 3rem);
    }
}

@media (min-width: 480px) {
    .flavor-welcome__paper {
        padding: 3.5rem 3rem;
    }
}