.interactive-letter-container{min-height:100vh;display:flex;align-items:center;justify-content:center;background:transparent;position:relative;overflow:hidden;padding:2rem;box-sizing:border-box}.envelope-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);cursor:pointer;transition:all .6s cubic-bezier(.25,.46,.45,.94);z-index:5}.envelope-wrapper:hover{transform:translate(-50%,-50%) scale(1.05) rotateY(5deg);filter:drop-shadow(0 20px 40px rgba(255,255,255,.1))}.envelope-closed{width:100%;max-width:800px;height:auto;border-radius:8px;transition:all .3s ease}.envelope-opened-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);opacity:0;transition:opacity .6s ease;z-index:4;display:none}.envelope-opened-wrapper.visible{display:block;opacity:1}.envelope-opened{width:100%;max-width:800px;height:auto;border-radius:8px}@media (max-width: 768px){.envelope-wrapper,.envelope-opened-wrapper{top:70%}}.click-prompt{position:absolute;bottom:-30px;left:50%;transform:translate(-50%);text-align:center;animation:gentle-pulse 2s ease-in-out infinite}.click-prompt p{color:#fff;font-size:calc(var(--font-body-scale) * 1.1rem);font-family:var(--font-body-family);font-style:var(--font-body-style);font-weight:var(--font-body-weight);line-height:calc(1 + .3 / var(--font-body-scale));margin:0;text-shadow:0 2px 4px rgba(0,0,0,.5)}@keyframes gentle-pulse{0%,to{opacity:.7;transform:translate(-50%) translateY(0)}50%{opacity:1;transform:translate(-50%) translateY(-5px)}}.letter-papers-container{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:100vw;height:100vh;display:none;z-index:10}.letter-paper{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);transition:all .3s ease;opacity:0;z-index:10}.paper-image{width:100%;max-width:760px;height:auto;border-radius:8px;filter:drop-shadow(0 10px 30px rgba(0,0,0,.3)) drop-shadow(0 4px 8px rgba(0,0,0,.2));transition:filter .3s ease}.paper-image:hover{filter:drop-shadow(0 15px 40px rgba(0,0,0,.4)) drop-shadow(0 6px 12px rgba(0,0,0,.25))}.letter-paper.animate-to-left{animation:slideToLeft .8s ease-out forwards}.letter-paper.animate-to-center{animation:slideToCenter .6s ease-out forwards}.letter-paper.animate-to-right{animation:slideToRight .8s ease-out forwards}.letter-paper.static-left{opacity:1;transform:translate(-50%,-50%) translate(-60%) translateY(0) rotate(-10deg)}.letter-paper.static-center{opacity:1;transform:translate(-50%,-50%) translate(0) translateY(-55px)}.letter-paper.static-right{opacity:1;transform:translate(-50%,-50%) translate(50%) translateY(0) rotate(10deg)}@keyframes slideToLeft{0%{opacity:0;transform:translate(-50%,-50%) translate(0) translateY(0)}to{opacity:1;transform:translate(-50%,-50%) translate(-60%) translateY(0) rotate(-10deg)}}@keyframes slideToCenter{0%{opacity:0;transform:translate(-50%,-50%) translate(0) translateY(0)}to{opacity:1;transform:translate(-50%,-50%) translate(0) translateY(-55px)}}@keyframes slideToRight{0%{opacity:0;transform:translate(-50%,-50%) translate(0) translateY(0)}to{opacity:1;transform:translate(-50%,-50%) translate(50%) translateY(0) rotate(10deg)}}.email-form-floating{display:none!important;position:fixed;bottom:30px;left:50%;transform:translate(-50%) translateY(100px);background:#fffffff2;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border-radius:15px;padding:2rem;box-shadow:0 20px 60px #0000004d;opacity:0;transition:all .8s cubic-bezier(.25,.46,.45,.94);z-index:15;max-width:400px;width:90vw}.customer-signup-popup{position:fixed;bottom:30px;left:50%;transform:translate(-50%) translateY(100px);background:#fffffffa;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);border-radius:20px;padding:2.5rem;box-shadow:0 25px 80px #0006;opacity:0;transition:all 1s cubic-bezier(.25,.46,.45,.94);z-index:20;max-width:450px;width:90vw;border:1px solid rgba(255,255,255,.2)}.customer-signup-popup.visible{opacity:1;transform:translate(-50%) translateY(0)}.customer-signup-popup.button-state{padding:1rem 2rem;max-width:280px;border-radius:50px;cursor:pointer;transition:all .3s ease}.customer-signup-popup.button-state:hover{transform:translate(-50%) translateY(-5px);box-shadow:0 30px 90px #00000080}.customer-signup-popup.button-state .signup-popup-content p,.customer-signup-popup.button-state .customer-signup-form{display:none}.customer-signup-popup.button-state .signup-popup-content h3{margin:0;font-size:1.1rem;text-align:center}.signup-popup-content h3{color:#2c2c2c;font-size:1.4rem;font-weight:700;margin:0 0 .5rem;text-align:center;background:linear-gradient(135deg,#2c2c2c,#4a4a4a);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.signup-popup-content p{color:#666;font-size:.95rem;margin:0 0 2rem;text-align:center;line-height:1.5}.customer-signup-form{width:100%}.form-row{display:flex;gap:1rem;margin-bottom:1rem}.form-group{flex:1}.form-input{width:100%;padding:14px 18px;border:var(--inputs-border-width) solid rgba(var(--color-foreground),var(--inputs-border-opacity));border-radius:var(--inputs-radius);font-size:.95rem;background:rgb(var(--color-background));color:rgb(var(--color-foreground));outline:none;transition:all .3s ease;box-sizing:border-box;box-shadow:var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-shadow),var(--inputs-shadow-opacity))}.form-input:focus{border-color:rgb(var(--color-button));box-shadow:0 0 0 3px rgba(var(--color-button),.1)}.form-input::placeholder{color:#999}.signup-submit{width:100%;padding:16px 20px;background:rgb(var(--color-button));color:rgb(var(--color-button-text));border:var(--buttons-border-width) solid rgba(var(--color-button),var(--buttons-border-opacity));border-radius:var(--buttons-radius);font-size:1rem;font-weight:600;cursor:pointer;transition:all .3s ease;margin-top:.5rem;box-shadow:var(--buttons-shadow-horizontal-offset) var(--buttons-shadow-vertical-offset) var(--buttons-shadow-blur-radius) rgba(var(--color-shadow),var(--buttons-shadow-opacity))}.signup-submit:hover{background:rgba(var(--color-button),.9);transform:translateY(-2px);box-shadow:var(--buttons-shadow-horizontal-offset) calc(var(--buttons-shadow-vertical-offset) + 2px) calc(var(--buttons-shadow-blur-radius) + 5px) rgba(var(--color-shadow),calc(var(--buttons-shadow-opacity) + .1))}.signup-submit:active{transform:translateY(0)}.signup-submit:disabled{background:#ccc;cursor:not-allowed;transform:none;box-shadow:none}.email-form-floating.visible{opacity:1;transform:translate(-50%) translateY(0)}.email-form-content h3{color:#2c2c2c;font-size:1.3rem;font-weight:600;margin:0 0 .5rem;text-align:center}.email-form-content p{color:#666;font-size:.9rem;margin:0 0 1.5rem;text-align:center;line-height:1.4}.letter-email-form{width:100%}.email-input-wrapper{display:flex;gap:0;border-radius:var(--inputs-radius);overflow:hidden;box-shadow:var(--inputs-shadow-horizontal-offset) var(--inputs-shadow-vertical-offset) var(--inputs-shadow-blur-radius) rgba(var(--color-shadow),var(--inputs-shadow-opacity));transition:box-shadow .3s ease}.email-input-wrapper:focus-within{box-shadow:0 0 0 3px rgba(var(--color-button),.1)}.email-input{flex:1;padding:12px 16px;border:var(--inputs-border-width) solid rgba(var(--color-foreground),var(--inputs-border-opacity));border-right:none;border-radius:var(--inputs-radius) 0 0 var(--inputs-radius);font-size:.9rem;background:rgb(var(--color-background));color:rgb(var(--color-foreground));outline:none}.email-input::placeholder{color:#999}.email-submit{padding:12px 20px;background:rgb(var(--color-button));color:rgb(var(--color-button-text));border:var(--buttons-border-width) solid rgba(var(--color-button),var(--buttons-border-opacity));border-radius:0 var(--buttons-radius) var(--buttons-radius) 0;font-size:.9rem;font-weight:600;cursor:pointer;transition:all .3s ease;white-space:nowrap}.email-submit:hover{background:rgba(var(--color-button),.9);transform:translateY(-1px)}.email-submit:active{transform:translateY(0)}.email-submit:disabled{background:#ccc;cursor:not-allowed;transform:none}.form-message{margin-top:1rem;padding:10px;border-radius:6px;text-align:center;font-size:.8rem;display:none}.form-message.success{background:#d4edda;color:#155724;border:1px solid #c3e6cb}.form-message.error{background:#f8d7da;color:#721c24;border:1px solid #f5c6cb}@media (max-width: 768px){.interactive-letter-container{padding:1rem}.envelope-closed,.envelope-opened{max-width:95vw}.paper-image{max-width:90vw}@keyframes slideToLeft{0%{opacity:0;transform:translate(-50%,-50%) translate(0) translateY(0) rotate(0)}to{opacity:1;transform:translate(-50%,-50%) translate(-35px) translateY(-250px) rotate(-10deg)}}@keyframes slideToCenter{0%{opacity:0;transform:translate(-50%,-50%) translate(0) translateY(0) rotate(0)}to{opacity:1;transform:translate(-50%,-50%) translate(30px) translateY(-100px) rotate(4.5deg)}}@keyframes slideToRight{0%{opacity:0;transform:translate(-50%,-50%) translate(0) translateY(0) rotate(0)}to{opacity:1;transform:translate(-50%,-50%) translate(-75px) translateY(-0px) rotate(-10deg)}}.email-form-floating{bottom:20px;padding:1.5rem}.customer-signup-popup{bottom:20px;padding:2rem;max-width:95vw}.customer-signup-popup.button-state{padding:.8rem 1.5rem;max-width:90vw}.form-row{flex-direction:column;gap:.75rem}.form-input{padding:12px 16px}.signup-submit{padding:14px 18px}.email-input-wrapper{flex-direction:column}.email-input{border-radius:var(--inputs-radius) var(--inputs-radius) 0 0;border-right:var(--inputs-border-width) solid rgba(var(--color-foreground),var(--inputs-border-opacity))}.email-submit{border-radius:0 0 var(--inputs-radius) var(--inputs-radius)}}@media (max-width: 480px){.interactive-letter-container{padding:.5rem}.envelope-wrapper,.envelope-opened-wrapper{top:60%}.envelope-closed,.envelope-opened{max-width:95vw;min-width:350px}.paper-image{max-width:90vw;min-width:300px}@keyframes slideToLeft{0%{opacity:0;transform:translate(-50%,-50%) translate(0) translateY(0)}to{opacity:1;transform:translate(-50%,-50%) translate(-20px) translateY(-250px) rotate(-10deg)}}@keyframes slideToCenter{0%{opacity:0;transform:translate(-50%,-50%) translate(0) translateY(0)}to{opacity:1;transform:translate(-50%,-50%) translate(0) translateY(-100px) rotate(10deg)}}@keyframes slideToRight{0%{opacity:0;transform:translate(-50%,-50%) translate(0) translateY(0)}to{opacity:1;transform:translate(-50%,-50%) translate(20px) translateY(100px) rotate(-50deg)}}.email-form-floating{bottom:20px;padding:1.5rem}.customer-signup-popup{bottom:20px;padding:2rem;max-width:95vw}.customer-signup-popup.button-state{padding:.8rem 1.5rem;max-width:90vw}.form-row{flex-direction:column;gap:.75rem}.form-input{padding:12px 16px}.signup-submit{padding:14px 18px}.email-input-wrapper{flex-direction:column}.email-input{border-radius:var(--inputs-radius) var(--inputs-radius) 0 0;border-right:var(--inputs-border-width) solid rgba(var(--color-foreground),var(--inputs-border-opacity))}.email-submit{border-radius:0 0 var(--inputs-radius) var(--inputs-radius)}}@media (max-width: 390px){.interactive-letter-container{padding:.25rem}.envelope-closed,.envelope-opened{max-width:98vw;min-width:360px}.paper-image{max-width:95vw;min-width:340px}.envelope-wrapper,.envelope-opened-wrapper{top:60%}}
/*# sourceMappingURL=/cdn/shop/t/5/assets/section-interactive-letter.css.map */