/* S2026 Personal Gallery v2 — curve gallery (three.js + GSAP Observer) O v1 (masonry + Flip) foi substituido: aquele layout dependia de object-fit:cover, que CORTAVA as imagens — a queixa que originou o rework. */ .s2g-root { display: none; } .s2g-trigger-button { display: inline-block; padding: 14px 28px; font: 500 14px/1 "IBM Plex Mono", monospace; letter-spacing: 0.06em; text-transform: uppercase; color: #000; background: #fff; border: 1px solid #000; border-radius: 0; cursor: pointer; transition: background .2s, color .2s; } .s2g-trigger-button:hover { background: #000; color: #fff; } /* trava o scroll da pagina enquanto a galeria esta aberta (o wheel e da curva) */ html.s2g-locked, html.s2g-locked body { overflow: hidden; } /* ---- Overlay (um so por pagina, criado no pelo JS) ---- */ .s2g-lb { position: fixed; inset: 0; z-index: 99990; display: none; --s2g-ui-resolved: var(--s2g-ui, var(--s2g-ui-auto, #111)); } .s2g-lb.is-open { display: block; } /* req #2 do LO: fundo QUASE SOLIDO (0.8) na cor do MANIAC. A cor vem do JS porque o engine de cor nao alcanca elementos criados depois das suas passes. */ .s2g-backdrop { position: absolute; inset: 0; } /* canvas transparente por cima do backdrop */ .s2g-lb canvas { position: absolute; inset: 0; display: block; width: 100% !important; height: 100% !important; } /* ---- Close: MESMO botao do v1 (LO: "pode manter"), incl. hover rotate 90 ---- */ .s2g-close { position: fixed; top: 22px; right: 22px; z-index: 99992; width: 44px; height: 44px; display: grid; place-items: center; padding: 0; border: 0; border-radius: 999px; background: rgba(127, 127, 127, .12); color: var(--s2g-ui-resolved); opacity: .72; cursor: pointer; transition: opacity .2s ease, transform .2s ease, background .2s ease; } .s2g-close:hover { opacity: 1; transform: rotate(90deg); background: rgba(127, 127, 127, .22); } .s2g-close svg { width: 26px; height: 26px; } /* ---- Auto/Scroll: MANTIDO (LO). Os 5 botoes de path da referencia sairam. ---- */ .s2g-auto { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); z-index: 99992; padding: .65rem 1.4rem; border: 1px solid rgba(127, 127, 127, .3); border-radius: 999px; background: rgba(255, 255, 255, .6); backdrop-filter: blur(6px); color: #2a2a28; font: 400 .85rem/1 "IBM Plex Mono", monospace; letter-spacing: .02em; cursor: pointer; transition: background .2s, color .2s, border-color .2s; } .s2g-auto:hover { background: rgba(255, 255, 255, .85); } .s2g-auto.is-active { background: #2a2a28; color: #f0ede8; border-color: #2a2a28; } /* ---- MOBILE (req #6): scroll vertical infinito, DOM puro, sem WebGL ---- */ .s2g-mob { position: absolute; inset: 0; display: none; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; padding: 14px; } .s2g-lb.is-mobile .s2g-mob { display: block; } .s2g-lb.is-mobile canvas { display: none; } .s2g-lb.is-mobile .s2g-auto { display: none; } /* Auto/Scroll e so do desktop */ .s2g-mob figure { margin: 0 0 14px; } /* height:auto + width/height no elemento = PROPORCAO ORIGINAL, sem layout shift */ .s2g-mob img, .s2g-mob video { width: 100%; height: auto; display: block; border-radius: 6px; } .s2g-mob .s2g-lbl { margin: 0 0 5px; font: 400 10px/1.4 "IBM Plex Mono", monospace; letter-spacing: .12em; text-transform: uppercase; opacity: .55; color: var(--s2g-ui-resolved); } @media (prefers-reduced-motion: reduce) { .s2g-close { transition: none; } .s2g-close:hover { transform: none; } }