@charset "UTF-8";

/* =====================================================
   IMAGE GUIDE
===================================================== */

.image-guide{
    margin:40px 0;
    padding:24px;
    background:var(--color-surface);
    border:1px solid var(--color-border);
    border-radius:var(--radius-xl);
    box-shadow:var(--shadow-sm);
}

.image-guide-header{
    margin-bottom:20px;
}

.image-guide-kicker{
    display:block;
    margin-bottom:7px;
    color:var(--color-primary);
    font-size:.78rem;
    font-weight:800;
    line-height:1.2;
    letter-spacing:.08em;
    text-transform:uppercase;
}

.image-guide-header h3{
    margin:0 0 8px;
    color:var(--color-dark);
    font-size:1.35rem;
    line-height:1.25;
    letter-spacing:-.02em;
}

.image-guide-header p{
    max-width:72ch;
    margin:0;
    color:var(--color-text);
    line-height:1.65;
}

/* =====================================================
   FRAME
===================================================== */

.image-guide-frame{
    position:relative;
    overflow:hidden;
    border:1px solid var(--color-border);
    border-radius:18px;
    background:#fff;
}

.image-guide-frame img{
    display:block;
    width:100%;
}



/* =====================================================
   HIGHLIGHT
===================================================== */

.highlight-area{
    position:absolute;
    z-index:2;
    pointer-events:none;

    border:4px solid var(--color-primary);
    border-radius:10px;

    background:rgba(13,91,255,.06);

    box-shadow:
        0 0 0 1px rgba(255,255,255,.28) inset,
        0 0 26px rgba(13,91,255,.30);

    opacity:1;

    transition:
        top .38s cubic-bezier(.22,1,.36,1),
        left .38s cubic-bezier(.22,1,.36,1),
        width .38s cubic-bezier(.22,1,.36,1),
        height .38s cubic-bezier(.22,1,.36,1),
        opacity .20s ease;

    will-change:
        top,
        left,
        width,
        height,
        opacity;
}

.highlights-area svg {
    display: block;
    width: 100%;
    height: 100%;
    opacity: .72;
}

.highlight-area {
    opacity: 1;
    transition:
        top .38s cubic-bezier(.22, 1, .36, 1),
        left .38s cubic-bezier(.22, 1, .36, 1),
        width .38s cubic-bezier(.22, 1, .36, 1),
        height .38s cubic-bezier(.22, 1, .36, 1),
        opacity .2s ease;
    will-change:
        top,
        left,
        width,
        height,
        opacity;
}

.highlight-area.is-entering,
.highlight-area.is-leaving {
    opacity: 0;
}

.highlights-area {
    transition: opacity .16s ease;
}

.highlights-area.is-updating {
    opacity: .72;
}
.highlight-area.is-entering,
.highlight-area.is-leaving {
    opacity: 0;
}

/* =====================================================
   HOTSPOTS
===================================================== */

.hotspot{

    position:absolute;

    z-index:3;

    width:30px;
    height:30px;

    display:flex;
    align-items:center;
    justify-content:center;

    border:3px solid #fff;
    border-radius:50%;

    background:var(--color-primary);
    color:#fff;

    font-size:.82rem;
    font-weight:700;

    cursor:pointer;

    box-shadow:var(--shadow-md);

    transition:
        transform .25s ease,
        background-color .25s ease,
        box-shadow .25s ease;

}

.hotspot:hover{

    transform:scale(1.08);

}

.hotspot.active{

    transform:scale(1.18);

    box-shadow:
        0 0 0 6px rgba(15,126,234,.18),
        var(--shadow-md);

}


/* =====================================================
   LEGENDA
===================================================== */



.legend-item{

    padding:10px 16px;

    border:1px solid var(--color-border);

    border-radius:999px;

    background:#fff;

    color:var(--color-text);

    font-weight:600;

    cursor:pointer;

    transition:.25s;

}

.legend-item:hover{

    border-color:var(--color-primary);

    color:var(--color-primary);

}

.legend-item.active{

    background:var(--color-primary);

    border-color:var(--color-primary);

    color:#fff;

}

/* =====================================================
   INFO
===================================================== */

.hotspot-info{

    margin-top:18px;

    padding:22px;

    background:#fff;

    border-left:5px solid var(--color-primary);

    border-radius:14px;

    box-shadow:var(--shadow-sm);

    transition:
        opacity .25s ease,
        transform .25s ease;

}

.hotspot-info small{

    display:block;

    margin-bottom:8px;

    color:var(--color-primary);

    font-size:.78rem;

    font-weight:700;

    text-transform:uppercase;

    letter-spacing:.05em;

}

.hotspot-info h4{

    margin-bottom:10px;

}

.hotspot-info p{

    line-height:1.7;

    color:var(--color-text);

}

.hotspot-info.fade{

    opacity:0;

    transform:translateY(8px);

}

/* =====================================================
   NAVEGAÇÃO
===================================================== */

.guide-navigation{

    display:flex;

    justify-content:space-between;

    align-items:center;

    margin-top:24px;

}

.guide-button{

    padding:10px 18px;

    border:none;

    border-radius:10px;

    background:var(--color-primary);

    color:#fff;

    font-weight:600;

    cursor:pointer;

    transition:.2s;

}

.guide-button:hover{

    background:var(--color-primary-dark);

}

.guide-button:disabled{

    opacity:.4;

    cursor:default;

}

.guide-counter{

    color:var(--color-muted);

    font-weight:600;

}

/* =====================================================
   ANIMAÇÕES
===================================================== */

@keyframes hotspotPulse{

    0%{
        transform:scale(1);
    }

    50%{
        transform:scale(1.15);
    }

    100%{
        transform:scale(1);
    }

}

.hotspot.active{

    animation:hotspotPulse .6s ease;

}