/* Cross Link Partners — Animations Toate efectele sunt controlate via clasa .js pe . Fără JS activ → totul rămâne vizibil. */ /* ── Page fade-in ─────────────────────────────────────────────────────────── */ @keyframes clp-page-in { from { opacity: 0; } to { opacity: 1; } } .js body { animation: clp-page-in .45s cubic-bezier(.16,1,.3,1) both; } /* ── Scroll reveal ────────────────────────────────────────────────────────── */ .js .clp-reveal { opacity: 0; transform: translateY(26px); transition: opacity .75s cubic-bezier(.16,1,.3,1), transform .75s cubic-bezier(.16,1,.3,1); } .js .clp-reveal.is-visible { opacity: 1; transform: translateY(0); } /* Stagger delays (aplicat automat pe copii de JS) */ .js .clp-reveal[data-delay="1"] { transition-delay: 80ms; } .js .clp-reveal[data-delay="2"] { transition-delay: 160ms; } .js .clp-reveal[data-delay="3"] { transition-delay: 240ms; } .js .clp-reveal[data-delay="4"] { transition-delay: 320ms; } .js .clp-reveal[data-delay="5"] { transition-delay: 400ms; } .js .clp-reveal[data-delay="6"] { transition-delay: 480ms; } .js .clp-reveal[data-delay="7"] { transition-delay: 560ms; } .js .clp-reveal[data-delay="8"] { transition-delay: 640ms; } .js .clp-reveal[data-delay="9"] { transition-delay: 720ms; } /* ── Red tick — draw from left ───────────────────────────────────────────── */ .js .clp-tick { width: 0 !important; transition: width .6s cubic-bezier(.16,1,.3,1) !important; } .js .clp-tick.is-visible { width: 32px !important; } /* ── Eyebrow label — slide in after tick ─────────────────────────────────── */ .js .clp-eyebrow { opacity: 0; transform: translateX(-10px); transition: opacity .5s ease .25s, transform .5s cubic-bezier(.16,1,.3,1) .25s; } .js .clp-section-label.is-visible .clp-eyebrow { opacity: 1; transform: translateX(0); } /* ── CTA — shimmer sweep on hover ────────────────────────────────────────── */ .clp-cta { position: relative; overflow: hidden; } .clp-cta::after { content: ''; position: absolute; top: 0; left: -100%; width: 55%; height: 100%; background: linear-gradient( 90deg, transparent, rgba(255,255,255,.13), transparent ); transform: skewX(-18deg); transition: left .55s ease; pointer-events: none; } .clp-cta:hover::after { left: 160%; } /* ── Project / service cards — lift on hover ─────────────────────────────── */ .clp-proj-card, .clp-proj-item, .clp-service-item { transition: transform .3s cubic-bezier(.16,1,.3,1), box-shadow .3s ease; } .clp-proj-card:hover, .clp-proj-item:hover { transform: translateY(-6px); box-shadow: 0 16px 40px rgba(0,0,0,.55); } .clp-service-item:hover { transform: translateY(-3px); } /* Team member hover */ .clp-team-member { transition: transform .3s cubic-bezier(.16,1,.3,1); } .clp-team-member:hover { transform: translateY(-4px); } /* ── Role rows — subtle left-border accent on hover ─────────────────────── */ .clp-role-row { border-left: 2px solid transparent; padding-left: 0; transition: border-color .2s ease, padding-left .2s ease; } .clp-role-row:hover { border-left-color: #E01C24; padding-left: 12px; } /* ── Placeholder shimmer ─────────────────────────────────────────────────── */ @keyframes clp-shimmer { 0% { background-position: -800px 0, 0 0; } 100% { background-position: 800px 0, 0 0; } } .clp-ph { background-image: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.04) 50%, transparent 100%), repeating-linear-gradient(135deg, rgba(255,255,255,.025) 0 2px, transparent 2px 14px); background-size: 800px 100%, 100% 100%; background-repeat: no-repeat, repeat; animation: clp-shimmer 2.4s ease-in-out infinite; } /* ── Nav link hover — already in design-system, add smooth color ─────────── */ .clp-nav-link { transition: color .2s ease; } /* ── Footer tagline — subtle entrance ───────────────────────────────────────*/ footer .clp-accent { display: inline-block; transition: letter-spacing .4s ease; } footer:hover .clp-accent { letter-spacing: .02em; } /* ── Reduced motion — disable everything ─────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .js body { animation: none !important; } .js .clp-reveal, .js .clp-eyebrow { opacity: 1 !important; transform: none !important; transition: none !important; } .js .clp-tick { width: 32px !important; transition: none !important; } .clp-cta::after { display: none; } .clp-proj-card, .clp-proj-item, .clp-service-item, .clp-team-member, .clp-role-row { transition: none !important; } .clp-ph { animation: none !important; } }