.invitation-section{min-height:100vh;position:relative;overflow:hidden;padding:10rem 1rem 4rem;background:linear-gradient(135deg,#041545,#062074,#0831a3)}.invitation-bg-effect{position:absolute;inset:0;background:radial-gradient(circle at 20% 80%,rgba(231,159,1,.08) 1px,transparent 1px),radial-gradient(circle at 80% 20%,rgba(231,159,1,.06) 1px,transparent 1px);background-size:60px 60px,80px 80px;z-index:1;pointer-events:none}.invitation-container{max-width:1200px;margin:0 auto;position:relative;z-index:2}.invitation-page-header{text-align:center;margin-bottom:3rem;position:relative}.header-explosion{position:absolute;top:-50px;left:50%;transform:translate(-50%);width:80px;height:80px;display:flex;align-items:center;justify-content:center;z-index:3}.header-explosion:before{content:"";position:absolute;width:100%;height:100%;background:radial-gradient(ellipse,#E79F01 0%,#A70102 60%,transparent 70%);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}.explosion-text{font-family:Bangers,cursive;font-size:1.2rem;color:#fef7e0;text-shadow:2px 2px 0px #1E1E1E;position:relative;z-index:4}.invitation-page-title{font-family:Bangers,cursive;font-size:clamp(2.5rem,6vw,4rem);line-height:.9;color:#fef7e0;text-shadow:3px 3px 0px #E79F01,6px 6px 0px #A70102,9px 9px 0px #1E1E1E;letter-spacing:3px;text-transform:uppercase;margin-bottom:1.5rem;padding-top:3rem;-webkit-text-stroke:1.5px #1E1E1E}.title-accent{display:block;background:linear-gradient(135deg,#e79f01,#a70102,#ff1744);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;filter:drop-shadow(3px 3px 0px #E79F01) drop-shadow(6px 6px 0px #1E1E1E);-webkit-text-stroke:1.5px #1E1E1E}.invitation-page-subtitle{font-family:DM Sans,sans-serif;font-size:clamp(1rem,2.5vw,1.2rem);font-weight:500;color:#fef7e0;max-width:550px;margin:0 auto;text-shadow:1px 1px 2px rgba(30,30,30,.8);background:#04154599;border:3px solid #E79F01;border-radius:20px;padding:1rem 1.5rem;box-shadow:4px 4px #a70102,6px 6px #1e1e1e}.invitation-layout{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:start}.invitation-form-panel{background:var(--color-cream);border:4px solid #1E1E1E;border-radius:20px;padding:2rem;box-shadow:8px 8px #e79f01,12px 12px #1e1e1e;position:relative;overflow:hidden}.invitation-form-panel:before{content:"";position:absolute;top:0;right:0;width:100px;height:100px;background:repeating-linear-gradient(-45deg,#e79f01 0px 10px,#a70102 10px 20px);clip-path:polygon(100% 0,0 0,100% 100%);opacity:.8}.form-panel-title{font-family:Bangers,cursive;font-size:2rem;color:#a70102;text-shadow:2px 2px 0px #E79F01;text-align:center;margin-bottom:1.5rem;text-transform:uppercase;letter-spacing:2px;position:relative;z-index:2}.invitation-form{display:flex;flex-direction:column;gap:1.25rem;position:relative;z-index:2}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}.form-field{display:flex;flex-direction:column;gap:.4rem}.form-field label{font-family:DM Sans,sans-serif;font-weight:700;font-size:.9rem;color:#1e1e1e;display:flex;align-items:center;gap:.5rem}.form-field label .label-icon{width:30px;height:30px;background:linear-gradient(135deg,#e79f01,#ffa000);border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:.9rem;border:2px solid #1E1E1E;flex-shrink:0;box-shadow:2px 2px #1e1e1e}.form-field input{font-family:DM Sans,sans-serif;font-size:1rem;padding:.75rem 1rem;border:3px solid #1E1E1E;border-radius:12px;background:#fff;transition:border-color .2s ease,box-shadow .2s ease;outline:none;box-shadow:3px 3px #1e1e1e33}.form-field input:focus{border-color:#a70102;box-shadow:4px 4px #e79f01}.form-field input::-moz-placeholder{color:#999;font-size:.9rem}.form-field input::placeholder{color:#999;font-size:.9rem}.email-section{margin-top:.75rem;padding-top:1.25rem;border-top:3px dashed #E79F01}.email-section-title{font-family:Bangers,cursive;font-size:1.4rem;color:#a70102;text-shadow:1px 1px 0px #E79F01;margin-bottom:1rem;display:flex;align-items:center;gap:.5rem;text-transform:uppercase;letter-spacing:1px}.email-icon{font-size:1.5rem}.form-actions{margin-top:1rem}.btn-send-invitation{width:100%;background:linear-gradient(135deg,#a70102,#e79f01,#ffa000);color:#fef7e0;font-family:DM Sans,sans-serif;font-weight:800;font-size:1.1rem;padding:1.1rem 2rem;border:4px solid #1E1E1E;border-radius:50px;cursor:pointer;text-transform:uppercase;letter-spacing:1px;box-shadow:6px 6px #e79f01,8px 8px #1e1e1e;text-shadow:2px 2px 0px #1E1E1E;transition:transform .15s ease,box-shadow .15s ease;display:flex;align-items:center;justify-content:center;gap:.75rem}.btn-send-invitation:hover{transform:translate(-2px,-2px);box-shadow:8px 8px #e79f01,10px 10px #1e1e1e}.btn-send-invitation:active{transform:translate(2px,2px);box-shadow:4px 4px #e79f01,6px 6px #1e1e1e}.btn-send-invitation:disabled{opacity:.7;cursor:not-allowed;transform:none}.btn-icon{font-size:1.3rem}.loading-spinner{display:inline-block;width:20px;height:20px;border:3px solid #FEF7E0;border-top-color:transparent;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.invitation-preview-panel{position:sticky;top:7rem}.preview-label{font-family:Bangers,cursive;font-size:1.5rem;color:#fef7e0;text-shadow:2px 2px 0px #E79F01,4px 4px 0px #1E1E1E;text-align:center;margin-bottom:1rem;text-transform:uppercase;letter-spacing:2px}.invitation-card{width:100%;max-width:400px;margin:0 auto;position:relative;border-radius:15px;overflow:hidden;border:5px solid #1E1E1E;box-shadow:10px 10px #e79f01,14px 14px #1e1e1e;transition:transform .2s ease,box-shadow .2s ease;will-change:transform}.invitation-card:hover{transform:translate(-3px,-3px);box-shadow:13px 13px #e79f01,17px 17px #1e1e1e}.invitation-template-bg{width:100%;height:auto;display:block}.invitation-overlay{position:absolute;inset:0;pointer-events:none}.overlay-field{position:absolute;font-family:DM Sans,sans-serif;font-weight:600;color:#1a1a1a;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.overlay-hero-name{top:61.5%;left:36.5%;width:62%;font-size:clamp(.7rem,2.5vw,1rem)}.overlay-age{top:66.78%;left:22%;width:30%;font-size:clamp(.7rem,2.5vw,1rem)}.overlay-date{top:71.3%;left:24.5%;width:26%;font-size:clamp(.65rem,2.2vw,.9rem)}.overlay-time{top:71.3%;left:62%;width:44%;font-size:clamp(.65rem,2.2vw,.9rem)}.overlay-location{top:75.8%;left:34%;width:68%;font-size:clamp(.65rem,2.2vw,.9rem)}.overlay-rsvp{top:80%;left:26%;width:60%;font-size:clamp(.65rem,2.2vw,.9rem)}.success-modal{position:fixed;inset:0;background:#041545e6;display:flex;align-items:center;justify-content:center;z-index:1000;opacity:0;visibility:hidden;transition:opacity .2s ease,visibility .2s ease}.success-modal.active{opacity:1;visibility:visible}.success-content{background:var(--color-cream);padding:3rem;border-radius:20px;border:4px solid #1E1E1E;box-shadow:10px 10px #e79f01,14px 14px #1e1e1e;text-align:center;max-width:400px;transform:scale(.9);transition:transform .2s ease}.success-modal.active .success-content{transform:scale(1)}.success-icon{font-size:4rem;margin-bottom:1rem;display:block}.success-content h3{font-family:Bangers,cursive;font-size:2.2rem;color:#a70102;text-shadow:2px 2px 0px #E79F01;margin-bottom:.5rem;text-transform:uppercase}.success-content p{font-family:DM Sans,sans-serif;color:#1e1e1e;font-size:1.1rem;margin-bottom:1.5rem}.btn-close-modal{background:linear-gradient(135deg,#a70102,#e79f01);color:#fef7e0;font-family:DM Sans,sans-serif;font-weight:700;font-size:1rem;padding:.9rem 2.5rem;border:3px solid #1E1E1E;border-radius:50px;cursor:pointer;text-transform:uppercase;box-shadow:4px 4px #e79f01,6px 6px #1e1e1e;transition:transform .15s ease,box-shadow .15s ease}.btn-close-modal:hover{transform:translate(-2px,-2px);box-shadow:6px 6px #e79f01,8px 8px #1e1e1e}@media (max-width: 1024px){.invitation-section{padding:9rem 1rem 3rem}.invitation-layout{gap:2.5rem}.invitation-card{max-width:360px}}@media (max-width: 900px){.invitation-layout{grid-template-columns:1fr;gap:2.5rem}.invitation-preview-panel{position:relative;top:0;order:-1}.invitation-card{max-width:380px}.invitation-page-header{margin-bottom:2rem}}@media (max-width: 600px){.invitation-section{padding:8rem .75rem 2.5rem}.invitation-page-header{margin-bottom:1.5rem}.invitation-page-title{font-size:2rem;padding-top:2rem;-webkit-text-stroke:1px #1E1E1E}.title-accent{-webkit-text-stroke:1px #1E1E1E}.header-explosion{width:60px;height:60px;top:-20px}.explosion-text{font-size:1rem}.invitation-page-subtitle{font-size:.95rem;padding:.75rem 1rem}.invitation-layout{gap:1.5rem}.invitation-form-panel{padding:1.5rem;border-width:3px;box-shadow:5px 5px #e79f01,8px 8px #1e1e1e}.invitation-form-panel:before{width:70px;height:70px}.form-panel-title{font-size:1.6rem;margin-bottom:1.25rem}.invitation-form{gap:1rem}.form-row{grid-template-columns:1fr;gap:1rem}.form-field label{font-size:.85rem}.form-field label .label-icon{width:26px;height:26px;font-size:.8rem}.form-field input{font-size:.95rem;padding:.7rem .9rem}.email-section-title{font-size:1.2rem}.btn-send-invitation{font-size:1rem;padding:1rem 1.5rem;border-width:3px}.invitation-card{max-width:320px;border-width:4px;box-shadow:7px 7px #e79f01,10px 10px #1e1e1e}.preview-label{font-size:1.3rem}.overlay-hero-name{font-size:.65rem}.overlay-age,.overlay-date,.overlay-time,.overlay-location,.overlay-rsvp{font-size:.55rem}.success-content{padding:2rem;margin:1rem}.success-content h3{font-size:1.8rem}}@media (max-width: 400px){.invitation-section{padding:7rem .5rem 2rem}.invitation-page-title{font-size:1.7rem}.invitation-form-panel{padding:1.25rem}.form-panel-title{font-size:1.4rem}.invitation-card{max-width:280px}.overlay-hero-name{font-size:.55rem}.overlay-age,.overlay-date,.overlay-time,.overlay-location,.overlay-rsvp{font-size:.5rem}}@media (min-width: 1200px){.invitation-container{max-width:1100px}.invitation-card{max-width:420px}.overlay-hero-name{font-size:1.1rem}.overlay-age,.overlay-date,.overlay-time,.overlay-location,.overlay-rsvp{font-size:1rem}}@media (prefers-reduced-motion: reduce){.invitation-card,.btn-send-invitation,.btn-close-modal,.form-field input,.success-modal,.success-content{transition:none}.loading-spinner{animation:none}}
