/* ═══════════════════════════════════════════════════════════════════
   BAAMANN — Cinematic Perfume Mist Intro  |  intro.css
   ADD-ON ONLY. Zero changes to any existing site styles.
   ═══════════════════════════════════════════════════════════════════ */

/* ── Fullscreen overlay ──────────────────────────────────────────── */
#baamann-intro {
    position: fixed;
    inset: 0;
    z-index: 1000000;
    background: #020202;
    overflow: hidden;
    opacity: 1;
    transition: opacity 1.6s cubic-bezier(0.4, 0, 0.15, 1);
    will-change: opacity;
}

#baamann-intro.intro-exit {
    opacity: 0;
    pointer-events: none;
}

/* ── Full-screen canvas for particles / mist ─────────────────────── */
#intro-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 2;
    display: block;
}

/* ── Cinematic ambient light — very subtle radial behind nozzle ───── */
#intro-ambient {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: radial-gradient(
        ellipse 42% 38% at 50% 54%,
        rgba(230, 215, 195, 0.055) 0%,
        rgba(180, 155, 115, 0.025) 45%,
        transparent 70%
    );
    opacity: 0;
    transition: opacity 0.9s ease;
}

#intro-ambient.amb-in {
    opacity: 1;
}

/* ── Nozzle wrapper ──────────────────────────────────────────────── */
#intro-nozzle {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    z-index: 4;
    display: flex;
    flex-direction: column;
    align-items: center;
    opacity: 0;
    /* Entrance: fade + rise */
    transition:
        opacity  0.9s cubic-bezier(0.22, 1, 0.36, 1),
        transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    user-select: none;
}

#intro-nozzle.nozzle-in {
    opacity: 1;
    transform: translate(-50%, -50%) translateY(0);
}

#intro-nozzle.nozzle-out {
    opacity: 0;
    transform: translate(-50%, -50%) translateY(8px) scale(0.94);
    transition:
        opacity  0.7s cubic-bezier(0.4, 0, 0.8, 1),
        transform 0.7s cubic-bezier(0.4, 0, 0.8, 1);
}

/* ──────────────────────────────────────────────────────────────────
   NOZZLE SHAPE (pure CSS — no images, no SVG files)
   Top-down / slightly-angled view of a minimal spray actuator head
   ────────────────────────────────────────────────────────────────── */

/* Actuator button (top, pressable) */
.nz-btn {
    width: 50px;
    height: 24px;
    border-radius: 5px 5px 2px 2px;
    background: linear-gradient(170deg, #222 0%, #161616 55%, #1d1d1d 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.055);
    border-bottom: none;
    box-shadow:
        inset 0 1px 3px rgba(255, 255, 255, 0.045),
        inset 0 -1px 2px rgba(0, 0, 0, 0.5),
        0 -4px 12px rgba(0, 0, 0, 0.45);
    position: relative;
    transition: transform 0.11s cubic-bezier(0.4, 0, 0.6, 1);
}

/* Sheen line on button */
.nz-btn::after {
    content: '';
    position: absolute;
    left: 9px;
    top: 5px;
    width: 3px;
    height: 12px;
    background: rgba(255, 255, 255, 0.042);
    border-radius: 2px;
}

/* Connecting barrel */
.nz-barrel {
    width: 16px;
    height: 13px;
    background: linear-gradient(90deg, #111 0%, #191919 50%, #111 100%);
    border-left:  0.5px solid rgba(255, 255, 255, 0.025);
    border-right: 0.5px solid rgba(255, 255, 255, 0.025);
}

/* Main spray head body */
.nz-head {
    width: 66px;
    height: 44px;
    border-radius: 5px;
    background: linear-gradient(145deg, #1e1e1e 0%, #101010 52%, #1a1a1a 100%);
    border: 0.5px solid rgba(255, 255, 255, 0.048);
    box-shadow:
        inset 1px 1px 4px rgba(255, 255, 255, 0.028),
        inset -1px -1px 3px rgba(0, 0, 0, 0.6),
        0 8px 32px rgba(0, 0, 0, 0.75),
        0 2px 10px rgba(0, 0, 0, 0.5);
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

/* Vertical sheen on head */
.nz-head::before {
    content: '';
    position: absolute;
    left: 9px;
    top: 6px;
    bottom: 6px;
    width: 3px;
    background: rgba(255, 255, 255, 0.032);
    border-radius: 2px;
}

/* Spray opening hole */
.nz-hole {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: radial-gradient(circle, #020202 0%, #0b0b0b 55%, #141414 100%);
    border: 1px solid rgba(255, 255, 255, 0.042);
    box-shadow:
        inset 0 1px 4px rgba(0, 0, 0, 0.9),
        0 0 10px rgba(0, 0, 0, 0.6);
    position: relative;
    z-index: 1;
}

/* Inner dot of spray hole */
.nz-hole::after {
    content: '';
    position: absolute;
    inset: 50%;
    transform: translate(-50%, -50%);
    width: 5px;
    height: 5px;
    border-radius: 50%;
    background: #010101;
}

/* Bottom collar / ring */
.nz-collar {
    width: 74px;
    height: 7px;
    background: linear-gradient(180deg, #191919 0%, #0d0d0d 100%);
    border-radius: 0 0 3px 3px;
    border: 0.5px solid rgba(255, 255, 255, 0.032);
    border-top: none;
    box-shadow: 0 5px 18px rgba(0, 0, 0, 0.6);
}

/* ── PRESS animation: actuator pushes down ───────────────────────── */
#intro-nozzle.is-pressed .nz-btn {
    transform: translateY(5px);
}

/* ── Skip button ─────────────────────────────────────────────────── */
#intro-skip {
    position: absolute;
    bottom: clamp(20px, 3.5vw, 34px);
    right:  clamp(20px, 3.5vw, 34px);
    z-index: 10;
    background: transparent;
    border: none;
    outline: none;
    cursor: pointer !important;
    font-family: 'Montserrat', sans-serif;
    font-size: clamp(7px, 0.95vw, 9px);
    font-weight: 300;
    letter-spacing: 0.34em;
    color: rgba(197, 165, 120, 0.36);
    text-transform: uppercase;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 5px;
    line-height: 1;
    transition: color 0.35s ease;
    opacity: 0;
    animation: skipReveal 0.5s 1.1s ease forwards;
}

#intro-skip:hover {
    color: rgba(197, 165, 120, 0.82);
}

#intro-skip::after {
    content: '›';
    font-size: 1.35em;
    line-height: 1;
    transition: transform 0.3s ease;
}

#intro-skip:hover::after {
    transform: translateX(3px);
}

@keyframes skipReveal {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ── Mobile responsive ───────────────────────────────────────────── */
@media (max-width: 600px) {
    #intro-nozzle {
        top: 48%;
    }

    .nz-btn    { width: 42px; height: 20px; }
    .nz-barrel { width: 13px; height: 11px; }
    .nz-head   { width: 56px; height: 36px; }
    .nz-collar { width: 62px; height: 6px; }
    .nz-hole   { width: 11px; height: 11px; }
}

@media (max-width: 380px) {
    #intro-nozzle {
        transform: translate(-50%, -50%) scale(0.82);
    }
    #intro-nozzle.nozzle-in {
        transform: translate(-50%, -50%) scale(0.82);
    }
}