:root {--bg-url: url('https://hecy.xyz/background.jpg');--ease-apple: cubic-bezier(0.25, 1, 0.5, 1);}*, *::before, *::after {margin: 0;padding: 0;box-sizing: border-box;}body {width: 100vw;height: 100vh;overflow: hidden;background-color: #000;font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", sans-serif;color: white;transition: background-color 1s var(--ease-apple);}.bg-image {position: absolute;top: -10%;left: -10%;width: 120%;height: 120%;background-image: var(--bg-url);background-size: cover;background-position: center center;background-repeat: no-repeat;z-index: 1;transform: translate(0, 0);transition: filter 1.2s ease;}body.dark-mode .bg-image {filter: blur(5px) brightness(0.6);}body.dark-mode[data-weather="clear"] .bg-image {filter: blur(0px) brightness(0.8);}body.light-mode .bg-image {filter: blur(8px) brightness(1.0) saturate(1.1);}.film-grain {position: fixed;inset: 0;z-index: 2;background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");opacity: 0.04;pointer-events: none;}.vignette-layer {position: fixed;inset: 0;z-index: 3;background: radial-gradient(circle at center, transparent 50%, rgba(0,0,0,0.4) 100%);pointer-events: none;}body.light-mode .vignette-layer {opacity: 0.2;}#art-canvas {position: fixed;inset: 0;z-index: 5;pointer-events: none;}#ui-container {position: absolute;inset: 0;z-index: 50;display: flex;flex-direction: column;justify-content: center;align-items: center;pointer-events: none;}.stage {pointer-events: auto;}.art-wrapper {position: relative;padding: 60px 0;text-align: center;}.line {position: absolute;width: 120%;left: -10%;height: 1px;background: linear-gradient(90deg, transparent, rgba(255,255,255,0.7), transparent);opacity: 0;transform: scaleX(0);}.line-top {top: 0;animation: line-ios 1.5s var(--ease-apple) 0.2s forwards;}.line-bottom {bottom: 0;animation: line-ios 1.5s var(--ease-apple) 0.2s forwards;}.title {font-size: 6rem;font-weight: 800;letter-spacing: 0.15em;margin-right: -0.15em;position: relative;z-index: 10;transition: all 0.8s ease;}body.dark-mode .title {background: linear-gradient(135deg, #ffd700, #ffecb3, #b8860b);-webkit-background-clip: text;color: transparent;filter: drop-shadow(0 0 15px rgba(212, 175, 55, 0.5)) drop-shadow(0 0 50px rgba(212, 175, 55, 0.3));}body.dark-mode .title::after {content: attr(data-text);position: absolute;inset: 0;z-index: -1;background: inherit;-webkit-background-clip: text;color: transparent;filter: blur(20px);opacity: 0.8;animation: pulse 4s ease-in-out infinite alternate;}body.light-mode .title {background: linear-gradient(135deg, #2c3e50, #4ca1af);-webkit-background-clip: text;color: transparent;filter: drop-shadow(0 5px 15px rgba(0,0,0,0.1)) drop-shadow(0 0 30px rgba(255,255,255,0.4));}.subtitle {margin-top: 30px;margin-bottom: 0;font-size: 0.95rem;color: rgba(255,255,255,0.6);letter-spacing: 0.4em;text-transform: uppercase;font-weight: 500;}body.light-mode .subtitle {color: rgba(0,0,0,0.65);font-weight: 600;}.dock-nav {position: fixed;bottom: 100px;left: 0;width: 100%;z-index: 60;pointer-events: auto;display: flex;justify-content: center;}.glass-dock {display: flex;gap: 12px;padding: 12px 14px;background: rgba(255, 255, 255, 0.02);backdrop-filter: blur(20px);border: 1px solid rgba(255,255,255,0.1);border-radius: 100px;}.dock-item {padding: 12px 28px;color: rgba(255,255,255,0.85);text-decoration: none;font-size: 1.05rem;border-radius: 100px;transition: all 0.3s var(--ease-apple);}.dock-item:hover {background: rgba(255,255,255,0.15);color: #fff;transform: scale(1.05);}body.light-mode .dock-item {color: #333;}body.light-mode .dock-item:hover {background: rgba(0,0,0,0.05);}.legal-footer {position: fixed;bottom: 20px;left: 0;width: 100%;z-index: 999;pointer-events: auto;text-align: center;font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;font-size: 12px;line-height: 1.6;color: rgba(255, 255, 255, 0.85);text-shadow: 0 1px 2px rgba(0,0,0,0.8);}.legal-footer p {margin: 2px 0;}.legal-footer a {color: #ffffff;text-decoration: none;border-bottom: 1px solid rgba(255, 255, 255, 0.5);transition: 0.3s;}.legal-footer a:hover {opacity: 1;border-bottom-color: #ffffff;}.control-island {position: fixed;top: 40px;right: 40px;z-index: 100;display: flex;gap: 18px;}.ios-btn {width: 56px;height: 56px;border-radius: 50%;background: rgba(255, 255, 255, 0.005);backdrop-filter: blur(12px);-webkit-backdrop-filter: blur(12px);border: 1px solid rgba(255, 255, 255, 0.2);box-shadow: none;cursor: pointer;position: relative;transition: transform 0.3s var(--ease-apple), background 0.3s;}.ios-btn:hover {transform: scale(1.05);background: rgba(255, 255, 255, 0.08);}.ios-btn:active {transform: scale(0.95);}body.light-mode .ios-btn {background: rgba(255, 255, 255, 0.1);border-color: rgba(255, 255, 255, 0.4);color: #333;}.icon {position: absolute;top: 50%;left: 50%;transform: translate(-50%, -50%);display: flex;align-items: center;justify-content: center;font-size: 1.5rem;opacity: 0;transform: translate(-50%, -50%) scale(0.5) rotate(-20deg);transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);pointer-events: none;}body.dark-mode .moon-icon, body.light-mode .sun-icon, body[data-weather="rain"] .rain-icon, body[data-weather="snow"] .snow-icon, body[data-weather="clear"] .clear-icon {opacity: 1;transform: translate(-50%, -50%) scale(1) rotate(0deg);}@keyframes line-ios {to {opacity: 1;transform: scaleX(1);}}@keyframes pulse {to {filter: blur(30px);opacity: 0.5;}}@media (max-width: 768px) {.bg-image {width: 100%;height: 100%;top: 0;left: 0;}.title {font-size: 3rem;margin-right: 0;}.control-island {top: 25px;right: 25px;gap: 12px;}.ios-btn {width: 48px;height: 48px;}.icon {font-size: 1.25rem;}.dock-nav {bottom: 90px;}.dock-item {padding: 10px 16px;font-size: 0.9rem;}}