/* =========================================================
MUSICALWORLD — ONBOARDING

Arquivo:
css/components/onboarding.css

Responsabilidade:

* Estilizar os balões de orientação do onboarding.
* Criar a camada escura de destaque.
* Destacar o elemento indicado pelo onboarding.
* Manter o balão acima da camada de destaque.
* Posicionar visualmente a seta do balão.
* Adaptar a interface para dispositivos móveis.
* Controlar estados de abertura, fechamento e animação.

Observação:
Este arquivo é compartilhado pelas etapas de onboarding
do MusicalWorld.
========================================================= */

/* =========================================================
CAMADA DE DESTAQUE
========================================================= */

.musicalworld-onboarding-backdrop {


position: fixed;

inset: 0;

z-index: 9998;

background:
    rgba(
        12,
        18,
        30,
        0.58
    );

opacity: 0;

visibility: hidden;

transition:
    opacity 180ms ease,
    visibility 180ms ease;

pointer-events: none;


}

/* =========================================================
CAMADA DE DESTAQUE — VISÍVEL
========================================================= */

.musicalworld-onboarding-backdrop.is-visible {


opacity: 1;

visibility: visible;


}

/* =========================================================
BALÃO DE ORIENTAÇÃO
========================================================= */

.musicalworld-onboarding-tooltip {


position: fixed;

z-index: 10002;

width:
    min(
        calc(100vw - 32px),
        320px
    );

padding:
    18px
    18px
    16px;

background: #ffffff;

border:
    1px solid
    rgba(
        109,
        74,
        255,
        0.16
    );

border-radius: 16px;

box-shadow:
    0 20px 50px
    rgba(
        0,
        0,
        0,
        0.24
    ),
    0 8px 20px
    rgba(
        23,
        32,
        51,
        0.16
    );

color: #172033;

font-family:
    Manrope,
    sans-serif;

opacity: 0;

visibility: hidden;

transform:
    translateY(8px);

transition:
    opacity 180ms ease,
    transform 180ms ease,
    visibility 180ms ease;

pointer-events: auto;

--onboarding-arrow-left: 50%;


}

/* =========================================================
BALÃO — VISÍVEL
========================================================= */

.musicalworld-onboarding-tooltip.is-visible {


opacity: 1;

visibility: visible;

transform:
    translateY(0);


}

/* =========================================================
CONTEÚDO INTERNO
========================================================= */

.musicalworld-onboarding-content {


display: flex;

flex-direction: column;

gap: 6px;

padding-right: 24px;


}

/* =========================================================
TÍTULO
========================================================= */

.musicalworld-onboarding-title {


display: block;

margin: 0;

color: #172033;

font-size: 15px;

font-weight: 800;

line-height: 1.35;

letter-spacing:
    -0.01em;


}

/* =========================================================
TEXTO
========================================================= */

.musicalworld-onboarding-text {


display: block;

margin: 0;

color: #5f6b7a;

font-size: 13px;

font-weight: 500;

line-height: 1.55;

letter-spacing:
    -0.005em;


}

/* =========================================================
SETA DO BALÃO
========================================================= */

.musicalworld-onboarding-tooltip::after {


content: "";

position: absolute;

left:
    var(--onboarding-arrow-left);

bottom: -8px;

width: 15px;

height: 15px;

background: #ffffff;

border-right:
    1px solid
    rgba(
        109,
        74,
        255,
        0.16
    );

border-bottom:
    1px solid
    rgba(
        109,
        74,
        255,
        0.16
    );

transform:
    translateX(-50%)
    rotate(45deg);

pointer-events: none;


}

/* =========================================================
SETA — BALÃO ABAIXO DO ELEMENTO
========================================================= */

.musicalworld-onboarding-tooltip.tooltip-abaixo::after {


top: -8px;

bottom: auto;

border-right:
    1px solid
    rgba(
        109,
        74,
        255,
        0.16
    );

border-bottom: 0;

border-top:
    1px solid
    rgba(
        109,
        74,
        255,
        0.16
    );

transform:
    translateX(-50%)
    rotate(45deg);


}

/* =========================================================
DESTAQUE DO ELEMENTO INDICADO

O elemento indicado fica acima do backdrop,
mas abaixo do balão de orientação.
========================================================= */

.musicalworld-onboarding-target {


position: relative;

z-index: 10001 !important;

border-radius: 14px;

background-color: inherit;

box-shadow:
    0 0 0 4px
    rgba(
        255,
        255,
        255,
        0.95
    ),
    0 0 0 7px
    rgba(
        109,
        74,
        255,
        0.95
    ),
    0 0 0 12px
    rgba(
        255,
        255,
        255,
        0.18
    ),
    0 0 24px
    rgba(
        109,
        74,
        255,
        0.70
    );

animation:
    musicalworldOnboardingPulse
    1.8s
    ease-in-out
    infinite;


}

/* =========================================================
ANIMAÇÃO DO DESTAQUE
========================================================= */

@keyframes musicalworldOnboardingPulse {


0%,
100% {

    box-shadow:
        0 0 0 4px
        rgba(
            255,
            255,
            255,
            0.95
        ),
        0 0 0 7px
        rgba(
            109,
            74,
            255,
            0.95
        ),
        0 0 0 12px
        rgba(
            255,
            255,
            255,
            0.18
        ),
        0 0 24px
        rgba(
            109,
            74,
            255,
            0.70
        );
}

50% {

    box-shadow:
        0 0 0 5px
        rgba(
            255,
            255,
            255,
            1
        ),
        0 0 0 9px
        rgba(
            109,
            74,
            255,
            1
        ),
        0 0 0 14px
        rgba(
            255,
            255,
            255,
            0.22
        ),
        0 0 32px
        rgba(
            109,
            74,
            255,
            0.85
        );
}


}

/* =========================================================
BOTÃO FECHAR
========================================================= */

.musicalworld-onboarding-close {


position: absolute;

top: 10px;

right: 10px;

width: 28px;

height: 28px;

display: flex;

align-items: center;

justify-content: center;

padding: 0;

border: 0;

border-radius: 50%;

background: transparent;

color: #8993a2;

cursor: pointer;

transition:
    background 150ms ease,
    color 150ms ease;


}

/* =========================================================
BOTÃO FECHAR — HOVER
========================================================= */

.musicalworld-onboarding-close:hover {


background: #f3f4f7;

color: #172033;


}

/* =========================================================
ÍCONE DO BOTÃO FECHAR
========================================================= */

.musicalworld-onboarding-close svg {


width: 15px;

height: 15px;


}

/* =========================================================
MOBILE
========================================================= */

@media (max-width: 600px) {


.musicalworld-onboarding-tooltip {

    width:
        min(
            calc(100vw - 24px),
            310px
        );

    padding: 16px;

    border-radius: 15px;
}


.musicalworld-onboarding-content {

    gap: 5px;

    padding-right: 23px;
}


.musicalworld-onboarding-title {

    font-size: 14px;

    line-height: 1.4;
}


.musicalworld-onboarding-text {

    font-size: 12.5px;

    line-height: 1.55;
}


.musicalworld-onboarding-close {

    top: 9px;

    right: 9px;

    width: 27px;

    height: 27px;
}


}

/* =========================================================
TELAS MUITO PEQUENAS
========================================================= */

@media (max-width: 380px) {


.musicalworld-onboarding-tooltip {

    width:
        min(
            calc(100vw - 20px),
            300px
        );

    padding: 15px;
}


.musicalworld-onboarding-content {

    gap: 5px;

    padding-right: 22px;
}


.musicalworld-onboarding-title {

    font-size: 13.5px;

    line-height: 1.4;
}


.musicalworld-onboarding-text {

    font-size: 12px;

    line-height: 1.5;
}


}

/* =========================================================
REDUÇÃO DE MOVIMENTO
========================================================= */

@media (prefers-reduced-motion: reduce) {


.musicalworld-onboarding-backdrop,
.musicalworld-onboarding-tooltip {

    transition: none;
}


.musicalworld-onboarding-target {

    animation: none;
}


}