/* ========================================================================== ARA — Futuristic animation layer Loaded after styles.css; every rule is scoped to html.fx, which is added by an inline script only when prefers-reduced-motion is off and removed by js/animations.js if GSAP fails to load. Without .fx the site renders exactly as before. ========================================================================== */ /* -------------------------------------------------------------------------- Hero: initial hidden states (GSAP intro timeline reveals via autoAlpha) -------------------------------------------------------------------------- */ html.fx .hero-logo, html.fx .hero-title, html.fx .hero-buttons { animation: none; visibility: hidden; } html.fx .hero-logo { position: relative; } html.fx .hero-logo-img { animation: none; } html.fx .hero-logo-img.is-floating { animation: fxFloat 4s ease-in-out infinite; } @keyframes fxFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-14px); } } /* Logo halo — soft pulsing blue ring behind the logo */ html.fx .hero-logo-halo { position: absolute; top: 50%; left: 50%; width: 340px; height: 240px; transform: translate(-50%, -50%); border-radius: 50%; background: radial-gradient(ellipse at center, rgba(30, 87, 140, 0.16) 0%, rgba(30, 87, 140, 0.06) 45%, transparent 70%); filter: blur(6px); pointer-events: none; z-index: -1; opacity: 0; } html.fx .hero-logo-halo.is-pulsing { animation: fxHaloPulse 4s ease-in-out infinite; } @keyframes fxHaloPulse { 0%, 100% { opacity: 0.7; transform: translate(-50%, -50%) scale(1); } 50% { opacity: 1; transform: translate(-50%, -50%) scale(1.12); } } .hero-logo-halo { display: none; } html.fx .hero-logo-halo { display: block; } /* Split headline words */ html.fx .hero-word { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: 0.12em; margin-bottom: -0.12em; } html.fx .hero-word-inner { display: inline-block; background-image: linear-gradient(135deg, var(--primary-blue) 0%, var(--primary-blue-light) 50%, var(--accent-red) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; /* background-size/position set per word from JS to keep the gradient continuous across the whole headline */ } /* Hero canvas particle network */ .hero-canvas { display: none; } html.fx .hero-canvas { display: block; position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; } @media (max-width: 768px) { html.fx .hero-canvas { display: none; } } /* Scroll-down indicator */ .scroll-indicator { display: none; } html.fx .scroll-indicator { display: flex; justify-content: center; position: absolute; bottom: 28px; left: 50%; margin-left: -13px; width: 26px; height: 44px; border: 2px solid rgba(30, 87, 140, 0.45); border-radius: 15px; z-index: 3; visibility: hidden; } html.fx .scroll-indicator-dot { width: 5px; height: 5px; margin-top: 8px; border-radius: 50%; background: var(--accent-red); animation: fxScrollBob 2s ease-in-out infinite; } @keyframes fxScrollBob { 0% { transform: translateY(0); opacity: 1; } 70% { transform: translateY(18px); opacity: 0; } 100% { transform: translateY(0); opacity: 0; } } @media (max-width: 768px) { html.fx .scroll-indicator { display: none; } } /* Hero buttons: shine sweep + magnetic-friendly transitions */ html.fx .hero-buttons .btn { position: relative; overflow: hidden; /* exclude transform so GSAP magnetic motion isn't CSS-transitioned */ transition: background 0.3s ease, color 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease; } html.fx .hero-buttons .btn:hover { transform: none; } html.fx .hero-buttons .btn::after { content: ''; position: absolute; top: -20%; left: 0; width: 45%; height: 140%; background: linear-gradient(105deg, transparent 0%, rgba(255, 255, 255, 0.5) 50%, transparent 100%); transform: translateX(-160%) skewX(-18deg); animation: fxShineSweep 3.6s ease-in-out infinite; pointer-events: none; } @keyframes fxShineSweep { 0% { transform: translateX(-160%) skewX(-18deg); } 38%, 100% { transform: translateX(360%) skewX(-18deg); } } /* -------------------------------------------------------------------------- Navbar: scroll progress bar + active link -------------------------------------------------------------------------- */ .scroll-progress { display: none; } html.fx .scroll-progress { display: block; position: absolute; left: 0; bottom: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--primary-blue) 0%, var(--accent-red) 100%); transform: scaleX(0); transform-origin: left center; pointer-events: none; } html.fx .nav-menu a.active { color: var(--accent-red); } html.fx .nav-menu a.active::after { width: 100%; } /* -------------------------------------------------------------------------- Section titles: underline draw + dot pop -------------------------------------------------------------------------- */ html.fx .title-underline::after { transform: translate(-50%, -50%) scale(0); } html.fx .title-underline.drawn::after { animation: fxDotPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) 0.45s forwards; } @keyframes fxDotPop { from { transform: translate(-50%, -50%) scale(0); } to { transform: translate(-50%, -50%) scale(1); } } /* -------------------------------------------------------------------------- Cards: tilt-friendly transitions, glow shadows, animated gradient border -------------------------------------------------------------------------- */ @media (hover: hover) and (pointer: fine) { /* exclude transform from CSS transitions — GSAP owns it for tilt */ html.fx .service-card { transition: box-shadow 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), border-color 0.5s cubic-bezier(0.175, 0.885, 0.32, 1.275), background 0.5s ease; } html.fx .service-card:hover { transform: none; will-change: transform; } html.fx .team-member { transition: none; } html.fx .team-member:hover { transform: none; } /* glow shadows (blue + red tint) */ html.fx .service-card:hover, html.fx .partner-card:hover, html.fx .rearmenia-card:hover { box-shadow: 0 20px 45px rgba(30, 87, 140, 0.22), 0 8px 30px rgba(224, 41, 46, 0.12) !important; } /* animated conic gradient border on hover */ html.fx .service-card:hover, html.fx .partner-card:hover { border: 1px solid transparent !important; background: linear-gradient(135deg, rgba(255, 255, 255, 0.97) 0%, rgba(255, 255, 255, 0.94) 100%) padding-box, conic-gradient(from var(--fx-ang, 0deg), #1E578C, #E0292E, #1E578C) border-box !important; } @supports (background: conic-gradient(from var(--fx-ang, 0deg), red, blue)) { html.fx .service-card:hover, html.fx .partner-card:hover { animation: fxSpinBorder 3s linear infinite; } } } @property --fx-ang { syntax: ''; initial-value: 0deg; inherits: false; } @keyframes fxSpinBorder { to { --fx-ang: 360deg; } } /* -------------------------------------------------------------------------- Images: team photo hover + slideshow Ken Burns -------------------------------------------------------------------------- */ html.fx .team-member-image img { transition: transform 0.6s ease, filter 0.6s ease; } html.fx .team-member:hover .team-member-image img { transform: scale(1.08); filter: saturate(1.15); } html.fx .slideshow-slide.active img { animation: fxKenBurns 6s ease-out forwards; } @keyframes fxKenBurns { from { transform: scale(1); } to { transform: scale(1.07); } } /* -------------------------------------------------------------------------- Cursor glow (desktop only, created by JS) -------------------------------------------------------------------------- */ html.fx .cursor-glow { position: fixed; top: 0; left: 0; width: 360px; height: 360px; margin: -180px 0 0 -180px; border-radius: 50%; background: radial-gradient(circle, rgba(30, 87, 140, 0.10) 0%, rgba(30, 87, 140, 0.04) 40%, transparent 65%); pointer-events: none; z-index: 4; opacity: 0; transition: background 0.4s ease; } html.fx .cursor-glow.is-hot { background: radial-gradient(circle, rgba(224, 41, 46, 0.10) 0%, rgba(224, 41, 46, 0.04) 40%, transparent 65%); } @media (hover: none), (pointer: coarse) { html.fx .cursor-glow { display: none; } }