.mist-room{cursor:pointer;opacity:1;will-change:transform;-webkit-backface-visibility:hidden;backface-visibility:hidden;background:#0a0a0a;width:100vw;height:100vh;transition:opacity .5s;position:relative;overflow:hidden;transform:translateZ(0)}.mist-room--hydrating{opacity:.8}.mist-room__content{z-index:10;justify-content:center;align-items:center;width:100%;height:100%;padding:2rem;display:flex;position:relative}.mist-room__fragments{text-align:center;flex-direction:column;gap:2rem;max-width:600px;display:flex}.mist-room__fragment{opacity:var(--fragment-opacity,.5);animation-delay:var(--fragment-delay,0s);text-shadow:0 0 10px rgba(255,255,255,.1),0 0 20px rgba(255,255,255,.05);will-change:transform,opacity;font-size:1.2rem;line-height:1.4;transition:opacity .3s;transform:translateZ(0)}.mist-room__fragment--light{font-weight:300}.mist-room__fragment--normal{font-weight:400}.mist-room__fragment--medium{font-weight:500}.mist-room__fragment--bold{font-weight:700}.mist-room__fragment--arriving{animation:3s ease-in-out infinite fragmentArriving}.mist-room__fragment--present{animation:4s ease-in-out infinite fragmentPresent}.mist-room__fragment--fading{animation:2.5s ease-in-out infinite fragmentFading}.mist-room__fragment--static{animation:6s ease-in-out infinite fragmentStatic}.mist-room__layer{pointer-events:none;will-change:transform,opacity,filter;width:100%;height:100%;position:absolute;top:0;left:0;transform:translateZ(0)}.mist-room__layer--combined{z-index:5;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);will-change:transform,opacity;animation:8s ease-in-out infinite mistBreathing,12s ease-in-out infinite mistDrift}.mist-room__transition-overlay{z-index:15;background:rgba(0,0,0,.8);width:100%;height:100%;animation:2.5s ease-in-out transitionFade;position:absolute;top:0;left:0}.mist-room__hover-effect{z-index:8;pointer-events:none;will-change:transform,opacity;background:radial-gradient(circle,rgba(255,255,255,.1) 0%,transparent 70%);border-radius:50%;width:200px;height:200px;transition:all .3s;animation:2s ease-in-out infinite hoverPulse;position:absolute;transform:translate(-50%,-50%)}.mist-room--cold{filter:hue-rotate(20deg)}.mist-room--warm{filter:hue-rotate(180deg)}.mist-room--neutral{filter:none}@keyframes fragmentArriving{0%,to{opacity:.2;text-shadow:0 0 5px rgba(255,255,255,.1),0 0 10px rgba(255,255,255,.05);transform:translateY(10px)}50%{opacity:var(--fragment-opacity,.8);text-shadow:0 0 15px rgba(255,255,255,.2),0 0 25px rgba(255,255,255,.1);transform:translate(0,0)}}@keyframes fragmentPresent{0%,to{opacity:var(--fragment-opacity,.8);transform:scale(1)}50%{opacity:calc(var(--fragment-opacity,.8)*1.2);transform:scale(1.02)}}@keyframes fragmentFading{0%{opacity:var(--fragment-opacity,.6);transform:translate(0,0)}to{opacity:.1;transform:translateY(-10px)}}@keyframes fragmentStatic{0%,to{opacity:var(--fragment-opacity,.4);filter:blur(.3px)}50%{opacity:calc(var(--fragment-opacity,.4)*.7);filter:blur(.5px)}}@keyframes mistBreathing{0%,to{opacity:.8;transform:scale(1)}50%{opacity:.85;transform:scale(1.005)}}@keyframes mistDrift{0%,to{transform:translate(0,0)}25%{transform:translate(1px,-.5px)}50%{transform:translate(-.5px,1px)}75%{transform:translate(.5px,-1px)}}@keyframes hoverPulse{0%,to{opacity:.3;transform:translate(-50%,-50%)scale(1)}50%{opacity:.6;transform:translate(-50%,-50%)scale(1.2)}}@keyframes transitionFade{0%{opacity:0}20%{opacity:1}80%{opacity:1}to{opacity:0}}.mist-room__fragment--static{text-shadow:.5px 0 rgba(255,0,0,.3),-.5px 0 rgba(0,255,255,.3),0 0 10px rgba(255,255,255,.1)}@media (max-width:768px){.mist-room__fragments{gap:1.5rem;padding:1rem}.mist-room__fragment{font-size:1rem}.mist-room__hover-effect{width:150px;height:150px}}