html.loading,
html.loading body {
    overflow: hidden;
}

html.entrance-open,
html.entrance-open body {
    overflow: hidden;
}

#site-entrance {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    height: 100dvh;
    margin: 0;
    padding: 0;
    z-index: 2147483646;
    overflow: hidden;
    color: #fff;
    background: #191919;
    cursor: pointer;
    opacity: 1;
    visibility: visible;
    transition: opacity 1s cubic-bezier(.19, 1, .22, 1), visibility 1s;
}

/* Impede que as regras globais do tema sobrescrevam a capa. */
#site-entrance,
#site-entrance * {
    color: #fff;
    box-sizing: border-box;
}

#site-entrance.is-leaving {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.entrance-slides,
.entrance-slide,
.entrance-shade {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
}

.entrance-slide {
    object-fit: cover;
    opacity: 0;
    transform: scale(1.04);
    transition: opacity 1.4s ease, transform 6.5s ease-out;
}

.entrance-slide.is-active {
    z-index: 1;
    opacity: 1;
    transform: scale(1);
}

.entrance-shade {
    z-index: 2;
    background: linear-gradient(180deg, rgba(0, 0, 0, .2), transparent 38%, rgba(0, 0, 0, .32));
    pointer-events: none;
}

.entrance-brand {
    position: absolute;
    z-index: 3;
    top: clamp(28px, 5vw, 70px);
    left: 50%;
    transform: translateX(-50%);
}

.entrance-logo {
    display: block;
    width: clamp(68px, 4.5vw, 105px);
    height: auto;
    filter: none;
}

.entrance-enter {
    position: absolute;
    z-index: 3;
    bottom: clamp(28px, 5vw, 70px);
    left: 50%;
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 8px 9px 8px 24px;
    border: 0;
    border-radius: 999px;
    box-shadow: 0 8px 24px rgba(255, 255, 255, .12);
    color: #111;
    background: transparent;
    font: inherit;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: .24em;
    text-transform: uppercase;
    transform: translateX(-50%);
    transition: background .35s ease, border-color .35s ease, box-shadow .35s ease, transform .35s ease;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.entrance-enter span {
    white-space: nowrap;
    font-weight: 500;
    color: #111;
}

#site-entrance .entrance-enter,
#site-entrance .entrance-enter span,
#site-entrance .entrance-enter i {
    color: #111;
}

.entrance-enter b {
    display: block;
    width: clamp(32px, 3vw, 48px);
    height: 1px;
    background: rgba(17, 17, 17, .75);
    transform-origin: right center;
    transition: width .45s cubic-bezier(.19, 1, .22, 1), background .3s ease;
}

.entrance-enter i {
    display: grid;
    width: 42px;
    height: 42px;
    border: 1px solid rgba(17, 17, 17, .8);
    border-radius: 50%;
    place-items: center;
    font-size: 16px;
    font-style: normal;
    line-height: 1;
    color: #111;
    box-shadow: 0 0 0 0 rgba(17, 17, 17, .28);
    animation: entrance-button-pulse 2.4s ease-out infinite;
    transition: color .35s ease, background .35s ease, transform .45s cubic-bezier(.19, 1, .22, 1);
}

#site-entrance .entrance-enter:hover,
#site-entrance .entrance-enter:focus-visible {
    background: transparent;
    box-shadow: 0 10px 28px rgba(255, 255, 255, .18);
    transform: translateX(-50%) translateY(-3px);
}

#site-entrance .entrance-enter:hover b,
#site-entrance .entrance-enter:focus-visible b {
    width: clamp(45px, 4vw, 64px);
    background: #111;
}

#site-entrance .entrance-enter:hover i,
#site-entrance .entrance-enter:focus-visible i {
    color: #111;
    background: transparent;
    transform: translateX(4px);
    animation: none;
}

@keyframes entrance-button-pulse {
    0% { box-shadow: 0 0 0 0 rgba(17, 17, 17, .3); }
    65%, 100% { box-shadow: 0 0 0 9px rgba(17, 17, 17, 0); }
}

#site-entrance .entrance-enter:focus-visible {
    outline: 1px solid rgba(17, 17, 17, .8);
    outline-offset: 7px;
}

.entrance-counter {
    position: absolute;
    z-index: 3;
    right: clamp(24px, 4vw, 60px);
    bottom: clamp(36px, 5vw, 76px);
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 9px;
    letter-spacing: .12em;
}

.entrance-counter b {
    display: block;
    width: 34px;
    height: 1px;
    background: rgba(17, 17, 17, .7);
}

#site-entrance .entrance-counter,
#site-entrance .entrance-counter span {
    color: #111;
}

#site-loader {
    position: fixed;
    inset: 0;
    z-index: 2147483647;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(150px, 1fr) minmax(300px, 900px) minmax(150px, 1fr);
    align-items: center;
    padding: 0 clamp(28px, 4.5vw, 80px);
    overflow: hidden;
    background: #fff;
    opacity: 1;
    visibility: visible;
    transition: opacity .9s ease, visibility .9s ease;
}

#site-loader.hide {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

.loader-left,
.loader-right,
.loader-text {
    opacity: 0;
    filter: blur(8px);
    transform: translateY(45px);
    transition: opacity .8s ease, transform 1s cubic-bezier(.19, 1, .22, 1), filter .8s ease;
}

.loader-show .loader-left,
.loader-show .loader-right,
.loader-show .loader-text {
    opacity: 1;
    filter: blur(0);
    transform: translateY(0);
}

.loader-hide-text .loader-left,
.loader-hide-text .loader-right,
.loader-hide-text .loader-text {
    opacity: 0;
    filter: blur(5px);
    transform: translateY(-20px);
    transition-duration: .5s;
}

.loader-left {
    position: relative;
    top: clamp(-70px, -6vh, -45px);
    font-size: clamp(14px, 1.05vw, 18px);
    letter-spacing: .16em;
    white-space: nowrap;
}

.loader-right {
    position: relative;
    top: clamp(-70px, -6vh, -45px);
    justify-self: end;
}

.loader-center {
    display: flex;
    min-width: 0;
    flex-direction: column;
    align-items: center;
}

.gallery {
    --card-size: clamp(110px, 9vw, 145px);
    position: relative;
    width: min(900px, 100%);
    height: calc(var(--card-size) * 1.35);
    perspective: 1800px;
    transform: scale(1);
    transform-style: preserve-3d;
    transition: transform .75s cubic-bezier(.19, 1, .22, 1), opacity .65s ease, filter .65s ease;
}

.gallery img {
    position: absolute;
    top: 50%;
    left: 50%;
    width: var(--card-size);
    height: var(--card-size);
    object-fit: cover;
    opacity: 0;
    box-shadow: 0 18px 45px rgba(0, 0, 0, 0);
    transform: translate(-50%, -50%) scale(.94);
    transition: transform 1s cubic-bezier(.19, 1, .22, 1), opacity .6s ease, box-shadow .8s ease;
    will-change: transform, opacity;
}

.img-left-1 { z-index: 4; }
.img-right-1 { z-index: 3; }
.img-left-2 { z-index: 2; }
.img-right-2 { z-index: 1; }

/* Prévia da referência: uma imagem por vez antes de formar o deck. */
.gallery.preview img {
    opacity: 0;
    transform: translate(-50%, -50%) scale(.92);
    transition: opacity .28s ease, transform .45s cubic-bezier(.19, 1, .22, 1);
}
.gallery.preview img.is-preview {
    z-index: 10;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}

/* O deck entra como um único objeto, com apenas suas bordas visíveis. */
.gallery.deck img { opacity: 1; }
.gallery.deck .img-left-1 { transform: translate(calc(-50% - 5px), calc(-50% - 3px)); }
.gallery.deck .img-right-1 { transform: translate(calc(-50% + 6px), calc(-50% - 4px)) scale(.99); }
.gallery.deck .img-left-2 { transform: translate(calc(-50% - 10px), calc(-50% - 6px)) scale(.98); }
.gallery.deck .img-right-2 { transform: translate(calc(-50% + 11px), calc(-50% - 7px)) scale(.97); }

/* Abertura em leque. Os deslocamentos são relativos ao tamanho disponível. */
.gallery.open img {
    opacity: 1;
    box-shadow: 0 20px 45px rgba(0, 0, 0, .12);
}
.gallery.open .img-left-2 { transform: translate(calc(-50% - min(27vw, 255px)), -50%) scale(.9); }
.gallery.open .img-left-1 { transform: translate(calc(-50% - min(9vw, 85px)), -50%) scale(1); }
.gallery.open .img-right-1 { transform: translate(calc(-50% + min(9vw, 85px)), -50%) scale(1); }
.gallery.open .img-right-2 { transform: translate(calc(-50% + min(27vw, 255px)), -50%) scale(.9); }

/* Compatibilidade com versões antigas do JS que ainda procuram .img-center. */
.gallery.open .img-left-2.img-center { transform: translate(calc(-50% - min(27vw, 255px)), -50%) scale(.9); }

.gallery.closing img { box-shadow: 0 10px 25px rgba(0, 0, 0, .06); }
.gallery.exit {
    opacity: 0;
    filter: blur(4px);
    transform: scale(1.12);
}

.loader-text {
    position: relative;
    top: clamp(60px, 8vh, 95px);
    max-width: 520px;
    margin-top: clamp(80px, 11vh, 135px);
    text-align: center;
}
.loader-text strong { display: block; margin-bottom: 14px; font-size: 10px; letter-spacing: 1.8px; }
.loader-text p { margin: 0; color: #777; font-size: 12px; line-height: 1.7; }
.loader-logo { width: clamp(70px, 6vw, 100px); height: auto; }

@media (max-width: 760px) {
    #site-loader { display: flex; padding: 0 20px; }
    .loader-center { width: 100%; }
    .loader-left, .loader-right { display: none; }
    .gallery { --card-size: clamp(90px, 25vw, 115px); width: 100%; }
    .gallery.open .img-left-2 { transform: translate(calc(-50% - 31vw), -50%) scale(.76); }
    .gallery.open .img-left-1 { transform: translate(calc(-50% - 11vw), -50%) scale(.94); }
    .gallery.open .img-right-1 { transform: translate(calc(-50% + 11vw), -50%) scale(.94); }
    .gallery.open .img-right-2 { transform: translate(calc(-50% + 31vw), -50%) scale(.76); }
    .loader-text { top: clamp(35px, 5vh, 50px); max-width: 390px; margin-top: clamp(60px, 9vh, 90px); padding: 0 15px; }
    .loader-text strong { margin-bottom: 12px; font-size: 10px; line-height: 1.6; letter-spacing: 1.3px; }
    .loader-text p { font-size: 12px; line-height: 1.6; }
	.entrance-counter { display: none; }
	.entrance-slide { object-position: center; }
}

@media (prefers-reduced-motion: reduce) {
    .gallery img, .gallery, #site-loader, .loader-left, .loader-right, .loader-text { transition-duration: .15s !important; }
	.entrance-slide, #site-entrance { transition-duration: .15s !important; }
	.entrance-enter i { animation: none; }
}