:root{--c-navy-dark: #02040a;--c-navy: #0B1B2B;--c-teal-dark: #0f1e2b;--c-teal: #142838;--c-gold: #F6C57A;--c-gold-dim: #C49A5A;--c-gold-glow: rgba(246, 197, 122, .3);--c-orange-fire: #FF9E44;--c-text-primary: rgba(255, 255, 255, .95);--c-text-secondary: rgba(255, 255, 255, .65);--c-text-tertiary: rgba(255, 255, 255, .4);--font-serif: "Cormorant Garamond", serif;--font-sans: "Montserrat", -apple-system, BlinkMacSystemFont, sans-serif;--radius-sm: 8px;--radius-md: 16px;--radius-lg: 24px;--radius-pill: 999px;--space-xs: 8px;--space-sm: 12px;--space-md: 16px;--space-lg: 24px;--space-xl: 32px;--blur-glass: 14px;--border-glass: 1px solid rgba(255, 255, 255, .08);--shadow-soft: 0 4px 24px rgba(0, 0, 0, .2);--ease-cine: cubic-bezier(.2, .8, .2, 1);--ease-premium: cubic-bezier(.16, 1, .3, 1);--dur-short: .4s;--dur-med: .8s;--dur-long: 1.4s;--glow-opacity: .18;--glow-blur: 20px}*{margin:0;padding:0;box-sizing:border-box;user-select:none;-webkit-user-select:none;touch-action:none}body{background-color:var(--c-navy-dark);overflow:hidden;font-family:var(--font-sans);color:var(--c-text-primary);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#webgl-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:1}#fx-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:50;pointer-events:none;mix-blend-mode:screen}#touch-fx-canvas{position:fixed;top:0;left:0;width:100%;height:100%;z-index:55;pointer-events:none;mix-blend-mode:screen}#fade-overlay{position:fixed;inset:0;background:#000;opacity:0;pointer-events:none;z-index:9999;transition:opacity 1s var(--ease-cine)}#fade-overlay.visible{opacity:1}#ui-layer{position:fixed;top:0;left:0;width:100%;height:100%;z-index:9999;pointer-events:none;display:flex;flex-direction:column;justify-content:space-between}#progress-container{width:100%;height:2px;background:#ffffff08;position:absolute;top:0;left:0;z-index:50}#story-progress{height:100%;background:var(--c-gold);width:0%;transition:width 1.2s var(--ease-cine);box-shadow:0 0 10px var(--c-gold-glow)}#mute-btn{position:absolute;top:var(--space-lg);right:var(--space-lg);width:40px;height:40px;background:#ffffff08;border:var(--border-glass);border-radius:50%;color:var(--c-text-secondary);display:flex;align-items:center;justify-content:center;cursor:pointer;pointer-events:auto;transition:all var(--dur-short) ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:40}#mute-btn:hover{background:#ffffff1a;color:var(--c-gold);transform:scale(1.05)}#mute-btn:after{content:"";display:block;width:14px;height:14px;background-color:currentColor;mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cpath d='M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07'/%3E%3C/svg%3E");mask-size:contain;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}#mute-btn.muted:after{mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='11 5 6 9 2 9 2 15 6 15 11 19 11 5'/%3E%3Cline x1='23' y1='9' x2='17' y2='15'/%3E%3Cline x1='17' y1='9' x2='23' y2='15'/%3E%3C/svg%3E")}#skip-btn{position:absolute;bottom:var(--space-lg);right:var(--space-lg);padding:10px 20px;background:#ffffff0d;border:1px solid rgba(255,255,255,.15);border-radius:var(--radius-pill);color:var(--c-text-secondary);font-family:var(--font-sans);font-size:.75rem;font-weight:500;letter-spacing:.1em;cursor:pointer;pointer-events:auto;transition:all var(--dur-short) ease;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:50;opacity:.6}#skip-btn:hover{background:#ffffff1f;color:var(--c-gold);border-color:var(--c-gold);opacity:1;transform:translate(2px)}#skip-btn:active{transform:scale(.96)}#skip-btn.hidden{display:none!important}#scene-text-container{position:absolute;bottom:120px;left:var(--space-xl);width:calc(100% - var(--space-xl) * 2);max-width:420px;padding:var(--space-lg);border-radius:var(--radius-lg);background:#02040a80;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border:1px solid rgba(246,197,122,.12);box-shadow:inset 0 1px 2px #ffffff14,0 8px 32px #0000004d;display:flex;flex-direction:column;align-items:flex-start;text-align:left;opacity:0;transform:translateY(20px);transition:opacity var(--dur-med) var(--ease-cine),transform var(--dur-med) var(--ease-cine);pointer-events:auto}#scene-text-container.visible{opacity:1;transform:translateY(0)}#scene-title{font-family:var(--font-serif);font-size:1.75rem;line-height:1.1;font-weight:600;color:var(--c-gold);margin-bottom:var(--space-sm);letter-spacing:-.01em;text-shadow:0 0 20px rgba(246,197,122,.2)}#scene-desc{font-family:var(--font-sans);font-size:.95rem;line-height:1.6;color:var(--c-text-secondary);font-weight:300;margin-bottom:0}#action-prompt{position:relative;width:100%;margin-bottom:12px;font-family:var(--font-serif);font-size:.95rem;color:var(--c-text-primary);font-style:italic;text-align:left;opacity:0;transform:translateY(10px);transition:opacity var(--dur-long) var(--ease-cine),transform var(--dur-long) var(--ease-cine);text-shadow:0 2px 10px rgba(0,0,0,.5)}#action-prompt.visible{opacity:1;transform:translateY(0);animation:pulse-glow 4s infinite ease-in-out}@keyframes pulse-glow{0%,to{opacity:.9;text-shadow:0 0 10px rgba(255,255,255,.1)}50%{opacity:1;text-shadow:0 0 20px rgba(255,255,255,.3)}}#hint-text{margin-top:var(--space-md);padding-top:var(--space-md);border-top:1px solid rgba(255,255,255,.05);width:100%;font-family:var(--font-sans);font-size:.7rem;font-weight:500;text-transform:uppercase;letter-spacing:.12em;color:var(--c-text-tertiary);display:flex;align-items:center;gap:8px;opacity:0;transition:opacity var(--dur-short) ease}#hint-text.visible{opacity:1}#hint-text:before{content:"";display:block;width:6px;height:6px;background:var(--c-gold);border-radius:50%;box-shadow:0 0 8px var(--c-gold);animation:blink-dot 2s infinite}@keyframes blink-dot{0%,to{opacity:.4;transform:scale(.8)}50%{opacity:1;transform:scale(1.2)}}#narration-overlay{position:fixed;top:18%;left:50%;transform:translate(-50%,-50%);width:80%;max-width:640px;text-align:center;font-family:var(--font-serif);font-size:2rem;line-height:1.3;color:var(--c-text-primary);text-shadow:0 0 10px rgba(255,255,255,.6),0 0 20px rgba(255,255,255,.4),0 0 40px rgba(246,197,122,.3),0 4px 24px rgba(0,0,0,.8);pointer-events:none;opacity:0;filter:blur(4px);transition:all var(--dur-long) var(--ease-cine);z-index:20}#narration-overlay.visible{opacity:1;filter:blur(0px);transform:translate(-50%,-50%) scale(1.02)}#narration-overlay p{margin-bottom:var(--space-md)}#tutorial-overlay{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);width:240px;height:240px;pointer-events:none;opacity:0;transition:opacity var(--dur-med) ease;z-index:15;display:flex;align-items:center;justify-content:center}#tutorial-overlay.visible{opacity:.8}.hand-icon{width:48px;height:48px;background-color:var(--c-text-primary);mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0'%3E%3C/path%3E%3Cpath d='M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2'%3E%3C/path%3E%3Cpath d='M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8'%3E%3C/path%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'%3E%3C/path%3E%3C/svg%3E");-webkit-mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M18 11V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v0'%3E%3C/path%3E%3Cpath d='M14 10V4a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v2'%3E%3C/path%3E%3Cpath d='M10 10.5V6a2 2 0 0 0-2-2v0a2 2 0 0 0-2 2v8'%3E%3C/path%3E%3Cpath d='M18 8a2 2 0 1 1 4 0v6a8 8 0 0 1-8 8h-2c-2.8 0-4.5-.86-5.99-2.34l-3.6-3.6a2 2 0 0 1 2.83-2.82L7 15'%3E%3C/path%3E%3C/svg%3E");mask-size:contain;-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;position:absolute;filter:drop-shadow(0 2px 8px rgba(0,0,0,.3))}.tutorial-path{position:absolute;border:2px dashed rgba(255,255,255,.2);border-radius:var(--radius-pill)}@keyframes swipe-right{0%{transform:translate(-40px) rotate(-10deg);opacity:0}20%{opacity:1}80%{transform:translate(40px) rotate(0);opacity:1}to{transform:translate(50px) rotate(0);opacity:0}}@keyframes drag-right{0%{transform:translate(-40px);opacity:0}20%{opacity:1}80%{transform:translate(40px);opacity:1}to{transform:translate(40px);opacity:0}}@keyframes hold-press{0%{transform:scale(1);opacity:.5}50%{transform:scale(.9);opacity:1}to{transform:scale(1);opacity:.5}}@keyframes hold-ring{0%{transform:scale(.6);opacity:.8;border-width:2px;border-color:var(--c-gold)}to{transform:scale(1.6);opacity:0;border-width:0px;border-color:var(--c-gold)}}.tutorial-swipe .hand-icon{animation:swipe-right 2.5s infinite ease-out}.tutorial-drag .hand-icon{animation:drag-right 2.5s infinite ease-in-out}.tutorial-hold .hand-icon{animation:hold-press 2.5s infinite ease-in-out}.tutorial-hold .tutorial-path{width:80px;height:80px;border:1px solid var(--c-gold);border-radius:50%;animation:hold-ring 2.5s infinite ease-out}#loading-screen{position:fixed;top:0;left:0;width:100%;height:100%;background:var(--c-navy-dark);z-index:100;display:flex;justify-content:center;align-items:center;transition:opacity 1s ease}.loader-content{text-align:center;width:280px;opacity:.9}.loader-content h1{font-family:var(--font-serif);font-size:2rem;color:var(--c-gold);margin-bottom:var(--space-lg);font-weight:400;font-style:italic;letter-spacing:.02em}.progress-bar-bg{width:100%;height:2px;background:#ffffff1a;border-radius:2px;overflow:hidden;margin-bottom:var(--space-sm)}#load-progress{width:0%;height:100%;background:var(--c-gold);transition:width .2s linear;box-shadow:0 0 8px var(--c-gold-glow)}.loader-content p{font-size:.75rem;color:var(--c-text-tertiary);letter-spacing:.1em;text-transform:uppercase}#title-overlay{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:#02040ae6;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);opacity:0;transition:opacity 2s var(--ease-cine);pointer-events:none;padding:40px;text-align:center}#title-overlay.visible{opacity:1;pointer-events:auto}#title-overlay h1{font-family:var(--font-serif);font-size:4rem;color:var(--c-gold);margin-bottom:var(--space-md);font-weight:400;text-shadow:0 0 30px var(--c-gold-glow)}#title-overlay p{font-family:var(--font-sans);color:var(--c-text-secondary);margin-bottom:64px;font-size:1rem;letter-spacing:.1em;text-transform:uppercase;font-weight:300}#restart-btn{background:transparent;border:1px solid var(--c-gold);color:var(--c-gold);padding:16px 40px;font-family:var(--font-sans);font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.2em;border-radius:var(--radius-sm);cursor:pointer;transition:all .4s ease;min-width:180px}#restart-btn:hover{background:var(--c-gold);color:var(--c-navy-dark);box-shadow:0 0 30px var(--c-gold-glow)}@media (max-width: 600px){#scene-text-container{width:calc(100% - 32px);bottom:90px;left:16px;padding:20px}#scene-title{font-size:1.5rem}#scene-desc{font-size:.9rem}#narration-overlay{font-size:1.5rem;width:90%}#title-overlay h1{font-size:2.8rem}}#c1-hero-image{position:fixed;bottom:5vh;left:50%;transform:translate(-50%);max-width:480px;width:clamp(200px,32vw,420px);height:auto;object-fit:contain;z-index:15;opacity:0;pointer-events:none;filter:drop-shadow(0 0 40px rgba(255,160,122,.4)) drop-shadow(0 0 80px rgba(255,140,100,.18)) drop-shadow(0 12px 50px rgba(0,0,0,.5));transition:opacity .8s ease-out}#c1-hero-image.visible{opacity:1}#c1-hero-image.hidden{display:none}@media (max-width: 600px){#c1-hero-image{width:clamp(240px,78vw,600px);bottom:4vh}}#c2-hero-image{--c2-base-width: clamp(400px, 58vw, 720px);--c2-y-offset: 8%;position:fixed;top:calc(50% + var(--c2-y-offset));left:50%;width:var(--c2-base-width);height:auto;object-fit:contain;z-index:50;opacity:1;pointer-events:none;transform:translate(-50%,-50%) scale(1);filter:blur(0px);transform-origin:center center;will-change:transform,opacity,filter}#c2-hero-image.hidden{display:none!important}#c2-hero-image.visible{display:block}@media (max-width: 600px){#c2-hero-image{--c2-base-width: clamp(280px, 88vw, 100%);--c2-y-offset: 6%}}#c3-hero-image{position:fixed;left:50%;bottom:0;transform:translate(-50%);width:80vw;height:auto;max-width:none;z-index:120;pointer-events:none;opacity:0;filter:drop-shadow(0 0 60px rgba(120,180,255,.22));transition:opacity .8s ease-out}#c3-hero-image.visible{opacity:1}#c3-hero-image.hidden{display:none!important}@media (max-width: 600px){#c3-hero-image{width:100vw}}#c8-hero-image{position:fixed;left:50%;top:50%;transform:translate(-50%,-50%);width:100vw;height:100vh;object-fit:cover;object-position:center;z-index:50;pointer-events:none;opacity:0;transition:opacity 1s ease-out}#c8-hero-image.visible{opacity:1}#c8-hero-image.hidden{display:none!important}#c9-hero-image{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);width:95vw;max-width:1200px;height:auto;object-fit:contain;object-position:center center;z-index:0;pointer-events:none;opacity:0;transition:opacity 1.5s var(--ease-cine)}#c9-hero-image.visible{opacity:1}#c9-hero-image.hidden{display:none!important}@media (max-width: 600px){#c9-hero-image{width:95vw}}#c7-outside-layer{position:fixed;inset:0;width:100vw;height:100vh;background-image:url(/assets/scenes/c7-user-full.png);background-size:cover;background-position:center bottom;background-repeat:no-repeat;z-index:80;pointer-events:none;opacity:1;filter:none}#c7-outside-layer.hidden{display:none!important}#c7-glass-layer{position:fixed;inset:0;width:100vw;height:100vh;z-index:140;pointer-events:none;background:linear-gradient(180deg,#b4d2e6eb,#c8e1f5e0 30%,#dcf0ffd9 70%,#b4d2e6e6);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);-webkit-mask-image:none;mask-image:none}#c7-glass-layer.hidden{display:none!important}#c5-panels{position:fixed;top:0;left:0;width:100%;height:100%;z-index:80;pointer-events:none;display:flex;opacity:0;transition:opacity .8s ease-out}#c5-panels.visible{opacity:1}#c5-panels.hidden{display:none!important}#c5-left-panel{width:25%;height:100%;background:#000;flex-shrink:0;transition:width .15s ease-out}#c5-right-panel{width:75%;height:100%;position:relative;overflow:hidden;flex-shrink:0}#c5-right-bg{position:absolute;top:0;left:0;width:100%;height:100%;background-image:url(/assets/scenes/c5-winter-room.png);background-size:cover;background-position:center;background-repeat:no-repeat}@media (max-width: 600px){#c5-left-panel,#c5-right-panel{width:50%}}#c14-cloud-layer{position:fixed;left:50%;bottom:15%;transform:translate(-50%);width:60vw;height:30vh;background:radial-gradient(ellipse 100% 80% at 50% 100%,rgba(255,253,245,.95) 0%,rgba(255,230,180,.7) 25%,rgba(255,210,160,.4) 50%,rgba(255,200,150,.15) 75%,transparent 100%);filter:blur(25px);z-index:200;pointer-events:none;opacity:0;transition:opacity 1s ease-out}#c14-cloud-layer.visible{opacity:1}#c14-cloud-layer.hidden{display:none!important}#c14-hero-image{position:fixed;left:50%;bottom:10%;transform:translate(-50%);width:auto;height:100vh;max-width:100vw;object-fit:contain;z-index:210;pointer-events:none;opacity:0;transition:opacity 1s ease-out}#c14-hero-image.visible{opacity:1}#c14-hero-image.hidden{display:none!important}@media (max-width: 600px){#c14-hero-image{height:50vh;bottom:15%}#c14-cloud-layer{width:90vw;height:25vh;bottom:10%}}#vignette-overlay{position:fixed;inset:0;pointer-events:none;z-index:150;background:radial-gradient(ellipse 70% 60% at 50% 50%,transparent 0%,transparent 40%,rgba(0,0,0,.15) 70%,rgba(0,0,0,.4) 100%)}#atmosphere-layer{position:fixed;inset:0;pointer-events:none;z-index:145;background:linear-gradient(180deg,rgba(20,40,56,.08) 0%,transparent 30%,transparent 70%,rgba(11,27,43,.12) 100%);opacity:.8;animation:atmosphere-breathe 8s ease-in-out infinite}@keyframes atmosphere-breathe{0%,to{opacity:.7}50%{opacity:.9}}.hero-image{position:relative}.hero-image:before{content:"";position:absolute;inset:0;background:inherit;filter:blur(var(--glow-blur));opacity:var(--glow-opacity);z-index:-1;pointer-events:none}#scene-text-container{transition:opacity var(--dur-med) var(--ease-premium),transform var(--dur-med) var(--ease-premium),filter var(--dur-med) var(--ease-premium);filter:blur(0)}#scene-text-container:not(.visible){filter:blur(4px)}#scene-title{transition:opacity .6s var(--ease-premium) .1s,transform .6s var(--ease-premium) .1s}#scene-desc{transition:opacity .6s var(--ease-premium) .2s,transform .6s var(--ease-premium) .2s}#scene-text-container:not(.visible) #scene-title,#scene-text-container:not(.visible) #scene-desc{opacity:0;transform:translateY(8px)}#scene-text-container.visible #scene-title,#scene-text-container.visible #scene-desc{opacity:1;transform:translateY(0)}@media (prefers-reduced-motion: reduce){*,*:before,*:after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}#atmosphere-layer{animation:none;opacity:.8}#scene-text-container,#scene-title,#scene-desc,#action-prompt{transition:none;filter:none}}.hidden{display:none!important}