/* ============================================================
   ADRO — Brand stack CSS Oficial
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400&display=swap');

/* ----------------------------------------------------------------
   STACK DA MARCA
   - A altura é controlada por --adro-h
   ---------------------------------------------------------------- */
.adro-brand {
    --adro-h:           64px;                   /* Altura padrão para visualização */
    --adro-accent:      #F97316;                /* Laranja ADRO */
    --adro-text:        #0F172A;                /* Cor principal da logo (Escuro) */
    --adro-slogan-color: rgba(15, 23, 42, 0.7); /* Cor do slogan (Escuro) */

    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: calc(var(--adro-h) * 0.09);
    line-height: 1;
    color: var(--adro-text);
}

/* Variante fundo escuro (Basta adicionar a classe .is-dark ao container .adro-brand) */
.adro-brand.is-dark {
    --adro-text: #FFFFFF;
    --adro-slogan-color: rgba(255, 255, 255, 0.62);
}

/* Tamanhos predefinidos (basta adicionar estas classes ao container) */
.adro-brand--sm { --adro-h: 32px; }
.adro-brand--md { --adro-h: 48px; }
.adro-brand--lg { --adro-h: 72px; }
.adro-brand--xl { --adro-h: 120px; }

/* ----------------------------------------------------------------
   LOGO (SVG)
   ---------------------------------------------------------------- */
.adro-logo {
    display: block;
    height: var(--adro-h);
    width: auto;
    user-select: none;
    fill: currentColor; 
    /* Necessário para a perspetiva 3D da animação */
    perspective: 1000px;
}

.adro-logo-accent {
    fill: var(--adro-accent);
}

/* ----------------------------------------------------------------
   ANIMAÇÃO DO "O" Laranja
   - Adicione a classe 'adro-anim-spin' ao container para ativar
   ---------------------------------------------------------------- */
.adro-o-wrapper {
    transform-origin: 980px 150px;
    transform-style: preserve-3d;
    will-change: transform;
}

.adro-anim-spin .adro-o-wrapper {
    /* Velocidade definida aqui em '6s' */
    animation: coin-spin 6s cubic-bezier(0.2, 0.8, 0.2, 1) forwards;
}

@keyframes coin-spin {
    0% { transform: rotateY(0deg); }
    100% { transform: rotateY(720deg); }
}

/* ----------------------------------------------------------------
   SLOGAN
   ---------------------------------------------------------------- */
.adro-slogan {
    font-family: 'Inter', system-ui, sans-serif;
    font-weight: 300;
    font-size: calc(var(--adro-h) * 0.25);
    letter-spacing: 0.25em; 
    text-transform: uppercase;
    color: var(--adro-slogan-color);
    margin: 0;
    text-indent: 0.25em; 
    white-space: nowrap;
}

.adro-slogan span {
    color: var(--adro-accent);
    font-weight: 400;
    margin-left: 0.05em;
}