/* =============================================
   SNERA LOADING SCREEN
   ============================================= */

#snera-loading-screen {
    position: fixed;
    inset: 0;
    z-index: 999999;
    background: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: all;
    opacity: 1;
    transition: opacity 0.6s ease;
}

#snera-loading-screen.snera-fade-out {
    opacity: 0;
    pointer-events: none;
}

#snera-loading-screen.snera-hidden {
    display: none;
}

/* ── Inner wrapper ── */
.snera-loading-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 24px;
}

/*
  ── Logo wrapper ──
  width = icon(52) + gap(16) + text(126) = 194px
  height = chiều cao icon: svg tỉ lệ 71:100, width=52 → height≈73px
  Kích thước cố định suốt animation → không reflow, không giật.
*/
.snera-logo-wrapper {
    position: relative;
    width: 194px;
    height: 73px;
}

/* ── LAYER 3 (dưới): Text ── */
.snera-text {
    position: absolute;
    left: 0;
    bottom: 0;           /* căn bottom với icon */
    transform: translateX(0);
    opacity: 0;
    will-change: transform, opacity;
    animation: snera-text-slide 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.75s forwards;
    z-index: 1;
}

.snera-text svg {
    width: 126px;
    height: auto;
    display: block;
}

/* ── LAYER 2 (giữa): White mask ── */
.snera-icon-mask {
    position: absolute;
    left: 0;
    top: 0;
    width: 52px;
    height: 100%;
    background: #ffffff;
    z-index: 2;
    opacity: 0;
    animation: snera-mask-fadein 0.5s ease 0s forwards;
}

/* ── LAYER 1 (trên): Icon ── */
.snera-icon {
    position: absolute;
    left: 0;
    bottom: 0;           /* căn bottom với text */
    width: 52px;
    opacity: 0;
    transform: scale(0.92);
    will-change: opacity, transform;
    animation: snera-icon-fadein 0.5s ease 0s forwards;
    z-index: 3;
}

.snera-icon svg {
    width: 100%;
    height: auto;
    display: block;
}

/* ── Loading text ── */
.snera-loading-text {
    margin: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    color: #8a7a5a;
    opacity: 0;
    will-change: opacity, transform;
    animation: snera-loading-text-fadein 0.4s ease 0.75s forwards;
}

/* =============================================
   KEYFRAMES
   ============================================= */

@keyframes snera-icon-fadein {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes snera-mask-fadein {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/*
  Text bắt đầu tại left:0 (ẩn sau icon+mask).
  Slide sang phải: icon(52) + gap(16) = 68px.
*/
@keyframes snera-text-slide {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 1;
        transform: translateX(68px);
    }
}

@keyframes snera-loading-text-fadein {
    from { opacity: 0; transform: translateY(5px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 480px) {
    /* icon(40) + gap(12) + text(100) = 152px */
    .snera-logo-wrapper {
        width: 152px;
        height: 56px;
    }

    .snera-icon {
        width: 40px;
    }

    .snera-icon-mask {
        width: 40px;
    }

    .snera-text svg {
        width: 100px;
    }

    @keyframes snera-text-slide {
        from { opacity: 1; transform: translateX(0); }
        to   { opacity: 1; transform: translateX(52px); } /* 40 + 12 */
    }

    .snera-loading-text {
        font-size: 12px;
    }
}