*,*:before,*:after{box-sizing:border-box}body,html{margin:0;padding:0;font-family:Poppins,sans-serif;width:100vw;height:100dvh;overflow:hidden;position:relative;-webkit-user-select:none;user-select:none;background-color:#1a1a1a}#root{width:100%;height:100%}@keyframes fadeInUp{0%{opacity:0;transform:translate3d(0,40px,0)}to{opacity:1;transform:translateZ(0)}}@keyframes zoomIn{0%{opacity:0;transform:scale3d(.8,.8,.8)}to{opacity:1;transform:scaleZ(1)}}@keyframes confetti-rain{0%{transform:translateY(-100%);opacity:1}to{transform:translateY(100vh);opacity:0}}@keyframes shine{0%{transform:translate(-100%)}to{transform:translate(200%)}}@keyframes slideInFromRight{0%{opacity:0;transform:translate3d(100%,0,0) scale(.95)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes slideInFromLeft{0%{opacity:0;transform:translate3d(-100%,0,0) scale(.95)}to{opacity:1;transform:translateZ(0) scale(1)}}@keyframes slideOutToLeft{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(-100%,0,0) scale(.95)}}@keyframes slideOutToRight{0%{opacity:1;transform:translateZ(0) scale(1)}to{opacity:0;transform:translate3d(100%,0,0) scale(.95)}}@keyframes fadeInScale{0%{opacity:0;transform:scale(.8) rotate(-2deg)}to{opacity:1;transform:scale(1) rotate(0)}}@keyframes fadeOutScale{0%{opacity:1;transform:scale(1) rotate(0)}to{opacity:0;transform:scale(1.1) rotate(2deg)}}@keyframes bounce{0%,20%,53%,80%,to{transform:translateZ(0)}40%,43%{transform:translate3d(0,-8px,0)}70%{transform:translate3d(0,-4px,0)}90%{transform:translate3d(0,-2px,0)}}@keyframes pulse{0%{transform:scale(1);box-shadow:0 10px 25px #ff6b6b66}50%{transform:scale(1.05);box-shadow:0 15px 35px #ff6b6b99}to{transform:scale(1);box-shadow:0 10px 25px #ff6b6b66}}@keyframes crossfadeIn{0%{opacity:0;transform:scale(1.02)}to{opacity:1;transform:scale(1)}}@keyframes crossfadeOut{0%{opacity:1;transform:scale(1)}to{opacity:0;transform:scale(.98)}}.app-container{width:100%;height:100%;position:relative}.progress-bar-container{position:absolute;top:0;left:0;width:100%;height:5px;background-color:#fff3;z-index:10}.progress-bar{height:100%;background:linear-gradient(90deg,#ff6b6b,#feca57);transition:width .8s cubic-bezier(.25,.46,.45,.94);position:relative;overflow:hidden}.progress-bar:after{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.3),transparent);animation:shimmer 2s infinite}@keyframes shimmer{0%{left:-100%}to{left:100%}}@media (min-width: 1920px){.slide{position:absolute;top:0;left:0;width:100vw;height:100vh;display:flex;align-items:center;justify-content:center;opacity:0;background-size:cover;background-position:center;background-repeat:no-repeat;background-attachment:scroll;transition:none;transform-origin:center center;pointer-events:none;z-index:1;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden;max-width:100vw;max-height:100vh;overflow:hidden}.slide-content-center{max-width:100vw;max-height:100vh;overflow:hidden}}.slide{position:absolute;top:0;left:0;width:100%;height:100%;display:flex;align-items:center;justify-content:center;opacity:0;background-size:cover;background-position:center;background-repeat:no-repeat;transition:none;transform-origin:center center;pointer-events:none;z-index:1;will-change:transform,opacity;backface-visibility:hidden;-webkit-backface-visibility:hidden}.slide.active{opacity:1;pointer-events:auto;z-index:2}.slide.fade-out{animation:slideOutToLeft .3s cubic-bezier(.55,.055,.675,.19) forwards;pointer-events:none;z-index:1}.slide.slide-in-left{animation:slideInFromLeft .5s cubic-bezier(.25,.46,.45,.94) forwards}.slide.slide-in-right{animation:slideInFromRight .5s cubic-bezier(.25,.46,.45,.94) forwards}.slide.fade-in-scale{animation:fadeInScale .5s cubic-bezier(.25,.46,.45,.94) forwards}.slide.fade-out-scale{animation:fadeOutScale .3s cubic-bezier(.55,.055,.675,.19) forwards}.slide.crossfade-in{animation:crossfadeIn .4s cubic-bezier(.25,.46,.45,.94) forwards;opacity:1;pointer-events:auto;z-index:2}.slide.crossfade-out{animation:crossfadeOut .3s cubic-bezier(.55,.055,.675,.19) forwards;pointer-events:none;z-index:1}.slide.first-slide{background-size:cover!important;background-position:center!important;background-repeat:no-repeat!important;background-attachment:scroll!important;overflow:hidden;transform:none!important;transform-origin:center center!important}@media (min-width: 1920px){.slide.first-slide{width:100vw!important;height:100vh!important;max-width:100vw!important;max-height:100vh!important;left:0!important;top:0!important;right:0!important;bottom:0!important}}.slide-content-center{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;text-align:center;padding:20px 20px 40px}.polaroid-frame{background:#fff;padding:15px 15px 20px;border-radius:8px;box-shadow:0 25px 50px -12px #0006;position:relative;overflow:hidden;width:100%;max-width:500px;max-height:55vh;display:flex;align-items:center;justify-content:center;transform:rotate(0)}.polaroid-frame img{width:100%;height:100%;object-fit:cover;display:block;object-position:center center}.title{font-family:Kanit,sans-serif;font-size:clamp(2.5rem,7vw,4.5rem);line-height:1.1;margin:0}.story-title-top{font-family:Kanit,sans-serif;font-size:clamp(1.8rem,5vw,3rem);color:#333;margin-bottom:15px}.text{font-size:clamp(1rem,2.5vw,1.4rem);margin-top:15px;line-height:1.6;opacity:.9}.description-under-photo{color:#555;font-size:clamp(1rem,2.5vw,1.2rem);margin-top:20px;max-width:600px}.button{font-family:Poppins,sans-serif;background:linear-gradient(45deg,#ff6b6b,#feca57);color:#fff;padding:15px 35px;border-radius:50px;text-decoration:none;font-weight:600;font-size:clamp(1rem,2.5vw,1.1rem);transition:all .3s cubic-bezier(.25,.46,.45,.94);box-shadow:0 10px 25px #ff6b6b66;border:none;cursor:pointer;margin-top:25px;display:inline-flex;align-items:center;gap:10px;position:relative;overflow:hidden}.button:before{content:"";position:absolute;top:0;left:-100%;width:100%;height:100%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.2),transparent);transition:left .5s ease}.button:hover:before{left:100%}.button:hover{transform:translateY(-2px) scale(1.05);box-shadow:0 15px 35px #ff6b6b99;animation:pulse 1s infinite}.button:active{transform:translateY(0) scale(.98);animation:bounce .6s ease}.animated-text{animation-duration:.8s;animation-fill-mode:both}.slide:before{content:"";position:absolute;top:0;left:0;right:0;bottom:0;background:linear-gradient(45deg,#ffffff1a,#ffffff0d);opacity:0;transition:opacity .3s ease;pointer-events:none;z-index:1}.slide.active:before{opacity:1}.slide-content-center{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;height:100%;text-align:center;padding:20px 20px 40px}.animated-text{animation-duration:.8s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.25,.46,.45,.94)}.tinder-container{width:100%;height:100%;display:flex;flex-direction:column;justify-content:center;align-items:center;background:linear-gradient(to top,#fdcbf1,#e6dee9);overflow:hidden;position:relative}.card-container{width:90vw;max-width:350px;height:60vh;max-height:500px;position:relative;z-index:1}.tinder-card-wrapper{position:absolute;width:100%;height:100%;top:0;left:0;cursor:grab}.tinder-card{width:100%;height:100%;background-color:#fff;box-shadow:0 10px 30px -5px #0000004d;border-radius:20px;background-size:cover;background-position:center;position:relative;overflow:hidden}.card-info{position:absolute;bottom:0;left:0;right:0;color:#fff;padding:20px;background:linear-gradient(to top,rgba(0,0,0,.9),transparent);border-bottom-left-radius:20px;border-bottom-right-radius:20px;text-align:left}.card-info h3{font-family:Kanit,sans-serif;font-size:1.5rem;margin:0 0 5px;word-wrap:break-word;text-shadow:1px 1px 3px rgba(0,0,0,.5)}.card-info p{font-size:1rem;margin:0;word-wrap:break-word;opacity:.9;text-shadow:1px 1px 3px rgba(0,0,0,.4)}.swipe-buttons{margin-top:20px;display:flex;gap:20px;z-index:10;align-items:center}.swipe-button{background:#fff;border-radius:50%;width:70px;height:70px;display:flex;justify-content:center;align-items:center;box-shadow:0 5px 15px #0003;border:none;cursor:pointer;transition:transform .2s ease}.swipe-button:hover{transform:scale(1.1)}.swipe-button.undo{width:50px;height:50px}.swipe-button:disabled{opacity:.4;cursor:not-allowed;transform:scale(1);box-shadow:0 8px 20px #00000026}.match-screen{text-align:center;color:#333;padding:20px}@media (min-width: 1200px){.match-screen{min-height:100vh;height:100vh;width:100vw;padding:0;display:flex;flex-direction:column;justify-content:center;align-items:center}}.confetti{position:absolute;top:0;width:10px;height:20px}.card-feedback{position:absolute;top:40px;font-family:Kanit,sans-serif;font-size:4rem;font-weight:800;padding:10px 20px;border-radius:10px;border:5px solid;opacity:0;transition:opacity .3s ease}.card-feedback.like{right:20px;color:#00eda6;border-color:#00eda6;transform:rotate(15deg)}.card-feedback.nope{left:20px;color:#fd267d;border-color:#fd267d;transform:rotate(-15deg)}.tinder-card-wrapper:nth-child(n) .tinder-card:not([style*="transform: translate(0px, 0px) rotate(0deg)"]) .card-feedback.like{opacity:1;transform:rotate(15deg) translate(20px)}.tinder-card-wrapper:nth-child(n) .tinder-card:not([style*="transform: translate(0px, 0px) rotate(0deg)"]) .card-feedback.nope{opacity:1;transform:rotate(-15deg) translate(-20px)}.tinder-card-wrapper:active{cursor:grabbing}.polaroidShine{position:absolute;top:0;left:0;width:50%;height:100%;background:linear-gradient(to right,#fff0,#fff6,#fff0);animation:shine 4s infinite;animation-delay:1s}.background-hint{position:absolute;top:50%;transform:translateY(-50%) rotate(-25deg);font-size:clamp(6rem,20vw,12rem);font-weight:900;font-family:Kanit,sans-serif;color:#0000000d;z-index:0;opacity:0;transition:opacity .3s ease-in-out;pointer-events:none}.background-hint.nope{left:20px;transform:translateY(-50%) rotate(25deg);color:#fd267d1a}.background-hint.like{right:20px;color:#00eda61a}.background-hint.visible{opacity:1}.card-container{z-index:1}.match-screen .title{font-family:Kanit,sans-serif;font-size:clamp(2.5rem,8vw,4rem);line-height:1.1;margin:0 0 15px;background:linear-gradient(45deg,#ff6b6b,#feca57);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.match-buttons-container{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:15px;margin-top:30px;width:100%;max-width:300px;margin-left:auto;margin-right:auto}.swipe-button.nope i{color:#fd267d;font-size:28px;transition:color .2s ease}.swipe-button.like i{color:#00eda6;font-size:24px;transition:color .2s ease}.swipe-button.undo i{color:#ffb400;font-size:20px}