.blob-purple {
    width: 800px;
    height: 800px;
    background: #7c3aed;
    top: -20%;
    left: -10%;
}

.blob-cyan {
    width: 600px;
    height: 600px;
    background: #06b6d4;
    bottom: -20%;
    right: -10%;
    animation-duration: 12s;
}

.blob-pink {
    width: 500px;
    height: 500px;
    background: #d946ef;
    top: 30%;
    left: 40%;
    animation-duration: 8s;
}

@keyframes float {
    0%,100% {
        transform: translate(0) scale(1);
    }

    50% {
        transform: translate(40px, -40px) scale(1.2);
    }
}

/* Particles */
.particles {
    position: absolute;
    inset: 0;
    z-index: 4; /* acima do mosaico */
    pointer-events: none;
}

    .particles span {
        position: absolute;
        width: 6px;
        height: 6px;
        border-radius: 50%;
        background: radial-gradient(circle, #22d3ee, #a855f7 70%);
        box-shadow: 0 0 12px rgba(168, 85, 247, 0.9);
        opacity: 0;
        animation: particleFloat 6s infinite ease-in-out;
    }

@keyframes particleFloat {
    0% {
        transform: translateY(0) scale(0.2);
        opacity: 0;
    }

    50% {
        opacity: 1;
    }

    100% {
        transform: translateY(-80px) scale(1);
        opacity: 0;
    }
}

@keyframes particle {
    0% {
        transform: translateY(0) scale(0);
        opacity: 0;
    }

    20% {
        opacity: 1;
    }

    100% {
        transform: translateY(-120px) scale(1.2);
        opacity: 0;
    }
}



/* === MOSAIC (substituir a seção antiga do mosaic) === */
:root {
    --m-cols: 10;
    --m-rows: 7;
    --tile-anim-duration: 1200ms; /* duração da animação de cada tile */
}

/* O container já existia em seu CSS; apenas garanto grid dinâmico */
#mosaic {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(var(--m-cols), 1fr);
    grid-template-rows: repeat(var(--m-rows), 1fr);
    perspective: 1500px;
    z-index: 2;
}

/* Cada tile: mostra apenas um pedaço da imagem (BACKGROUND recortado) */
.tile {
    position: relative;
    width: 100%;
    height: 100%;
    /* IMPORTANT: cada tile usa a mesma imagem, MAS com background-size do total do mosaico */
    background-image: url("../assets/img/txn-background-boas-vindas-futuro.PNG");
    background-size: calc(var(--m-cols) * 100%) calc(var(--m-rows) * 100%);
    background-repeat: no-repeat;
    background-position: 0% 0%;
    /* visual (mantive borda holográfica suave) */
    border: 0.6px solid rgba(139,92,246,0.18);
    box-shadow: inset 0 2px 10px rgba(0,0,0,0.25);
    /* inicio "lá atrás", virado e pequeno */
    transform-style: preserve-3d;
    backface-visibility: hidden;
    transform: rotateX(180deg) rotateY(180deg) translateZ(220px) scale(0.06);
    opacity: 0;
    filter: blur(8px) saturate(0.8);
    will-change: transform, opacity, filter;
    border-radius: 2px;
}

/* Animação de entrada — girando no próprio eixo vindo de Z */
@keyframes tileEnter {
    0% {
        transform: rotateX(180deg) rotateY(180deg) translateZ(220px) scale(0.06);
        opacity: 0;
        filter: blur(10px) saturate(0.6);
    }

    45% {
        opacity: 1;
        filter: blur(3px) saturate(0.95);
    }

    75% {
        transform: rotateX(-22deg) rotateY(18deg) translateZ(-28px) scale(1.06);
        filter: blur(0.6px) saturate(1.05);
    }

    100% {
        transform: rotateX(0deg) rotateY(0deg) translateZ(0) scale(1);
        opacity: 1;
        filter: blur(0) saturate(1);
    }
}

/* quando JS aplica a classe .enter, executa a animação com delay individual */
.tile.enter {
    animation-name: tileEnter;
    animation-duration: var(--tile-anim-duration);
    animation-fill-mode: forwards;
    animation-timing-function: cubic-bezier(.16,.85,.3,1);
}

    /* pequeno detalhe visual quando encaixa: brilho passageiro */
    .tile.enter::after {
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(90deg, rgba(255,255,255,0.03), rgba(255,255,255,0.12), rgba(255,255,255,0.03));
        opacity: 0;
        transform: translateX(-100%);
        transition: opacity 280ms ease, transform 700ms ease;
    }

    .tile.enter.tile-lit::after {
        opacity: 1;
        transform: translateX(20%);
    }

/* final: se quiser desmontar, adiciona .leave (não implementado aqui por padrão) */
.tile.leave {
    animation: tileLeave 700ms forwards ease;
}

@keyframes tileLeave {
    to {
        transform: rotateX(160deg) rotateY(140deg) translateZ(220px) scale(0.04);
        opacity: 0;
        filter: blur(8px);
    }
}

/* Hologram border */
.hologram-border {
    position: absolute;
    inset: 0;
    border-radius: 20px;
    background: linear-gradient( 90deg, transparent, rgba(139,92,246,0.6), rgba(6,182,212,0.6), transparent );
    background-size: 200% 100%;
    animation: shimmer 3s linear infinite;
    pointer-events: none;
    z-index: 5;
}

@keyframes shimmer {
    0% {
        background-position: -200% 0;
    }

    100% {
        background-position: 200% 0;
    }
}

/* Corners */
.corner {
    position: absolute;
    width: 30px;
    height: 30px;
    z-index: 10;
    opacity: 0;
    animation: cornerIn .6s forwards;
}

.tl {
    top: -5px;
    left: -5px;
    border-left: 2px solid cyan;
    border-top: 2px solid cyan;
}

.tr {
    top: -5px;
    right: -5px;
    border-right: 2px solid #a855f7;
    border-top: 2px solid #a855f7;
}

.bl {
    bottom: -5px;
    left: -5px;
    border-left: 2px solid #a855f7;
    border-bottom: 2px solid #a855f7;
}

.br {
    bottom: -5px;
    right: -5px;
    border-right: 2px solid cyan;
    border-bottom: 2px solid cyan;
}

@keyframes cornerIn {
    to {
        opacity: 1;
    }
}

.logo-wrap {
    position: relative;
    margin-bottom: 20px;
}

.txn-logo {
    height: 80px;
}

.glow {
    position: absolute;
    filter: blur(40px);
    opacity: 0.6;
}


.underline {
    position: absolute;
    left: 0;
    bottom: -5px;
    height: 3px;
    background: linear-gradient(90deg, cyan, purple);
    animation: underline 1s forwards;
}

@keyframes underline {
    from {
        width: 0
    }

    to {
        width: 100%
    }
}

/* Scroll indicator */
.scroll-indicator {
    position: absolute;
    left: 50%;
    bottom: -40px;
    transform: translateX(-50%);
    text-align: center;
}

.mouse {
    width: 28px;
    height: 45px;
    border: 2px solid white;
    border-radius: 20px;
    margin-top: 6px;
    display: flex;
    justify-content: center;
}

.dot {
    width: 6px;
    height: 6px;
    background: linear-gradient(to bottom, cyan, purple);
    border-radius: 50%;
    animation: scroll 2s infinite;
}

@keyframes scroll {
    0%,100% {
        transform: translateY(5px);
        opacity: 1;
    }

    50% {
        transform: translateY(25px);
        opacity: .3;
    }
}

@media (max-width: 768px) {
    
    .txn-logo {
        height: 55px;
    }

    #mosaic {
        opacity: 0.9;
    }

    .scroll-indicator {
        bottom: -65px;
    }
}

/* SOLUTIONS */
.solutions-section {
    padding: 120px 5%;
    background: #f9f9f9;
    color: black;
}

.solutions-header {
    text-align: center;
    margin-bottom: 60px;
}

    .solutions-header h3 {
        color: #7b33ff;
    }

.solutions-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 30px;
}

.solution-card {
    padding: 30px;
    border-radius: 20px;
    background: linear-gradient(145deg, #3b0075, #01041c);
    color: white;
    transition: .5s;
    min-height: 240px;
}

    .solution-card:hover {
        transform: translateY(-10px);
        box-shadow: 0 20px 40px rgba(0,0,0,.5);
    }

    .solution-card .icon {
        font-size: 32px;
        margin-bottom: 15px;
    }

.cyan {
    background: linear-gradient(145deg, #0096c7, #023e8a);
}

.pink {
    background: linear-gradient(145deg, #c9184a, #560bad);
}

.orange {
    background: linear-gradient(145deg, #ff6d00, #9d0208);
}

.green {
    background: linear-gradient(145deg, #1b4332, #00b4d8);
}

.purple {
    background: linear-gradient(145deg, #7209b7, #f72585);
}

/* RESPONSIVO */
@media(max-width:900px) {
    .solutions-grid {
        grid-template-columns: 1fr 1fr;
    }

    h2, h3 {
        font-size: 32px;
    }

    p {
        font-size: 16px;
    }
}

@media(max-width:600px) {
    .solutions-grid {
        grid-template-columns: 1fr;
    }
}

/* IPHONE */
.phone-cube-section {
    min-height: 200vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

.iphone-wrapper {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    transition: 1s ease;
    z-index: 5;
}

.iphone {
    width: 260px;
    height: 520px;
    border-radius: 40px;
    background: black;
    border: 3px solid #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.screen {
    width: 90%;
    height: 90%;
    border-radius: 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle,#7b33ff,#040012);
}

/*Mosaic 2*/

/* ======= CONTAINER PRINCIPAL ======= */
.container-mosaic-2 {
    position: relative;
    width: 100%;
    height: 100vh; /* Ocupa tela inteira – pode trocar */
    overflow: hidden;
    background: #000; /* fallback */
    padding: 0;
}

/* ======= GRID (MOSAICO) ======= */
.grid-mosaic-2 {
    position: absolute;
    inset: 0;
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    grid-template-rows: repeat(5, 1fr);
    width: 100%;
    height: 100%;
}

/* ======= CADA TILE ======= */
.tile-mosaic-2 {
    background-image: url("../img/txn-imaginamos-alem-codigo.png");
    background-size: 500% 500%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.15) translateY(40px);
    transition: opacity 0.8s ease, transform 1.1s ease;
}

.tile-mosaic-3 {
    background-image: url("../img/txn-induatria-new.png");
    background-size: 500% 500%;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    height: 100%;
    opacity: 0;
    transform: scale(1.15) translateY(40px);
    transition: opacity 0.8s ease, transform 1.1s ease;
}

    .tile-mosaic-2.visible {
        opacity: 1;
        transform: scale(1) translateY(0);
    }

    .tile-mosaic-2.hidden {
        opacity: 0;
        transform: scale(1.1) translateY(-40px);
    }

/* ======= TEXTO SOBRE O MOSAICO ======= */
.textBox-mosaic-2 {
    position: absolute;
    top: 50%;
    right: 4%;
    transform: translateY(-50%);
    width: 32%;
    max-width: 480px;
    text-align: right;
    color: white;
    font-size: clamp(14px, 1.4vw, 24px);
    line-height: 1.6;
    font-family: "Inter", sans-serif;
    font-weight: 300;
    opacity: 0;
    filter: blur(14px);
    transition: opacity 1.6s ease, filter 1.6s ease;
}

    .textBox-mosaic-2.visible {
        opacity: 1;
        filter: blur(0);
    }

/* ======= RESPONSIVO ======= */
@media (max-width: 900px) {
    .grid-mosaic-2 {
        grid-template-columns: repeat(4, 1fr);
        grid-template-rows: repeat(4, 1fr);
    }

    .textBox-mosaic-2 {
        width: 80%;
        right: 10%;
        font-size: 4vw;
    }
}

@media (max-width: 600px) {
    .grid-mosaic-2 {
        grid-template-columns: repeat(3, 1fr);
        grid-template-rows: repeat(3, 1fr);
    }

    .textBox-mosaic-2 {
        width: 90%;
        right: 5%;
        font-size: 5vw;
    }
}