/* ================================================================
   PEDRO LIMA — ANIMATIONS SYSTEM  v4
   ================================================================ */


/* ----------------------------------------------------------------
   PAGE ENTRY — fade-in fluido (sem loader)
   O JS seta opacity:0 no documentElement imediatamente e anima
   para 1 assim que o DOM estiver pronto. O CSS abaixo garante
   que a transição seja suave mesmo que o JS rode tarde.
   ---------------------------------------------------------------- */




/* ----------------------------------------------------------------
   CURSOR PERSONALIZADO (estilo Cuberto)

   REGRA CRÍTICA: nunca altere opacity no .lima-cursor (container).
   opacity < 1 no container cria um "isolated compositing group",
   o que quebra o mix-blend-mode: exclusion no filho.
   Toda visibilidade é controlada APENAS em .lima-cursor__circle.

   ADAPTAÇÃO CLARO/ESCURO:
   mix-blend-mode: exclusion com background:#fff →
     • Sobre fundo escuro  → cursor aparece BRANCO  ✓
     • Sobre fundo claro   → cursor aparece ESCURO  ✓

   Estado -explore (sobre cards e imagens de projeto):
     mix-blend-mode: normal + background:#060312 → cursor ESCURO
     (fundo da página é claro nessas seções)

   Estado -explore-white (sobre imagens lightboxáveis em páginas de projeto):
     mix-blend-mode: normal + background:#ffffff → cursor BRANCO
     (garante visibilidade sobre qualquer conteúdo de imagem)
   ---------------------------------------------------------------- */

.lima-cursor {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 9999;
    pointer-events: none;
    /* sem opacity, sem will-change — ambos quebrariam o mix-blend-mode */
}

.lima-cursor__circle {
    position: absolute;
    width: 88px;
    height: 88px;
    top: -44px;
    left: -44px;
    border-radius: 50%;
    /* Escuro por padrão (para fundos claros como a seção de projetos) */
    background: #060312;
    mix-blend-mode: normal;
    opacity: 0;
    transform: scale(0);
    transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.5s ease,
        background 0.25s ease;
}

/* Mouse na página — estado base: ponto escuro pequeno (fundo claro) */
.lima-cursor.-active .lima-cursor__circle {
    opacity: 1;
    transform: scale(0.1);
}

/* Em fundos escuros (hero, header, footer): ponto BRANCO */
.lima-cursor.-active.-on-dark-bg .lima-cursor__circle {
    background: #ffffff;
}

/* Em cima de links / botões */
.lima-cursor.-active.-pointer .lima-cursor__circle {
    transform: scale(0.26);
}

/* Mouse saiu da janela — fade + scale rápidos */
.lima-cursor.-leaving .lima-cursor__circle {
    opacity: 0;
    transform: scale(0);
    transition-duration: 0.12s;
    transition-timing-function: ease-in;
}

/* Estado EXPLORAR / EXPANDIR → círculo BRANCO 88px, blend desligado */
.lima-cursor.-explore .lima-cursor__circle {
    opacity: 1 !important;
    transform: scale(1) !important;
    background: #ffffff !important;
    mix-blend-mode: normal !important;
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        opacity 0.3s ease;
}



/* Texto dentro do cursor */
.lima-cursor__label {
    position: absolute;
    width: 88px;
    height: 88px;
    top: -44px;
    left: -44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.15em;
    text-transform: uppercase;
    font-family: "CircularStd", sans-serif;
    opacity: 0;
    transform: scale(0.3) rotate(12deg);
    transition: opacity 0.35s ease, transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    user-select: none;
    pointer-events: none;
    /* Texto escuro sobre círculo branco */
    color: #060312;
}

.lima-cursor.-explore .lima-cursor__label {
    opacity: 1;
    transform: scale(1) rotate(0deg);
}

/* Em telas touch: esconde o cursor extra */
@media (pointer: coarse) {
    .lima-cursor {
        display: none !important;
    }
}


/* ----------------------------------------------------------------
   BOTÃO — FILL DE BAIXO PARA CIMA (estilo Cuberto)
   ---------------------------------------------------------------- */

.elementor-button {
    position: relative !important;
    overflow: hidden !important;
    isolation: isolate;
}

/* Conteúdo acima do fill */
.elementor-button .elementor-button-content-wrapper {
    position: relative;
    z-index: 2;
}

/* O "fill" que sobe de baixo */
.elementor-button::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(75deg, #CFFA53 0%, #5BDF7B 100%);
    transform: translateY(102%);
    transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
    border-radius: inherit;
}

.elementor-button:hover::after {
    transform: translateY(0);
}

/* Cancela o background-image instantâneo do Elementor */
.elementor-button:hover,
.elementor-button:focus {
    background-image: none !important;
}


/* ----------------------------------------------------------------
   PROJETOS — REMOVER SCALE-UP DO ELEMENTOR, ADICIONAR SCALE-DOWN
   ---------------------------------------------------------------- */

/* Zera a variável que o Elementor usa para escalar no hover */
.elementor-element-de4db98:hover,
.elementor-element-0527fd5:hover,
.elementor-element-8cb6563:hover,
.elementor-element-69bea9d:hover,
.elementor-element-fc0f3d6:hover,
.elementor-element-4eaf10e:hover {
    --e-transform-scale: 1 !important;
    --e-transform-translateX: 0px !important;
    --e-transform-translateY: 0px !important;
}

/* O card (link) em si não escala */
.lima-project-card {
    display: block;
    overflow: hidden;
    border-radius: inherit;
}

/* Wrapper das duas imagens do slideshow */
.lima-slide-wrap {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: inherit;
    line-height: 0;
    box-shadow: none !important;
    filter: none !important;
    /* Escala do wrapper no hover — afeta ambas as camadas A e B */
    transform: scale(1);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    /* Fix para clipping de border-radius com transforms */
    isolation: isolate;
}

/* Scale-down suave ao passar o mouse sobre o card da home (suavizado de 0.96 para 0.98) */
.lima-project-card:hover .lima-slide-wrap {
    transform: scale(0.98);
}


/* Imagem base (layer A) — define a altura do wrap, sempre cobre */
.lima-slide-a {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
    border-radius: inherit;
    transition: opacity 0.4s ease !important;
    animation: none !important;
}

/* Camadas do slideshow (layer B) — absoluta, ocupa TODO o espaco do wrap.
   Usamos duas camadas (b1 e b2) para crossfade fluido (double buffering). */
.lima-slide-b {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    max-width: none !important;
    opacity: 0;
    z-index: 2;
    border-radius: inherit;
    pointer-events: none;
    /* Transição de opacidade 0 ao sair (instante) para evitar ghosting.
       O transform mantém a suavidade se houver sobreposição. */
    transition: opacity 0s !important, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Quando ativa, ganha opacidade suave e sobe no z-index para sobrepor a anterior */
.lima-slide-b.lima-active {
    opacity: 1 !important;
    z-index: 3;
    transition: opacity 0.6s ease !important, transform 0.8s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

.lima-slide-b.lima-playing {
    /* animação de zoom-out cinético: 0.8s para um efeito luxuoso e perceptível */
    animation: lima-zoom-out 0.8s cubic-bezier(0.16, 1, 0.3, 1) both;
}

/* Keyframe: fade-in já acontece via transition, aqui focamos no zoom-out cinético */
@keyframes lima-zoom-out {
    from {
        transform: scale(1.12);
    }
    to {
        transform: scale(1);
    }
}

/* ----------------------------------------------------------------
   IMAGENS DE PROJETO (páginas de projeto) — scale-down no hover
   Aplicado às imagens dentro do lightbox trigger, via wrapper
   ---------------------------------------------------------------- */

/* Wrapper de contenção para animar sem overflow — border-radius igual ao dos cards da home */
.lima-img-hover-wrap {
    display: block;
    overflow: hidden;
    border-radius: 24px !important;
    line-height: 0;
    /* Fix para clipping de border-radius com transforms e hardware acceleration */
    isolation: isolate;
    transform: translateZ(0);
    will-change: transform;
}

.lima-img-hover-wrap img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 24px !important;
    transform: scale(1);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
    /* Garante que o rounded corner seja renderizado corretamente no transform */
    -webkit-mask-image: -webkit-radial-gradient(white, black);
}

.lima-img-hover-wrap:hover img {
    transform: scale(0.98);
}

@media (max-width: 768px) {
    .lima-img-hover-wrap,
    .lima-img-hover-wrap img {
        border-radius: 15px !important;
    }
}

/* Animação de entrada: fade-in + leve zoom-out (efeito vídeo) */
@keyframes lima-img-enter {
    from {
        opacity: 0;
        transform: scale(1.06);
    }

    to {
        opacity: 1;
        transform: scale(1);
    }
}


/* ----------------------------------------------------------------
   ANIMAÇÕES DE SCROLL — FADE + SLIDE UP
   ---------------------------------------------------------------- */

[data-lima-anim] {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity 0.9s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.9s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: opacity, transform;
}

[data-lima-anim].is-visible {
    opacity: 1;
    transform: translateY(0);
}

[data-lima-anim][data-lima-delay="1"] {
    transition-delay: 0.08s;
}

[data-lima-anim][data-lima-delay="2"] {
    transition-delay: 0.16s;
}

[data-lima-anim][data-lima-delay="3"] {
    transition-delay: 0.24s;
}

[data-lima-anim][data-lima-delay="4"] {
    transition-delay: 0.32s;
}

[data-lima-anim][data-lima-delay="5"] {
    transition-delay: 0.40s;
}


/* ----------------------------------------------------------------
   HEADING ANIMATION — palavra por palavra (slide up)
   Os delays são aplicados inline pelo JS — sem nth-child aqui.
   ---------------------------------------------------------------- */

/* Word wrap: padding para evitar corte de glifos altos (ex: G, h, d) e baixos (ex: g, y) */
.lima-word-wrap {
    display: inline-block;
    overflow: hidden;
    vertical-align: bottom;
    line-height: inherit;
    padding-top: 0.15em;
    padding-bottom: 0.15em;
    margin-top: -0.15em;
    margin-bottom: -0.15em;
}

.lima-word {
    display: inline-block;
    transform: translateY(112%);
    transition: transform 0.85s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform;
}

.lima-heading-anim.is-visible .lima-word {
    transform: translateY(0);
}


/* ----------------------------------------------------------------
   LINKS DE NAVEGAÇÃO — underline slide
   ---------------------------------------------------------------- */

.elementor-widget-text-editor a {
    position: relative;
}

.elementor-widget-text-editor a::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: -2px;
    width: 0;
    height: 1px;
    background: currentColor;
    transition: width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.elementor-widget-text-editor a:hover::after {
    width: 100%;
}


/* ----------------------------------------------------------------
   LIGHTBOX
   ---------------------------------------------------------------- */

#lima-lightbox {
    position: fixed;
    inset: 0;
    z-index: 99998;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

#lima-lightbox.-open {
    opacity: 1;
    pointer-events: all;
}

.lima-lightbox__bg {
    position: absolute;
    inset: 0;
    background: rgba(6, 3, 18, 0.92);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
}

.lima-lightbox__img {
    position: relative;
    z-index: 1;
    max-width: 90vw;
    max-height: 88vh;
    object-fit: contain;
    border-radius: 6px;
    transform: scale(0.94);
    transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 32px 80px rgba(0, 0, 0, 0.6);
}

#lima-lightbox.-open .lima-lightbox__img {
    transform: scale(1);
}

.lima-lightbox__close {
    position: absolute;
    top: 24px;
    right: 24px;
    z-index: 2;
    width: 44px;
    height: 44px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    color: #ffffff;
    font-size: 16px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s ease;
    line-height: 1;
    font-family: sans-serif;
}

.lima-lightbox__close:hover {
    background: rgba(255, 255, 255, 0.22);
}