/* ============================================================
oops-popup.css
============================================================ */

/* ============================================================
2. CUSTOM FONTS
============================================================ */

@font-face {
font-family: 'Uhudscript';
src: url('/-global-assets/fonts/Uhudscript-Demo.ttf') format('truetype');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesqueRegular.otf') format('opentype');
font-weight: 400;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesque-Medium.ttf') format('truetype');
font-weight: 500;
font-style: normal;
font-display: swap;
}

@font-face {
font-family: 'Galano';
src: url('/-global-assets/fonts/GalanoGrotesqueDEMO-Bold.ttf') format('truetype');
font-weight: 700;
font-style: normal;
font-display: swap;
}

/* ============================================================
3. CSS VARIABLES
============================================================ */

:root {
--oops-brand-gradient: linear-gradient(62deg, #02bcdd, #06d1e5, #64eda8, #d0f88d);
--oops-brand-gradient-90: linear-gradient(90deg, #02bcdd 0%, #06d1e5 20%, #64eda8 48%, #d0f88d 100%);
--oops-page-bg: radial-gradient(118.38% 101.85% at 50% 0%, #01243c 44.82%, #000000 92.63%);
--oops-bg-image: url('./images/galaxy-space-background-immersive.webp');
--oops-bg-overlay: rgba(1, 18, 36, 0.55);
--oops-conic-gradient: conic-gradient(from var(--oops-angle), #02bcdd, #06d1e5, #64eda8, #d0f88d, #64eda8, #06d1e5, #02bcdd);

--oops-white: #ffffff;
--oops-dark-panel: #0a1628;
--oops-ink: #02253d;

--oops-z-overlay: 9999;
--oops-z-top-bar: 10001;
--oops-z-header: 10000;
--oops-z-footer: 10000;
--oops-z-content: 1;

--oops-rocket-delay: 5s;
--oops-rocket-duration: 1.2s;
--oops-cta-fade-delay: 6.4s;
}

@property --oops-angle {
syntax: '<angle>';
initial-value: 0deg;
inherits: false;
}

/* ============================================================
4. KEYFRAMES
============================================================ */

@keyframes oops-gradient-shimmer {
0% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
100% { background-position: 0% 50%; }
}

@keyframes oops-spin {
to { --oops-angle: 360deg; }
}

@keyframes oops-rocket-float {
0%, 100% { transform: translateX(-50%) translateY(0); }
50% { transform: translateX(-50%) translateY(-10px); }
}

@keyframes oops-rocket-launch {
0% {
transform: translateX(-50%) translateY(0) scale(1);
opacity: 1;
}

30% {
transform: translateX(-50%) translateY(-40px) scale(1.04);
opacity: 1;
}

100% {
transform: translateX(-50%) translateY(-140vh) scale(0.6);
opacity: 0;
}
}

@keyframes oops-cta-fadein {
0% {
opacity: 0;
transform: translateY(18px);
}

100% {
opacity: 1;
transform: translateY(0);
}
}

@keyframes oops-twinkle {
0%, 100% { opacity: 0.6; }
50% { opacity: 1; }
}

@keyframes oops-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}


/* ============================================================
5. OVERLAY SHELL (Full-screen container, centers content)
============================================================ */

.oops-popup-bg-image {
    display: none !important;
}

.oops-popup-bg-gradient {
    background: #02253D !important;
}

.oops-popup-modal {
    background: #02253D !important;
    border-radius: 16px;
}

.oops-popup-overlay {
position: fixed;
inset: 0;
z-index: var(--oops-z-overlay);
width: 100%;
height: 100%;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
font-family: 'Galano', sans-serif;
color: var(--oops-white);
opacity: 0;
pointer-events: none;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
}

.oops-popup-overlay.is-open {
opacity: 1;
pointer-events: all;
visibility: visible;
animation: oops-overlay-in 0.5s ease forwards;
}

/* ============================================================
5.5. MODAL CONTAINER (Centered box)
============================================================ */

.oops-popup-modal {
position: relative;
z-index: calc(var(--oops-z-overlay) + 10);
width: 90%;
max-width: 900px;
max-height: 90vh;
overflow-y: auto;
overflow-x: hidden;
border-radius: 35px;
background: transparent;
display: flex;
flex-direction: column;
}

/* ============================================================
6. TOP GRADIENT BAR
============================================================ */

.oops-popup-top-bar {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 10px;
z-index: var(--oops-z-top-bar);
background: var(--oops-brand-gradient);
background-size: 400% 400%;
animation: oops-gradient-shimmer 5s ease infinite;
pointer-events: none;
border-radius: 16px 16px 0 0;
}

/* ============================================================
7. BACKGROUND LAYERS
============================================================ */

.oops-popup-bg {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
border-radius: 16px;
overflow: hidden;
}

.oops-popup-bg-image {
position: absolute;
inset: 0;
background-image: var(--oops-bg-image);
background-size: cover;
background-position: center center;
background-repeat: no-repeat;
}

.oops-popup-bg-gradient {
position: absolute;
inset: 0;
background: var(--oops-bg-overlay), var(--oops-page-bg);
}

/* ============================================================
8. STARS LAYER
============================================================ */

.oops-popup-stars {
position: absolute;
inset: 0;
z-index: 0;
pointer-events: none;
overflow: hidden;
border-radius: 16px;
}

.oops-stars-layer {
position: absolute;
inset: 0;
background-repeat: repeat;
animation: oops-twinkle 4s ease-in-out infinite;
}

.oops-stars-sm {
background-image:
radial-gradient(1px 1px at 10% 15%, rgba(255,255,255,0.7) 0%, transparent 100%),
radial-gradient(1px 1px at 25% 40%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1px 1px at 40% 10%, rgba(255,255,255,0.8) 0%, transparent 100%),
radial-gradient(1px 1px at 55% 65%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(1px 1px at 70% 25%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(1px 1px at 85% 80%, rgba(255,255,255,0.7) 0%, transparent 100%),
radial-gradient(1px 1px at 92% 45%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1px 1px at 15% 75%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(1px 1px at 60% 88%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(1px 1px at 78% 55%, rgba(255,255,255,0.8) 0%, transparent 100%);
animation-delay: 0s;
animation-duration: 5s;
}

.oops-stars-md {
background-image:
radial-gradient(1.5px 1.5px at 20% 30%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 45% 55%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 65% 15%, rgba(255,255,255,0.7) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 80% 70%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 35% 85%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 90% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(1.5px 1.5px at 5% 60%, rgba(255,255,255,0.7) 0%, transparent 100%);
animation-delay: 1.5s;
animation-duration: 6s;
}

.oops-stars-lg {
background-image:
radial-gradient(2px 2px at 30% 20%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(2px 2px at 70% 50%, rgba(255,255,255,0.6) 0%, transparent 100%),
radial-gradient(2px 2px at 50% 78%, rgba(255,255,255,0.4) 0%, transparent 100%),
radial-gradient(2px 2px at 88% 35%, rgba(255,255,255,0.5) 0%, transparent 100%),
radial-gradient(2px 2px at 12% 90%, rgba(255,255,255,0.6) 0%, transparent 100%);
animation-delay: 3s;
animation-duration: 7s;
}

/* ============================================================
9. HEADER PLACEHOLDER
============================================================ */

.oops-popup-header-wrap {
position: relative;
width: 100%;
z-index: var(--oops-z-header);
pointer-events: all;
padding-top: 10px;
}

/* ============================================================
10. MAIN CONTENT SHELL
============================================================ */

.oops-popup-main {
position: relative;
z-index: var(--oops-z-content);
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 40px 40px;
gap: 15px;
overflow: hidden;
}

/* ============================================================
11. TEXT SECTION
============================================================ */

.oops-text-sec {
display: flex;
flex-direction: column;
align-items: center;
text-align: center;
gap: 14px;
max-width: 860px;
width: 100%;
}

.oops-subheading {
font-family: 'Uhudscript', cursive;
font-size: 62px;
font-weight: 400;
line-height: 1.15;
letter-spacing: 1px;
background: var(--oops-brand-gradient);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}

.oops-heading {
font-family: 'Galano', sans-serif;
font-size: 42px;
font-weight: 600;
font-style: italic;
line-height: 1.4;
color: var(--oops-white);
text-transform: uppercase;
letter-spacing: 0.5px;
}

.oops-heading-line1,
.oops-heading-line2 {
display: flow;
}

.oops-heading-line1::after {
content: ' ';
}

.oops-body-text {
font-family: 'Galano', sans-serif;
font-size: 22px;
font-weight: 400;
line-height: 1.45;
color: var(--oops-white);
letter-spacing: 0.3px;
}

/* ============================================================
12. STAGE
============================================================ */

.oops-stage {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: center;
gap: 140px;
width: 100%;
max-width: 1100px;
position: relative;
min-height: 200px;
}

/* ============================================================
13. CTA BUTTONS
============================================================ */

.oops-cta {
--cta-height: 70px;
--cta-icon: 48px;
--cta-edge: 10px;
--cta-space: 20px;
--cta-border: 2px;

opacity: 0;
pointer-events: none;
position: relative;
width: fit-content;
max-width: 100%;
height: var(--cta-height);
padding: var(--cta-edge) var(--cta-space) var(--cta-edge) calc(var(--cta-edge) + var(--cta-icon) + var(--cta-space));
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 999px;
background: var(--oops-conic-gradient);
box-shadow: 0 8px 17px rgba(0, 0, 0, 0.24);
cursor: pointer;
text-decoration: none;
flex-shrink: 0;
align-self: center;
transition: padding 0.35s ease, box-shadow 0.35s ease;
}

.oops-cta::after {
content: '';
position: absolute;
inset: var(--cta-border);
z-index: 0;
border-radius: inherit;
background: var(--oops-dark-panel);
transition: background 0.35s ease, inset 0.35s ease;
}

.oops-cta-icon {
position: absolute;
left: calc(var(--cta-edge) + var(--cta-border));
top: 50%;
z-index: 1;
width: var(--cta-icon);
height: var(--cta-icon);
display: grid;
place-items: center;
border-radius: 50%;
color: var(--oops-ink);
background: var(--oops-brand-gradient);
transform: translateY(-50%);
transition:
left 0.45s cubic-bezier(0.2, 0.75, 0.2, 1),
background 0.3s ease,
color 0.3s ease;
}

.oops-cta-icon i {
font-size: 24px;
line-height: 1;
}

.oops-cta-text {
position: relative;
z-index: 1;
display: block;
font-family: 'Uhudscript', cursive;
font-size: 36px;
font-weight: 400;
letter-spacing: 1.6px;
white-space: nowrap;
background: var(--oops-brand-gradient-90);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: color 0.25s ease, -webkit-text-fill-color 0.25s ease;
}

.oops-cta:hover,
.oops-cta:focus-visible {
padding: var(--cta-edge) calc(var(--cta-edge) + var(--cta-icon) + var(--cta-space)) var(--cta-edge) var(--cta-space);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.3);
}

.oops-cta:hover::after,
.oops-cta:focus-visible::after {
background: var(--oops-brand-gradient);
inset: 0;
}

.oops-cta:hover .oops-cta-icon,
.oops-cta:focus-visible .oops-cta-icon {
left: calc(100% - var(--cta-icon) - var(--cta-edge) - var(--cta-border));
color: var(--oops-ink);
background: var(--oops-white);
}

.oops-cta:hover .oops-cta-text,
.oops-cta:focus-visible .oops-cta-text {
color: var(--oops-ink);
background: none;
-webkit-text-fill-color: var(--oops-ink);
}

.oops-cta.is-visible {
opacity: 0;
pointer-events: all;
animation: oops-cta-fadein 0.7s ease forwards, oops-spin 2.5s linear infinite;
}

.oops-cta-left.is-visible {
animation-delay: 0s, 0s;
}

.oops-cta-right.is-visible {
animation-delay: 0.2s, 0s;
}

/* ============================================================
14. ROCKET
============================================================ */

.oops-rocket-wrap {
position: absolute;
bottom: -100px;
left: 50%;
transform: translateX(-50%);
z-index: calc(var(--oops-z-content) + 1);
display: flex;
align-items: flex-end;
justify-content: center;
width: 390px;
flex-shrink: 0;
pointer-events: none;
animation: oops-rocket-float 2.8s ease-in-out infinite;
animation-delay: 0.5s;
}

.oops-rocket-img {
display: block;
width: 300px;
height: auto;
object-fit: contain;
user-select: none;
-webkit-user-drag: none;
margin-bottom: -135px;
}

.oops-rocket-wrap.is-launching {
animation: oops-rocket-launch var(--oops-rocket-duration) cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

/* ============================================================
15. FOOTER PLACEHOLDER
============================================================ */

.oops-popup-footer-wrap {
position: relative;
width: 100%;
z-index: var(--oops-z-footer);
pointer-events: all;
}

.oops-popup-top-bar {
    display: none !important;
}

/* ============================================================
16. CLOSE BUTTON
============================================================ */

.oops-close-btn {
position: absolute;
top: 30px;
right: 60px;
z-index: calc(var(--oops-z-top-bar) + 1);
width: 48px;
height: 48px;
display: flex;
align-items: center;
justify-content: center;
background: transparent;
border: none;
outline: none;
padding: 0;
cursor: pointer;
color: var(--oops-white);
transition: color 0.25s ease;
}

.oops-close-icon {
width: 22px;
height: 22px;
display: block;
transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.oops-close-btn:hover .oops-close-icon {
transform: rotate(90deg);
}

.oops-close-btn:hover {
color: #64eda8;
filter: drop-shadow(0 0 6px rgba(100, 237, 168, 0.7));
}

/* ============================================================
17. DESKTOP LARGE
============================================================ */

@media (max-width: 1100px) {
.oops-popup-modal {
max-width: 85%;
}

.oops-subheading {
font-size: 56px;
}

.oops-heading {
font-size: 46px;
}

.oops-body-text {
font-size: 20px;
}

.oops-stage {
max-width: 960px;
gap: 120px;
}

.oops-cta {
--cta-height: 66px;
--cta-icon: 46px;
--cta-edge: 9px;
--cta-space: 18px;
}

.oops-cta-text {
font-size: 34px;
}

.oops-cta-icon i {
font-size: 23px;
}

.oops-rocket-wrap {
width: 340px;
bottom: -260px;
}

.oops-rocket-img {
width: 340px;
}
}

/* ============================================================
18. TABLET LARGE
============================================================ */

@media (max-width: 1024px) {
.oops-popup-modal {
max-width: 85%;
}

.oops-popup-main {
padding: 70px 32px;
gap: 28px;
}

.oops-subheading {
font-size: 52px;
}

.oops-heading {
font-size: 42px;
}

.oops-body-text {
font-size: 19px;
}

.oops-stage {
max-width: 880px;
min-height: 250px;
gap: 90px;
}

.oops-cta {
--cta-height: 62px;
--cta-icon: 44px;
--cta-edge: 8px;
--cta-space: 17px;
}

.oops-cta-text {
font-size: 31px;
letter-spacing: 1.2px;
}

.oops-rocket-wrap {
width: 310px;
bottom: -240px;
}

.oops-rocket-img {
width: 310px;
}
}

/* ============================================================
19. TABLET RANGE
============================================================ */

@media (min-width: 769px) and (max-width: 1024px) {
.oops-text-sec {
text-align: center;
align-items: center;
}

.oops-heading-line1,
.oops-heading-line2 {
display: inline;
}
}

/* ============================================================
20. MOBILE
============================================================ */

@media (max-width: 768px) {
.oops-popup-modal {
max-width: 92%;
max-height: 95vh;
}

.oops-popup-main {
padding: 60px 24px;
gap: 24px;
}

.oops-text-sec {
/*align-items: flex-start;*/
text-align: left;
gap: 10px;
max-width: 100%;
}

.oops-subheading {
font-size: 48px;
letter-spacing: 0.5px;
}

.oops-heading {
font-size: 36px;
line-height: 1.15;
}

.oops-heading-line1,
.oops-heading-line2 {
display: block;
}

.oops-heading-line1::after {
content: '';
}

.oops-body-text {
font-size: 18px;
line-height: 1.5;
}

.oops-stage {
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 16px;
min-height: unset;
width: 100%;
}

.oops-cta-left {
order: 1;
}

.oops-rocket-wrap {
order: 2;
position: relative;
bottom: auto;
transform: none;
margin-top: 20px;
display: none;
}

.oops-cta-right {
order: 3;
}

.oops-cta {
--cta-height: 56px;
--cta-icon: 42px;
--cta-edge: 7px;
--cta-space: 15px;
max-width: 100%;
}

.oops-cta-text {
font-size: 28px;
letter-spacing: 1px;
}

.oops-cta-icon i {
font-size: 21px;
}

.oops-close-btn {
top: 20px;
right: 40px;
width: 40px;
height: 40px;
}

.oops-close-icon {
width: 22px;
height: 22px;
}
}

/* ============================================================
21. SMALL MOBILE
============================================================ */

@media (max-width: 640px) {
.oops-popup-modal {
max-width: 94%;
}

.oops-popup-main {
padding: 50px 20px;
}

.oops-subheading {
font-size: 42px;
}

.oops-heading {
font-size: 32px;
}

.oops-body-text {
font-size: 17px;
}

.oops-cta {
--cta-height: 54px;
--cta-icon: 40px;
--cta-edge: 7px;
--cta-space: 14px;
}

.oops-cta-text {
font-size: 26px;
}

.oops-rocket-wrap {
width: 230px;
bottom: auto;
margin-top: 15px;
}

.oops-rocket-img {
width: 230px;
}
}

/* ============================================================
22. EXTRA SMALL MOBILE
============================================================ */

@media (max-width: 480px) {
.oops-popup-modal {
max-width: 96%;
}

.oops-popup-main {
padding: 45px 18px;
gap: 20px;
}

.oops-subheading {
font-size: 36px;
letter-spacing: 0;
}

.oops-heading {
font-size: 28px;
text-align: center;
}

.oops-body-text {
font-size: 16px;
}

.oops-cta {
--cta-height: 50px;
--cta-icon: 36px;
--cta-edge: 6px;
--cta-space: 12px;
}

.oops-cta-text {
font-size: 23px;
letter-spacing: 0.6px;
}

.oops-cta-icon i {
font-size: 18px;
}

.oops-rocket-wrap {
width: 200px;
margin-top: 12px;
}

.oops-rocket-img {
width: 200px;
}
}

/* ============================================================
23. VERY SMALL MOBILE
============================================================ */

@media (max-width: 360px) {
.oops-popup-modal {
max-width: 96%;
}

.oops-popup-main {
padding: 40px 16px;
gap: 16px;
}

.oops-subheading {
font-size: 30px;
}

.oops-heading {
font-size: 24px;
}

.oops-body-text {
font-size: 14px;
}

.oops-cta {
--cta-height: 46px;
--cta-icon: 34px;
--cta-edge: 5px;
--cta-space: 10px;
}

.oops-cta-text {
font-size: 20px;
letter-spacing: 0.3px;
}

.oops-cta-icon i {
font-size: 16px;
}

.oops-rocket-wrap {
width: 170px;
margin-top: 10px;
}

.oops-rocket-img {
width: 170px;
}
}

/* ============================================================
24. SHORT SCREEN HEIGHT
============================================================ */

/*@media (max-height: 700px) {*/
/*.oops-popup-modal {*/
/*max-height: 95vh;*/
/*}*/

/*.oops-popup-main {*/
/*padding-top: 60px;*/
/*padding-bottom: 40px;*/
/*gap: 20px;*/
/*}*/

/*.oops-subheading {*/
/*font-size: 44px;*/
/*margin-top: 0;*/
/*}*/

/*.oops-heading {*/
/*font-size: 36px;*/
/*}*/

/*.oops-body-text {*/
/*font-size: 17px;*/
/*}*/

/*.oops-stage {*/
/*min-height: 200px;*/
/*}*/

/*.oops-cta {*/
/*--cta-height: 54px;*/
/*--cta-icon: 40px;*/
/*--cta-edge: 7px;*/
/*--cta-space: 14px;*/
/*}*/

/*.oops-cta-text {*/
/*font-size: 28px;*/
/*}*/

/*.oops-rocket-wrap {*/
/*width: 280px;*/
/*margin-top: 15px;*/
/*}*/

/*.oops-rocket-img {*/
/*width: 280px;*/
/*}*/
/*}*/

/* ============================================================
25. TABLET EXACT 768PX + SHORT HEIGHT
============================================================ */

@media (width: 768px) and (max-height: 700px) {
.oops-popup-modal {
max-width: 85%;
max-height: 90vh;
}

.oops-popup-main {
padding: 50px 24px;
gap: 18px;
}

.oops-subheading {
font-size: 40px;
}

.oops-heading {
font-size: 32px;
}

.oops-body-text {
font-size: 16px;
}

.oops-stage {
min-height: unset;
}

.oops-cta {
--cta-height: 52px;
--cta-icon: 38px;
--cta-edge: 6px;
--cta-space: 12px;
}

.oops-cta-text {
font-size: 25px;
}

.oops-rocket-wrap {
width: 240px;
margin-top: 12px;
}

.oops-rocket-img {
width: 240px;
}
}

/* ============================================================
26. MOBILE + SHORT HEIGHT
============================================================ */

@media (max-width: 768px) and (max-height: 700px) {
.oops-popup-modal {
max-width: 92%;
max-height: 95vh;
}

.oops-popup-main {
padding: 40px 20px;
gap: 14px;
overflow-y: auto;
}

.oops-subheading {
font-size: 30px;
}

.oops-heading {
font-size: 22px;
line-height: 1.2;
}

.oops-body-text {
font-size: 14px;
line-height: 1.4;
}

.oops-cta {
--cta-height: 46px;
--cta-icon: 34px;
--cta-edge: 5px;
--cta-space: 10px;
}

.oops-cta-text {
font-size: 22px;
}

.oops-rocket-wrap {
width: 200px;
margin-top: 10px;
}

.oops-rocket-img {
width: 200px;
}
}

@media (max-width: 1024px) {
    .oops-popup-overlay {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }
}

@media (max-width: 1199px) {
    .oops-popup-overlay {
        display: none !important;
    }
}


h1 {
    margin: 0;
}

p {
    margin: 0;
}