/* =====================================================
   TORCH EFFECT — torch-effect.css
   ===================================================== */

/* ---------- overlay ---------- */
.torch-overlay {
    display:         none;          /* hidden until torch mode is ON */
    position:        fixed;
    inset:           0;
    width:           100%;
    height:          100%;
    pointer-events:  none;
    z-index:         99998;

    background: radial-gradient(
        circle at var(--tx, 50%) var(--ty, 50%),
        rgba(255, 200, 100, 0.08)  0px,
        transparent                120px,
        rgba(0, 0, 0, 0.55)        380px,
        rgba(0, 0, 0, 0.97)        560px
    );

    opacity:    var(--torch-flicker, 1);
    transition: opacity 0.05s linear;
}

/* visible when torch mode is active */
body.torch-mode-active .torch-overlay {
    display: block;
}

/* ---------- torch SVG cursor ---------- */
.torch-svg {
    display:         none;
    position:        fixed;
    width:           70px;
    height:          140px;
    pointer-events:  none;
    z-index:         99999;
    transform:       translate(-50%, -82%);
    filter:          drop-shadow(0 0 22px rgba(255, 150, 50, 0.95));
    transition:      opacity 0.3s ease;
}

body.torch-mode-active .torch-svg {
    display: block;
}

/* hide default cursor only on desktop when torch is active */
@media (hover: hover) and (pointer: fine) {
    body.torch-mode-active {
        cursor: none;
    }
}

/* ---------- toggle button (bottom-left, fixed) ---------- */
.torch-toggle-btn {
    position:      fixed;
    bottom:        24px;
    left:          24px;
    z-index:       100000;

    width:         54px;
    height:        54px;
    border-radius: 50%;
    border:        none;
    cursor:        pointer !important;  /* always clickable */

    font-size:     24px;
    line-height:   1;
    display:       flex;
    align-items:   center;
    justify-content: center;

    background:    linear-gradient(135deg, #ff9a56 0%, #ff6b35 100%);
    color:         #fff;
    box-shadow:    0 4px 16px rgba(255, 107, 53, 0.45);

    transition:    transform 0.2s ease, box-shadow 0.2s ease, background 0.3s ease;
}

.torch-toggle-btn:hover {
    transform:  translateY(-3px) scale(1.08);
    box-shadow: 0 8px 24px rgba(255, 107, 53, 0.6);
}

.torch-toggle-btn:active {
    transform:  scale(0.95);
}

/* button appearance when torch is active */
body.torch-mode-active .torch-toggle-btn {
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    box-shadow: 0 4px 16px rgba(118, 75, 162, 0.5);
}

/* ---------- tooltip label on hover (desktop) ---------- */
.torch-toggle-btn::after {
    content:         attr(data-label);
    position:        absolute;
    left:            calc(100% + 10px);
    bottom:          50%;
    transform:       translateY(50%);
    white-space:     nowrap;
    background:      rgba(0,0,0,0.75);
    color:           #fff;
    font-size:       13px;
    font-family:     sans-serif;
    padding:         5px 10px;
    border-radius:   6px;
    opacity:         0;
    pointer-events:  none;
    transition:      opacity 0.2s ease;
}

.torch-toggle-btn:hover::after {
    opacity: 1;
}

/* ---------- mobile tweaks ---------- */
@media (max-width: 768px) {
    .torch-svg {
        width:  90px;
        height: 160px;
    }

    .torch-overlay {
        background: radial-gradient(
            circle at var(--tx, 50%) var(--ty, 50%),
            rgba(255, 200, 100, 0.08)  0px,
            transparent                90px,
            rgba(0, 0, 0, 0.55)        260px,
            rgba(0, 0, 0, 0.97)        420px
        );
    }

    .torch-toggle-btn {
        bottom: 20px;
        left:   20px;
        width:  50px;
        height: 50px;
        font-size: 22px;
    }
}