/* ============================================================
   NextCanna Age Verification — age-verify.css  v1.2
   Centered modal card — backdrop dims site, card has bg image
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;1,300;1,400&family=Cinzel:wght@400;500&display=swap');

/* ---------- Body scroll lock ---------- */
body.ncav-locked {
    overflow: hidden !important;
}

/* ---------- Backdrop — 0.70 black over the site ---------- */
#ncav-backdrop {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.70);
    z-index: 999998;
    opacity: 0;
    animation: ncav-fade-in 0.45s ease forwards;
}

/* ---------- Transparent centering wrapper ---------- */
#ncav-overlay {
    display: none;
    --ncav-text:      #ffffff;
    --ncav-subtext:   rgba(255, 255, 255, 0.80);
    --ncav-border:    rgba(255, 255, 255, 0.55);
    --ncav-btn-hover: rgba(255, 255, 255, 0.12);

    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1.5rem;
    background: transparent;
    font-family: 'Cormorant Garamond', Georgia, serif;
    color: var(--ncav-text);
    pointer-events: none; /* clicks fall through to backdrop on sides */
}

/* Shown only after JS confirms session is not verified */
#ncav-backdrop.ncav-visible {
    display: block;
}
#ncav-overlay.ncav-visible {
    display: flex;
}

/* ---------- Modal card (visual element) ---------- */
#ncav-card {
    pointer-events: all;
    position: relative;

    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;

    width: min(600px, 100%);
    gap: 0;
    padding: 3rem 1rem;

    /* Background image set via PHP inline style; fallback colour below */
    background-color: #0f3b25;
    background-size: cover;
    background-position: center center;
    background-repeat: no-repeat;
    background-image:
        radial-gradient(ellipse at 30% 20%, rgba(255, 255, 255, 0.04) 0%, transparent 55%),
        radial-gradient(ellipse at 75% 80%, rgba(0, 0, 0, 0.25) 0%, transparent 55%);

    border-radius: 6px;
    box-shadow:
        0 32px 80px rgba(0, 0, 0, 0.60),
        0 8px 24px  rgba(0, 0, 0, 0.40),
        inset 0 0 0 1px rgba(255, 255, 255, 0.08);

    opacity: 0;
    transform: translateY(20px) scale(0.985);
    animation: ncav-card-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.15s forwards;
}

/* Legibility tint over the image */
#ncav-card::after {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 6px;
    background: linear-gradient(
        180deg,
        rgba(0, 0, 0, 0.25) 0%,
        rgba(0, 20, 10, 0.50) 100%
    );
    pointer-events: none;
}

/* Children above the tint */
#ncav-card > * {
    position: relative;
    z-index: 1;
}

/* ---------- Site name ---------- */
#ncav-site-name {
    font-family: 'Cinzel', serif;
    font-size: 0.78rem;
    font-weight: 400;
    letter-spacing: 0.28em;
    color: var(--ncav-subtext);
    margin: 0 0 1.5rem;
    text-transform: uppercase;
    opacity: 0;
    animation: ncav-fade-in 0.4s ease 0.55s forwards;
}

/* ---------- Headline ---------- */
#ncav-tagline {
    font-family: 'Cormorant Garamond', Georgia, serif;
    font-size: clamp(3rem, 10vw, 5rem);
    font-weight: 300;
    font-style: italic;
    line-height: 1.05;
    letter-spacing: -0.01em;
    color: var(--ncav-text);
    margin: 0 0 1.8rem;
    opacity: 0;
    animation: ncav-fade-in 0.5s ease 0.70s forwards;
}

/* ---------- Legal ---------- */
#ncav-legal {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 400;
    letter-spacing: 0.10em;
    color: #ffffff;
    text-transform: uppercase;
    line-height: 1.8;
    margin: 0 0 2.4rem;
    max-width: 340px;
    opacity: 0;
    animation: ncav-fade-in 0.4s ease 0.88s forwards;
    text-shadow: 0 1px 6px rgba(0, 0, 0, 0.6);
}

/* ---------- Button row ---------- */
#ncav-actions {
    display: flex;
    align-items: center;
    gap: 2rem;
    flex-wrap: wrap;
    justify-content: center;
    opacity: 0;
    animation: ncav-fade-in 0.4s ease 1.02s forwards;
}

/* ---------- ENTER ---------- */
#ncav-enter {
    font-family: 'Cinzel', serif;
    font-size: 0.72rem;
    font-weight: 500;
    letter-spacing: 0.26em;
    color: var(--ncav-text);
    background: transparent;
    border: 1.5px solid var(--ncav-border);
    border-radius: 4px;
    padding: 0.95rem 2.6rem;
    cursor: pointer;
    text-transform: uppercase;
    transition: background 0.22s ease, border-color 0.22s ease, transform 0.18s ease;
    min-width: 170px;
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

#ncav-enter:hover {
    border-color: rgba(255, 255, 255, 0.90);
    background: var(--ncav-btn-hover);
    transform: translateY(-2px);
}

#ncav-enter:active {
    transform: translateY(0);
}

/* ---------- EXIT ---------- */
#ncav-exit {
    font-family: 'Cinzel', serif;
    font-size: 0.68rem;
    font-weight: 400;
    letter-spacing: 0.20em;
    color: var(--ncav-subtext);
    background: transparent;
    border: none;
    cursor: pointer;
    text-transform: uppercase;
    transition: color 0.2s ease, letter-spacing 0.2s ease;
    padding: 0.5rem 0.2rem;
}

#ncav-exit:hover {
    color: var(--ncav-text);
    letter-spacing: 0.26em;
}

/* ---------- Keyframes ---------- */
@keyframes ncav-fade-in {
    to { opacity: 1; }
}

@keyframes ncav-card-in {
    to {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* ---------- Dismiss animations ---------- */
#ncav-backdrop.ncav-hiding,
#ncav-overlay.ncav-hiding {
    animation: ncav-fade-out 0.4s ease forwards !important;
}

@keyframes ncav-fade-out {
    to { opacity: 0; }
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 520px) {
    #ncav-overlay {
        padding: 1rem;
    }

    #ncav-card {
        padding: 2.8rem 1.8rem 2.6rem;
        border-radius: 8px;
        width: 100%;
    }

    /* Slightly bigger headline on mobile for impact */
    #ncav-tagline {
        font-size: clamp(2.8rem, 11vw, 3.6rem);
        margin-bottom: 1.2rem;
    }

    /* Site name — keep readable, reduce letter-spacing so it doesn't overflow */
    #ncav-site-name {
        font-size: 0.75rem;
        letter-spacing: 0.18em;
        margin-bottom: 1.2rem;
    }

    /* Legal — full white, bigger, tighter tracking so it fits on small screens */
    #ncav-legal {
        font-size: 0.70rem;
        letter-spacing: 0.06em;
        line-height: 1.9;
        margin-bottom: 2rem;
        max-width: 100%;
    }

    /* Stack buttons vertically */
    #ncav-actions {
        flex-direction: column;
        gap: 1.2rem;
        width: 100%;
    }

    /* Full-width ENTER button, easy tap target */
    #ncav-enter {
        width: 100%;
        min-width: unset;
        padding: 1.1rem 1rem;
        font-size: 0.72rem;
        letter-spacing: 0.22em;
    }

    #ncav-exit {
        font-size: 0.68rem;
        letter-spacing: 0.16em;
    }
}

@media (max-width: 360px) {
    #ncav-card {
        padding: 2.4rem 1.4rem 2.2rem;
    }
    #ncav-tagline {
        font-size: 2.6rem;
    }
    #ncav-legal {
        font-size: 0.68rem;
    }
}

/* ============================================================
   Reduced-motion
   ============================================================ */
@media (prefers-reduced-motion: reduce) {
    #ncav-backdrop,
    #ncav-card,
    #ncav-site-name,
    #ncav-tagline,
    #ncav-legal,
    #ncav-actions {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
}