în și body devine transparent (html păstrează --color-bg ca fundal de bază). */ .dot-field { position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: radial-gradient(circle at center, rgba(101, 214, 158, 0.14) 1.2px, transparent 1.6px); background-size: 24px 24px; background-position: center; /* fade fin sus/jos ca punctele să nu „taie" brusc la margini */ -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 6%, #000 94%, transparent 100%); } /* glow mint discret în centru-sus, peste puncte, ca să aibă adâncime */ .dot-field::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 45% at 50% 0%, rgba(101, 214, 158, 0.06), transparent 70%); } @media (prefers-reduced-motion: reduce) { /* punctele sunt statice oricum — nimic de oprit */ } /* ── LIQUID ETHER — container fundal hero ──────────────────────────── */ .liquid-ether { position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; /* nu fură click/scroll; mouse-ul e citit pe window */ /* fundal ambient subtil — vizibil prin fluid (fluidul e transparent în repaus) și ca bază înainte ca WebGL să picteze */ background: radial-gradient(60% 50% at 50% 0%, rgba(101, 214, 158, 0.10), transparent 70%); } .liquid-ether canvas { display: block; width: 100% !important; height: 100% !important; } /* mască fină de fade jos ca textul/secțiunea următoare să respire */ .liquid-ether::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, transparent 55%, var(--color-bg) 100%); } /* Fallback static (reduced-motion / WebGL indisponibil) — gradient mint blând */ .liquid-ether--static { background: radial-gradient(45% 40% at 30% 15%, rgba(101, 214, 158, 0.16), transparent 70%), radial-gradient(40% 40% at 75% 30%, rgba(130, 224, 178, 0.10), transparent 70%), radial-gradient(60% 50% at 50% 0%, rgba(101, 214, 158, 0.08), transparent 70%); } /* ── HERO STACKING ───────────────────────────────────────────────── Pe pagina Claude (.hero) copiii sunt statici → îi ridicăm peste fluid. Pe index (.hero-section) conținutul are deja z-index propriu. */ .hero > :not(.liquid-ether) { position: relative; z-index: 1; } /* ── TITLU ANIMAT (blur split, per cuvânt) ─────────────────────────── */ .fx-title-ready .fx-word { display: inline-block; white-space: pre; /* păstrează spațiile din span */ opacity: 0; filter: blur(12px); transform: translateY(0.4em); will-change: opacity, filter, transform; } .fx-title-ready.fx-title-in .fx-word { opacity: 1; filter: blur(0); transform: none; transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), filter 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); transition-delay: calc(var(--i, 0) * 45ms); } /* ── SHINY (sheen care trece — badge/pill) ─────────────────────────── */ .fx-shiny { position: relative; overflow: hidden; isolation: isolate; } .fx-shiny::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient( 110deg, transparent 30%, rgba(255, 255, 255, 0.45) 48%, rgba(255, 255, 255, 0.55) 52%, transparent 70% ); transform: translateX(-130%); } @media (prefers-reduced-motion: no-preference) { .fx-shiny::after { animation: fx-shine 4.5s ease-in-out 1.2s infinite; } } @keyframes fx-shine { 0% { transform: translateX(-130%); } /* o singură trecere, apoi pauză lungă */ 18% { transform: translateX(130%); } 100% { transform: translateX(130%); } } /* ── SCROLL REVEAL ───────────────────────────────────────────────── Stările "ascuns" sunt active DOAR sub .fx-anim (setat în când nu e reduced-motion). Fără JS / fără .fx-anim → totul vizibil normal. */ .fx-anim [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s cubic-bezier(0.16, 1, 0.3, 1), transform 0.7s cubic-bezier(0.16, 1, 0.3, 1); } .fx-anim [data-reveal].fx-revealed { opacity: 1; transform: none; } /* stagger pe copiii containerului */ .fx-anim [data-reveal-stagger] > * { opacity: 0; transform: translateY(20px); transition: opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1), transform 0.6s cubic-bezier(0.16, 1, 0.3, 1); } .fx-anim [data-reveal-stagger].fx-revealed > * { opacity: 1; transform: none; transition-delay: calc(var(--i, 0) * 70ms); } /* ── SPOTLIGHT CARDS (glow care urmărește mouse-ul) ────────────────── */ [data-spotlight] { position: relative; } [data-spotlight]::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 0; opacity: 0; transition: opacity 0.35s ease; background: radial-gradient( 220px circle at var(--sx, 50%) var(--sy, 50%), rgba(101, 214, 158, 0.18), rgba(101, 214, 158, 0.06) 35%, transparent 60% ); } @media (hover: hover) { [data-spotlight].fx-spot-on::before { opacity: 1; } } /* conținutul cardului peste glow */ [data-spotlight] > * { position: relative; z-index: 1; } /* ── Reduced motion — anulează tot ce mișcă ────────────────────────── */ @media (prefers-reduced-motion: reduce) { .fx-title-ready .fx-word { opacity: 1 !important; filter: none !important; transform: none !important; } .fx-anim [data-reveal], .fx-anim [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; } }