/* ==========================================================================
   1. GLOBAL LOCKS & CANVAS BASE
   ========================================================================== */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body, html {
    background-color: #ffffff;
    width: 100vw;
    height: 100vh;
    overflow: hidden; /* Strict scroll lock across all platforms */
    position: relative;
    font-family: -apple-system, BlinkMacSystemFont, sans-serif;
    -webkit-text-size-adjust: 100%;
    touch-action: none; /* Disables iOS pull-to-refresh bounce */
}

/* ==========================================================================
   2. HOMEPAGE SYSTEM - RESTORED ORIGINAL POSITIONS (index.html)
   ========================================================================== */
.site-header {
    position: absolute;
    top: 3vw;
    left: 4vw;
    z-index: 100;
}

.site-logo {
    height: min(20vh, 240px); /* Preserves original 240px depth on desktop, scales down safely on short screens */
    width: auto;
    display: block;
    object-fit: contain;
}

.canvas-container {
    position: relative;
    width: 100vw;
    height: 100vh;
}

/* Restored original exact asymmetrical dimensions and desktop coordinates */
.nav-circle {
    position: absolute;
    display: block;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
    transition: transform 0.3s cubic-bezier(0.25, 1, 0.5, 1);
}

.circle-cream {
    width: min(22vw, 35vh); /* Restores original 22vw scale base */
    background-color: #FFFDF0;
    top: 38vh;
    left: 8vw;
}

.circle-mint {
    width: min(25vw, 38vh); /* Restores original 25vw scale base */
    background-color: #E6FFFF;
    bottom: 6vh;
    left: 42vw;
}

.circle-lavender {
    width: min(24vw, 37vh); /* Restores original 24vw scale base */
    background-color: #F3EBF7;
    top: 22vh;
    right: 4vw;
}

.nav-circle:hover {
    transform: scale(1.05);
}

/* ==========================================================================
   3. PRODUCT TERMINAL SYSTEM - RESTORED ORIGINAL SCALING (product.html)
   ========================================================================== */
.exit-circle-link {
    position: absolute;
    top: 4vw;
    left: 4vw;
    width: clamp(65px, 8vw, 100px); /* Restores original user footprint balance */
    aspect-ratio: 1 / 1;
    background-color: #E6FFE6;
    border-radius: 50%;
    z-index: 99999; 
    transition: transform 0.3s ease;
}

.exit-circle-link:hover {
    transform: scale(1.05);
}

.product-container {
    display: flex;
    width: 100vw;
    height: 100vh;
    background-color: #ffffff;
    align-items: center;
    overflow: hidden;
}

.product-left {
    flex: 1;
    display: flex;
    align-items: center; 
    padding-left: 8vw;
    user-select: none;
    height: 100%;
}

.preorder-image-wrapper {
    width: 100%;
    max-width: min(440px, 45vw); /* Restores massive 440px target, clamped by viewport boundary */
}

.preorder-graphic {
    width: 100%;
    height: auto;
    display: block;
    object-fit: contain;
}

.product-right {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    padding: 4vw;
}

.parallax-wrapper {
    position: relative;
    width: 100%;
    max-width: 460px; /* Restores exact original 460px canvas baseline width */
    height: 82vh;     /* Restores original 82vh vertical footprint length */
    display: flex;
    justify-content: center;
    align-items: center;
}

.parallax-layer {
    position: absolute;
    object-fit: contain;
    transform-origin: center center;
}

/* Restores full high-fidelity visual scaling bleed metrics */
.layer-bg {
    max-height: 98%; 
    max-width: 98%;
    z-index: 10;
}

.layer-fg {
    max-height: 106%; 
    max-width: 106%;
    z-index: 20;
    pointer-events: none;
}

/* ==========================================================================
   4. SYSTEM POPUP MODULE
   ========================================================================== */
.popup-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(255, 255, 255, 0.75); 
    display: flex;
    justify-content: center;
    align-items: center; /* True center tracking alignments */
    z-index: 9998; 
}

.hidden { display: none !important; }

.popup-content {
    background: #ffffff;
    border: 5px solid #000000;
    width: 94vw;                   
    max-width: 1340px; /* Restores massive original length boundary rules */
    height: min(15vh, 140px);                 
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

#email-form { width: 100%; height: 100%; }
.input-container {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

@keyframes dimGlimmer {
    0% { opacity: 0.25; }
    50% { opacity: 0.85; }
    100% { opacity: 0.25; }
}

#input-label-img {
    position: absolute;
    width: 85%;                    
    height: 80%;                   
    object-fit: contain;           
    pointer-events: none;
    z-index: 1;
    animation: dimGlimmer 3.5s infinite ease-in-out; 
}

#input-label-img.faded {
    animation: none;
    opacity: 0.12;
}

#email-input {
    position: absolute;
    width: 100%;
    height: 100%;
    background: transparent;
    border: none;
    outline: none;
    padding: 0 40px;
    z-index: 2;
    color: #000000;
    font-size: min(5vh, 54px); /* Restores heavy 54px font weight, scaling safely via height variables */
    font-weight: 700;
    letter-spacing: 2px;
    text-align: center;
}

/* ==========================================================================
   5. RESPONSIVE REBALANCING OVERRIDES (Vertical Smart Screens & Tablets)
   ========================================================================== */
@media (max-width: 1024px) and (orientation: portrait) {
    /* Main Page Tablet/Mobile Realignment */
    .site-header {
        left: 0;
        width: 100%;
        display: flex;
        justify-content: center;
        top: 5vh;
    }

    .site-logo {
        height: 110px;
    }

    /* Keeps original layout tracking look but stacks them safely to prevent viewport overflows */
    .circle-cream {
        width: 140px;
        top: 26vh;
        left: 12vw;
    }

    .circle-mint {
        width: 160px;
        bottom: 12vh;
        left: 30vw;
    }

    .circle-lavender {
        width: 150px;
        top: 42vh;
        right: 12vw;
    }

    /* Product Page Tablet/Mobile Scale Safety Layer */
    .exit-circle-link {
        top: 4vh;
        left: 6vw;
        width: 55px;
    }

    .product-container {
        flex-direction: column;
        justify-content: center;
        padding: 14vh 4vw 4vh 4vw;
        gap: 3vh;
    }

    .product-left, .product-right {
        flex: none;
        width: 100%;
        height: 38vh; /* Splits screen real estate perfectly in half vertically */
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0;
    }

    .preorder-image-wrapper { 
        max-width: 220px; 
    }

    .parallax-wrapper { 
        height: 100%; 
        width: 100%; 
        max-width: 320px; /* Prevents portrait image clips on compact screen footprints */
    }
}

/* Clean handling adjustments for horizontal landscape smartphone execution layouts */
@media (max-height: 500px) and (orientation: landscape) {
    .site-logo { height: 12vh; }
    
    .circle-cream { width: 18vh; top: 30vh; left: 10vw; }
    .circle-mint { width: 20vh; bottom: 5vh; left: 42vw; }
    .circle-lavender { width: 19vh; top: 18vh; right: 10vw; }

    .exit-circle-link { width: 45px; top: 4vh; left: 4vw; }
    .product-container { padding: 0 4vw; }
    .parallax-wrapper { height: 70vh; max-width: 260px; }
    .preorder-image-wrapper { max-width: 160px; }
    .popup-content { height: 22vh; }
    #email-input { font-size: 8vh; }
}