/* ======= */
/* IMPORTS */
/* ======= */

/* Imports custom Google Fonts:
- Courier Prime: retro monospace typeface
- Rubik Bubbles: decorative bubble-style font for the logo
*/
@import url('https://fonts.googleapis.com/css2?family=Courier+Prime:wght@400;700&family=Rubik+Bubbles&display=swap');

/* ============ */
/* GLOBAL RESET */
/* ============ */

/* Universal selector (*)
Resets spacing and standardizes sizing behavior.
margin: 0;
    Removes default browser margins
padding: 0;
    Removes default browser padding
box-sizing: border-box;
    Makes width/height calculations include padding + border
*/
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* ============ */
/* BODY STYLING */
/* ============ */

/* Main page styling.
font-family:
    Sets the site's default font
background:
    Black background for high contrast aesthetic
color:
    Default text color
overflow-x: hidden;
    Prevents horizontal scrolling caused by effects
min-height: 100vh;
    Ensures body fills the entire viewport height
*/
body {
    font-family: 'Courier Prime', monospace;
    background: #000;
    color: #fff;
    overflow-x: hidden;
    min-height: 100vh;
}

/* ====================== */
/* VISUAL EFFECT OVERLAYS */
/* ====================== */

/* Creates animated film grain/noise overlay using SVG turbulence.
body::before
    Pseudo-element layered over the entire screen
position: fixed;
    Keeps overlay locked to viewport
inset: -100%;
    Makes overlay larger than viewport to allow movement
background-image:
    Inline SVG noise texture
opacity:
    Controls visibility of grain
pointer-events: none;
    Allows clicks through overlay
mix-blend-mode: multiply;
    Blends grain into page for gritty texture
animation:
    Applies shifting movement using grainSlow animation
*/
body::before {
    content: '';
    position: fixed;
    inset: -100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 2000 2000' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.0625' numOctaves='8' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.65;
    pointer-events: none;
    z-index: 9999;
    animation: grainSlow 0.5s steps(3) infinite;
    mix-blend-mode: multiply;
}

/* Purple color wash overlay.
mix-blend-mode: screen;
    Brightens colors and creates neon haze effect
*/
html::before {
    content: '';
    position: fixed;
    inset: 0;
    background: rgba(128, 0, 128, 0.25);
    pointer-events: none;
    z-index: 99998;
    mix-blend-mode: screen;
}

/* CRT scanline effect.
repeating-linear-gradient:
    Creates horizontal dark lines like old televisions
*/
body::after {
    content: '';
    position: fixed;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        rgba(0, 0, 0, 0.35) 0px,
        rgba(0, 0, 0, 0.35) 2px,
        transparent 2px,
        transparent 4px
    );
    pointer-events: none;
    z-index: 10000;
}

/* ========== */
/* ANIMATIONS */
/* ========== */

/* Film grain movement animation.
translate():
    Slightly shifts overlay position to simulate analog noise
*/
@keyframes grainSlow {
    0%, 100% { transform: translate(0, 0); }
    33% { transform: translate(-1%, -2%); }
    66% { transform: translate(1%, 2%); }
}

/* ====== */
/* LAYOUT */
/* ====== */

/* Main centered content wrapper.
max-width:
    Prevents content from becoming too wide
margin: 0 auto;
    Horizontally centers container
position: relative;
    Allows absolute-positioned children inside
*/
.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 20px;
    position: relative;
    z-index: 1;
}

/* Header section spacing + alignment */
header {
    text-align: center;
    padding: 80px 20px 60px;
}

/* ========== */
/* MAIN TITLE */
/* ========== */

/* Large stylized logo text.
text-shadow:
    Creates glowing outlined effect
*/
h1 {
    font-family: 'Rubik Bubbles', cursive;
    font-size: 8rem;
    font-weight: 400;
    color: #fff;
    text-transform: lowercase;
    letter-spacing: -8px;
    margin-bottom: 20px;
    text-shadow:
        -3px -3px 0 #000,
        3px -3px 0 #000,
        -3px 3px 0 #000,
        3px 3px 0 #000,
        0 0 20px rgba(255, 255, 255, 0.5);
}

/* ======= */
/* TAGLINE */
/* ======= */

/* Animated glowing subtitle text. */
.tagline {
    font-size: 1.3rem;
    letter-spacing: 6px;
    text-transform: lowercase;
    font-weight: 700;

    text-shadow:
        0 0 20px #fff,
        0 0 40px #fff,
        0 0 60px rgba(255, 255, 255, 0.8),
        0 0 80px rgba(255, 255, 255, 0.6);

    animation: breathe 4s ease-in-out infinite;
}

/* Breathing glow animation. */
@keyframes breathe {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* =============== */
/* BOOKING SECTION */
/* =============== */

/* Vertical flex container for booking content. */
.booking-section {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
    margin: 60px auto;
}

/* Row containing buttons and orbit stars. */
.book-now-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 80px;
    position: relative;
    min-height: 500px;
}


/* ======= */
/* BUTTONS */
/* ======= */

/* Button container. */
.button-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    position: relative;
    z-index: 100;
}

/* Main button styling.
transition:
    Smooth hover animation
box-shadow:
    Outer glow
text-shadow:
    Neon glowing text
*/
.btn {
    font-family: 'Courier Prime', monospace;
    text-decoration: none;
    color: #fff;
    padding: 18px 50px;
    border: 2px solid #fff;
    background: rgba(255, 255, 255, 0.05);
    font-weight: 700;
    letter-spacing: 4px;
    text-transform: lowercase;

    box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);

    text-shadow:
        0 0 18px #fff,
        0 0 35px rgba(255, 255, 255, 0.9),
        0 0 55px rgba(255, 255, 255, 0.7),
        0 0 75px rgba(255, 255, 255, 0.5);

    transition: all 0.3s ease;
    display: inline-block;
}

/*
Hover interaction:
- brighter glow
- slight upward movement
*/
.btn:hover {
    background: rgba(255, 255, 255, 0.15);

    box-shadow:
        0 0 30px rgba(255, 255, 255, 0.6),
        0 0 60px rgba(255, 255, 255, 0.4);

    transform: translateY(-3px);

    text-shadow: 0 0 10px #fff;
}

/*
Instagram button uses slightly smaller padding.
*/
.instagram-link {
    padding: 15px 40px;
}


/* ============ */
/* ORBIT SYSTEM */
/* ============ */

/* Container for floating stars. */
.orbit-container {
    position: absolute;
    width: 600px;
    height: 600px;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
}

/* Each orbiting star. */
.orbit-star {
    position: absolute;
    left: 50%;
    top: 50%;
    pointer-events: all;
    animation: orbit 360s linear infinite;
}

/* Each star starts at different timing offsets
to evenly distribute them in orbit. */
.orbit-star:nth-child(1) { animation-delay: 0s; }
.orbit-star:nth-child(2) { animation-delay: -60s; }
.orbit-star:nth-child(3) { animation-delay: -120s; }
.orbit-star:nth-child(4) { animation-delay: -180s; }
.orbit-star:nth-child(5) { animation-delay: -240s; }
.orbit-star:nth-child(6) { animation-delay: -300s; }

/* Orbit path animation.
rotate():
    Spins around center
translate():
    Pushes star outward from center
*/
@keyframes orbit {
    from {
        transform:
            translate(-50%, -50%)
            rotate(0deg)
            translate(180px, 280px)
            rotate(0deg);
    }

    to {
        transform:
            translate(-50%, -50%)
            rotate(360deg)
            translate(180px, 280px)
            rotate(-360deg);
    }
}


/* ============ */
/* STAR EFFECTS */
/* ============ */

/*
Each star uses layered pseudo-elements,
blur, gradients, and glow effects to
simulate luminous stars.
*/

.star {
    position: relative;
    cursor: pointer;
    transition: all 0.5s ease;
}

/*
Hovering stars rotate their glow layers.
*/
.star:hover .star-glow {
    animation: spin 1s linear infinite;
}

/* Star glow layers */
.star-glow {
    width: 100%;
    height: 100%;
    position: relative;
    filter: blur(3px);
    transition: all 0.5s ease;
}

/* Main glowing cross beams */
.star-glow::before,
.star-glow::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;

    background: radial-gradient(
        ellipse,
        #fff 0%,
        #fff 20%,
        #fff 35%,
        rgba(255, 255, 255, 0.95) 55%,
        rgba(240, 240, 255, 0.8) 70%,
        transparent 85%
    );

    animation: pulse 3s ease-in-out infinite;

    filter: blur(2px) brightness(5);

    box-shadow:
        0 0 100px #fff,
        0 0 200px #fff,
        0 0 300px #fff,
        0 0 400px rgba(255, 255, 255, 0.9);
}

/* Horizontal beam */
.star-glow::before {
    width: 140%;
    height: 12px;
    transform: translate(-50%, -50%) rotate(18deg);
}

/* Vertical beam */
.star-glow::after {
    width: 12px;
    height: 135%;
    transform: translate(-50%, -50%) rotate(-12deg);
}

/* Secondary glow layers */
.star::before,
.star::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;

    background: radial-gradient(
        ellipse,
        #fff 0%,
        rgba(255, 255, 255, 0.95) 30%,
        rgba(255, 255, 255, 0.8) 60%,
        transparent 80%
    );

    pointer-events: none;

    filter: blur(3px) brightness(4);

    animation: pulse 3s ease-in-out infinite 0.5s;

    box-shadow:
        0 0 80px #fff,
        0 0 160px #fff,
        0 0 240px rgba(255, 255, 255, 0.9);
}

/* Diagonal beam */
.star::before {
    width: 110%;
    height: 8px;
    transform: translate(-50%, -50%) rotate(-52deg);
}

/* Opposite diagonal beam */
.star::after {
    width: 8px;
    height: 105%;
    transform: translate(-50%, -50%) rotate(65deg);
}

/* Star sizes */
.orbit-star:nth-child(1) .star {
    width: 160px;
    height: 160px;
}

.orbit-star:nth-child(2) .star {
    width: 130px;
    height: 130px;
}

.orbit-star:nth-child(3) .star {
    width: 100px;
    height: 100px;
}

.orbit-star:nth-child(4) .star {
    width: 140px;
    height: 140px;
}

.orbit-star:nth-child(5) .star {
    width: 120px;
    height: 120px;
}

.orbit-star:nth-child(6) .star {
    width: 110px;
    height: 110px;
}

/* Pulsing glow animation */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
        filter: blur(2px);
    }

    50% {
        opacity: 0.7;
        filter: blur(3px);
    }
}

/*
Spin animation. */
@keyframes spin {
    from {
        transform: translate(-50%, -50%) rotate(0deg);
    }

    to {
        transform: translate(-50%, -50%) rotate(360deg);
    }
}


/* =============== */
/* MISSION SECTION */
/* =============== */

/*
Wrapper for hover-reveal mission statement.
*/
.mission-wrapper {
    position: relative;
    z-index: 10;
}

/*
Visible mission button/panel.
*/
.mission {
    padding: 20px 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 2px solid #fff;

    box-shadow: 0 0 30px rgba(255, 255, 255, 0.3);

    cursor: pointer;

    backdrop-filter: blur(5px);

    transition: all 0.3s ease;
}

/*
Hidden content area.

opacity: 0;
    Invisible initially

max-height: 0;
    Collapses container

overflow: hidden;
    Prevents hidden text showing
*/
.mission-content {
    max-width: 600px;
    margin-top: 20px;
    padding: 30px;

    background: rgba(0, 0, 0, 0.9);

    border: 2px solid #fff;

    box-shadow:
        0 0 40px rgba(255, 255, 255, 0.4),
        inset 0 0 40px rgba(255, 255, 255, 0.05);

    backdrop-filter: blur(10px);

    opacity: 0;
    max-height: 0;
    overflow: hidden;

    transition: all 0.5s ease;
}

/*
Reveal content on hover.
*/
.mission-wrapper:hover .mission-content {
    opacity: 1;
    max-height: 500px;
}


/* =========================================================
   FOOTER
   ========================================================= */

footer {
    text-align: center;
    padding: 60px 20px;
    margin-top: 100px;

    border-top: 2px solid rgba(255, 255, 255, 0.2);

    font-size: 1rem;
    font-weight: 700;
    letter-spacing: 2px;

    text-shadow:
        0 0 20px #fff,
        0 0 40px #fff,
        0 0 60px rgba(255, 255, 255, 0.8),
        0 0 80px rgba(255, 255, 255, 0.6);
}

/* ================= */
/* RESPONSIVE DESIGN */
/* ================= */

/* Tablet layout adjustments. */
@media (max-width: 1024px) {

    /*
    Shrinks orbit area.
    */
    .orbit-container {
        width: 400px;
        height: 400px;
    }

    /*
    Orbit radius becomes smaller on tablets.
    */
    @keyframes orbit {
        from {
            transform:
                translate(-50%, -50%)
                rotate(0deg)
                translate(120px, 200px)
                rotate(0deg);
        }

        to {
            transform:
                translate(-50%, -50%)
                rotate(360deg)
                translate(120px, 200px)
                rotate(-360deg);
        }
    }
}


/*
Mobile layout adjustments.
*/
@media (max-width: 768px) {

    /*
    Smaller title on phones.
    */
    h1 {
        font-size: 4rem;
        letter-spacing: -6px;
    }

    /*
    Completely removes orbit stars on mobile
    for better performance and battery life.
    */
    .orbit-container {
        display: none;
    }

    /*
    Reduces unused vertical space after
    removing the stars.
    */
    .book-now-row {
        min-height: 250px;
    }

    /*
    Mission panel fits smaller screens.
    */
    .mission-content {
        max-width: 90%;
    }
}