/* ========================================
   NCX GLOBAL & ADAPTIVE VARIABLES
   ========================================
*/
:root {
    --bg-dark: #001700;
    --nc-green: #47824b;
    --nc-red: #ff3b30;
    --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
    --ease-hover: cubic-bezier(0.2, 0.85, 0.25, 1);
    --dur-hover: 0.25s;
    --dur-cta: 0.4s;
    --lens-size: 40vw; 
    --logo-size: 85vw;
    --grid-mask-radius: 12vw;
    --p-x: 50%; 
    --p-y: 70%;
    --p-prox: 0;
    --pulse-o: 0.4;
    --dot-scale: 1; /* Counter-scale for pulse during expansion */
}

@media (min-width: 1024px) {
    :root {
        --lens-size: 270px;
        --logo-size: 750px;
        --grid-mask-radius: 82px;
        --p-y: 75%; 
    }
    #ncx-lens-container { transform: translate(-29.5%, -29.5%); }
}

/* ========================================
   BASE LAYOUT & SELECTION LOCKS
   ========================================
*/
html, body { 
    margin: 0; padding: 0;
    background: var(--bg-dark); 
    overflow: hidden; 
    width: 100vw; height: 100vh; height: 100svh; 
    font-family: "Avenir Next", Avenir, sans-serif;
    cursor: none !important; 
    touch-action: none; 
    /* Lock selection to prevent mobile UI interference */
    -webkit-user-select: none; user-select: none;
    -webkit-touch-callout: none;
}

#ncx-wrapper { 
    width: 100%; height: 100%; 
    position: relative; 
    display: flex; justify-content: center; align-items: center; 
}

#ncx-wrapper::after {
    content: ''; position: absolute; inset: 0;
    background: var(--bg-dark); opacity: 0; z-index: 200;
    pointer-events: none; transition: opacity 0.4s ease;
}

#ncx-wrapper.ncx-exit-scan::after { opacity: 1; }

/* ========================================
   INTERACTIVE ELEMENTS
   ========================================
*/

/* LAYER 10: The Frame (Sits on top of the dot) */
#ncx-lens-container { 
    position: absolute; 
    width: var(--lens-size); height: var(--lens-size); 
    pointer-events: none; z-index: 10; 
    transform: translate(-28.5%, -28.5%); 
    top: var(--p-y); left: var(--p-x); 
    will-change: top, left, opacity; opacity: 0;
    transition: opacity 0.5s ease;
}

@media (pointer: coarse) {
    #ncx-lens-container, #ncx-grid-reveal { opacity: 1 !important; }
}

#ncx-wrapper.has-moved #ncx-lens-container,
#ncx-wrapper.has-moved #ncx-grid-reveal { opacity: 1; }

#ncx-lens-graphic { 
    width: 100%; height: 100%; 
    background: url('assets/lens-graphic.png') no-repeat center; 
    background-size: 100% 100%;
}

/* LAYER 2: The Glass/Grid (Sits behind the dot) */
#ncx-grid-reveal {
    position: absolute; inset: 0; z-index: 2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='40' viewBox='0 0 40 40'%3E%3Cpath d='M 40 0 L 0 0 0 40' fill='none' stroke='rgba(71, 130, 75, 0.9)' stroke-width='1.5'/%3E%3C/svg%3E");
    background-size: 40px 40px; opacity: 0;
    -webkit-mask-image: radial-gradient(circle var(--grid-mask-radius) at calc(var(--p-x) + 0.22%) calc(var(--p-y) + 0.3%), black 85%, transparent 100%);
    mask-image: radial-gradient(circle var(--grid-mask-radius) at calc(var(--p-x) + 0.22%) calc(var(--p-y) + 0.3%), black 85%, transparent 100%);
    transition: opacity 0.4s ease-out;
}

/* ========================================
   THE ORIGIN (RED DOT & SWALLOW PULSE)
   ========================================
*/

/* LAYER 5: The Hit Zone (Between grid and lens frame) */
#ncx-hit-zone { 
    position: absolute; top: 50%; left: 50%; 
    width: 20vw; height: 20vw; max-width: 180px; max-height: 180px;
    transform: translate(-50%, -50%); z-index: 5; 
    display: flex; justify-content: center; align-items: center; 
}

#ncx-origin-dot { 
    position: relative; width: 12px; height: 12px; 
    background: var(--nc-red); border-radius: 50%; 
    will-change: transform; transition: opacity 0.4s ease;
    box-shadow: 0 0 15px var(--nc-red);
}

@keyframes pulse-origin { 
    0% { opacity: 1; transform: translate(-50%, -50%) scale(calc(0.6 / var(--dot-scale))); } 
    100% { opacity: 0; transform: translate(-50%, -50%) scale(calc(1.1 / var(--dot-scale))); } 
}

#ncx-origin-dot::after {
    content: ''; position: absolute; top: 50%; left: 50%; 
    width: 40px; height: 40px; 
    border: 2px solid var(--nc-red); border-radius: 50%; 
    animation: pulse-origin 2s infinite; 
    pointer-events: none; box-sizing: border-box;
    transition: opacity 0.3s ease;
    opacity: var(--pulse-o);
    z-index: -1;
}

/* ========================================
   REVEAL CONTENT
   ========================================
*/
#ncx-reveal-content { 
    position: absolute; top: 50%; left: 50%;
    text-align: center; opacity: 0; 
    transform: translate(-50%, -50%) scale(0.82) translateZ(0); 
    transition: opacity 0.6s ease-out, transform 0.8s var(--ease-out); 
    z-index: 150; width: 100%; max-width: var(--logo-size);
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    gap: clamp(18px, 4vh, 36px);
    pointer-events: none; contain: layout;
}

.is-revealed #ncx-reveal-content { 
    opacity: 1; transform: translate(-50%, -50%) scale(0.999) translateZ(0) !important; 
    pointer-events: auto; 
}

.ncx-exit-scan #ncx-reveal-content {
    opacity: 0; transform: translate(-50%, -50%) scale(1.04) translateZ(0) !important;
    transition: opacity 0.4s ease-in, transform 0.5s ease-in !important;
}

#ncx-logo { width: var(--logo-size); margin: 0 auto; line-height: 0; }
#ncx-logo img { max-width: 100%; height: auto; display: block; margin: 0 auto; transform: translateZ(0); }

#ncx-work-btn { 
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 24px 0;
    width: 320px;
    min-height: 0;
    border: 1.5px solid white; color: white; text-decoration: none; 
    text-transform: uppercase; font-weight: 500; font-size: 0.85rem; 
    letter-spacing: 0.45em; white-space: nowrap;
    transition:
        background var(--dur-cta) var(--ease-hover),
        color var(--dur-cta) var(--ease-hover),
        letter-spacing var(--dur-cta) var(--ease-hover),
        border-color var(--dur-cta) var(--ease-hover),
        transform var(--dur-hover) var(--ease-hover);
    line-height: 1;
    border-radius: 2px;
    -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
    user-select: auto;
}

#ncx-work-btn:hover {
    background: white;
    color: var(--bg-dark) !important;
    letter-spacing: 0.55em;
}

#ncx-work-btn:active {
    transform: scale(0.98);
}

#ncx-work-btn:focus-visible {
    outline: 2px solid var(--nc-green);
    outline-offset: 4px;
}

/* ========================================
   STATE CHANGES & MOBILE OVERRIDES
   =======================================
*/

@media (max-width: 768px) {
    /* Move the Red Dot and Hit Zone down */
    #ncx-hit-zone {
        top: 55%; 
    }

    /* Move the Logo and Button down to match the new center */
    #ncx-reveal-content {
        top: 55%;
        gap: clamp(14px, 3vh, 28px);
    }

    #ncx-work-btn {
        width: auto;
        max-width: min(240px, calc(100vw - 40px));
        min-height: 44px;
        padding: 11px 18px;
        font-size: 0.72rem;
        letter-spacing: 0.28em;
        line-height: 1;
    }

    #ncx-work-btn:hover {
        letter-spacing: 0.36em;
    }
}

@media (max-width: 480px) {
    #ncx-work-btn:hover {
        letter-spacing: 0.32em;
    }
}

@media (prefers-reduced-motion: reduce) {
    #ncx-work-btn {
        transition-duration: 0.01ms;
    }

    #ncx-work-btn:hover {
        letter-spacing: 0.45em;
    }

    #ncx-work-btn:active {
        transform: none;
    }

    #ncx-reveal-content {
        transition: opacity 0.6s ease-out, transform 0.01ms linear;
    }
}

@media (prefers-reduced-motion: reduce) and (max-width: 768px) {
    #ncx-work-btn:hover {
        letter-spacing: 0.28em;
    }
}

.is-revealed #ncx-grid-reveal, 
.is-revealed #ncx-lens-container { opacity: 0 !important; pointer-events: none !important; transition: opacity 0.3s ease-out !important; }

.is-revealed #ncx-origin-dot { opacity: 0 !important; transform: scale(18) !important; transition: opacity 0.4s ease-out, transform 0.5s ease-in !important; }

.is-revealed #ncx-origin-dot::after { display: none !important; }

body:has(#ncx-wrapper.is-revealed),
.is-revealed #ncx-wrapper { cursor: default !important; }
.is-revealed #ncx-work-btn { cursor: pointer !important; }

body.ncx-revealed-lock { overflow: hidden; touch-action: none; }