@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;600&family=Playfair+Display:ital,wght@0,400;0,700;1,400&display=swap";:root{--primary-color: #1a1a2e;--accent-color: #c0a062;--text-color: #e0e0e0;--bg-color: #0f0f1a;--card-bg: rgba(255, 255, 255, .05);font-family:Outfit,sans-serif;line-height:1.6;font-weight:400;color-scheme:dark;color:var(--text-color);background-color:var(--bg-color)}*{box-sizing:border-box;margin:0;padding:0}body{min-height:100vh;display:flex;justify-content:center;align-items:flex-start;background:linear-gradient(135deg,#0f0f1a,#1a1a2e)}.app-container{width:100%;max-width:800px;min-height:100vh;background-color:var(--card-bg);box-shadow:0 10px 30px #00000080;display:flex;flex-direction:column;position:relative}.hero-section{width:100%;height:60vh;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center}.hero-image{width:100%;height:100%;object-fit:cover;transition:transform .5s ease}.hero-section:hover .hero-image{transform:scale(1.05)}.overlay-gradient{position:absolute;top:0;left:0;width:100%;height:100%;background:linear-gradient(to bottom,#0000004d,#0f0f1ab3);pointer-events:none}.hero-content{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;z-index:10;width:90%;max-width:800px}.hero-content .title{font-family:Playfair Display,serif;font-size:2.5rem;margin-bottom:1.5rem;color:#fff;text-shadow:0 6px 12px rgba(0,0,0,.9),0 0 30px rgba(192,160,98,.4);line-height:1.2;animation:titleGlow 4s ease-in-out infinite alternate}.hero-content .divider{width:100px;height:4px;background:linear-gradient(90deg,transparent,var(--accent-color),transparent);margin:0 auto;border-radius:2px;animation:dividerPulse 3s ease-in-out infinite alternate}@keyframes titleGlow{0%{text-shadow:0 6px 12px rgba(0,0,0,.9),0 0 30px rgba(192,160,98,.4)}to{text-shadow:0 6px 12px rgba(0,0,0,.9),0 0 40px rgba(192,160,98,.6)}}@keyframes dividerPulse{0%{width:100px;opacity:.8}to{width:140px;opacity:1}}.content-section{padding:3rem 2rem;text-align:center;flex:1;display:flex;flex-direction:column;align-items:center;margin-top:-3rem;position:relative;z-index:10}.title{font-family:Playfair Display,serif;font-size:2.5rem;margin-bottom:1.5rem;color:#fff;text-shadow:0 2px 4px rgba(0,0,0,.5);line-height:1.2}.divider{width:60px;height:3px;background-color:var(--accent-color);margin-bottom:2rem;border-radius:2px}.description{font-size:1.1rem;color:#ccc;max-width:600px;margin-top:1.5rem;margin-bottom:1.5rem}.sub-description{font-size:1rem;font-style:italic;color:var(--accent-color)}.content-section h2{text-align:left;font-size:1.5rem;color:var(--accent-color);margin:2rem 0 1rem;font-family:Playfair Display,serif}.content-section ul{text-align:left;max-width:600px;margin:1rem 0;padding-left:1.5rem}.content-section li{margin-bottom:.75rem;line-height:1.6;color:#ccc}.gift-signature{margin-top:3rem;padding-top:2rem;border-top:1px solid var(--accent-color)}.gift-from{font-size:1.1rem;color:var(--accent-color);font-style:italic;text-align:center}.gift-from strong{color:#fff;font-size:1.2rem;font-style:normal}.names-column{margin-top:.5rem;line-height:1.8}@media(max-width:600px){.title{font-size:2rem}.hero-section{height:40vh}}.christmas-popover-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:linear-gradient(135deg,#0d4f3c,#1a1a2e,#2d1b42);z-index:9999;display:flex;justify-content:center;align-items:center;animation:christmasGlow 3s ease-in-out infinite alternate}@keyframes christmasGlow{0%{background:linear-gradient(135deg,#0d4f3c,#1a1a2e,#2d1b42)}to{background:linear-gradient(135deg,#0f5b3d,#1f1f3d,#3d1f4f)}}.christmas-popover{background:#fffffff2;border-radius:20px;padding:2.5rem;max-width:500px;width:90%;box-shadow:0 20px 60px #0000004d;position:relative;overflow:hidden;border:3px solid #c0a062;animation:popoverPulse 2s ease-in-out infinite alternate}@keyframes popoverPulse{0%{transform:scale(1);box-shadow:0 20px 60px #0000004d}to{transform:scale(1.02);box-shadow:0 25px 70px #c0a06233}}.christmas-decorations{position:absolute;top:0;left:0;width:100%;height:100%;pointer-events:none;overflow:hidden}.snowflake{position:absolute;font-size:1.5rem;animation:snowfall 4s linear infinite;opacity:.8}.snowflake-1{left:10%;animation-delay:0s;animation-duration:3s}.snowflake-2{left:20%;animation-delay:1s;animation-duration:4s}.snowflake-3{left:30%;animation-delay:.5s;animation-duration:3.5s}.snowflake-4{left:60%;animation-delay:1.5s;animation-duration:4.5s}.snowflake-5{left:80%;animation-delay:.8s;animation-duration:3.8s}.snowflake-6{left:90%;animation-delay:2s;animation-duration:4.2s}@keyframes snowfall{0%{transform:translateY(-100px) rotate(0);opacity:0}10%{opacity:.8}90%{opacity:.8}to{transform:translateY(500px) rotate(360deg);opacity:0}}.christmas-content{position:relative;z-index:10;text-align:center;color:#0d4f3c}.christmas-tree{font-size:3rem;margin-bottom:1rem;animation:treeGlow 2s ease-in-out infinite alternate}@keyframes treeGlow{0%{filter:drop-shadow(0 0 10px #228B22)}to{filter:drop-shadow(0 0 20px #32CD32)}}.christmas-title{font-family:Playfair Display,serif;font-size:2rem;margin-bottom:1rem;color:#c41e3a;text-shadow:2px 2px 4px rgba(0,0,0,.2);animation:titleSparkle 3s ease-in-out infinite}@keyframes titleSparkle{0%,to{text-shadow:2px 2px 4px rgba(0,0,0,.2)}50%{text-shadow:2px 2px 4px rgba(0,0,0,.2),0 0 10px #c41e3a}}.christmas-message{font-size:1.1rem;margin-bottom:1.5rem;line-height:1.6;color:#0d4f3c}.christmas-form{margin-bottom:1rem}.christmas-input{width:100%;padding:15px 20px;border:2px solid #c0a062;border-radius:25px;font-size:1rem;margin-bottom:1rem;text-align:center;background:#ffffffe6;color:#0d4f3c;font-weight:600;transition:all .3s ease}.christmas-input:focus{outline:none;border-color:#c41e3a;box-shadow:0 0 15px #c41e3a4d;background:#fff}.christmas-input::placeholder{color:#888;font-weight:400}.christmas-button{width:100%;padding:15px 20px;background:linear-gradient(45deg,#c41e3a,#228b22);color:#fff;border:none;border-radius:25px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:all .3s ease;text-transform:uppercase;letter-spacing:1px}.christmas-button:hover{background:linear-gradient(45deg,#e02147,#32cd32);transform:translateY(-2px);box-shadow:0 5px 15px #c41e3a66}.christmas-button:active{transform:translateY(0)}.christmas-error{background:#c41e3a1a;color:#c41e3a;padding:10px 15px;border-radius:10px;margin-bottom:1rem;font-weight:600;border:1px solid rgba(196,30,58,.3);animation:errorShake .5s ease-in-out}.christmas-success{background:#228b2226;color:#228b22;padding:10px 15px;border-radius:10px;margin-bottom:1rem;font-weight:600;border:1px solid rgba(34,139,34,.4);animation:successGlow 1.5s ease-in-out infinite alternate}@keyframes successGlow{0%{background:#228b2226;box-shadow:0 0 10px #228b224d}to{background:#228b2240;box-shadow:0 0 20px #228b2280}}@keyframes errorShake{0%,to{transform:translate(0)}25%{transform:translate(-5px)}75%{transform:translate(5px)}}.christmas-hint{font-size:.9rem;color:#666;font-style:italic;margin-top:1rem;padding:10px;background:#c0a0621a;border-radius:8px;border-left:3px solid #c0a062}.christmas-lights{position:absolute;bottom:-10px;left:0;right:0;display:flex;justify-content:space-around;padding:0 20px}.light{width:15px;height:15px;border-radius:50%;animation:lightBlink 2s ease-in-out infinite}.light.red{background:#c41e3a;animation-delay:0s}.light.green{background:#228b22;animation-delay:.3s}.light.blue{background:#4169e1;animation-delay:.6s}.light.yellow{background:gold;animation-delay:.9s}@keyframes lightBlink{0%,50%,to{opacity:1;box-shadow:0 0 10px currentColor}25%,75%{opacity:.3;box-shadow:none}}@media(max-width:600px){.christmas-popover{padding:2rem 1.5rem;margin:1rem}.christmas-title{font-size:1.5rem}.christmas-tree{font-size:2.5rem}.snowflake{font-size:1.2rem}}.confetti-container{position:fixed;top:0;left:0;width:100%;height:100%;pointer-events:none;z-index:10000;overflow:hidden}.confetti-piece{position:absolute;width:12px;height:12px;opacity:1;animation:confettiExplosion linear forwards;transform-origin:center;border-radius:6px}.confetti-piece:before{content:"";position:absolute;width:100%;height:100%;background:inherit;border-radius:6px;box-shadow:0 0 3px #0003}@keyframes confettiExplosion{0%{transform:translate(0) rotate(0) scale(1);opacity:1}10%{transform:translate(calc(cos(var(--angle)) * var(--velocity)),calc(sin(var(--angle)) * var(--velocity) - var(--gravity) * .01)) rotate(180deg) scale(1.2);opacity:1}to{transform:translate(calc(cos(var(--angle))*300px),calc(sin(var(--angle))*300px + 500px)) rotate(1080deg) scale(.1);opacity:0}}
