.elementor-31445 .elementor-element.elementor-element-49749a5{--display:flex;--min-height:100vh;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--justify-content:center;}.elementor-31445 .elementor-element.elementor-element-49749a5:not(.elementor-motion-effects-element-type-background), .elementor-31445 .elementor-element.elementor-element-49749a5 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#000000;}.elementor-31445 .elementor-element.elementor-element-ecbb2e2{text-align:center;}.elementor-31445 .elementor-element.elementor-element-76b1f35{width:var( --container-widget-width, 37% );max-width:37%;--container-widget-width:37%;--container-widget-flex-grow:0;--e-form-steps-indicators-spacing:20px;--e-form-steps-indicator-padding:30px;--e-form-steps-indicator-inactive-secondary-color:#ffffff;--e-form-steps-indicator-active-secondary-color:#ffffff;--e-form-steps-indicator-completed-secondary-color:#ffffff;--e-form-steps-divider-width:1px;--e-form-steps-divider-gap:10px;}.elementor-31445 .elementor-element.elementor-element-76b1f35.elementor-element{--align-self:center;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-group{padding-right:calc( 11px/2 );padding-left:calc( 11px/2 );margin-bottom:10px;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-form-fields-wrapper{margin-left:calc( -11px/2 );margin-right:calc( -11px/2 );margin-bottom:-10px;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-group.recaptcha_v3-bottomleft, .elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-group.recaptcha_v3-bottomright{margin-bottom:0;}body.rtl .elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-labels-inline .elementor-field-group > label{padding-left:0px;}body:not(.rtl) .elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-labels-inline .elementor-field-group > label{padding-right:0px;}body .elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-labels-above .elementor-field-group > label{padding-bottom:0px;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-group > label, .elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-subgroup label{color:#FFFFFF;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-type-html{padding-bottom:3px;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-group .elementor-field{color:#FFFFFF;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-group:not(.elementor-field-type-upload) .elementor-field:not(.elementor-select-wrapper){background-color:#000000;border-color:#FFFFFF;border-width:1px 1px 1px 1px;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-group .elementor-select-wrapper select{background-color:#000000;border-color:#FFFFFF;border-width:1px 1px 1px 1px;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-group .elementor-select-wrapper::before{color:#FFFFFF;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .e-form__buttons__wrapper__button-next{background-color:#FFFFFF;color:#000000;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-button[type="submit"]{background-color:#FFFFFF;color:#000000;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-button[type="submit"] svg *{fill:#000000;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .e-form__buttons__wrapper__button-previous{color:#000000;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .e-form__buttons__wrapper__button-next:hover{color:#ffffff;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-button[type="submit"]:hover{color:#ffffff;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-button[type="submit"]:hover svg *{fill:#ffffff;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .e-form__buttons__wrapper__button-previous:hover{color:#ffffff;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-button{border-radius:15px 15px 15px 15px;}#elementor-popup-modal-31445 .dialog-widget-content{animation-duration:3s;background-color:#000000;box-shadow:2px 8px 23px 3px rgba(0,0,0,0.2);}#elementor-popup-modal-31445{background-color:rgba(0,0,0,.8);justify-content:center;align-items:center;pointer-events:all;}#elementor-popup-modal-31445 .dialog-message{width:100vw;height:100vh;align-items:center;}@media(max-width:1024px){.elementor-31445 .elementor-element.elementor-element-49749a5{--justify-content:center;}.elementor-31445 .elementor-element.elementor-element-ecbb2e2{text-align:center;}.elementor-31445 .elementor-element.elementor-element-76b1f35{--container-widget-width:502px;--container-widget-flex-grow:0;width:var( --container-widget-width, 502px );max-width:502px;}}@media(max-width:767px){.elementor-31445 .elementor-element.elementor-element-ecbb2e2{text-align:center;}.elementor-31445 .elementor-element.elementor-element-ecbb2e2 .elementor-heading-title{font-size:22px;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-group > label{font-size:18px;}.elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-group .elementor-field, .elementor-31445 .elementor-element.elementor-element-76b1f35 .elementor-field-subgroup label{font-size:15px;}}/* Start custom CSS for heading, class: .elementor-element-ecbb2e2 *//* HIDE STATIC TEXT (The blank hex code) */
.elementor-31445 .elementor-element.elementor-element-ecbb2e2 .elementor-heading-title {
    color: transparent !important;
}

/* 1. INTRO (28s) */
.elementor-31445 .elementor-element.elementor-element-ecbb2e2 .elementor-heading-title::before {
    content: 'Hello';
    color: #ffffff; /* Keeps the animation text visible */
    animation: fadeSequence 28s forwards, wordSequence 28s forwards;
}

@keyframes fadeSequence {
    0%, 17.8%   { opacity: 0; } 
    21.4%, 35.7% { opacity: 1; } 
    39.3%, 44%  { opacity: 0; }
    46.4%, 60.7% { opacity: 1; } 
    64.3%, 69%  { opacity: 0; } 
    71.4%, 82.1% { opacity: 1; } 
    85.7%, 91%  { opacity: 0; } 
    92.8%, 100% { opacity: 1; } 
}

@keyframes wordSequence {
    0%, 42%     { content: 'Hello'; }
    43%, 67%    { content: 'Is everything ok?'; }
    68%, 89%    { content: 'i want you to tell me whats going on in your life'; }
    90%, 100%   { content: 'please (´｡• ◡ •｡`) ♡'; }
}

/* 2. SUCCESS SEQUENCE (8s Total) */
/* (The !important is removed here so the animation can play) */
.elementor-31445 .elementor-element.elementor-element-ecbb2e2.is-sent .elementor-heading-title::before {
    content: 'thank you'; 
    animation: finalFade 8s forwards, finalWords 8s forwards !important;
}

@keyframes finalWords {
    0%, 48%     { content: 'thank you'; }
    52%, 100%   { content: 'il read it tonight ^_^'; }
}

@keyframes finalFade {
    0%          { opacity: 0; }
    15%, 45%    { opacity: 1; } 
    48%, 52%    { opacity: 0; } /* Blackout swap */
    60%, 100%   { opacity: 1; } 
}

/* 3. REJECTED ANIMATION (15s Total) */
.elementor-31445 .elementor-element.elementor-element-ecbb2e2.is-rejected .elementor-heading-title::before {
    content: 'so you dont care enough to tell me 😾';
    animation: rejectFade 15s forwards, rejectWords 15s forwards !important;
}

@keyframes rejectWords {
    0%, 31%     { content: 'so you dont care enough to tell me 😾'; }
    34%, 64%    { content: 'mmmmm ok... thats ok'; }
    67%, 100%   { content: 'but i think you should go somewhere else'; }
}

@keyframes rejectFade {
    0%          { opacity: 0; }
    5%, 28%     { opacity: 1; } 
    31%, 34%    { opacity: 0; } 
    37%, 61%    { opacity: 1; } 
    64%, 67%    { opacity: 0; } 
    70%, 100%   { opacity: 1; } 
}

/* 4. THE 24-HOUR BAN STATE */
.elementor-31445 .elementor-element.elementor-element-ecbb2e2.forced-rejected .elementor-heading-title::before {
    content: 'but i think you should go somewhere else' !important;
    animation: none !important; 
    opacity: 1 !important;
}

/* 5. DOTS & CLEANUP */
.elementor-31445 .elementor-element.elementor-element-ecbb2e2 .elementor-heading-title::after {
    content: '';
    color: #ffffff;
    animation: dotFade 28s forwards, dotType 28s forwards;
}

@keyframes dotFade {
    0%, 21.4% { opacity: 0; } 22%, 35.7% { opacity: 1; } 39.3%, 100% { opacity: 0; }
}

@keyframes dotType {
    0%, 21.4% { content: ''; } 26% { content: '.'; } 31% { content: '..'; } 36%, 100% { content: '...'; }
}

.elementor-31445 .elementor-element.elementor-element-ecbb2e2.is-sent .elementor-heading-title::after,
.elementor-31445 .elementor-element.elementor-element-ecbb2e2.is-rejected .elementor-heading-title::after,
.elementor-31445 .elementor-element.elementor-element-ecbb2e2.forced-rejected .elementor-heading-title::after {
    display: none !important;
}/* End custom CSS */
/* Start custom CSS for form, class: .elementor-element-76b1f35 */.elementor-31445 .elementor-element.elementor-element-76b1f35 {
    opacity: 0;
    visibility: hidden;
    max-height: 0;
    overflow: hidden;
    /* Smoothly transition the height and opacity */
    transition: opacity 1s ease, max-height 1s ease;
    
    /* This animation triggers the reveal after the wait */
    animation: revealForm 1.5s forwards;
    animation-delay: 28s; /* Matches your 28s text timeline */
}

@keyframes revealForm {
    from {
        opacity: 0;
        max-height: 0;
        visibility: hidden;
    }
    to {
        opacity: 1;
        max-height: 1000px; /* Large enough to fit the whole form */
        visibility: visible;
        margin-top: 20px;   /* Adds space between the text and form */
    }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-49749a5 *//* '.elementor-31445 .elementor-element.elementor-element-49749a5' targets this specific Elementor container */
.elementor-31445 .elementor-element.elementor-element-49749a5 {
    background-color: #000000;
    overflow: hidden; /* Keeps stars from spilling outside the box */
}

.elementor-31445 .elementor-element.elementor-element-49749a5::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* Changed z-index from -1 to 0 so Elementor doesn't hide it behind the black background */
    z-index: 0; 
    pointer-events: none;
    
    /* Start invisible for the fade */
    opacity: 0; 

    /* Crisp, high-contrast stars */
    background-image: 
        radial-gradient(1px 1px at 10% 10%, #ffffff 100%, transparent),
        radial-gradient(1px 1px at 25% 40%, #ffffff 100%, transparent),
        radial-gradient(1.2px 1.2px at 45% 85%, #ffffff 100%, transparent),
        radial-gradient(1px 1px at 65% 15%, #ffffff 100%, transparent),
        radial-gradient(1.2px 1.2px at 85% 55%, #ffffff 100%, transparent),
        radial-gradient(1px 1px at 95% 30%, #ffffff 100%, transparent),
        radial-gradient(0.8px 0.8px at 15% 70%, rgba(255,255,255,0.5) 100%, transparent),
        radial-gradient(0.8px 0.8px at 75% 20%, rgba(255,255,255,0.5) 100%, transparent);

    background-size: 350px 350px;
    background-repeat: repeat;

    /* Upward Drift PLUS Fade In */
    animation: scrollThruStars 40s linear infinite, fadeIn 3s ease-in forwards;
}

@keyframes scrollThruStars {
    from { background-position: 0 0; }
    to { background-position: 0 -350px; }
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

/* Faster mobile drift */
@media (max-width: 767px) {
    .elementor-31445 .elementor-element.elementor-element-49749a5::before {
        animation: scrollThruStars 20s linear infinite, fadeIn 3s ease-in forwards;
    }
}/* End custom CSS */