/* As fontes são carregadas via no (preconnect + paralelo). O @import aqui bloqueava a renderização e serializava os downloads. */ /* Variables */ :root { --bg-color: #03070c; --bg-gradient-start: #040d1a; --bg-gradient-end: #010408; --primary-teal: #14b8a6; --primary-cyan: #06b6d4; --primary-blue: #007bff; --glow-color: rgba(20, 184, 166, 0.3); --glass-bg: rgba(255, 255, 255, 0.02); --glass-border: rgba(255, 255, 255, 0.08); --text-primary: #f8fafc; --text-secondary: #94a3b8; --text-muted: #64748b; --cursor-dot-size: 8px; --cursor-ring-size: 36px; } /* Base Settings */ * { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; background-color: var(--bg-color); color: var(--text-primary); font-family: 'Plus Jakarta Sans', sans-serif; overflow-x: hidden; } body { min-height: 100vh; position: relative; background: linear-gradient(135deg, var(--bg-gradient-start) 0%, var(--bg-gradient-end) 100%); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--bg-gradient-end); } ::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, 0.1); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--primary-teal); } /* Custom Cursor (Desktop Only) */ @media (min-width: 768px) { body, a, button, select, input, textarea, .cursor-hover { cursor: none !important; } #cursor-dot { position: fixed; top: 0; left: 0; width: var(--cursor-dot-size); height: var(--cursor-dot-size); background-color: var(--primary-teal); border-radius: 50%; pointer-events: none; z-index: 9999; transform: translate(-50%, -50%); box-shadow: 0 0 12px var(--primary-teal); } #cursor-ring { position: fixed; top: 0; left: 0; width: var(--cursor-ring-size); height: var(--cursor-ring-size); border: 1.5px solid rgba(20, 184, 166, 0.4); border-radius: 50%; pointer-events: none; z-index: 9998; transform: translate(-50%, -50%) scale(1); backdrop-filter: blur(1px); transition: transform 0.2s ease, width 0.3s ease, height 0.3s ease, background-color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .cursor-hovered #cursor-ring { width: 60px; height: 60px; background-color: rgba(20, 184, 166, 0.08); border-color: var(--primary-cyan); box-shadow: 0 0 25px rgba(6, 182, 212, 0.3); } } /* Ambient Background Light / Blobs */ .ambient-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .liquid-blob { position: absolute; border-radius: 50%; filter: blur(120px); opacity: 0.18; mix-blend-mode: screen; } .blob-teal { width: 500px; height: 500px; background: radial-gradient(circle, var(--primary-teal) 0%, transparent 70%); top: -100px; left: -100px; animation: blob-float-1 25s infinite alternate ease-in-out; } .blob-cyan { width: 600px; height: 600px; background: radial-gradient(circle, var(--primary-cyan) 0%, transparent 70%); top: 30%; right: -150px; animation: blob-float-2 30s infinite alternate ease-in-out; } .blob-blue { width: 400px; height: 400px; background: radial-gradient(circle, var(--primary-blue) 0%, transparent 70%); bottom: -50px; left: 25%; animation: blob-float-3 20s infinite alternate ease-in-out; } @keyframes blob-float-1 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(120px, 80px) scale(1.15); } } @keyframes blob-float-2 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(-100px, 150px) scale(0.9); } } @keyframes blob-float-3 { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(60px, -80px) scale(1.1); } } /* Grid overlay */ .grid-overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: radial-gradient(rgba(255, 255, 255, 0.03) 1px, transparent 1px); background-size: 40px 40px; pointer-events: none; z-index: 0; opacity: 0.8; } /* Glass Panel Styling */ .glass-panel { background: var(--glass-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); border-top: 1px solid rgba(255, 255, 255, 0.12); border-left: 1px solid rgba(255, 255, 255, 0.08); border-right: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.04); box-shadow: 0 15px 35px 0 rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05); transition: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .glass-panel:hover { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.2); box-shadow: 0 20px 50px rgba(20, 184, 166, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.1); } /* Typography styles */ h1, h2, h3, h4, .font-heading { font-family: 'Oswald', sans-serif; font-weight: 300; letter-spacing: -0.02em; } .text-glow { text-shadow: 0 0 30px rgba(20, 184, 166, 0.35); } .text-gradient { background: linear-gradient(135deg, #ffffff 40%, var(--primary-teal) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .text-gradient-cyan { background: linear-gradient(135deg, var(--primary-teal) 0%, var(--primary-cyan) 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Navigation capsule */ nav { position: fixed; top: 0; left: 0; width: 100%; z-index: 100; padding: 1.5rem; display: flex; justify-content: center; } .nav-container { width: 100%; max-w: 1100px; display: flex; justify-content: space-between; align-items: center; border-radius: 9999px; padding: 0.5rem 1rem 0.5rem 1.5rem; } .logo { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 1.1rem; letter-spacing: -0.05em; display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--text-primary); } .logo-dot { width: 8px; height: 8px; background-color: var(--primary-teal); border-radius: 50%; box-shadow: 0 0 10px var(--primary-teal); animation: pulse-teal 2s infinite; } .nav-links { display: none; align-items: center; gap: 2rem; list-style: none; } @media (min-width: 768px) { .nav-links { display: flex; } } .nav-link { font-size: 0.85rem; font-weight: 500; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); text-decoration: none; transition: color 0.3s ease, text-shadow 0.3s ease; } .nav-link:hover { color: var(--text-primary); text-shadow: 0 0 12px rgba(255, 255, 255, 0.4); } .nav-cta { padding: 0.6rem 1.5rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; text-decoration: none; color: var(--text-primary); background-color: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.1); transition: all 0.3s ease; } .nav-cta:hover { background-color: var(--text-primary); color: #000; box-shadow: 0 0 20px rgba(255, 255, 255, 0.2); transform: translateY(-1px); } /* Hero Section */ .hero-section { min-height: 100vh; display: flex; align-items: center; padding: 8rem 1.5rem 4rem; position: relative; z-index: 10; } .hero-container { width: 100%; max-w: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr; gap: 4rem; align-items: center; } @media (min-width: 1024px) { .hero-container { grid-template-columns: 1.2fr 0.8fr; } } /* Left Content Area */ .hero-content { display: flex; flex-direction: column; align-items: flex-start; } /* Version / status badge */ .status-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 9999px; margin-bottom: 2rem; backdrop-filter: blur(10px); } .status-dot { width: 6px; height: 6px; background-color: var(--primary-teal); border-radius: 50%; box-shadow: 0 0 8px var(--primary-teal); position: relative; } .status-dot::after { content: ''; position: absolute; inset: -3px; border-radius: 50%; border: 1px solid var(--primary-teal); animation: ripple 1.5s infinite ease-out; } .status-text { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-secondary); font-weight: 600; } /* Text Reveal Splits */ .split-line { overflow: hidden; display: block; } .split-line span { display: block; transform: translateY(100%); animation: reveal-up 1s cubic-bezier(0.23, 1, 0.32, 1) forwards; } .split-line:nth-child(1) span { animation-delay: 0.1s; } .split-line:nth-child(2) span { animation-delay: 0.25s; } .hero-headline { font-size: 3rem; line-height: 1.1; text-align: left; margin-bottom: 1.5rem; text-transform: uppercase; font-weight: 300; } @media (min-width: 768px) { .hero-headline { font-size: 4.8rem; } } .hero-subheadline { font-size: 1rem; line-height: 1.6; color: var(--text-secondary); margin-bottom: 2.5rem; font-weight: 300; max-w: 600px; opacity: 0; animation: fade-in-up 1s cubic-bezier(0.23, 1, 0.32, 1) 0.5s forwards; } @media (min-width: 768px) { .hero-subheadline { font-size: 1.15rem; } } /* CTAs */ .hero-ctas { display: flex; flex-direction: column; width: 100%; gap: 1rem; opacity: 0; animation: fade-in-up 1s cubic-bezier(0.23, 1, 0.32, 1) 0.65s forwards; } @media (min-width: 640px) { .hero-ctas { flex-direction: row; width: auto; } } /* Premium Beam Button (conic beam sweeping the border) — mirrors the "Start free" reference in design-system.html */ .btn-beam { position: relative; display: inline-flex; align-items: center; justify-content: center; padding: 1.1rem 2.2rem; border-radius: 9999px; overflow: hidden; text-decoration: none; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: #fff; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* Border layer: a rounded clip holding the spinning conic disc */ .btn-beam-border { position: absolute; inset: 0; border-radius: 9999px; overflow: hidden; padding: 1.5px; z-index: 0; pointer-events: none; } /* Huge conic disc rotating around the button center — only the slice that crosses the 1.5px ring is visible, so the beam runs the border */ .btn-beam-border::before { content: ''; position: absolute; inset: -100%; background: conic-gradient(from 0deg, transparent 0 300deg, var(--primary-teal) 345deg, var(--primary-cyan) 360deg); animation: beam-spin 3s linear infinite; } /* Inner fill covers the center, leaving the 1.5px beam ring */ .btn-beam-border::after { content: ''; position: absolute; inset: 1.5px; border-radius: 9999px; background-color: #060e18; } /* Dark face inside the ring, with decorations */ .btn-beam-bg { position: absolute; inset: 2px; border-radius: 9999px; overflow: hidden; background-color: #060e18; z-index: 1; } .btn-beam-shine { position: absolute; inset: 2px; background: linear-gradient(to bottom, rgba(20, 184, 166, 0.18), transparent); z-index: 2; border-radius: 9999px; } /* Static glow pooled at the bottom of the face */ .btn-beam-glow { position: absolute; bottom: -10%; left: 50%; transform: translateX(-50%); width: 66%; height: 60%; border-radius: 9999px; background: rgba(20, 184, 166, 0.3); filter: blur(26px); z-index: 3; pointer-events: none; transition: background 0.4s ease; } .btn-beam .btn-text { position: relative; z-index: 10; display: flex; align-items: center; gap: 0.5rem; } .btn-beam:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 0 40px -10px rgba(20, 184, 166, 0.6); } .btn-beam:hover .btn-beam-glow { background: rgba(20, 184, 166, 0.5); } /* Glass Outline Button */ .btn-glass { display: inline-flex; align-items: center; justify-content: center; padding: 1.1rem 2.2rem; border-radius: 9999px; text-decoration: none; font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-primary); border: 1.5px solid var(--primary-teal); background-color: rgba(20, 184, 166, 0.04); backdrop-filter: blur(10px); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; box-shadow: 0 0 12px rgba(20, 184, 166, 0.45), 0 0 4px rgba(20, 184, 166, 0.6), inset 0 0 10px rgba(20, 184, 166, 0.12); } .btn-glass::before { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08), transparent); transition: left 0.6s cubic-bezier(0.4, 0, 0.2, 1); } .btn-glass:hover::before { left: 100%; } .btn-glass:hover { color: var(--text-primary); border-color: var(--primary-cyan); background-color: rgba(20, 184, 166, 0.08); transform: translateY(-2px); box-shadow: 0 0 22px rgba(6, 182, 212, 0.6), 0 0 8px rgba(6, 182, 212, 0.7), inset 0 0 14px rgba(20, 184, 166, 0.2); } /* Right Media Area */ .hero-media { position: relative; display: flex; justify-content: center; align-items: center; opacity: 0; animation: scale-in-opacity 1s cubic-bezier(0.23, 1, 0.32, 1) 0.4s forwards; } /* Glass Green profile card wrapper */ .profile-card-wrapper { position: relative; width: 100%; max-width: 380px; } .glow-card { perspective: 1000px; transform-style: preserve-3d; width: 100%; aspect-ratio: 0.85; border-radius: 32px; overflow: hidden; position: relative; cursor: pointer; } .card-border-glow { position: absolute; inset: 0; border-radius: 32px; padding: 1px; background: linear-gradient(135deg, rgba(20, 184, 166, 0.4) 0%, rgba(255, 255, 255, 0.02) 40%, rgba(6, 182, 212, 0.3) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; z-index: 5; } .profile-card-content { width: 100%; height: 100%; position: relative; transform-style: preserve-3d; transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1); background: rgba(14, 26, 42, 0.4); } .profile-image-container { width: 100%; height: 100%; position: relative; overflow: hidden; border-radius: 31px; } .profile-image-container img { width: 100%; height: 100%; object-fit: cover; object-position: center; transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1), filter 0.8s ease; filter: grayscale(20%) contrast(1.05) brightness(0.95); } /* Card Glow Reflection Overlay */ .card-shine { position: absolute; inset: 0; background: radial-gradient(circle at 50% 50%, rgba(20, 184, 166, 0.15) 0%, transparent 60%); pointer-events: none; z-index: 3; opacity: 0; transition: opacity 0.5s ease; } /* Image Zoom & Lighting on Hover */ .glow-card:hover img { transform: scale(1.06) rotate(1deg); filter: grayscale(0%) contrast(1.1) brightness(1.05); } .glow-card:hover .card-shine { opacity: 1; } /* 3D tilt adjustments */ .glow-card:hover { box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 45px rgba(20, 184, 166, 0.2), 0 0 90px rgba(6, 182, 212, 0.1); } /* Floating Widgets / Indicators */ .floating-widget { position: absolute; z-index: 10; display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1.25rem; border-radius: 20px; font-weight: 600; font-size: 0.8rem; color: var(--text-primary); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); animation: widget-float 6s infinite ease-in-out; border: 1px solid rgba(255, 255, 255, 0.08); pointer-events: auto; } .widget-icon { width: 32px; height: 32px; border-radius: 12px; background: rgba(20, 184, 166, 0.15); border: 1px solid rgba(20, 184, 166, 0.3); display: flex; align-items: center; justify-content: center; color: var(--primary-teal); box-shadow: 0 0 10px rgba(20, 184, 166, 0.2); transition: all 0.3s ease; } .floating-widget:hover { transform: translateY(-4px) scale(1.05) !important; border-color: rgba(20, 184, 166, 0.4); box-shadow: 0 15px 30px rgba(20, 184, 166, 0.2); } .floating-widget:hover .widget-icon { background: rgba(20, 184, 166, 0.3); color: #fff; box-shadow: 0 0 15px var(--primary-teal); } /* Floating positions */ .widget-1 { top: 15%; left: -20%; animation-delay: 0s; } .widget-2 { bottom: 25%; right: -15%; animation-delay: -2s; } .widget-3 { bottom: -8%; left: 10%; animation-delay: -4s; } /* Animations */ @keyframes pulse-teal { 0%, 100% { transform: scale(1); opacity: 1; box-shadow: 0 0 10px var(--primary-teal); } 50% { transform: scale(1.2); opacity: 0.7; box-shadow: 0 0 20px var(--primary-teal); } } @keyframes ripple { 0% { transform: scale(1); opacity: 0.8; } 100% { transform: scale(2.4); opacity: 0; } } @keyframes reveal-up { 0% { transform: translateY(100%); } 100% { transform: translateY(0); } } @keyframes fade-in-up { 0% { opacity: 0; transform: translateY(20px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes scale-in-opacity { 0% { opacity: 0; transform: scale(0.96); } 100% { opacity: 1; transform: scale(1); } } @keyframes widget-float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes beam-spin { to { transform: rotate(360deg); } } /* ========================================== PROJECTS SECTION (segunda dobra) Fundo distinto da seção 1 (hero é teal): aqui um índigo/roxo profundo + grid pontilhado ========================================== */ .projects-section { position: relative; z-index: 2; padding: 7rem 1.5rem 8rem; background: radial-gradient(ellipse at 50% 0%, #16112e 0%, #0a0818 45%, #06050d 100%); overflow: hidden; } /* Textura de grid pontilhado (estilo finex), suavizada nas bordas */ .projects-bg-grid { position: absolute; inset: 0; background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px); background-size: 40px 40px; opacity: 0.5; pointer-events: none; -webkit-mask-image: radial-gradient(ellipse at 50% 25%, #000 0%, transparent 80%); mask-image: radial-gradient(ellipse at 50% 25%, #000 0%, transparent 80%); } .projects-container { position: relative; z-index: 1; width: 100%; /* Mais estreito + centralizado: mantém os cards de vídeo (9:16) num tamanho compacto no desktop em vez de esticá-los a 1/3 de 1200px. */ max-width: 840px; margin: 0 auto; } /* Eyebrow numerado + label */ .section-head { margin-bottom: 3.5rem; } .eyebrow { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 1.4rem; } .eyebrow-num { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; font-size: 11px; font-weight: 600; color: var(--primary-cyan); background: rgba(20, 184, 166, 0.1); border: 1px solid rgba(20, 184, 166, 0.25); box-shadow: 0 0 12px rgba(20, 184, 166, 0.2); } .eyebrow-label { font-size: 0.8rem; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--text-muted); } .projects-title { font-size: clamp(2.4rem, 5vw, 3.75rem); line-height: 1.05; font-weight: 300; } .projects-title .title-dim { color: #4b5563; } /* Grid de projetos */ .projects-grid { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 768px) { .projects-grid { grid-template-columns: repeat(3, 1fr); } /* Card largo (YouTube, imagem landscape) ocupa 2/3 — avatar fica 1/3 */ .project-card.wide { grid-column: span 2; } } /* Vídeo vertical (avatar): enquadra mais no rosto, evitando cortar a cabeça */ .media-top { object-position: center 22%; } @media (max-width: 767px) { /* Widgets flutuantes do hero: no mobile o card ocupa quase toda a largura, então os offsets negativos do desktop vazavam e eram cortados nas bordas. Encolhe um pouco e ancora dentro das bordas do card. */ .floating-widget { font-size: 0.72rem; padding: 0.5rem 0.85rem; gap: 0.5rem; border-radius: 14px; } .floating-widget .widget-icon { width: 26px; height: 26px; border-radius: 9px; } .widget-1 { top: 8%; left: 0; } .widget-2 { bottom: 22%; right: 0; } .widget-3 { bottom: -2%; left: 8%; } } /* ========================================== CONTACT SECTION (CTA final) ========================================== */ .contact-section { position: relative; z-index: 2; padding: 7rem 1.5rem 9rem; display: flex; justify-content: center; overflow: hidden; } /* Brilho teal suave atrás do card */ .contact-glow { position: absolute; top: 50%; left: 50%; width: 620px; height: 620px; max-width: 110%; transform: translate(-50%, -50%); background: radial-gradient(circle, rgba(20, 184, 166, 0.16) 0%, transparent 65%); pointer-events: none; z-index: 0; } .contact-card { position: relative; z-index: 1; width: 100%; max-width: 720px; padding: 3.5rem 3rem; border-radius: 28px; display: flex; flex-direction: column; align-items: center; text-align: center; } .contact-card .eyebrow { justify-content: center; } .contact-title { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; margin-bottom: 1.1rem; max-width: 18ch; } .contact-text { font-size: 1.05rem; font-weight: 300; line-height: 1.6; color: var(--text-secondary); max-width: 46ch; margin-bottom: 2.3rem; } @media (max-width: 600px) { .contact-card { padding: 2.5rem 1.5rem; } } /* Card de projeto — o externo cuida da perspectiva 3D + entrada/elevação */ .project-card { position: relative; height: 460px; border-radius: 22px; perspective: 1000px; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.7s ease; opacity: 0; transform: translateY(28px); } /* Cards de vídeo em formato vertical 9:16 — mostram o quadro inteiro, sem cortar na altura (object-fit: cover não corta quando o card tem a mesma proporção do vídeo). Em 3 colunas no desktop, cada um ocupa 1/3 da largura. O card do YouTube (imagem landscape) não é afetado. */ .project-card.video-portrait { height: auto; aspect-ratio: 9 / 16; } @media (min-width: 768px) { /* Cards de altura diferente (vídeo vertical vs imagem landscape) na mesma linha: alinha pelo topo em vez de esticar. */ .projects-grid { align-items: start; } } /* Estado revelado (via IntersectionObserver) */ .project-card.in-view { opacity: 1; transform: translateY(0); } /* O card visível (borda, fundo, mídia) — este é o elemento que inclina em 3D */ .project-card-inner { position: absolute; inset: 0; border-radius: 22px; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.1); background: #0a0a0c; box-shadow: 0 15px 40px rgba(0, 0, 0, 0.45); transform-style: preserve-3d; /* sem transição de transform aqui: o tilt acompanha o mouse na hora (fluido). o retorno suave ao tirar o mouse é aplicado via JS só no mouseleave. */ transition: border-color 0.5s ease, box-shadow 0.5s ease; will-change: transform; } .project-media { position: absolute; inset: 0; } /* Brilho que segue o mouse (atualizado via JS) */ .project-glare { position: absolute; inset: 0; z-index: 2; pointer-events: none; opacity: 0; mix-blend-mode: overlay; transition: opacity 0.4s ease; background: radial-gradient(circle at 50% 50%, rgba(255, 255, 255, 0.25), transparent 55%); } .project-video, .project-img { width: 100%; height: 100%; object-fit: cover; display: block; /* O card pai (com transform 3D) não recorta o vídeo nas quinas em alguns navegadores mobile — então arredondamos o próprio elemento de mídia. */ border-radius: 22px; transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1); } /* Todas as camadas inset:0 do card precisam acompanhar o arredondamento — senão suas quinas quadradas (ex.: o scrim escuro no rodapé) vazam por baixo da borda do card em navegadores mobile que não recortam via o pai com transform 3D. */ .project-media, .project-scrim, .project-glare { border-radius: 22px; } .project-media { overflow: hidden; } /* Scrim de baixo pra leitura do texto */ .project-scrim { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient(to top, rgba(0, 0, 0, 0.92) 0%, rgba(0, 0, 0, 0.35) 40%, transparent 70%); } /* Chip de categoria (glass) */ .project-chip { position: absolute; top: 1rem; left: 1rem; z-index: 3; padding: 0.4rem 0.7rem; border-radius: 7px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: #fff; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); } /* Bloco de título + descrição */ .project-info { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 1.6rem; } .project-name { font-size: 1.7rem; font-weight: 300; line-height: 1.1; letter-spacing: -0.01em; color: #fff; } .project-desc { margin-top: 0.45rem; font-size: 0.95rem; font-weight: 300; line-height: 1.5; color: #cbd5e1; } /* Hover: leve elevação no card, brilho teal e glare/zoom no inner */ .project-card:hover { transform: translateY(-6px); } .project-card:hover .project-card-inner { border-color: rgba(20, 184, 166, 0.4); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 30px rgba(20, 184, 166, 0.12); } .project-card:hover .project-glare { opacity: 1; } .project-card:hover .project-video, .project-card:hover .project-img { transform: scale(1.06); } /* Acessibilidade: sem animação de entrada nem tilt se o usuário preferir */ @media (prefers-reduced-motion: reduce) { .project-card { opacity: 1; transform: none; transition: none; } .project-card-inner { transform: none !important; transition: none; } }