/*************************************
 * EMAIL ICON ANIMATION — LUNAR LANDER
 *************************************/

.email-reveal {
    position: absolute;
    white-space: nowrap;
    font-family: var(--font-main);
    font-size: 16px;
    color: var(--text-color);
    pointer-events: none;
    user-select: none;
    opacity: 0;
    z-index: 10000;
    transform: translateX(-50%) translateY(0);
}

/* Retro-fire below the text — throttles down at touchdown */
.email-reveal::before {
    content: '';
    position: absolute;
    left: 50%;
    top: calc(100% + 3px);
    transform: translateX(-50%);
    width: 0;
    height: 0;
    background: radial-gradient(ellipse at center top, #ffe000 0%, #ff7700 35%, #ff2200 70%, transparent 100%);
    border-radius: 50%;
    opacity: 0;
    filter: blur(1.5px);
}

/* Phase 1+2: descent + landing bounce */
@keyframes emailLand {
    0%   { opacity: 0; transform: translateX(-50%) translateY(0px);  }
    8%   { opacity: 1; transform: translateX(-50%) translateY(2px);  }
    55%  { opacity: 1; transform: translateX(-50%) translateY(30px); }
    68%  { opacity: 1; transform: translateX(-50%) translateY(37px); }
    76%  { opacity: 1; transform: translateX(-50%) translateY(41px); }
    83%  { opacity: 1; transform: translateX(-50%) translateY(37px); }
    89%  { opacity: 1; transform: translateX(-50%) translateY(40px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(40px); }  /* hold — stays until user clicks again */
}

/* Retro-fire — grows during descent, throttles off at touchdown */
@keyframes emailFire {
    0%   { opacity: 0;   width: 0px;  height: 0px;  }
    8%   { opacity: 1;   width: 18px; height: 14px; }
    25%  { opacity: 0.9; width: 22px; height: 16px; }
    40%  { opacity: 1;   width: 18px; height: 13px; }
    55%  { opacity: 0.9; width: 24px; height: 17px; }
    66%  { opacity: 0.7; width: 14px; height: 10px; }
    75%  { opacity: 0.3; width: 6px;  height: 5px;  }
    82%  { opacity: 0;   width: 0px;  height: 0px;  }
    100% { opacity: 0;   width: 0px;  height: 0px;  }
}

/* Phase 3a: shake in place before launch */
@keyframes emailShake {
    0%   { opacity: 1; transform: translateX(-50%) translateY(40px); }
    14%  { opacity: 1; transform: translateX(-47%) translateY(40px); }
    28%  { opacity: 1; transform: translateX(-53%) translateY(39px); }
    42%  { opacity: 1; transform: translateX(-46%) translateY(41px); }
    56%  { opacity: 1; transform: translateX(-54%) translateY(39px); }
    70%  { opacity: 1; transform: translateX(-45%) translateY(40px); }
    84%  { opacity: 1; transform: translateX(-55%) translateY(41px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(40px); }
}

/* Phase 3b: rocket launch to the right */
@keyframes emailLaunch {
    0%   { opacity: 1; transform: translateX(-50%) translateY(40px); }
    100% { opacity: 0; transform: translateX(700px) translateY(40px); }
}

/* Fire to the left during launch (same style as HF) */
@keyframes emailLaunchFire {
    0%   { opacity: 0;    width: 4px;  filter: blur(3px);   }
    20%  { opacity: 0.8;  width: 22px; filter: blur(2px);   }
    40%  { opacity: 1;    width: 30px; filter: blur(1.5px); }
    58%  { opacity: 0.8;  width: 25px; filter: blur(2px);   }
    72%  { opacity: 1;    width: 33px; filter: blur(1px);   }
    86%  { opacity: 0.85; width: 28px; filter: blur(2px);   }
    100% { opacity: 1;    width: 30px; filter: blur(1.5px); }
}

.email-reveal.active {
    animation: emailLand 3.5s ease-in-out forwards;
}

.email-reveal.landed,
.email-reveal--mobile.landed {
    pointer-events: auto;
    user-select: text;
    cursor: text;
}

.email-reveal.launching {
    animation: emailShake 0.9s ease-out forwards, emailLaunch 1s cubic-bezier(0.32, 0, 0.67, 0) 0.9s forwards;
}

/* Reposition ::before to the left side and play launch fire */
.email-reveal.launching::before {
    left: auto;
    right: calc(100% + 3px);
    top: 50%;
    transform: translateY(-50%);
    width: 0;
    height: 14px;
    background: radial-gradient(ellipse at 90% center, #ffe000 0%, #ff7700 35%, #ff2200 70%, transparent 100%);
    animation: emailLaunchFire 0.9s ease-out forwards;
}

.email-reveal.active::before {
    animation: emailFire 3.5s ease-in-out forwards;
}

/* Mobile: centered below header icons, scrolls with page */
.email-reveal--mobile {
    white-space: nowrap;
    text-align: center;
    max-width: calc(100vw - 32px);
}

/* Mobile landing: same descent but shorter distance to keep above the hr line */
.email-reveal--mobile.active {
    animation: emailLandMobile 3.5s ease-in-out forwards;
}

@keyframes emailLandMobile {
    0%   { opacity: 0; transform: translateX(-50%) translateY(0px);  }
    8%   { opacity: 1; transform: translateX(-50%) translateY(2px);  }
    55%  { opacity: 1; transform: translateX(-50%) translateY(20px); }
    68%  { opacity: 1; transform: translateX(-50%) translateY(26px); }
    76%  { opacity: 1; transform: translateX(-50%) translateY(29px); }
    83%  { opacity: 1; transform: translateX(-50%) translateY(25px); }
    89%  { opacity: 1; transform: translateX(-50%) translateY(28px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(28px); }
}

/* Mobile shake uses same shorter offset */
@keyframes emailShakeMobile {
    0%   { opacity: 1; transform: translateX(-50%) translateY(28px); }
    14%  { opacity: 1; transform: translateX(-47%) translateY(28px); }
    28%  { opacity: 1; transform: translateX(-53%) translateY(27px); }
    42%  { opacity: 1; transform: translateX(-46%) translateY(29px); }
    56%  { opacity: 1; transform: translateX(-54%) translateY(27px); }
    70%  { opacity: 1; transform: translateX(-45%) translateY(28px); }
    84%  { opacity: 1; transform: translateX(-55%) translateY(29px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(28px); }
}

@keyframes emailLaunchMobile {
    0%   { opacity: 1; transform: translateX(-50%) translateY(28px); }
    100% { opacity: 0; transform: translateX(700px) translateY(28px); }
}

.email-reveal--mobile.launching {
    animation: emailShakeMobile 0.9s ease-out forwards, emailLaunchMobile 1s cubic-bezier(0.32, 0, 0.67, 0) 0.9s forwards;
}