/* ========================================================= METAL GEAR SAGA - STYLE SHEET ========================================================= */ /* ========================================================= IMPORTAÇÃO DA FONTE METAL GEAR ========================================================= */ @font-face { font-family: 'MGS2'; src: url('src/assets/fonts/MGS2.ttf') format('truetype'); font-weight: normal; font-style: normal; } /* ========================================================= 1. VARIÁVEIS GLOBAIS E ANIMAÇÕES ========================================================= */ :root { --primary-color: #e11d48; --accent-color: #facc15; --bg-dark: #0a0a0a; --bg-card: #161616; --nav-bg: rgba(10, 10, 10, 0.95); --content-background: #0e0e10; --timeline-background: #05100a; --text-main: #f8fafc; --text-muted: #94a3b8; --transition-smooth: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); /* Variáveis do preloader */ --preloader-bg: #000000; --preloader-glow-white: rgba(255, 255, 255, 0.45); --preloader-glow-gold: rgba(242, 193, 78, 0.6); --preloader-gold: #f2c14e; --preloader-white: #ffffff; } /* ========================================================= TEMA CLARO Ativado via [data-theme="light"] no , controlado pelo switch no JS (index.js) ========================================================= */ html[data-theme='light'] { --bg-dark: #f4f4f5; --bg-card: #ffffff; --nav-bg: rgba(255, 255, 255, 0.9); --content-background: #f4f4f5; --timeline-background: #15301f; --text-main: #0a0a0a; --text-muted: #52525b; } html[data-theme='light'] .hero-overlay { background: linear-gradient(to bottom, rgba(0, 0, 0, 0.4), var(--bg-dark)); } html[data-theme='light'] .card { border-color: rgba(0, 0, 0, 0.08); } html[data-theme='light'] .card-icon img { background: #eaeaea; } html[data-theme='light'] .main-header { border-bottom-color: rgba(0, 0, 0, 0.08); } /* ========================================================= 2. RESET GLOBAL ========================================================= */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background-color: var(--content-background); color: var(--text-main); line-height: 1.6; overflow-x: hidden; } /* ========================================================= 4. ACESSIBILIDADE ========================================================= */ .skip-link { position: absolute; top: -100px; left: 0; background: var(--primary-color); padding: 1rem; z-index: 9999; transition: 0.3s; } .skip-link:focus { top: 0; } /* ========================================================= 5. COMPONENTES GLOBAIS ========================================================= */ .container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; } /* ========================================================= 6. NAVBAR ========================================================= */ .main-header { position: sticky; top: 0; z-index: 1000; background-color: var(--nav-bg); backdrop-filter: blur(10px); border-bottom: 1px solid rgba(255, 255, 255, 0.1); } .navbar { max-width: 1400px; margin: 0 auto; padding: 0.8rem 2rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } /* LOGO */ .logo-link { display: flex; align-items: center; gap: 12px; text-decoration: none; color: var(--text-main); } .site-logo { border-radius: 4px; object-fit: contain; } .site-title { font-size: 1.2rem; letter-spacing: 1px; transition: var(--transition-smooth); } .site-title:hover strong { color: var(--primary-color); } .site-title strong { transition: var(--transition-smooth); } /* LINKS */ .nav-links { display: flex; list-style: none; gap: 1.5rem; } .nav-links a { text-decoration: none; color: var(--text-muted); font-size: 0.9rem; font-weight: 500; text-transform: uppercase; transition: var(--transition-smooth); } .nav-links a:hover { color: var(--primary-color); text-shadow: 0 0 8px rgba(225, 29, 72, 0.4); } /* NAV ACTIONS */ .nav-actions { display: flex; align-items: center; gap: 1rem; } /* SWITCH DE TEMA (claro/escuro) — baseado em Uiverse.io by elijahgummer */ .switch { position: relative; width: 64px; height: 30px; box-sizing: border-box; padding: 3px; background: #0d0d0d; border-radius: 6px; box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.5), 0 1px 0 0 rgba(255, 255, 255, 0.1); flex-shrink: 0; } .switch input[type='checkbox'] { position: absolute; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; } .switch input[type='checkbox'] + label.toggle { position: relative; display: block; left: 0; width: 50%; height: 100%; background: #1b1c1c; border-radius: 3px; box-shadow: inset 0 1px 0 0 rgba(255, 255, 255, 0.1); transition: var(--transition-smooth); } .switch input[type='checkbox'] + label.toggle:before { content: ''; display: inline-block; width: 5px; height: 5px; margin-left: 8px; background: #fff; border-radius: 50%; vertical-align: middle; box-shadow: 0 0 5px 2px rgba(225, 29, 72, 0.9), 0 0 3px 1px rgba(225, 29, 72, 0.9); transition: var(--transition-smooth); } .switch input[type='checkbox'] + label.toggle:after { content: ''; display: inline-block; width: 0; height: 100%; vertical-align: middle; } .switch input[type='checkbox'] + label.toggle i { display: block; position: absolute; top: 50%; left: 50%; width: 2px; height: 14px; margin-top: -7px; margin-left: -1px; border-radius: 2px; background: #0d0d0d; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3); } .switch input[type='checkbox'] + label.toggle i:before, .switch input[type='checkbox'] + label.toggle i:after { content: ''; display: block; position: absolute; width: 100%; height: 100%; border-radius: 2px; background: #0d0d0d; box-shadow: 0 1px 0 0 rgba(255, 255, 255, 0.3); } .switch input[type='checkbox'] + label.toggle i:before { left: -4px; } .switch input[type='checkbox'] + label.toggle i:after { left: 4px; } .switch input[type='checkbox']:checked + label.toggle { left: 50%; } .switch input[type='checkbox']:checked + label.toggle:before { box-shadow: 0 0 5px 2px rgba(250, 204, 21, 0.9), 0 0 3px 1px rgba(250, 204, 21, 0.9); } /* ========================================================= 7. iDROID 3D SECTION (Three.js) ========================================================= */ .idroid-3d-section { padding: 80px 0; position: relative; z-index: 1; background: var(--content-background); border-radius: 1.5rem 1.5rem 0 0; box-shadow: 0 -24px 48px rgba(0, 0, 0, 0.35); } .idroid-3d-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 70% 50%, rgba(225, 29, 72, 0.06), transparent); pointer-events: none; } .idroid-3d-inner { display: flex; align-items: center; gap: 3rem; max-width: 1400px; margin: 0 auto; padding: 0 2rem; min-height: 70vh; } .idroid-text-side { flex: 0 0 420px; } .idroid-text-content h2 { font-family: 'MGS2', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); text-transform: uppercase; letter-spacing: 8px; margin-bottom: 1rem; } .idroid-text-content .accent { color: var(--primary-color); } .idroid-subtitle { font-size: 1rem; line-height: 1.8; margin-bottom: 1.5rem; } .idroid-subtitle .text-muted { color: var(--text-muted); font-size: 0.85rem; letter-spacing: 2px; } .idroid-description p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.5rem; } .idroid-features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .idroid-features li { font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; } .idroid-features li .accent { margin-right: 0.5rem; } .idroid-3d-side { flex: 1; position: relative; height: 500px; will-change: transform; pointer-events: none; } .div3d { width: 100%; height: 100%; position: absolute; inset: 0; pointer-events: none; } .div3d canvas { display: block; width: 100% !important; height: 100% !important; background: transparent !important; pointer-events: auto; } /* ========================================================= 8. VENOM ARMY 3D SECTION ========================================================= */ .venom-3d-section { padding: 80px 0; position: relative; } .venom-3d-section::before { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 30% 50%, rgba(225, 29, 72, 0.06), transparent); pointer-events: none; } .venom-3d-inner { display: flex; align-items: center; gap: 3rem; max-width: 1400px; margin: 0 auto; padding: 0 2rem; min-height: 70vh; } .venom-text-side { flex: 0 0 420px; } .venom-text-content h2 { font-family: 'MGS2', sans-serif; font-size: clamp(2rem, 5vw, 3.5rem); text-transform: uppercase; letter-spacing: 8px; margin-bottom: 1rem; } .venom-text-content .accent { color: var(--primary-color); } .venom-subtitle { font-size: 1rem; line-height: 1.8; margin-bottom: 1.5rem; } .venom-subtitle .text-muted { color: var(--text-muted); font-size: 0.85rem; letter-spacing: 2px; } .venom-description p { font-size: 0.9rem; color: var(--text-muted); line-height: 1.7; margin-bottom: 1.5rem; } .venom-features { list-style: none; display: flex; flex-direction: column; gap: 0.6rem; } .venom-features li { font-size: 0.85rem; letter-spacing: 1px; text-transform: uppercase; } .venom-features li .accent { margin-right: 0.5rem; } .venom-3d-side { flex: 1; position: relative; height: 500px; will-change: transform; pointer-events: none; } .div3d-venom { width: 100%; height: 100%; position: absolute; inset: 0; pointer-events: none; } .div3d-venom canvas { display: block; width: 100% !important; height: 100% !important; background: transparent !important; pointer-events: auto; } /* ========================================================= 9. HERO SECTION ========================================================= */ .hero { /* Permanece visível enquanto a seção História passa por cima dele. */ position: sticky; top: 0; z-index: 0; isolation: isolate; height: calc(100vh - 73px); /* 73px = altura aproximada do .main-header */ display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Limita o sticky ao conjunto hero + História; as seções seguintes rolam normalmente. */ .hero-story-stage { position: relative; } /* IMAGEM HERO ESTÁTICA */ .hero-image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; display: none; } .hero-drift-wall { position: absolute; inset: 0; z-index: 0; background: #060010; } /* Preenche cada tile por completo, preservando a proporção da capa. */ .hero-drift-wall .drift-wall__tile img { object-fit: cover; background: #060010; } .hero-drift-wall .drift-wall__tile { cursor: pointer; } /* OVERLAY */ .hero-overlay { display: none; } /* TEXTO HERO */ .hero-text { position: absolute; inset: 0; z-index: 2; display: grid; place-content: center; pointer-events: none; text-align: center; color: var(--text-main); text-shadow: 0 3px 18px rgba(0, 0, 0, 0.9); } .hero-text h1 { font-size: clamp(2.5rem, 8vw, 5rem); text-transform: uppercase; letter-spacing: 10px; margin-bottom: 0.5rem; font-family: 'MGS2', sans-serif; text-shadow: 0 0 15px rgba(0, 0, 0, 0.6); } .tactical-text { letter-spacing: 16px; font-size: 13px; color: #cfcfcf; text-transform: uppercase; } .hero-start { display: inline-block; margin-top: 0.75rem; pointer-events: auto; color: var(--primary-color); font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: clamp(0.8rem, 1.4vw, 1rem); font-weight: 500; letter-spacing: 0.1em; text-decoration: none; text-transform: uppercase; animation: heroStartPulse 1.5s ease-in-out infinite; } .hero-start span { color: #ff385f; } .hero-start:hover, .hero-start:focus-visible { color: #fff; outline: none; } @keyframes heroStartPulse { 0%, 100% { opacity: 0.65; text-shadow: 0 0 0 rgba(225, 29, 72, 0); transform: scale(0.98); } 50% { opacity: 1; text-shadow: 0 0 16px rgba(225, 29, 72, 0.9); transform: scale(1); } } .hero-disclaimer { position: absolute; right: clamp(1rem, 3vw, 3rem); bottom: clamp(1rem, 3vw, 2.5rem); z-index: 2; width: max-content; max-width: calc(100% - 2rem); white-space: nowrap; color: rgba(255, 255, 255, 0.68); font-size: clamp(0.45rem, 1vw, 0.65rem); letter-spacing: 0.08em; line-height: 1.45; text-align: right; text-transform: uppercase; } @media (prefers-reduced-motion: reduce) { .hero-start { animation: none; } } /* ========================================================= 10. GALLERY ========================================================= */ .gallery-section { padding: 100px 0; } /* As três seções usam a mesma superfície para formar um bloco contínuo. */ .idroid-3d-section, .gallery-section, .venom-3d-section { position: relative; background: var(--content-background); } .gallery-section, .venom-3d-section { z-index: 1; } .gallery-header { margin-bottom: 3rem; border-left: 4px solid var(--primary-color); padding-left: 1.5rem; } .horizontal-scroll { display: flex; gap: 1.5rem; overflow-x: auto; padding: 1rem 0 3rem; scroll-snap-type: x mandatory; scrollbar-width: thin; scrollbar-color: var(--primary-color) transparent; mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 10%, black 90%, transparent); } .horizontal-scroll.scrolling { overflow-x: hidden; } .horizontal-scroll .scroll-track { display: flex; gap: 1.5rem; flex-shrink: 0; animation: scrollLoop 40s linear infinite; scroll-snap-align: none; } .horizontal-scroll.scrolling:hover .scroll-track { animation-play-state: paused; } /* Organizações — scroll para a direita */ #organizacoes .scroll-track { animation-name: scrollLoopRight; } /* CARD */ .card { min-width: 280px; max-width: 320px; flex-shrink: 0; background: var(--bg-card); border-radius: 12px; overflow: hidden; scroll-snap-align: start; transition: var(--transition-smooth); border: 1px solid rgba(255, 255, 255, 0.05); } .scrolling .card { scroll-snap-align: none; } .card:hover { transform: translateY(-10px); border-color: var(--primary-color); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); } .card img { width: 100%; aspect-ratio: 1/1; object-fit: cover; display: block; } .card-icon img { aspect-ratio: 1/1; object-fit: contain; padding: 1rem; background: #0f1111; } .card-content { padding: 1.5rem; flex: 1; } .card-content h3 { color: var(--primary-color); margin-bottom: 0.5rem; } .card-content p { font-size: 0.9rem; color: var(--text-muted); } /* ========================================================= 11. FOOTER ========================================================= */ .main-footer { background: #050505; padding: 80px 0 40px; border-top: 1px solid rgba(255, 255, 255, 0.05); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 4rem; } .footer-section h3 { text-transform: uppercase; font-size: 0.9rem; margin-bottom: 1.5rem; color: var(--primary-color); letter-spacing: 1px; } .footer-section ul { list-style: none; } .footer-section li { margin-bottom: 0.8rem; } .footer-section a { color: var(--text-muted); text-decoration: none; font-size: 0.9rem; transition: 0.3s; } .footer-section a:hover { color: white; padding-left: 8px; } .footer-bottom { grid-column: 1 / -1; text-align: center; border-top: 1px solid rgba(255, 255, 255, 0.05); padding-top: 40px; margin-top: 20px; } .disclaimer { font-size: 0.75rem; color: #475569; margin-top: 10px; } /* ========================================================= 12. RESPONSIVIDADE ========================================================= */ @media (max-width: 992px) { .nav-links { display: none; } .navbar { padding: 1rem; } .hero { height: calc(100svh - 73px); } .hero-text h1 { letter-spacing: 5px; } .tactical-text { letter-spacing: 8px; font-size: 11px; } .gallery-section { padding: 60px 0; } .container { padding: 0 1rem; } .card { min-width: 260px; } } @media (max-width: 576px) { .hero { height: calc(100svh - 65px); } .hero-text h1 { font-size: clamp(1.8rem, 10vw, 2.5rem); letter-spacing: 3px; } .tactical-text { letter-spacing: 4px; font-size: 10px; } .hero-disclaimer { font-size: 0.45rem; } .site-title { font-size: 1rem; } .gallery-section { padding: 40px 0; } .card { min-width: 220px; } .footer-grid { gap: 2rem; } .div3d { height: 350px; } } @keyframes scrollLoop { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes scrollLoopRight { from { transform: translateX(-50%); } to { transform: translateX(0); } } /* ========================================================= PRELOADER ========================================================= */ #preloader { position: fixed; inset: 0; display: flex; align-items: center; justify-content: center; background: var(--preloader-bg); z-index: 9999; transition: opacity 0.6s ease, visibility 0.6s ease; } #preloader.hidden { opacity: 0; visibility: hidden; pointer-events: none; } .loader-wrap { display: flex; flex-direction: column; align-items: center; gap: 26px; } /* ===== Palco: anel externo + anel principal + números ===== */ .loader-stage { position: relative; width: 140px; height: 140px; } /* --- Anel externo fino, dividido em duas partes, girando ao redor --- */ .ring-outer { position: absolute; inset: 0; border-radius: 50%; animation: spin-reverse 3.4s linear infinite; } .ring-outer-layer { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient( from 0deg, var(--oc) 0deg 150deg, transparent 150deg 180deg, var(--oc) 180deg 330deg, transparent 330deg 360deg ); -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 2px)); transition: opacity 0.9s ease; } .ring-outer-layer.white { --oc: var(--preloader-white); opacity: 0.55; } .ring-outer-layer.gold { --oc: var(--preloader-gold); opacity: 0; } /* --- Anel principal: degradê que se funde ao preto, sem costura --- */ .ring-main { position: absolute; top: 50%; left: 50%; width: 92px; height: 92px; transform: translate(-50%, -50%); } .ring-main-layer { position: absolute; inset: 0; border-radius: 50%; background: conic-gradient(from 0deg, var(--rc) 0%, transparent 65%, var(--rc) 100%); -webkit-mask: radial-gradient( farthest-side, transparent calc(100% - 11px), #000 calc(100% - 11px) ); mask: radial-gradient(farthest-side, transparent calc(100% - 11px), #000 calc(100% - 11px)); animation: spin 1s linear infinite; transition: opacity 0.9s ease; } .ring-main-layer.white { --rc: var(--preloader-white); opacity: 1; filter: drop-shadow(0 0 6px var(--preloader-glow-white)); } .ring-main-layer.gold { --rc: var(--preloader-gold); opacity: 0; filter: drop-shadow(0 0 8px var(--preloader-glow-gold)); } #preloader.loaded .ring-main-layer.white, #preloader.loaded .ring-outer-layer.white { opacity: 0; } #preloader.loaded .ring-main-layer.gold { opacity: 1; } #preloader.loaded .ring-outer-layer.gold { opacity: 0.6; } @keyframes spin { to { transform: rotate(360deg); } } @keyframes spin-reverse { to { transform: rotate(-360deg); } } /* --- Números oscilando, canto inferior esquerdo do círculo --- */ .numbers { position: absolute; left: -6px; bottom: 6px; font-family: 'Courier New', monospace; font-size: 13px; letter-spacing: 2px; color: var(--preloader-white); opacity: 0.55; transition: color 0.9s ease, opacity 0.9s ease; } #preloader.loaded .numbers { color: var(--preloader-gold); opacity: 0.9; } /* ===== Texto / status ===== */ .loader-label { font-family: 'Courier New', monospace; letter-spacing: 3px; font-size: 13px; color: var(--preloader-white); text-transform: uppercase; opacity: 0.75; transition: color 0.9s ease; } #preloader.loaded .loader-label { color: var(--preloader-gold); } .loader-label .dots::after { content: ''; animation: dots 1.4s steps(4, end) infinite; } @keyframes dots { 0% { content: ''; } 25% { content: '.'; } 50% { content: '..'; } 75% { content: '...'; } 100% { content: ''; } } /* Respeita usuários que preferem menos movimento */ @media (prefers-reduced-motion: reduce) { .ring-main-layer, .ring-outer { animation: none; } .loader-label .dots::after { animation: none; content: '...'; } } * { margin: 0; padding: 0; box-sizing: border-box; } body { font-family: -apple-system, sans-serif; background: var(--content-background); color: #fff; } section.intro, section.outro { height: 100vh; display: flex; align-items: center; justify-content: center; font-size: 2rem; color: #666; } /* 1. Wrapper alto: define a "distância" de scroll disponível */ .horizontal-wrapper { position: relative; height: 650vh; isolation: isolate; background: var(--content-background); } /* A camada começa opaca com o fundo das seções de conteúdo e perde opacidade até revelar o verde da Linha do Tempo. Assim não há um corte seco entre os dois ambientes visuais. */ .horizontal-wrapper::before { content: ''; position: absolute; inset: 0 0 auto; height: min(28vh, 240px); background: linear-gradient(to bottom, var(--content-background) 0%, transparent 100%); pointer-events: none; z-index: 4; } /* 2. Container sticky: gruda na tela enquanto o wrapper é rolado */ .horizontal-sticky { position: sticky; top: 0; height: 100vh; overflow: hidden; display: flex; align-items: center; background: var(--timeline-background); /* verde escuro tático */ } /* Degradês de entrada (topo) e saída (base): fundem o verde tático com a cor do body. Usa só ::after porque ::before já é ocupado pelo grid tático mais abaixo — duas camadas de gradiente empilhadas no mesmo pseudo-elemento resolvem os dois lados. */ .horizontal-sticky::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to bottom, var(--content-background) 0%, transparent 180px), linear-gradient(to top, var(--content-background) 0%, transparent 180px); pointer-events: none; z-index: 3; } /* Grid tático animado no fundo */ .horizontal-sticky::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(80, 255, 140, 0.07) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 255, 140, 0.07) 1px, transparent 1px); background-size: 40px 40px; animation: gridDrift 20s linear infinite; z-index: 0; } @keyframes gridDrift { from { background-position: 0 0; } to { background-position: 40px 40px; } } /* Scanlines (efeito CRT sutil) por cima do grid */ .scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, rgba(0, 0, 0, 0.15) 0px, rgba(0, 0, 0, 0.15) 1px, transparent 2px, transparent 3px ); pointer-events: none; z-index: 1; } /* 3. Trilho horizontal: uma única fileira, alternando grupos de imagens e blocos de texto — a trajetória vem do margin-top de cada grupo/texto, formando uma linha que sobe e desce */ .track { position: relative; z-index: 2; /* fica acima do grid e das scanlines */ display: flex; align-items: flex-start; gap: 52px; padding: 0 5vw; will-change: transform; } /* 4. Grupo: agrupa 1, 2 ou 3 imagens lado a lado (11 grupos no total) */ .cluster { display: flex; gap: 18px; } .gallery-item { width: 230px; display: flex; flex-direction: column; gap: 5px; } .gallery-item .label { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #cfcfc0; } /* 4b. Wrapper "vidro" — agora é um link (), então reseta o estilo padrão */ .img-wrap { display: block; text-decoration: none; color: inherit; position: relative; border-radius: 10px; padding: 6px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.15); box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.2); overflow: hidden; transition: transform 0.3s ease, box-shadow 0.3s ease; cursor: pointer; } .img-wrap:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(80, 255, 140, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.3); } .img-wrap img { width: 100%; height: 300px; object-fit: contain; display: block; border-radius: 6px; } /* Faixa de brilho: fica escondida por padrão, só aparece no hover */ .img-wrap::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient( 115deg, transparent 0%, rgba(255, 255, 255, 0.05) 40%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0.05) 60%, transparent 100% ); transform: skewX(-20deg); pointer-events: none; z-index: 1; } .img-wrap:hover::before { animation: shine 0.9s ease forwards; } @keyframes shine { 0% { left: -75%; } 100% { left: 130%; } } /* pequena variação interna: dentro de um grupo com 2+ imagens, a segunda sobe/desce um pouco, reforçando a sensação de trajetória */ .cluster .gallery-item:nth-child(2) { margin-top: 45px; } .cluster .gallery-item:nth-child(3) { margin-top: -25px; } /* 5. Bloco de texto entre grupos */ .text-block { width: 240px; align-self: center; display: flex; flex-direction: column; gap: 14px; } .text-block .label { font-size: 12px; letter-spacing: 0.05em; text-transform: uppercase; color: #cfcfc0; } .text-block .quote { font-size: 1.15rem; font-family: Georgia, serif; line-height: 1.4; color: #f0efe6; } .text-block .signature { display: block; margin-top: 6px; font-size: 0.9rem; color: #cfcfc0; font-style: italic; } /* 6. Trajetória: cada um dos 11 grupos (g1–g11) e 11 textos (t1–t11) tem seu próprio margin-top, formando uma onda ao longo do trilho */ .g1 { margin-top: 30px; } .t1 .quote { margin-top: 1px; font-size: 1rem; } .g2 { margin-top: 170px; } .t2 .quote { margin-top: 1px; font-size: 1rem; } .g3 { margin-top: 20px; } .t3 .quote { margin-top: 1px; font-size: 1rem; } .g4 { margin-top: 140px; } .t4 .quote { margin-top: 1px; font-size: 1rem; } .g5 { margin-top: 40px; } .t5 .quote { margin-top: 1px; font-size: 1rem; } .g6 { margin-top: 100px; } .t6 .quote { margin-top: 1px; font-size: 1rem; } .g7 { margin-top: 60px; } .t7 .quote { margin-top: 1px; font-size: 1rem; } .g8 { margin-top: 130px; } .t8 .quote { margin-top: 1px; font-size: 1rem; } .g9 { margin-top: 10px; } .t9 .quote { margin-top: 1px; font-size: 1rem; } .g10 { margin-top: 80px; } .t10 .quote { margin-top: 1px; font-size: 1rem; } .g11 { margin-top: 120px; } .t11 .quote { margin-top: 1px; font-size: 1rem; } /* Corrige o espaço vazio da imagem 14 (1ª imagem do g8) */ .g8 .gallery-item:nth-child(1) img { height: auto; } .g8 .gallery-item:nth-child(1) { gap: 2px; } /* Deixa os labels de g9 e g10 em uma única linha */ .g9 .gallery-item:nth-child(1) .label, .g10 .gallery-item:nth-child(1) .label { white-space: nowrap; font-size: 10px; }