/* ============================================================ CINEMATIC.CSS — Camada visual cinematográfica / futurista Inspirada em landing pages imersivas de jogos AAA: hero em tela cheia, tipografia gigante, capítulos com scroll-scrub, granulado de filme e brilhos neon. Paleta preservada: verdes (#33cc4a / #97f3b5), azul-marinho (#042951) e azul (#a3c9ff). Carregar por ÚLTIMO no . ============================================================ */ /* CSS variables moved to src/css/variables.css */ /* ============================================================ BASE ============================================================ */ html.cine-root { scroll-behavior: smooth; background: var(--cine-bg); } body.cine { padding-top: 0; /* header agora é overlay */ background: radial-gradient(1200px 700px at 85% -10%, rgba(4, 41, 81, 0.55), transparent 60%), radial-gradient(900px 600px at -10% 30%, rgba(0, 158, 32, 0.12), transparent 60%), var(--cine-bg); color: #e5eaf1; overflow-x: hidden; } body.cine::selection, body.cine *::selection { background: var(--cine-green); color: #02140a; } /* Scrollbar futurista */ body.cine::-webkit-scrollbar { width: 10px; } body.cine::-webkit-scrollbar-track { background: #02050c; } body.cine::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--cine-green), var(--cine-navy)); border-radius: 99px; } /* ============================================================ GRANULADO DE FILME (overlay global) ============================================================ */ .grain { position: fixed; inset: -100px; z-index: 2000; pointer-events: none; opacity: 0.055; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain-jitter 0.9s steps(4) infinite; } @keyframes grain-jitter { 0% { transform: translate(0, 0); } 25% { transform: translate(-40px, 30px); } 50% { transform: translate(30px, -50px); } 75% { transform: translate(-30px, -20px); } 100% { transform: translate(0, 0); } } /* ============================================================ INTRO LOADER ============================================================ */ #intro-loader { position: fixed; inset: 0; z-index: 3000; background: var(--cine-bg); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; } #intro-loader img { width: min(240px, 55vw); filter: drop-shadow(0 0 34px rgba(51, 204, 74, 0.45)); animation: loader-pulse 1.6s ease-in-out infinite; } @keyframes loader-pulse { 0%, 100% { opacity: 0.85; transform: scale(1); } 50% { opacity: 1; transform: scale(1.03); } } #intro-loader .loader-bar { width: min(240px, 55vw); height: 2px; background: rgba(255, 255, 255, 0.1); overflow: hidden; border-radius: 99px; } #intro-loader .loader-bar::before { content: ''; display: block; height: 100%; width: 40%; background: linear-gradient(90deg, transparent, var(--cine-green-soft), var(--cine-green)); animation: loader-sweep 1.1s ease-in-out infinite; } @keyframes loader-sweep { from { transform: translateX(-120%); } to { transform: translateX(320%); } } #intro-loader.done { transition: clip-path 0.9s cubic-bezier(0.76, 0, 0.24, 1), visibility 0s 0.9s; clip-path: inset(0 0 100% 0); visibility: hidden; } /* ============================================================ HEADER — overlay transparente, esconde ao rolar p/ baixo ============================================================ */ /* HEADER STYLES MOVED TO src/css/header.css */ /* HERO STYLES MOVED TO src/css/hero.css */ /* ============================================================ CAPÍTULOS — estilo discreto e compatível com o layout anterior ============================================================ */ .chapter { position: relative; padding: clamp(3rem, 8vh, 5rem) 0 1.25rem; overflow: hidden; isolation: isolate; } .chapter::before { display: none; } .chapter-inner { width: min(1120px, calc(100% - 1.5rem)); margin: 0 auto; padding: 0; border-radius: 0; overflow: visible; border: 0; background: transparent; backdrop-filter: none; box-shadow: none; } .chapter-num { margin: 0 0 0.4rem; font-size: 0.72rem; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); } .chapter-title { margin: 0; font-family: var(--font-display); font-size: clamp(1.6rem, 3vw, 2.4rem); line-height: 1.05; letter-spacing: 0.02em; color: var(--cine-white); text-transform: uppercase; } .chapter .fill { color: var(--cine-green-soft); text-shadow: none; } .cine-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.8s cubic-bezier(0.22, 1, 0.36, 1); } .cine-frame:hover img { transform: scale(1.05); } .cine-frame .frame-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 45%, rgba(3, 7, 17, 0.9) 100%); } /* Stat chip escuro */ .cine-stat { display: flex; flex-direction: column; align-items: center; padding: 1rem 1.6rem; background: var(--cine-glass); border: 1px solid var(--cine-glass-brd); clip-path: polygon(10px 0, 100% 0, 100% calc(100% - 10px), calc(100% - 10px) 100%, 0 100%, 0 10px); } .cine-stat strong { font-family: var(--font-display); font-weight: 400; font-size: 1.9rem; line-height: 1; } .cine-stat span { margin-top: 6px; font-size: 0.62rem; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 255, 255, 0.5); } /* ============================================================ AJUSTES NAS SEÇÕES EXISTENTES (fundo unificado escuro) ============================================================ */ body.cine .NossasServicos { background: transparent; } body.cine .reviews-section { background: transparent; } body.cine section#tecnologias { background: transparent !important; } body.cine .footer { background: linear-gradient(180deg, transparent, rgba(4, 41, 81, 0.35)), var(--cine-bg); border-top: 1px solid var(--cine-line); } /* ============================================================ RESPONSIVO ============================================================ */ @media (max-width: 820px) { .chapter-title { white-space: normal; word-break: break-word; } } @media (max-width: 520px) { } /* ============================================================ MOVIMENTO REDUZIDO ============================================================ */ @media (prefers-reduced-motion: reduce) { .grain, #intro-loader img, #intro-loader .loader-bar::before, #intro-loader .loader-bar::before { animation: none; } html.cine-root { scroll-behavior: auto; } }