@import url('https://fonts.googleapis.com/css2?family=SF+Pro+Display:wght@300;400;500;600;700&display=swap');
* { margin: 0; padding: 0; box-sizing: border-box; }
body { font-family: 'SF Pro Display', -apple-system, BlinkMacSystemFont, sans-serif; background: linear-gradient(135deg, #c9252c 0%, #ffc20e 50%, #c9252c 100%); color: #ffffff; overflow: hidden; height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; }
.background-animation { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; opacity: 0.1; }
.floating-circle { position: absolute; border-radius: 50%; background: rgba(255, 194, 14, 0.1); animation: floatAnimation 8s ease-in-out infinite; }
@keyframes floatAnimation { 0%, 100% { transform: translateY(0px) scale(1); opacity: 0.1; } 50% { transform: translateY(-30px) scale(1.1); opacity: 0.3; } }
.main-container { text-align: center; width: 100%; max-width: 600px; padding: 40px; position: relative; z-index: 10; }
.header { margin-bottom: 60px; }
.logo { font-size: 2.5rem; font-weight: 700; color: #ffffff; margin-bottom: 10px; text-shadow: 0 2px 20px rgba(0,0,0,0.3); }
.subtitle { font-size: 1.1rem; color: rgba(255,255,255,0.8); font-weight: 400; }
.interface-state { display: none; animation: fadeIn 0.5s ease; }
.interface-state.active { display: block; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } }
.default-state { display: block; }
.siri-container { position: relative; margin: 60px 0; }
.siri-orb { width: 240px; height: 240px; margin: 0 auto 40px; position: relative; cursor: pointer; transition: all 0.4s cubic-bezier(0.25,0.46,0.45,0.94); }
.siri-orb:hover { transform: scale(1.08); }
.orb-outer { width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 30% 40%, rgba(255,255,255,0.3), rgba(255,255,255,0.05), transparent); display: flex; align-items: center; justify-content: center; backdrop-filter: blur(30px); border: 2px solid rgba(255,255,255,0.1); box-shadow: 0 20px 60px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.2), inset 0 -1px 0 rgba(0,0,0,0.1); position: relative; overflow: hidden; }
.orb-inner { width: 180px; height: 180px; border-radius: 50%; background: radial-gradient(circle at 25% 25%, rgba(201,37,44,0.8), transparent 50%), radial-gradient(circle at 75% 75%, rgba(255,194,14,0.8), transparent 50%), radial-gradient(circle at 50% 50%, rgba(201,37,44,0.6), rgba(255,194,14,0.6)); display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; box-shadow: inset 0 0 50px rgba(0,0,0,0.2); }
.ai-core { position: absolute; width: 100%; height: 100%; border-radius: 50%; }
.energy-wave { position: absolute; border-radius: 50%; background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%); animation: energyWave 3s ease-in-out infinite; }
.energy-wave:nth-child(1) { width: 40%; height: 40%; top: 30%; left: 30%; animation-delay: 0s; }
.energy-wave:nth-child(2) { width: 60%; height: 60%; top: 20%; left: 20%; animation-delay: 1s; }
.energy-wave:nth-child(3) { width: 80%; height: 80%; top: 10%; left: 10%; animation-delay: 2s; }
@keyframes energyWave { 0%,100% { transform: scale(0.8) rotate(0deg); opacity: 0.4; } 50% { transform: scale(1.2) rotate(180deg); opacity: 0.8; } }
.neural-network { position: absolute; width: 100%; height: 100%; border-radius: 50%; }
.neural-dot { position: absolute; width: 4px; height: 4px; background: rgba(255,255,255,0.9); border-radius: 50%; animation: neuralPulse 2s ease-in-out infinite; }
.neural-dot:nth-child(1) { top: 20%; left: 30%; animation-delay: 0.1s; }
.neural-dot:nth-child(2) { top: 40%; left: 70%; animation-delay: 0.3s; }
.neural-dot:nth-child(3) { top: 60%; left: 20%; animation-delay: 0.5s; }
.neural-dot:nth-child(4) { top: 70%; left: 60%; animation-delay: 0.7s; }
.neural-dot:nth-child(5) { top: 30%; left: 80%; animation-delay: 0.9s; }
.neural-dot:nth-child(6) { top: 80%; left: 40%; animation-delay: 1.1s; }
@keyframes neuralPulse { 0%,100% { transform: scale(1); opacity: 0.6; box-shadow: 0 0 5px rgba(255,255,255,0.3); } 50% { transform: scale(1.5); opacity: 1; box-shadow: 0 0 15px rgba(255,255,255,0.6); } }
.ai-glow { position: absolute; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle, transparent 40%, rgba(201,37,44,0.1) 70%, transparent); animation: aiGlow 4s ease-in-out infinite; }
@keyframes aiGlow { 0%,100% { transform: rotate(0deg) scale(1); opacity: 0.5; } 50% { transform: rotate(180deg) scale(1.1); opacity: 0.8; } }
.holographic-ring { position: absolute; width: 220px; height: 220px; top: -10px; left: -10px; border: 1px solid rgba(255,255,255,0.1); border-radius: 50%; animation: holographicSpin 8s linear infinite; }
.holographic-ring::before { content: ''; position: absolute; width: 8px; height: 8px; background: radial-gradient(circle, rgba(255,194,14,0.8), transparent); border-radius: 50%; top: -4px; left: 50%; transform: translateX(-50%); box-shadow: 0 0 10px rgba(255,194,14,0.5); }
@keyframes holographicSpin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
.main-instruction { font-size: 1.4rem; color: #ffffff; margin-bottom: 30px; font-weight: 500; }
.manual-entry-link { color: rgba(255,255,255,0.7); font-size: 1rem; text-decoration: underline; cursor: pointer; transition: color 0.3s ease; }
.manual-entry-link:hover { color: #ffffff; }
.default-state.listening .siri-orb { animation: listeningPulse 1.2s ease-in-out infinite; }
.default-state.listening .orb-inner { animation: listeningGlow 1s ease-in-out infinite alternate; }
.default-state.listening .neural-dot { animation: neuralOverdrive 0.8s ease-in-out infinite; }
.default-state.listening .energy-wave { animation: energyOverdrive 1.5s ease-in-out infinite; }
.default-state.listening .main-instruction { display: none; }
.default-state.listening .manual-entry-link { display: none; }
@keyframes listeningPulse { 0%,100% { transform: scale(1); filter: brightness(1); } 50% { transform: scale(1.05); filter: brightness(1.3); } }
@keyframes listeningGlow { 0% { box-shadow: inset 0 0 50px rgba(0,0,0,0.2), 0 0 30px rgba(138,43,226,0.5); } 100% { box-shadow: inset 0 0 50px rgba(0,0,0,0.2), 0 0 60px rgba(138,43,226,0.8); } }
@keyframes neuralOverdrive { 0%,100% { transform: scale(1); opacity: 0.8; box-shadow: 0 0 10px rgba(255,255,255,0.6); } 50% { transform: scale(2); opacity: 1; box-shadow: 0 0 20px rgba(255,255,255,1); } }
@keyframes energyOverdrive { 0%,100% { transform: scale(1) rotate(0deg); opacity: 0.6; } 50% { transform: scale(1.5) rotate(180deg); opacity: 1; } }
.listening-text { font-size: 1.3rem; color: #ffffff; margin-top: 30px; font-weight: 500; opacity: 0; animation: fadeInText 0.5s ease 0.5s forwards; }
@keyframes fadeInText { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
.listening-indicator { display: flex; justify-content: center; margin-top: 20px; gap: 5px; }
.dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255,255,255,0.6); animation: dotAnimation 1.4s ease-in-out infinite; }
.dot:nth-child(2) { animation-delay: 0.2s; }
.dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes dotAnimation { 0%,80%,100% { transform: scale(1); opacity: 0.6; } 40% { transform: scale(1.3); opacity: 1; } }
.manual-entry { max-width: 400px; margin: 0 auto; }
.input-container { position: relative; margin-bottom: 30px; }
.manual-input { width: 100%; padding: 20px 25px; font-size: 1.2rem; border: 2px solid rgba(255,255,255,0.3); border-radius: 25px; background: rgba(255,255,255,0.1); color: #ffffff; text-align: center; backdrop-filter: blur(10px); transition: all 0.3s ease; }
.manual-input:focus { outline: none; border-color: rgba(255,255,255,0.6); background: rgba(255,255,255,0.15); transform: scale(1.02); }
.manual-input::placeholder { color: rgba(255,255,255,0.6); }
.back-button { color: rgba(255,255,255,0.7); font-size: 1rem; background: none; border: none; cursor: pointer; transition: color 0.3s ease; margin-top: 20px; }
.back-button:hover { color: #ffffff; }
.welcome-display { text-align: center; padding: 40px 20px; }
.employee-name { font-size: 3rem; font-weight: 700; color: #ffffff; margin-bottom: 20px; text-shadow: 0 4px 20px rgba(0,0,0,0.3); animation: slideInUp 0.6s ease; }
.employee-details { font-size: 1.3rem; color: rgba(255,255,255,0.9); margin-bottom: 15px; animation: slideInUp 0.6s ease 0.1s both; }
.service-years { font-size: 1.5rem; color: #ffc20e; font-weight: 600; margin-bottom: 30px; animation: slideInUp 0.6s ease 0.2s both; }
.welcome-message { font-size: 1.2rem; color: rgba(255,255,255,0.95); line-height: 1.6; max-width: 500px; margin: 0 auto 40px; animation: slideInUp 0.6s ease 0.3s both; }
.present-badge { display: inline-flex; align-items: center; gap: 10px; background: rgba(255,194,14,0.2); color: #ffc20e; padding: 15px 30px; border-radius: 25px; font-size: 1.1rem; font-weight: 600; border: 2px solid rgba(255,194,14,0.3); animation: slideInUp 0.6s ease 0.4s both; }
@keyframes slideInUp { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } }
.celebration-container { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1000; overflow: hidden; }
.firework { position: absolute; width: 4px; height: 4px; border-radius: 50%; animation: fireworkAnimation 2s ease-out forwards; }
@keyframes fireworkAnimation { 0% { transform: scale(0) rotate(0deg); opacity: 1; } 100% { transform: scale(20) rotate(360deg); opacity: 0; } }
.confetti { position: absolute; width: 10px; height: 10px; animation: confettiAnimation 3s ease-out forwards; }
@keyframes confettiAnimation { 0% { transform: translateY(-100vh) rotate(0deg); opacity: 1; } 100% { transform: translateY(100vh) rotate(720deg); opacity: 0; } }
.sparkle { position: absolute; width: 6px; height: 6px; background: radial-gradient(circle, #ffc20e, #c9252c); border-radius: 50%; animation: sparkleAnimation 1.5s ease-out forwards; }
@keyframes sparkleAnimation { 0% { transform: scale(0) translateY(0); opacity: 1; } 50% { transform: scale(1.5) translateY(-30px); opacity: 0.8; } 100% { transform: scale(0) translateY(-60px); opacity: 0; } }
.burst-ring { position: absolute; border: 3px solid; border-radius: 50%; animation: burstRingAnimation 1.5s ease-out forwards; }
@keyframes burstRingAnimation { 0% { transform: scale(0); opacity: 1; border-color: #ffc20e; } 50% { border-color: #c9252c; } 100% { transform: scale(8); opacity: 0; border-color: #ffc20e; } }
.welcome-display.flash { animation: flashWelcome 0.8s ease; }
@keyframes flashWelcome { 0% { opacity: 0; transform: scale(0.8); filter: brightness(2); } 30% { opacity: 1; transform: scale(1.1); filter: brightness(3); } 60% { transform: scale(0.95); filter: brightness(1.5); } 100% { transform: scale(1); filter: brightness(1); } }
.already-marked { text-align: center; padding: 40px 20px; }
.already-marked-icon { font-size: 4rem; margin-bottom: 20px; color: #ffc20e; animation: bounceIcon 1s ease infinite; }
@keyframes bounceIcon { 0%,100% { transform: scale(1); } 50% { transform: scale(1.1); } }
.already-marked-title { font-size: 2.5rem; font-weight: 700; color: #ffffff; margin-bottom: 20px; }
.already-marked-message { font-size: 1.2rem; color: rgba(255,255,255,0.9); line-height: 1.6; }
.service-years-highlight { font-size: 3rem; font-weight: 900; color: #c9252c; text-shadow: 0 0 20px rgba(255,194,14,0.8), 0 0 40px rgba(255,194,14,0.6), 0 0 60px rgba(255,194,14,0.4); animation: serviceYearsPulse 2s ease-in-out; }
@keyframes serviceYearsPulse { 0%,100% { transform: scale(1); text-shadow: 0 0 20px rgba(255,194,14,0.8), 0 0 40px rgba(255,194,14,0.6); } 50% { transform: scale(1.2); text-shadow: 0 0 30px rgba(255,194,14,1), 0 0 60px rgba(255,194,14,0.8), 0 0 90px rgba(255,194,14,0.6); } }
@media (max-width: 768px) { .main-container { padding: 20px; } .logo { font-size: 2rem; } .siri-orb { width: 200px; height: 200px; } .orb-inner { width: 150px; height: 150px; } .holographic-ring { width: 180px; height: 180px; top: -10px; left: -10px; } .employee-name { font-size: 2.2rem; } }
.stats-overlay { position: fixed; top: 20px; right: 20px; background: rgba(0,0,0,0.3); backdrop-filter: blur(10px); padding: 15px 20px; border-radius: 15px; font-size: 0.9rem; color: rgba(255,255,255,0.8); border: 1px solid rgba(255,255,255,0.1); }
.stat-item { margin-bottom: 5px; }
.stat-item:last-child { margin-bottom: 0; }
.stat-number { color: #ffc20e; font-weight: 600; }
.confirm-yes-btn { background: rgba(72,187,120,0.25); padding: 12px 30px; border-radius: 20px; border: 1px solid rgba(72,187,120,0.4); }
.confirm-no-btn { background: rgba(231,76,60,0.25); padding: 12px 30px; border-radius: 20px; border: 1px solid rgba(231,76,60,0.4); }
@media (max-width: 480px) {
    .siri-orb { width: 160px; height: 160px; }
    .orb-inner { width: 120px; height: 120px; }
    .holographic-ring { width: 140px; height: 140px; }
    .stats-overlay { top: 10px; right: 10px; padding: 10px 14px; font-size: 0.75rem; }
    .main-container { padding: 15px; }
    .employee-name { font-size: 1.8rem; }
    .service-years-highlight { font-size: 2rem; }
    .confirm-yes-btn, .confirm-no-btn { padding: 14px 24px; min-height: 44px; }
}
@media (orientation: landscape) and (max-height: 450px) {
    body { height: auto; min-height: 100vh; overflow-y: auto; }
    .siri-orb { width: 120px; height: 120px; margin: 20px auto; }
    .header { margin-bottom: 20px; }
}