:root {--bg-url: url('https://cdn.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;}}#content-router-view {position: absolute;inset: 0;z-index: 40;display: flex;justify-content: center;align-items: center;perspective: 1000px;opacity: 1;transform: scale(1) translateZ(0);filter: blur(0);transition: opacity 0.6s cubic-bezier(0.25, 1, 0.5, 1), transform 0.6s cubic-bezier(0.25, 1, 0.5, 1), filter 0.6s ease;}#content-router-view.page-hidden {opacity: 0;transform: scale(0.95) translateZ(-20px);filter: blur(15px);pointer-events: none;}.fade-out {animation: pageExit 0.6s cubic-bezier(0.32, 0, 0.67, 0) forwards;}.fade-in {animation: pageEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;}@keyframes pageExit {from {opacity: 1;transform: scale(1) translateZ(0);filter: blur(0);}to {opacity: 0;transform: scale(0.92) translateZ(-50px);filter: blur(10px);}}@keyframes pageEnter {from {opacity: 0;transform: scale(1.08) translateZ(50px);filter: blur(20px);}to {opacity: 1;transform: scale(1) translateZ(0);filter: blur(0);}}.liquid-card {pointer-events: auto;position: relative;width: 90vw;height: 85vh;max-width: 1400px;background: rgba(255, 255, 255, 0.015);backdrop-filter: blur(50px) saturate(180%);-webkit-backdrop-filter: blur(50px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.12);border-top: 1px solid rgba(255, 255, 255, 0.3);border-radius: 48px;box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);overflow: hidden;display: flex;flex-direction: column;}body.light-mode .liquid-card {background: rgba(255, 255, 255, 0.5);border: 1px solid rgba(255, 255, 255, 0.6);box-shadow: 0 40px 80px -20px rgba(0,0,0,0.15);}.nav-capsule-wrapper {position: absolute;top: 40px;left: 40px;z-index: 100;}.capsule-btn {display: flex;align-items: center;gap: 12px;padding: 12px 24px;height: 56px;background: rgba(255, 255, 255, 0.05);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border: 1px solid rgba(255, 255, 255, 0.15);border-radius: 100px;color: white;text-decoration: none;font-size: 1rem;font-weight: 500;letter-spacing: 0.05em;transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);}.capsule-btn:hover {background: rgba(255, 255, 255, 0.15);transform: scale(1.04);box-shadow: 0 10px 20px rgba(0,0,0,0.2);padding-right: 30px;}.arrow-icon {font-size: 1.2rem;transition: transform 0.3s;}.capsule-btn:hover .arrow-icon {transform: translateX(-3px);}body.light-mode .capsule-btn {background: rgba(255,255,255,0.4);border-color: rgba(255,255,255,0.5);color: #000;}.card-content-scroll {width: 100%;height: 100%;overflow-y: auto;scrollbar-width: none;padding: 60px 8%;mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);}.card-content-scroll::-webkit-scrollbar {display: none;}.hero-header {margin-bottom: 60px;margin-top: 40px;border-bottom: 1px solid rgba(255,255,255,0.1);padding-bottom: 40px;}body.light-mode .hero-header {border-bottom-color: rgba(0,0,0,0.08);}.big-title {font-size: 4.5rem;font-weight: 800;letter-spacing: -0.02em;background: linear-gradient(135deg, #fff 0%, #aaa 100%);-webkit-background-clip: text;color: transparent;margin-bottom: 10px;}body.dark-mode .big-title {background: linear-gradient(135deg, #ffd700, #fff 50%, #b8860b);-webkit-background-clip: text;}body.light-mode .big-title {background: linear-gradient(135deg, #000 0%, #555 100%);-webkit-background-clip: text;}.intro-text {font-size: 1.5rem;line-height: 1.6;color: rgba(255,255,255,0.8);font-weight: 300;max-width: 800px;}body.light-mode .intro-text {color: rgba(0,0,0,0.7);font-weight: 400;}.grid-layout {display: grid;grid-template-columns: 1fr 1fr;gap: 60px;margin-bottom: 100px;}.section-title {font-size: 0.9rem;text-transform: uppercase;letter-spacing: 0.2em;color: rgba(255,255,255,0.4);margin-bottom: 20px;display: flex;align-items: center;gap: 10px;}.section-title::before {content: '';width: 8px;height: 8px;background: currentColor;border-radius: 50%;}body.light-mode .section-title {color: rgba(0,0,0,0.4);}.rich-text p {font-size: 1.1rem;line-height: 1.8;margin-bottom: 20px;color: rgba(255,255,255,0.7);}body.light-mode .rich-text p {color: rgba(0,0,0,0.7);}.skill-group {display: flex;flex-wrap: wrap;gap: 12px;}.skill-pill {padding: 10px 20px;border-radius: 50px;background: rgba(255,255,255,0.05);border: 1px solid rgba(255,255,255,0.1);font-size: 0.9rem;color: rgba(255,255,255,0.9);transition: 0.3s;}.skill-pill:hover {background: rgba(255,255,255,0.2);transform: translateY(-2px);}body.light-mode .skill-pill {background: rgba(0,0,0,0.05);border-color: rgba(0,0,0,0.1);color: #333;}body.light-mode .skill-pill:hover {background: rgba(0,0,0,0.1);}@media (max-width: 1024px) {.liquid-card {width: 95vw;height: 90vh;}.grid-layout {grid-template-columns: 1fr;gap: 40px;}.big-title {font-size: 3.5rem;}}@media (max-width: 768px) {.liquid-card {width: 100vw;height: 100vh;border-radius: 0;border: none;background: rgba(0,0,0,0.4);}body.light-mode .liquid-card {background: rgba(255,255,255,0.8);}.card-content-scroll {padding: 100px 20px 120px 20px;mask-image: none;-webkit-mask-image: none;}.nav-capsule-wrapper {top: 20px;left: 20px;}.capsule-btn {height: 44px;padding: 8px 16px;font-size: 0.9rem;}.big-title {font-size: 3rem;}.intro-text {font-size: 1.1rem;}.grid-layout {margin-bottom: 50px;}}#content-router-view {position: absolute;inset: 0;z-index: 40;display: flex;justify-content: center;align-items: center;perspective: 1000px;pointer-events: none;}.fade-out {animation: pageExit 0.6s cubic-bezier(0.32, 0, 0.67, 0) forwards;}.fade-in {animation: pageEnter 0.8s cubic-bezier(0.16, 1, 0.3, 1) forwards;}@keyframes pageExit {from {opacity: 1;transform: scale(1) translateZ(0);filter: blur(0);}to {opacity: 0;transform: scale(0.92) translateZ(-50px);filter: blur(10px);}}@keyframes pageEnter {from {opacity: 0;transform: scale(1.08) translateZ(50px);filter: blur(20px);}to {opacity: 1;transform: scale(1) translateZ(0);filter: blur(0);}}.liquid-card {pointer-events: auto;position: relative;width: 90vw;height: 85vh;max-width: 1400px;background: rgba(255, 255, 255, 0.015);backdrop-filter: blur(50px) saturate(180%);-webkit-backdrop-filter: blur(50px) saturate(180%);border: 1px solid rgba(255, 255, 255, 0.12);border-top: 1px solid rgba(255, 255, 255, 0.3);border-radius: 48px;box-shadow: 0 40px 80px -20px rgba(0,0,0,0.5), inset 0 0 0 1px rgba(255,255,255,0.05);overflow: hidden;display: flex;flex-direction: column;}body.light-mode .liquid-card {background: rgba(255, 255, 255, 0.5);border: 1px solid rgba(255, 255, 255, 0.6);box-shadow: 0 40px 80px -20px rgba(0,0,0,0.15);}.nav-capsule-wrapper {position: absolute;top: 40px;left: 40px;z-index: 100;}.capsule-btn {display: flex;align-items: center;gap: 12px;padding: 12px 24px;height: 56px;background: rgba(255, 255, 255, 0.05);backdrop-filter: blur(20px);-webkit-backdrop-filter: blur(20px);border: 1px solid rgba(255, 255, 255, 0.15);border-radius: 100px;color: white;text-decoration: none;font-size: 1rem;font-weight: 500;letter-spacing: 0.05em;transition: all 0.4s cubic-bezier(0.25, 1, 0.5, 1);}.capsule-btn:hover {background: rgba(255, 255, 255, 0.15);transform: scale(1.04);box-shadow: 0 10px 20px rgba(0,0,0,0.2);padding-right: 30px;}.arrow-icon {font-size: 1.2rem;transition: transform 0.3s;}.capsule-btn:hover .arrow-icon {transform: translateX(-3px);}body.light-mode .capsule-btn {background: rgba(255,255,255,0.4);border-color: rgba(255,255,255,0.5);color: #000;}.card-content-scroll {width: 100%;height: 100%;overflow-y: auto;scrollbar-width: none;padding: 60px 8%;mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);-webkit-mask-image: linear-gradient(to bottom, transparent 0%, black 10%, black 90%, transparent 100%);}.card-content-scroll::-webkit-scrollbar {display: none;}.hero-header {margin-bottom: 60px;margin-top: 40px;border-bottom: 1px solid rgba(255,255,255,0.1);padding-bottom: 40px;}body.light-mode .hero-header {border-bottom-color: rgba(0,0,0,0.08);}.big-title {font-size: 4.5rem;font-weight: 800;letter-spacing: -0.02em;background: linear-gradient(135deg, #fff 0%, #aaa 100%);-webkit-background-clip: text;color: transparent;margin-bottom: 10px;}body.dark-mode .big-title {background: linear-gradient(135deg, #ffd700, #fff 50%, #b8860b);-webkit-background-clip: text;}body.light-mode .big-title {background: linear-gradient(135deg, #000 0%, #555 100%);-webkit-background-clip: text;}.intro-text {font-size: 1.5rem;line-height: 1.6;color: rgba(255,255,255,0.8);font-weight: 300;max-width: 800px;}.dock-item {transition-property: transform, background-color, color, opacity, max-width, padding, margin;transition-duration: 0.4s;transition-timing-function: cubic-bezier(0.25, 1, 0.5, 1);max-width: 120px;opacity: 1;overflow: hidden;white-space: nowrap;}.dock-item.active-hidden {opacity: 0;max-width: 0;padding-left: 0;padding-right: 0;margin: 0;pointer-events: none;transform: scale(0);}.works-grid {display: grid;grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));gap: 30px;padding-bottom: 40px;}.work-card {position: relative;background: rgba(255, 255, 255, 0.03);border: 1px solid rgba(255, 255, 255, 0.1);border-radius: 30px;padding: 30px;height: 320px;display: flex;flex-direction: column;justify-content: flex-end;overflow: hidden;cursor: pointer;transition: all 0.5s cubic-bezier(0.25, 1, 0.2, 1);group: work-group;}.work-card:hover {transform: scale(1.02) translateY(-5px);background: rgba(255, 255, 255, 0.08);border-color: rgba(255, 255, 255, 0.3);box-shadow: 0 20px 40px rgba(0,0,0,0.3);}.work-bg-glow {position: absolute;inset: 0;background: radial-gradient(circle at 50% 0%, rgba(255,255,255,0.1), transparent 70%);opacity: 0;transition: 0.5s;}.work-card:hover .work-bg-glow {opacity: 1;}.work-year {position: absolute;top: 30px;right: 30px;font-size: 0.8rem;opacity: 0.5;font-family: monospace;}.work-title {font-size: 1.8rem;font-weight: 700;margin-bottom: 10px;transform: translateY(20px);transition: 0.5s;}.work-desc {font-size: 0.95rem;opacity: 0;transform: translateY(20px);transition: 0.5s;color: rgba(255,255,255,0.7);}.work-card:hover .work-title {transform: translateY(0);}.work-card:hover .work-desc {opacity: 1;transform: translateY(0);}.vision-timeline {border-left: 1px solid rgba(255,255,255,0.1);margin-left: 20px;padding-left: 40px;}.vision-item {margin-bottom: 60px;position: relative;}.vision-item::before {content: '';position: absolute;left: -45px;top: 8px;width: 9px;height: 9px;background: #fff;border-radius: 50%;box-shadow: 0 0 10px rgba(255,255,255,0.5);}.vision-date {font-size: 0.85rem;opacity: 0.5;margin-bottom: 8px;text-transform: uppercase;letter-spacing: 0.1em;}.vision-heading {font-size: 2rem;font-weight: 600;margin-bottom: 15px;}.vision-excerpt {font-size: 1.1rem;line-height: 1.7;opacity: 0.8;}.contact-hero {display: flex;flex-direction: column;gap: 20px;margin-top: 40px;}.contact-link-row {display: flex;align-items: baseline;gap: 20px;text-decoration: none;color: white;padding: 30px;border-bottom: 1px solid rgba(255,255,255,0.1);transition: 0.4s;}.contact-link-row:hover {background: rgba(255,255,255,0.05);padding-left: 50px;border-color: rgba(255,255,255,0.4);}.contact-label {font-size: 0.9rem;opacity: 0.5;width: 100px;text-transform: uppercase;}.contact-value {font-size: 2.5rem;font-weight: 300;}.contact-arrow {margin-left: auto;opacity: 0;transform: translateX(-20px);transition: 0.4s;}.contact-link-row:hover .contact-arrow {opacity: 1;transform: translateX(0);}body.light-mode .work-card {background: rgba(255,255,255,0.4);border-color: rgba(255,255,255,0.5);}body.light-mode .work-title, body.light-mode .vision-heading {color: #111;}body.light-mode .contact-link-row {color: #111;border-bottom-color: rgba(0,0,0,0.1);}body.light-mode .contact-link-row:hover {background: rgba(0,0,0,0.03);}body.light-mode .vision-timeline {border-left-color: rgba(0,0,0,0.1);}body.light-mode .vision-item::before {background: #333;}