@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400..800;1,400..800&display=swap');


:root {
    --background-color: #111317;
    --text-color: #E5ECE9;
    --text-color-secondary: #A3B1AE;
}

html, body {
    margin: 0;
    padding: 0;
    background: var(--background-color);
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-family: "EB Garamond", serif;
    font-optical-sizing: auto;
    font-style: normal;
    color: var(--text-color);
}

.quote-container {
    text-align: center;
    max-width: 600px;
    padding: 20px;
}

#quote-text {
    font-size: 2.2rem;
    line-height: 1.4;
    margin-bottom: 15px;
    font-style: italic;
    white-space: pre-line;
}

#quote-author {
    font-size: 1.2rem;
    color: var(--text-color-secondary);
}

/* ==========================================
   MATRIX GLASSMORPHISM FIX (REPAIRED)
   ========================================== */

/* 1. Force the Canvas to stay fixed underneath everything */
#matrix-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
}

/* 2. CRITICAL: Make the body transparent ONLY when Matrix is active */
body:has(#matrix-canvas) {
    background: transparent !important;
}

/* 3. Style the quote card to float beautifully over the falling rain */
body:has(#matrix-canvas) .quote-container {
    /* Give the box a dark, semi-transparent background */
    background: rgba(10, 12, 16, 0.85) !important; 
    
    /* Frosted glass blur effect */
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    
    /* Sleek green tech border and glow */
    border: 1px solid rgba(0, 255, 0, 0.25);
    box-shadow: 0 0 35px rgba(0, 255, 0, 0.15);
    border-radius: 8px; /* Optional: smooths out the corners nicely */
}

/* 4. Make sure the text color pops intensely against the dark green rain */
body:has(#matrix-canvas) #quote-text {
    color: #ffffff;
    text-shadow: 0 0 10px rgba(0, 255, 0, 0.2), 0 0 20px rgba(255, 255, 255, 0.2);
}

body:has(#matrix-canvas) #quote-author {
    color: #88ff88; /* Matrix green tint for the author */
}
/* ==========================================
   EFFECT 1: TRIPLE-BURST ERRATIC GLITCH
   ========================================== */
.glitch-triple {
    position: relative;
    color: #ffffff;
    animation: shake-triple 5s infinite ease-in-out;
}

.glitch-triple::before,
.glitch-triple::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: transparent;
}

.glitch-triple::before {
    text-shadow: -4px 0 #ff007f, 0 0 8px rgba(255, 0, 127, 0.35);
    animation: slice-triple-1 5s infinite linear;
}

.glitch-triple::after {
    text-shadow: 4px 0 #00f0ff, 0 0 8px rgba(0, 240, 255, 0.35);
    animation: slice-triple-2 5s infinite linear;
}

@keyframes shake-triple {
    0% { transform: translate(3px, -1px) skew(2deg); }
    2% { transform: translate(-2px, 2px) skew(-3deg); }
    4% { transform: translate(4px, 1px) skew(1deg); }
    7% { transform: translate(-3px, -2px) skew(-1deg); }
    10% { transform: translate(0, 0) skew(0deg); }
    35% { transform: translate(0, 0) skew(0deg); }
    36% { transform: translate(-4px, 3px) skew(-2deg); }
    39% { transform: translate(3px, -3px) skew(4deg); }
    42% { transform: translate(-2px, 4px) skew(-3deg); }
    45% { transform: translate(0, 0) skew(0deg); }
    70% { transform: translate(0, 0) skew(0deg); }
    71% { transform: translate(5px, 4px) skew(3deg); }
    74% { transform: translate(-5px, -4px) skew(-4deg); }
    77% { transform: translate(4px, -2px) skew(2deg); }
    80% { transform: translate(0, 0) skew(0deg); }
    100% { transform: translate(0, 0) skew(0deg); }
}

@keyframes slice-triple-1 {
    0% { clip-path: inset(30% 0 50% 0); opacity: 1; }
    3% { clip-path: inset(75% 0 12% 0); opacity: 1; }
    6% { clip-path: inset(10% 0 75% 0); opacity: 1; }
    9% { clip-path: inset(45% 0 40% 0); opacity: 1; }
    10% { clip-path: inset(0 0 0 0); opacity: 0; }
    35% { clip-path: inset(0 0 0 0); opacity: 0; }
    36% { clip-path: inset(90% 0 2% 0); opacity: 1; }
    39% { clip-path: inset(5% 0 91% 0); opacity: 1; }
    42% { clip-path: inset(83% 0 8% 0); opacity: 1; }
    45% { clip-path: inset(0 0 0 0); opacity: 0; }
    70% { clip-path: inset(0 0 0 0); opacity: 0; }
    71% { clip-path: inset(15% 0 68% 0); opacity: 1; }
    74% { clip-path: inset(55% 0 22% 0); opacity: 1; }
    77% { clip-path: inset(38% 0 47% 0); opacity: 1; }
    80% { clip-path: inset(0 0 0 0); opacity: 0; }
    100% { clip-path: inset(0 0 0 0); opacity: 0; }
}

@keyframes slice-triple-2 {
    0% { clip-path: inset(65% 0 15% 0); opacity: 1; }
    3% { clip-path: inset(20% 0 60% 0); opacity: 1; }
    6% { clip-path: inset(50% 0 35% 0); opacity: 1; }
    9% { clip-path: inset(5% 0 82% 0); opacity: 1; }
    10% { clip-path: inset(0 0 0 0); opacity: 0; }
    35% { clip-path: inset(0 0 0 0); opacity: 0; }
    36% { clip-path: inset(12% 0 85% 0); opacity: 1; }
    39% { clip-path: inset(78% 0 10% 0); opacity: 1; }
    42% { clip-path: inset(25% 0 62% 0); opacity: 1; }
    45% { clip-path: inset(0 0 0 0); opacity: 0; }
    70% { clip-path: inset(0 0 0 0); opacity: 0; }
    71% { clip-path: inset(42% 0 42% 0); opacity: 1; }
    74% { clip-path: inset(8% 0 88% 0); opacity: 1; }
    77% { clip-path: inset(81% 0 5% 0); opacity: 1; }
    80% { clip-path: inset(0 0 0 0); opacity: 0; }
    100% { clip-path: inset(0 0 0 0); opacity: 0; }
}


/* ==========================================
   EFFECT 2: MIX-BLEND LIGHTEN GLITCH
   ========================================== */
.glitch-mix {
    position: relative;
    color: white;
    /* Uses color screen blending to let background colors leak through text channels */
    mix-blend-mode: lighten; 
}

.glitch-mix::before,
.glitch-mix::after {
    content: attr(data-text);
    position: absolute;
    top: 0;
    width: 100%;
    background: transparent;
    clip-path: inset(0 0 0 0);
}

.glitch-mix::before {
    left: -2px;
    text-shadow: 3px 0 rgba(255, 0, 0, 0.7);
    animation: mix-loop-1 0.8s infinite ease-in-out alternate-reverse;
}

.glitch-mix::after {
    left: 2px;
    text-shadow: -3px 0 rgba(0, 0, 255, 0.7);
    animation: mix-loop-2 0.8s infinite ease-in-out alternate-reverse;
}

/* Constantly running rapid-slice profiles using modern clip-paths */
@keyframes mix-loop-1 {
    0%   { clip-path: inset(30% 0 60% 0); }
    25%  { clip-path: inset(20% 0 10% 0); }
    50%  { clip-path: inset(45% 0 45% 0); }
    75%  { clip-path: inset(10% 0 80% 0); }
    100% { clip-path: inset(80% 0 5% 0); }
}

@keyframes mix-loop-2 {
    0%   { top: -1px; left: 1px;  clip-path: inset(55% 0 10% 0); }
    25%  { top: -4px; left: 3px;  clip-path: inset(70% 0 15% 0); }
    50%  { top: -2px; left: 2px;  clip-path: inset(30% 0 50% 0); }
    75%  { top: 0px;  left: -3px; clip-path: inset(85% 0 2% 0); }
    100% { top: -1px; left: -1px; clip-path: inset(15% 0 75% 0); }
}
/* ==========================================
   SNOW CANVAS LAYER
   ========================================== */
#snow-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}

/* ==========================================
   CHRISTMAS LIGHTS STRING
   ========================================== */
#lights-string {
    text-align: center;
    white-space: nowrap;
    
    /* FIX 1: Change hidden to visible so the bulb bottoms can draw fully */
    overflow: visible; 
    
    position: fixed;
    
    /* FIX 2: Shift it slightly down to accommodate the massive new 45px bulb caps */
    top: -10px; 
    
    left: 0;
    width: 100%;
    margin: 0;
    padding: 0;
    pointer-events: none;
    display: flex;
    justify-content: space-around;
    z-index: 999;
}

#lights-string li {
    position: relative;
    list-style: none;
    margin: 0;
    padding: 0;
    
    /* SCALE UP: Increased width from 14px to 22px, and height from 30px to 45px */
    width: 22px;
    height: 45px;
    
    border-radius: 50%;
    background: #00be2e;
    animation: flash-green 2s infinite ease-in-out;
}

/* Updated connection wire cap size to fit the larger bulbs */
#lights-string li:before {
    content: "";
    position: absolute;
    background: #222;
    width: 14px;
    height: 8px;
    top: -6px;
    left: 4px;
    border-radius: 3px;
}

/* Distribute colors across the string array */
#lights-string li:nth-child(4n+1) { background: #ff2244; animation: flash-red 1.2s infinite ease-in-out; }
#lights-string li:nth-child(4n+2) { background: #00ffff; animation: flash-blue 1.5s infinite ease-in-out; }
#lights-string li:nth-child(4n+3) { background: #ffaa00; animation: flash-yellow 1.8s infinite ease-in-out; }

@keyframes flash-red {
    0%, 100% { background: #ff2244; box-shadow: 0px 6px 40px #ff2244; }
    50% { background: #550011; box-shadow: 0px 0px 0px transparent; }
}
@keyframes flash-blue {
    0%, 100% { background: #00ffff; box-shadow: 0px 6px 40px #00ffff; }
    50% { background: #004444; box-shadow: 0px 0px 0px transparent; }
}
@keyframes flash-yellow {
    0%, 100% { background: #ffaa00; box-shadow: 0px 6px 40px #ffaa00; }
    50% { background: #442200; box-shadow: 0px 0px 0px transparent; }
}
@keyframes flash-green {
    0%, 100% { background: #00be2e; box-shadow: 0px 6px 40px #00be2e; }
    50% { background: #003300; box-shadow: 0px 0px 0px transparent; }
}
/* ==========================================
   MEMORIAL ROSE
   ========================================== */
.memorial-rose {
    display: inline-block;
    margin-top: 20px;
    font-size: 1.8rem;
    opacity: 0;
    /* Softly fades in over 3 seconds, then breathes ambiently */
    animation: rose-fade-in 3s forwards, rose-glow 4s infinite ease-in-out 3s;
    filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.15));
}

@keyframes rose-fade-in {
    to { opacity: 0.75; } /* Keeps it slightly translucent so it remains subtle */
}

@keyframes rose-glow {
    0%, 100% { filter: drop-shadow(0 0 10px rgba(255, 0, 0, 0.15)); transform: scale(1); }
    50% { filter: drop-shadow(0 0 20px rgba(255, 0, 0, 0.35)); transform: scale(1.03); }
}
/* ==========================================
   EMOOJI RAIN CANVAS
   ========================================== */
#emoji-canvas {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;
    pointer-events: none;
}
body:has(#emoji-canvas) {
    background: transparent !important;
}

/* 2. Style the quote card to be a floating, semi-transparent frosty pane */
body:has(#emoji-canvas) .quote-container {
    /* Subtle dark overlay so white or colorful emojis pop behind it */
    background: rgba(17, 19, 23, 0.82) !important; 
    
    /* Elegant frosted glass blur styling */
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    
    /* Clean, minimal framing border */
    border: 1px solid rgba(255, 255, 255, 0.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    border-radius: 12px;
}