/* trasteros.html: ilustrações autorais sem caixa de fundo (SVG transparente). */

.page-hero__art--free {
    min-height: 0;
    padding: 0;
    border: 0;
    background: none;
}

.page-hero__art--free img {
    width: 100%;
    max-width: 42rem;
    max-height: none;
    height: auto;
    margin-inline: auto;
}


.ill {
    margin: 0;
}

.ill img {
    display: block;
    width: 100%;
    height: auto;
}

/* Faixa larga entre a introdução e o conteúdo da secção. */
.ill--wide {
    max-width: 62rem;
    margin: 0 auto clamp(2rem, 4vw, 3.5rem);
}

/* Texto + figura lado a lado; o bloco extra fica sob o texto. */
.art-split {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    grid-template-areas: "copy art" "extra art";
    column-gap: clamp(2rem, 6vw, 5rem);
    row-gap: var(--space-8);
    align-items: start;
}

.art-split > .art-copy { grid-area: copy; }
.art-split > .art-extra { grid-area: extra; }
.art-split > .ill {
    grid-area: art;
    align-self: center;
    max-width: 34rem;
    justify-self: center;
}

.art-split--rev {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    grid-template-areas: "art copy" "art extra";
}

/* Split seguido de conteúdo em largura total (guia de tamanhos). */
.art-split + .size-guide { margin-top: clamp(2rem, 4vw, 3.5rem); }

/* H4 spotlight (docs/design/FX.md): js/fx-site.js chama spotlight() e põe .fx-lit só com ponteiro fino e sem
   movimento reduzido; toque não acende nada. O brilho fica atrás do texto (z-index -1 no contexto do cartão). */
.fx-spot { position: relative; isolation: isolate; }
.fx-spot::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(18rem circle at var(--mx, 50%) var(--my, 0%), rgb(255 195 0 / .18), transparent 65%);
    opacity: 0;
    transition: opacity .45s var(--ease-motion);
}
.fx-spot.fx-lit:hover::before { opacity: 1; }

/* T2 mini-porta: só CSS 3D (transform), decorativa (aria-hidden). Abre com hover, foco dentro do cartão ou
   cartão alvo/selecionado. Flutua à direita do m²: o texto contorna, nada fica por baixo. */
.size-door {
    float: right;
    width: 2.5rem;
    height: 3.25rem;
    margin: 0 0 var(--space-3) var(--space-4);
    border-radius: 4px 4px 0 0;
    background: radial-gradient(120% 90% at 30% 100%, rgb(255 210 74 / .95), rgb(255 157 0 / .45) 45%, var(--night) 82%);
    box-shadow: inset 0 0 0 2px var(--ink);
    perspective: 16rem;
}
.size-door__leaf {
    display: block;
    height: 100%;
    border-radius: inherit;
    background: repeating-linear-gradient(180deg, #d4d4d8 0 4px, #a1a1a6 4px 5px);
    box-shadow: inset 0 0 0 2px var(--ink);
    transform-origin: 0 50%;
    transition: transform .5s var(--ease-motion);
}
.size-guide__item:is(:hover, :focus-within, :target, .is-selected) .size-door__leaf { transform: rotateY(-64deg); }

@media (prefers-reduced-motion: reduce) {
    .fx-spot::before,
    .size-door__leaf { transition: none; }
}

@media (max-width: 768px) {
    .page-hero__art--free img {
        width: min(100%, 22rem);
        max-height: none;
    }

    .art-split,
    .art-split--rev {
        grid-template-columns: minmax(0, 1fr);
        grid-template-areas: "art" "copy" "extra";
    }

    .art-split > .ill {
        max-width: 20rem;
        width: 100%;
    }
}

/* A figura preenche a coluna da arte (antes encolhia ao tamanho intrínseco de 300px). */
.art-split > .ill {
    width: 100%;
}

/* ===== Hero Three.js (js/trasteros-hero.js): FULL-BLEED atras do texto, sem vinheta radial. =====
   Sem WebGL/JS/reduced-motion: fica o SVG estatico (mesma composicao). Padrao: docs/design/PADRAO-HERO-3D.md */
.page-hero--th {
    isolation: isolate;
    display: flex;
    align-items: center;
    min-height: min(52rem, calc(100svh - var(--nav-height, 4.5rem)));
}
.page-hero--th .page-hero__grid { grid-template-columns: minmax(0, 1fr); width: 100%; }
.page-hero--th .page-hero__copy { max-width: 34rem; }
.th {
    position: absolute;
    inset: 0;
    z-index: -1;
    width: auto;
    max-width: none;
    margin: 0;
    aspect-ratio: auto;
    pointer-events: none;
    user-select: none;
    -webkit-user-select: none;
}
.th > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; object-fit: cover; object-position: center; transform: none; transition: opacity .55s ease; }
.th-stage {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity .55s cubic-bezier(.22, 1, .36, 1);
    /* so gradientes LINEARES: esquerda para o texto ler, base para fundir com a proxima secao */
    -webkit-mask-image:
        linear-gradient(90deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .2) 22%, rgb(0 0 0 / .62) 42%, #000 60%),
        linear-gradient(180deg, #000 0, #000 calc(100% - 150px), transparent 100%);
    -webkit-mask-composite: source-in;
    mask-image:
        linear-gradient(90deg, rgb(0 0 0 / .1) 0%, rgb(0 0 0 / .2) 22%, rgb(0 0 0 / .62) 42%, #000 60%),
        linear-gradient(180deg, #000 0, #000 calc(100% - 150px), transparent 100%);
    mask-composite: intersect;
}
.th--on .th-stage { opacity: 1; }
.th--on > img { opacity: 0; }
.th-canvas { display: block; width: 100%; height: 100%; background: transparent; }
@media (max-width: 768px) {
    .th { z-index: 0; }
    .th-stage { z-index: 1; }
    .page-hero--th .page-hero__copy { position: relative; z-index: 2; }
    .page-hero--th .page-hero__copy::before {
        content: ''; position: absolute; inset: -1rem -1rem; z-index: -1; pointer-events: none;
        background: linear-gradient(180deg, transparent 0%, transparent 58%, rgb(16 13 9 / .3) 78%, var(--night) 100%);
    }
    .th-stage {
        -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
        mask-image: linear-gradient(180deg, #000 0%, #000 80%, transparent 100%);
        -webkit-mask-composite: source-over;
        mask-composite: add;
    }
    .th > img { object-position: center; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
    .th-stage { display: none; }
    .th--on > img { opacity: 1; }
}