/**
 * Souvenirs Color System
 * 
 * Bespoke styling for specific souvenir types that deserve unique, detailed treatments.
 * Each souvenir type gets its own comprehensive visual identity.
 */

/* ============================================================================
   GLOBAL SOUVENIR TEXT COLOR OVERRIDE
   Force event text to inherit souvenir colors instead of grey
   ============================================================================ */

.row-entry.color-souvenir .cell,
.row-entry.color-souvenir .cell * {
    color: inherit;
}

.row-entry.color-souvenir .cell span[style*="color: var(--text-secondary)"],
.row-entry.color-souvenir.intensity-highlight .cell span,
.row-entry.color-souvenir.intensity-special .cell span {
    color: inherit !important;
}

/* ============================================================================
   STRANGE SOUVENIR - Reality-bending, unsettling, icon-face inspired
   Like the strange dream icon: distorted, fractured, otherworldly
   ============================================================================ */

.souvenir-strange {
    --strange-purple: #7B5A9E;
    --strange-dark: #4A2D5F;
    --strange-bright: #B08FD9;
    --strange-glow: rgba(123, 90, 158, 0.35);
}

/* Highlight intensity - smooth psychedelic pattern with hue-shifting pastels */
.row-entry.color-souvenir.souvenir-strange.intensity-highlight {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 15px,
            rgba(176, 143, 217, 0.12) 15px,
            rgba(176, 143, 217, 0.12) 30px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 15px,
            rgba(200, 150, 255, 0.10) 15px,
            rgba(200, 150, 255, 0.10) 30px
        ),
        linear-gradient(
            90deg,
            rgba(255, 200, 240, 0.08) 0%,
            rgba(200, 180, 255, 0.08) 50%,
            rgba(255, 200, 240, 0.08) 100%
        );
    background-size: 300% 300%, 300% 300%, 100% 100%;
    border-left: 3px solid var(--strange-purple);
    box-shadow:
        inset 0 0 25px rgba(176, 143, 217, 0.08),
        0 2px 4px rgba(74, 45, 95, 0.15);
    color: var(--strange-dark);
    position: relative;
    animation: strangeRoll 45s linear infinite, strangeHueShift 36s ease-in-out infinite;
}

/* Smooth rolling pattern animation */
@keyframes strangeRoll {
    0% {
        background-position: 0% 0%, 0% 0%, 0% 0%;
    }
    100% {
        background-position: 100% 100%, -100% -100%, 0% 0%;
    }
}

/* Gentle hue-shifting pastel colors (blue-purple-pink) */
@keyframes strangeHueShift {
    0%, 100% {
        filter: hue-rotate(0deg) saturate(1.1) brightness(1);
    }
    33% {
        filter: hue-rotate(-25deg) saturate(1.15) brightness(1.02);
    }
    66% {
        filter: hue-rotate(25deg) saturate(1.12) brightness(1.01);
    }
}

/* Scanline overlay for mystical effect */
.row-entry.color-souvenir.souvenir-strange.intensity-highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 12px,
        rgba(176, 143, 217, 0.05) 12px,
        rgba(176, 143, 217, 0.05) 13px
    );
    pointer-events: none;
    animation: scanlines 18s linear infinite;
}

@keyframes scanlines {
    0% {
        transform: translateY(0);
    }
    100% {
        transform: translateY(13px);
    }
}

/* Left border glow accent */
.row-entry.color-souvenir.souvenir-strange.intensity-highlight::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: linear-gradient(
        to bottom,
        var(--strange-bright) 0%,
        var(--strange-purple) 50%,
        var(--strange-bright) 100%
    );
    opacity: 0.4;
}

/* Snake charmer word animation - each word sways independently */
.snake-word {
    display: inline-block;
    animation: snakeCharm 6s ease-in-out infinite;
    transform-origin: center center;
    vertical-align: baseline;
    margin: 0 0.15em 0 0;
    white-space: nowrap;
    pointer-events: none; /* Pass clicks through to parent row */
}

.snake-word:first-child {
    margin-left: 0;
}

.snake-word:last-child {
    margin-right: 0;
}

@keyframes snakeCharm {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    25% {
        transform: translateY(-3px) rotate(2deg) scale(1.02);
    }
    50% {
        transform: translateY(0) rotate(0deg) scale(1);
    }
    75% {
        transform: translateY(-3px) rotate(-2deg) scale(1.02);
    }
}

/* Special intensity uses more dramatic animation */
.color-souvenir.souvenir-strange.intensity-special .snake-word {
    animation: snakeCharmIntense 3.5s ease-in-out infinite;
}

@keyframes snakeCharmIntense {
    0%, 100% {
        transform: translateY(0) rotate(0deg) scale(1);
        text-shadow: 0 0 0 transparent;
    }
    20% {
        transform: translateY(-5px) rotate(3deg) scale(1.04);
        text-shadow: 0 2px 4px rgba(123, 90, 158, 0.3);
    }
    50% {
        transform: translateY(0) rotate(0deg) scale(1);
        text-shadow: 0 0 0 transparent;
    }
    70% {
        transform: translateY(-5px) rotate(-3deg) scale(1.04);
        text-shadow: 0 2px 4px rgba(176, 143, 217, 0.3);
    }
}

/* Special intensity - enhanced smooth psychedelic pattern */
.color-souvenir.souvenir-strange.intensity-special {
    background:
        repeating-linear-gradient(
            45deg,
            transparent,
            transparent 12px,
            rgba(176, 143, 217, 0.18) 12px,
            rgba(176, 143, 217, 0.18) 24px
        ),
        repeating-linear-gradient(
            -45deg,
            transparent,
            transparent 12px,
            rgba(200, 150, 255, 0.15) 12px,
            rgba(200, 150, 255, 0.15) 24px
        ),
        linear-gradient(
            90deg,
            rgba(255, 200, 240, 0.12) 0%,
            rgba(200, 180, 255, 0.12) 50%,
            rgba(255, 200, 240, 0.12) 100%
        );
    background-size: 300% 300%, 300% 300%, 100% 100%;
    border-left: 4px solid var(--strange-purple);
    border-right: 1px solid rgba(176, 143, 217, 0.4);
    box-shadow: 
        inset 0 0 35px rgba(176, 143, 217, 0.15),
        0 0 25px rgba(123, 90, 158, 0.25),
        0 3px 10px rgba(74, 45, 95, 0.30);
    color: var(--strange-purple);
    font-weight: 500;
    position: relative;
    animation: strangeRollIntense 24s linear infinite, strangeHueShiftIntense 18s ease-in-out infinite;
}

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

@keyframes strangeHueShiftIntense {
    0%, 100% {
        filter: hue-rotate(0deg) saturate(1.15) brightness(1);
    }
    25% {
        filter: hue-rotate(-30deg) saturate(1.25) brightness(1.03);
    }
    50% {
        filter: hue-rotate(0deg) saturate(1.1) brightness(0.99);
    }
    75% {
        filter: hue-rotate(30deg) saturate(1.2) brightness(1.02);
    }
}

/* Stronger scanline effect */
.row-entry.color-souvenir.souvenir-strange.intensity-special::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 8px,
        rgba(176, 143, 217, 0.08) 8px,
        rgba(176, 143, 217, 0.08) 9px
    );
    pointer-events: none;
    animation: scanlines 8s linear infinite reverse;
}

/* Border glow for special intensity */
.row-entry.color-souvenir.souvenir-strange.intensity-special::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(
        to bottom,
        var(--strange-bright) 0%,
        var(--strange-purple) 50%,
        var(--strange-bright) 100%
    );
    opacity: 0.3;
    animation: borderPulse 6s ease-in-out infinite;
}

@keyframes borderPulse {
    0%, 100% {
        opacity: 0.3;
    }
    50% {
        opacity: 0.6;
    }
}

/* ============================================================================
   ARRIVAL SOUVENIR - Banner background, welcoming entry
   Muted banner03.png background with soft overlay
   ============================================================================ */

.souvenir-arrival {
    --arrival-overlay: rgba(250, 248, 245, 0.75);
    --arrival-border: #8b7355;
}

/* Highlight intensity - NOW USES USERCOLOR (see color-rows.css) */
/* Kept for reference - wild mindscape phanera image version:
.row-entry.color-souvenir.souvenir-arrival.intensity-highlight {
    background:
        linear-gradient(to right,
            rgba(245, 240, 235, 0.55) 0%,
            rgba(240, 235, 230, 0.50) 50%,
            rgba(245, 240, 235, 0.55) 100%
        ),
        url('/souvenirs/dream/phanera.png');
    background-size: 100% 100%, cover;
    background-position: center, center;
    background-blend-mode: normal, luminosity;
    border-left: 3px solid var(--arrival-border);
}
*/

/* Special intensity - less muted banner */
.color-souvenir.souvenir-arrival.intensity-special {
    background:
        /* Lighter overlay to show more banner */
        linear-gradient(to right,
            rgba(250, 248, 245, 0.65) 0%,
            rgba(250, 248, 245, 0.75) 100%
        ),
        /* Banner image */
        url('/assets/banners/banner03.png');
    background-size: auto 100%, cover;
    background-position: center, center;
    background-repeat: no-repeat, no-repeat;
    border-left: 3px solid var(--arrival-border);
    border-right: 1px solid rgba(139, 115, 85, 0.3);
    font-weight: 500;
    position: relative;
}

/* ============================================================================
   BELL SOUVENIR - Burgundy with animated audio waveform
   Deep burgundy/orange palette with pulsing sound wave visualization
   ============================================================================ */

.souvenir-bell {
    --bell-burgundy: #8B1538;
    --bell-burgundy-dark: #6B0F2A;
    --bell-burgundy-light: #A52848;
    --bell-orange: #C85A28;
    --bell-orange-bright: #E87545;
    --bell-cream: #F5E6D3;
}

/* Highlight intensity - burgundy gradient with authentic waveform */
.row-entry.color-souvenir.souvenir-bell.intensity-highlight {
    background:
        linear-gradient(
            to right,
            var(--bell-burgundy-dark) 0%,
            var(--bell-burgundy) 40%,
            var(--bell-burgundy-light) 100%
        );
    border-left: 3px solid var(--bell-burgundy);
    color: #ffffff;
    position: relative;
    overflow: hidden;
}

/* Waveform layer 1 - Main audio bars with realistic height variation */
.row-entry.color-souvenir.souvenir-bell.intensity-highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* SVG-encoded waveform pattern - bars with varying heights centered vertically */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='40' viewBox='0 0 200 40'%3E%3Crect x='2' y='16' width='2' height='8' fill='rgba(255,255,255,0.15)' rx='1'/%3E%3Crect x='6' y='12' width='2' height='16' fill='rgba(255,255,255,0.18)' rx='1'/%3E%3Crect x='10' y='8' width='2' height='24' fill='rgba(255,255,255,0.22)' rx='1'/%3E%3Crect x='14' y='4' width='2' height='32' fill='rgba(255,255,255,0.25)' rx='1'/%3E%3Crect x='18' y='6' width='2' height='28' fill='rgba(255,255,255,0.23)' rx='1'/%3E%3Crect x='22' y='10' width='2' height='20' fill='rgba(255,255,255,0.19)' rx='1'/%3E%3Crect x='26' y='14' width='2' height='12' fill='rgba(255,255,255,0.16)' rx='1'/%3E%3Crect x='30' y='15' width='2' height='10' fill='rgba(255,255,255,0.14)' rx='1'/%3E%3Crect x='34' y='12' width='2' height='16' fill='rgba(255,255,255,0.17)' rx='1'/%3E%3Crect x='38' y='6' width='2' height='28' fill='rgba(255,255,255,0.24)' rx='1'/%3E%3Crect x='42' y='2' width='2' height='36' fill='rgba(255,255,255,0.28)' rx='1'/%3E%3Crect x='46' y='5' width='2' height='30' fill='rgba(255,255,255,0.25)' rx='1'/%3E%3Crect x='50' y='9' width='2' height='22' fill='rgba(255,255,255,0.20)' rx='1'/%3E%3Crect x='54' y='13' width='2' height='14' fill='rgba(255,255,255,0.17)' rx='1'/%3E%3Crect x='58' y='16' width='2' height='8' fill='rgba(255,255,255,0.14)' rx='1'/%3E%3Crect x='62' y='14' width='2' height='12' fill='rgba(255,255,255,0.16)' rx='1'/%3E%3Crect x='66' y='10' width='2' height='20' fill='rgba(255,255,255,0.19)' rx='1'/%3E%3Crect x='70' y='7' width='2' height='26' fill='rgba(255,255,255,0.22)' rx='1'/%3E%3Crect x='74' y='3' width='2' height='34' fill='rgba(255,255,255,0.27)' rx='1'/%3E%3Crect x='78' y='6' width='2' height='28' fill='rgba(255,255,255,0.24)' rx='1'/%3E%3Crect x='82' y='11' width='2' height='18' fill='rgba(255,255,255,0.18)' rx='1'/%3E%3Crect x='86' y='15' width='2' height='10' fill='rgba(255,255,255,0.15)' rx='1'/%3E%3Crect x='90' y='17' width='2' height='6' fill='rgba(255,255,255,0.12)' rx='1'/%3E%3Crect x='94' y='15' width='2' height='10' fill='rgba(255,255,255,0.15)' rx='1'/%3E%3Crect x='98' y='11' width='2' height='18' fill='rgba(255,255,255,0.19)' rx='1'/%3E%3Crect x='102' y='5' width='2' height='30' fill='rgba(255,255,255,0.26)' rx='1'/%3E%3Crect x='106' y='1' width='2' height='38' fill='rgba(255,255,255,0.30)' rx='1'/%3E%3Crect x='110' y='4' width='2' height='32' fill='rgba(255,255,255,0.27)' rx='1'/%3E%3Crect x='114' y='8' width='2' height='24' fill='rgba(255,255,255,0.22)' rx='1'/%3E%3Crect x='118' y='12' width='2' height='16' fill='rgba(255,255,255,0.18)' rx='1'/%3E%3Crect x='122' y='14' width='2' height='12' fill='rgba(255,255,255,0.16)' rx='1'/%3E%3Crect x='126' y='11' width='2' height='18' fill='rgba(255,255,255,0.19)' rx='1'/%3E%3Crect x='130' y='7' width='2' height='26' fill='rgba(255,255,255,0.23)' rx='1'/%3E%3Crect x='134' y='4' width='2' height='32' fill='rgba(255,255,255,0.26)' rx='1'/%3E%3Crect x='138' y='2' width='2' height='36' fill='rgba(255,255,255,0.29)' rx='1'/%3E%3Crect x='142' y='6' width='2' height='28' fill='rgba(255,255,255,0.24)' rx='1'/%3E%3Crect x='146' y='10' width='2' height='20' fill='rgba(255,255,255,0.20)' rx='1'/%3E%3Crect x='150' y='14' width='2' height='12' fill='rgba(255,255,255,0.16)' rx='1'/%3E%3Crect x='154' y='16' width='2' height='8' fill='rgba(255,255,255,0.14)' rx='1'/%3E%3Crect x='158' y='13' width='2' height='14' fill='rgba(255,255,255,0.17)' rx='1'/%3E%3Crect x='162' y='9' width='2' height='22' fill='rgba(255,255,255,0.21)' rx='1'/%3E%3Crect x='166' y='5' width='2' height='30' fill='rgba(255,255,255,0.25)' rx='1'/%3E%3Crect x='170' y='3' width='2' height='34' fill='rgba(255,255,255,0.28)' rx='1'/%3E%3Crect x='174' y='7' width='2' height='26' fill='rgba(255,255,255,0.23)' rx='1'/%3E%3Crect x='178' y='11' width='2' height='18' fill='rgba(255,255,255,0.19)' rx='1'/%3E%3Crect x='182' y='14' width='2' height='12' fill='rgba(255,255,255,0.16)' rx='1'/%3E%3Crect x='186' y='16' width='2' height='8' fill='rgba(255,255,255,0.14)' rx='1'/%3E%3Crect x='190' y='13' width='2' height='14' fill='rgba(255,255,255,0.17)' rx='1'/%3E%3Crect x='194' y='10' width='2' height='20' fill='rgba(255,255,255,0.20)' rx='1'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: 0 center;
    background-size: 200px 100%;
    pointer-events: none;
    animation: bellWaveScroll 10s linear infinite, bellWavePulse 3s ease-in-out infinite;
    z-index: 0;
    opacity: 0.85;
}

/* Waveform layer 2 - Offset phase for depth and movement */
.row-entry.color-souvenir.souvenir-bell.intensity-highlight::after {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='40' viewBox='0 0 160 40'%3E%3Crect x='3' y='14' width='2' height='12' fill='rgba(255,255,255,0.10)' rx='1'/%3E%3Crect x='11' y='10' width='2' height='20' fill='rgba(255,255,255,0.13)' rx='1'/%3E%3Crect x='19' y='6' width='2' height='28' fill='rgba(255,255,255,0.16)' rx='1'/%3E%3Crect x='27' y='8' width='2' height='24' fill='rgba(255,255,255,0.14)' rx='1'/%3E%3Crect x='35' y='12' width='2' height='16' fill='rgba(255,255,255,0.11)' rx='1'/%3E%3Crect x='43' y='15' width='2' height='10' fill='rgba(255,255,255,0.09)' rx='1'/%3E%3Crect x='51' y='11' width='2' height='18' fill='rgba(255,255,255,0.12)' rx='1'/%3E%3Crect x='59' y='5' width='2' height='30' fill='rgba(255,255,255,0.17)' rx='1'/%3E%3Crect x='67' y='3' width='2' height='34' fill='rgba(255,255,255,0.19)' rx='1'/%3E%3Crect x='75' y='7' width='2' height='26' fill='rgba(255,255,255,0.15)' rx='1'/%3E%3Crect x='83' y='13' width='2' height='14' fill='rgba(255,255,255,0.11)' rx='1'/%3E%3Crect x='91' y='16' width='2' height='8' fill='rgba(255,255,255,0.08)' rx='1'/%3E%3Crect x='99' y='12' width='2' height='16' fill='rgba(255,255,255,0.11)' rx='1'/%3E%3Crect x='107' y='6' width='2' height='28' fill='rgba(255,255,255,0.16)' rx='1'/%3E%3Crect x='115' y='2' width='2' height='36' fill='rgba(255,255,255,0.20)' rx='1'/%3E%3Crect x='123' y='5' width='2' height='30' fill='rgba(255,255,255,0.17)' rx='1'/%3E%3Crect x='131' y='9' width='2' height='22' fill='rgba(255,255,255,0.13)' rx='1'/%3E%3Crect x='139' y='14' width='2' height='12' fill='rgba(255,255,255,0.10)' rx='1'/%3E%3Crect x='147' y='11' width='2' height='18' fill='rgba(255,255,255,0.12)' rx='1'/%3E%3Crect x='155' y='7' width='2' height='26' fill='rgba(255,255,255,0.15)' rx='1'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: 50px center;
    background-size: 160px 100%;
    pointer-events: none;
    animation: bellWaveScrollReverse 14s linear infinite, bellWavePulseAlt 4s ease-in-out infinite 1.5s;
    z-index: 0;
    opacity: 0.5;
}

/* Scrolling animation - left to right */
@keyframes bellWaveScroll {
    0% { background-position-x: 0; }
    100% { background-position-x: 200px; }
}

/* Reverse scroll for parallax depth effect */
@keyframes bellWaveScrollReverse {
    0% { background-position-x: 0; }
    100% { background-position-x: -160px; }
}

/* Subtle breathing/pulsing for liveliness */
@keyframes bellWavePulse {
    0%, 100% { opacity: 0.85; transform: scaleY(1); }
    50% { opacity: 0.95; transform: scaleY(1.05); }
}

@keyframes bellWavePulseAlt {
    0%, 100% { opacity: 0.5; transform: scaleY(1); }
    50% { opacity: 0.65; transform: scaleY(0.92); }
}

.row-entry.color-souvenir.souvenir-bell.intensity-highlight .cell,
.color-souvenir.souvenir-bell.intensity-highlight .cell {
    position: relative;
    z-index: 1;
    color: #ffffff !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Special intensity - stronger waveform with glow */
.color-souvenir.souvenir-bell.intensity-special {
    background: linear-gradient(
        to right,
        var(--bell-burgundy-dark) 0%,
        var(--bell-burgundy) 30%,
        var(--bell-burgundy-light) 100%
    );
    border-left: 4px solid var(--bell-burgundy);
    color: #ffffff;
    font-weight: 600;
    position: relative;
    overflow: hidden;
}

.color-souvenir.souvenir-bell.intensity-special::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Stronger/bolder waveform for special intensity */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='40' viewBox='0 0 180 40'%3E%3Crect x='2' y='15' width='3' height='10' fill='rgba(255,255,255,0.22)' rx='1.5'/%3E%3Crect x='8' y='10' width='3' height='20' fill='rgba(255,255,255,0.28)' rx='1.5'/%3E%3Crect x='14' y='4' width='3' height='32' fill='rgba(255,255,255,0.35)' rx='1.5'/%3E%3Crect x='20' y='6' width='3' height='28' fill='rgba(255,255,255,0.32)' rx='1.5'/%3E%3Crect x='26' y='11' width='3' height='18' fill='rgba(255,255,255,0.26)' rx='1.5'/%3E%3Crect x='32' y='14' width='3' height='12' fill='rgba(255,255,255,0.23)' rx='1.5'/%3E%3Crect x='38' y='12' width='3' height='16' fill='rgba(255,255,255,0.25)' rx='1.5'/%3E%3Crect x='44' y='5' width='3' height='30' fill='rgba(255,255,255,0.34)' rx='1.5'/%3E%3Crect x='50' y='1' width='3' height='38' fill='rgba(255,255,255,0.40)' rx='1.5'/%3E%3Crect x='56' y='4' width='3' height='32' fill='rgba(255,255,255,0.36)' rx='1.5'/%3E%3Crect x='62' y='9' width='3' height='22' fill='rgba(255,255,255,0.28)' rx='1.5'/%3E%3Crect x='68' y='13' width='3' height='14' fill='rgba(255,255,255,0.24)' rx='1.5'/%3E%3Crect x='74' y='16' width='3' height='8' fill='rgba(255,255,255,0.20)' rx='1.5'/%3E%3Crect x='80' y='14' width='3' height='12' fill='rgba(255,255,255,0.23)' rx='1.5'/%3E%3Crect x='86' y='8' width='3' height='24' fill='rgba(255,255,255,0.30)' rx='1.5'/%3E%3Crect x='92' y='2' width='3' height='36' fill='rgba(255,255,255,0.38)' rx='1.5'/%3E%3Crect x='98' y='5' width='3' height='30' fill='rgba(255,255,255,0.34)' rx='1.5'/%3E%3Crect x='104' y='10' width='3' height='20' fill='rgba(255,255,255,0.27)' rx='1.5'/%3E%3Crect x='110' y='14' width='3' height='12' fill='rgba(255,255,255,0.23)' rx='1.5'/%3E%3Crect x='116' y='11' width='3' height='18' fill='rgba(255,255,255,0.26)' rx='1.5'/%3E%3Crect x='122' y='6' width='3' height='28' fill='rgba(255,255,255,0.32)' rx='1.5'/%3E%3Crect x='128' y='3' width='3' height='34' fill='rgba(255,255,255,0.37)' rx='1.5'/%3E%3Crect x='134' y='7' width='3' height='26' fill='rgba(255,255,255,0.31)' rx='1.5'/%3E%3Crect x='140' y='12' width='3' height='16' fill='rgba(255,255,255,0.25)' rx='1.5'/%3E%3Crect x='146' y='15' width='3' height='10' fill='rgba(255,255,255,0.22)' rx='1.5'/%3E%3Crect x='152' y='13' width='3' height='14' fill='rgba(255,255,255,0.24)' rx='1.5'/%3E%3Crect x='158' y='8' width='3' height='24' fill='rgba(255,255,255,0.30)' rx='1.5'/%3E%3Crect x='164' y='4' width='3' height='32' fill='rgba(255,255,255,0.35)' rx='1.5'/%3E%3Crect x='170' y='7' width='3' height='26' fill='rgba(255,255,255,0.31)' rx='1.5'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-position: 0 center;
    background-size: 180px 100%;
    pointer-events: none;
    animation: bellWaveScrollSpecial 7s linear infinite, bellWavePulseSpecial 2.5s ease-in-out infinite;
    z-index: 0;
    filter: drop-shadow(0 0 3px rgba(255, 255, 255, 0.3));
}

@keyframes bellWaveScrollSpecial {
    0% { background-position-x: 0; }
    100% { background-position-x: 180px; }
}

@keyframes bellWavePulseSpecial {
    0%, 100% { opacity: 0.9; transform: scaleY(1); }
    50% { opacity: 1; transform: scaleY(1.08); }
}

.color-souvenir.souvenir-bell.intensity-special .cell,
.row-entry.color-souvenir.souvenir-bell.intensity-special .cell {
    position: relative;
    z-index: 1;
    color: #ffffff !important;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   RESIDENCE SOUVENIR - Lapis/ultramarine animated gradient
   Shifting gradient with floating bubbles
   ============================================================================ */

.souvenir-residence {
    --residence-lapis: #2b5b9e;
    --residence-ultra: #4169b3;
    --residence-bright: #5d8ed6;
    --residence-gold: #ebd08b;
}

/* Highlight intensity - animated lapis gradient with gold text */
.row-entry.color-souvenir.souvenir-residence.intensity-highlight {
    background:
        linear-gradient(135deg,
            var(--residence-lapis) 0%,
            var(--residence-ultra) 50%,
            var(--residence-bright) 100%
        );
    background-size: 200% 200%;
    position: relative;
    border-left: 3px solid var(--residence-lapis);
    border-right: 1px solid rgba(43, 91, 158, 0.3);
    animation: residenceGradientShift 8s ease-in-out infinite;
    overflow: hidden;
    color: var(--residence-gold);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Rolling lightness wave in background */
.row-entry.color-souvenir.souvenir-residence.intensity-highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.15) 50%,
        transparent 100%
    );
    background-size: 50% 100%;
    pointer-events: none;
    animation: residenceRollingLight 4s linear infinite;
    z-index: 0;
}

.row-entry.color-souvenir.souvenir-residence.intensity-highlight .cell {
    position: relative;
    z-index: 1;
}

@keyframes residenceRollingLight {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}

/* Ensure cell content appears above effects */
.color-souvenir.souvenir-residence .cell {
    position: relative;
    z-index: 1;
}

/* Gradient shifting animation */
@keyframes residenceGradientShift {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 100%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 0%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Special intensity - more dramatic gradient shift */
.color-souvenir.souvenir-residence.intensity-special {
    background:
        linear-gradient(135deg,
            var(--residence-lapis) 0%,
            var(--residence-ultra) 50%,
            var(--residence-bright) 100%
        );
    background-size: 250% 250%;
    position: relative;
    border-left: 4px solid var(--residence-lapis);
    border-right: 2px solid rgba(43, 91, 158, 0.4);
    font-weight: 500;
    animation: residenceGradientShiftIntense 6s ease-in-out infinite;
    overflow: hidden;
    color: var(--residence-gold);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

/* Apply gold color uniformly to all cells */
.row-entry.color-souvenir.souvenir-residence .cell,
.row-entry.color-souvenir.souvenir-residence .cell * {
    color: inherit;
}

/* Intense gradient shifting */
@keyframes residenceGradientShiftIntense {
    0% {
        background-position: 0% 50%;
    }
    20% {
        background-position: 100% 0%;
    }
    40% {
        background-position: 50% 100%;
    }
    60% {
        background-position: 100% 50%;
    }
    80% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* More bubbles for special intensity */
.row-entry.color-souvenir.souvenir-residence.intensity-special::before {
    content: '○ ○ ○ ○ ○';
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    height: 100%;
    font-size: 9px;
    color: rgba(255, 255, 255, 0.2);
    letter-spacing: 30px;
    line-height: 1;
    pointer-events: none;
    animation: bubbleFloatIntense 5s ease-in-out infinite;
    z-index: 0;
}

@keyframes bubbleFloatIntense {
    0% {
        transform: translateY(-50%) translateX(0) scale(1);
        opacity: 0.4;
    }
    33% {
        transform: translateY(-55%) translateX(8px) scale(1.05);
        opacity: 0.6;
    }
    66% {
        transform: translateY(-45%) translateX(-5px) scale(0.95);
        opacity: 0.5;
    }
    100% {
        transform: translateY(-50%) translateX(0) scale(1);
        opacity: 0.4;
    }
}

/* Bell waveform animations removed per request. */
/* No line animations applied to `souvenir-bell` now. */

/* ============================================================================
   INVITATION SOUVENIR - Purple gradient for "was invited by" events
   Amethyst/violet animated gradient with silver text
   ============================================================================ */

.souvenir-invitation {
    --invitation-deep: #6B46C1;
    --invitation-purple: #805AD5;
    --invitation-bright: #9F7AEA;
    --invitation-silver: #E9D8FD;
}

/* Highlight intensity - animated purple gradient with silver text */
.row-entry.color-souvenir.souvenir-invitation.intensity-highlight {
    background:
        linear-gradient(135deg,
            var(--invitation-deep) 0%,
            var(--invitation-purple) 50%,
            var(--invitation-bright) 100%
        );
    background-size: 200% 200%;
    position: relative;
    border-left: 3px solid var(--invitation-deep);
    border-right: 1px solid rgba(107, 70, 193, 0.3);
    animation: invitationGradientShift 8s ease-in-out infinite;
    overflow: hidden;
    color: var(--invitation-silver);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Rolling shimmer wave in background */
.row-entry.color-souvenir.souvenir-invitation.intensity-highlight::before {
    content: '';
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 100%;
    background: linear-gradient(
        90deg,
        transparent 0%,
        rgba(255, 255, 255, 0.12) 50%,
        transparent 100%
    );
    background-size: 50% 100%;
    pointer-events: none;
    animation: invitationRollingLight 5s linear infinite;
    z-index: 0;
}

.row-entry.color-souvenir.souvenir-invitation.intensity-highlight .cell {
    position: relative;
    z-index: 1;
}

@keyframes invitationRollingLight {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(200%);
    }
}

/* Ensure cell content appears above effects */
.color-souvenir.souvenir-invitation .cell {
    position: relative;
    z-index: 1;
}

/* Gradient shifting animation */
@keyframes invitationGradientShift {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 50% 100%;
    }
    50% {
        background-position: 100% 50%;
    }
    75% {
        background-position: 50% 0%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Special intensity - more dramatic gradient with sparkle */
.color-souvenir.souvenir-invitation.intensity-special {
    background:
        linear-gradient(135deg,
            var(--invitation-deep) 0%,
            var(--invitation-purple) 50%,
            var(--invitation-bright) 100%
        );
    background-size: 250% 250%;
    position: relative;
    border-left: 4px solid var(--invitation-deep);
    border-right: 2px solid rgba(107, 70, 193, 0.4);
    font-weight: 500;
    animation: invitationGradientShiftIntense 6s ease-in-out infinite;
    overflow: hidden;
    color: var(--invitation-silver);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
}

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

/* ============================================================================
   FALLBACKS
   ============================================================================ */

/* None intensity for souvenirs */
.color-souvenir.intensity-none {
    border-left: 2px solid #888;
    color: #555;
}

/* Generic souvenir highlight (if no specific class) */
.color-souvenir.intensity-highlight:not(.souvenir-strange):not(.souvenir-residence):not(.souvenir-arrival):not(.souvenir-bell):not(.souvenir-invitation) {
    background: linear-gradient(
        to right,
        rgba(120, 100, 140, 0.08) 0%,
        transparent 100%
    );
    border-left: 2px solid #786C8C;
    color: #5a4a7a;
}

/* Generic souvenir special (if no specific class) */
.color-souvenir.intensity-special:not(.souvenir-strange):not(.souvenir-residence):not(.souvenir-arrival):not(.souvenir-bell):not(.souvenir-invitation) {
    background: linear-gradient(
        to right,
        rgba(120, 100, 140, 0.15) 0%,
        rgba(120, 100, 140, 0.05) 100%
    );
    border-left: 3px solid #786C8C;
    box-shadow: inset 0 0 0 1px rgba(120, 100, 140, 0.12);
    color: #5a4a7a;
    font-weight: 500;
}