/*! * Square Golf — animations.css * GSAP / CSS animation support styles — reusable across all pages */ /* ═══════════════════════════════════════════════════════════════ INITIAL STATES (guarded by .js-anim on ) Elements are hidden only when JS has confirmed it will animate them ═══════════════════════════════════════════════════════════════ */ .js-anim [data-animate] { opacity: 0; } .js-anim [data-stagger] > * { opacity: 0; } .js-anim .home-hero__title { opacity: 0; } .js-anim .home-hero__sub { opacity: 0; } .js-anim .home-hero__actions .btn-primary, .js-anim .home-hero__actions .btn-outline { opacity: 0; } .js-anim .home-hero__prod-img { opacity: 0; } .js-anim .software-card__title { opacity: 0; } @media (prefers-reduced-motion: reduce) { .js-anim [data-animate], .js-anim [data-stagger] > *, .js-anim .home-hero__title, .js-anim .home-hero__sub, .js-anim .home-hero__actions .btn-primary, .js-anim .home-hero__actions .btn-outline, .js-anim .home-hero__prod-img, .js-anim .software-card__title { opacity: 1 !important; transform: none !important; clip-path: none !important; } } /* ═══════════════════════════════════════════════════════════════ CUSTOM CURSOR — tech green dot + ring (desktop only) ═══════════════════════════════════════════════════════════════ */ @media (pointer: fine) { body, a, button, [role="button"], label, select, .product-card, .faq-card__q, .nav-dropdown-trigger, .ticker-word, input[type="submit"] { cursor: none; } } .sqg-cursor { position: fixed; top: 0; left: 0; width: 7px; height: 7px; background: var(--color-accent); border-radius: 50%; pointer-events: none; z-index: 99999; transform: translate(-50%, -50%); will-change: transform; transition: width .2s ease, height .2s ease, background .2s ease; } .sqg-cursor--active { width: 10px; height: 10px; background: #fff; box-shadow: 0 0 10px var(--color-accent), 0 0 20px rgba(107,236,164,.4); } .sqg-cursor--hidden { opacity: 0; } .sqg-cursor-ring { position: fixed; top: 0; left: 0; width: 32px; height: 32px; border: 1.5px solid rgba(107, 236, 164, .55); border-radius: 50%; pointer-events: none; z-index: 99998; transform: translate(-50%, -50%); will-change: transform; transition: width .25s ease, height .25s ease, border-color .25s ease; } .sqg-cursor-ring--active { width: 50px; height: 50px; border-color: rgba(107, 236, 164, .85); border-width: 1px; } .sqg-cursor-ring--hidden { opacity: 0; } /* GLightbox open — restore system cursor, hide custom cursor */ html.glightbox-open .sqg-cursor, html.glightbox-open .sqg-cursor-ring { opacity: 0 !important; pointer-events: none; } html.glightbox-open body, html.glightbox-open a, html.glightbox-open button, html.glightbox-open [role="button"] { cursor: auto !important; } /* ═══════════════════════════════════════════════════════════════ NAVBAR — glass effect on scroll ═══════════════════════════════════════════════════════════════ */ .navbar { transition: background .4s ease, box-shadow .4s ease, backdrop-filter .4s ease; } .navbar--scrolled { background: rgba(255, 255, 255, .9) !important; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 1px 0 rgba(107, 236, 164, .28), 0 4px 24px rgba(0, 0, 0, .06); } /* ═══════════════════════════════════════════════════════════════ PRODUCT IMAGES — anchor for absolute children ═══════════════════════════════════════════════════════════════ */ .home-hero__prod-img { position: relative; } /* Red laser line — sweeps on product-card hover */ .prod-laser { position: absolute; left: 8%; right: 8%; height: 2px; top: 10%; opacity: 0; pointer-events: none; z-index: 10; background: linear-gradient(90deg, transparent 0%, rgba(220, 30, 30, .6) 20%, rgba(255, 80, 80, 1) 50%, rgba(220, 30, 30, .6) 80%, transparent 100% ); box-shadow: 0 0 4px rgba(220, 30, 30, .95), 0 0 10px rgba(255, 60, 60, .7), 0 0 22px rgba(220, 30, 30, .4), 0 0 40px rgba(200, 20, 20, .2); border-radius: 2px; } /* ═══════════════════════════════════════════════════════════════ HERO — sensor scan line ═══════════════════════════════════════════════════════════════ */ .hero-scan-line { position: absolute; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent 0%, rgba(107, 236, 164, .85) 50%, transparent 100%); pointer-events: none; z-index: 4; animation: scanDown 8s ease-in-out infinite; opacity: 0; } @keyframes scanDown { 0% { top: 12%; opacity: 0; } 6% { opacity: 1; } 48% { opacity: .55; } 54% { top: 88%; opacity: 0; } 100% { top: 12%; opacity: 0; } } /* ── Hero title: light-sweep shimmer ───────────── */ /* @property lets GSAP animate --sh-x as a between keyframes */ @property --sh-x { syntax: ''; inherits: false; initial-value: -30%; } .home-hero__title { /* gradient: mostly white text, thin bright band at --sh-x position */ background: linear-gradient( 100deg, #ffffff 0%, #ffffff calc(var(--sh-x) - 14%), rgba(107,236,164,.55) calc(var(--sh-x) - 5%), rgba(107,236,164,.90) var(--sh-x), rgba(107,236,164,.55) calc(var(--sh-x) + 5%), #ffffff calc(var(--sh-x) + 14%), #ffffff 100% ); background-clip: text; -webkit-background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } @media (prefers-reduced-motion: reduce) { .home-hero__title { /* lock shimmer off-screen — no animation */ --sh-x: 200%; } } /* ── Hero background glow breath ───────────────── */ @keyframes breathGlow { 0%, 100% { opacity: 1; } 50% { opacity: .65; } } .home-hero__bg-grad { animation: breathGlow 6s ease-in-out infinite; } /* ── Hero bottom glow line pulse ───────────────── */ @keyframes glowLine { 0%, 100% { opacity: .6; transform: scaleX(1); } 50% { opacity: 1; transform: scaleX(1.05); } } .home-hero__glow { animation: glowLine 4s ease-in-out infinite; transform-origin: center; } /* ═══════════════════════════════════════════════════════════════ PRODUCT CARDS — hover glow + tech grid overlay ═══════════════════════════════════════════════════════════════ */ .product-card { will-change: transform; transition: box-shadow .4s ease; } .product-card:hover { box-shadow: 0 0 0 1.5px rgba(107, 236, 164, .5), 0 16px 56px rgba(107, 236, 164, .18), 0 4px 16px rgba(0, 0, 0, .14); } /* Tech data-grid revealed on hover */ .product-card__tech-grid { position: absolute; inset: 0; z-index: 1; opacity: 0; background-image: linear-gradient(rgba(107, 236, 164, .045) 1px, transparent 1px), linear-gradient(90deg, rgba(107, 236, 164, .045) 1px, transparent 1px); background-size: 30px 30px; pointer-events: none; transition: opacity .45s ease; border-radius: inherit; } .product-card:hover .product-card__tech-grid { opacity: 1; } /* ─── Corner bracket accent on hover ───────────── */ .product-card::before, .product-card::after { content: ''; position: absolute; width: 20px; height: 20px; pointer-events: none; z-index: 3; opacity: 0; transition: opacity .35s ease; } .product-card::before { top: 14px; left: 14px; border-top: 2px solid var(--color-accent); border-left: 2px solid var(--color-accent); border-radius: 2px 0 0 0; } .product-card::after { bottom: 14px; right: 14px; border-bottom: 2px solid var(--color-accent); border-right: 2px solid var(--color-accent); border-radius: 0 0 2px 0; } .product-card:hover::before, .product-card:hover::after { opacity: 1; } /* ═══════════════════════════════════════════════════════════════ BUTTONS — unified hover: slide fill + lift + glow (both btn-primary & btn-outline) ═══════════════════════════════════════════════════════════════ */ .btn-primary { /* extend transition to cover background-position from main.css gradient slide */ transition: background-position .38s cubic-bezier(.4,0,.2,1), box-shadow .28s ease, transform .28s ease !important; } .btn-primary:hover { opacity: 1 !important; box-shadow: 0 6px 26px rgba(107,236,164,.52), 0 0 48px rgba(107,236,164,.18); } .btn-outline { transition: background-position .38s cubic-bezier(.4,0,.2,1), border-color .28s ease, box-shadow .28s ease, transform .28s ease !important; } .btn-outline:hover { box-shadow: 0 6px 26px rgba(107,236,164,.45), 0 0 0 2px rgba(107,236,164,.18) !important; } .btn-ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .28); transform: scale(0); pointer-events: none; animation: rippleAnim .6s ease-out forwards; width: 80px; height: 80px; margin-left: -40px; margin-top: -40px; } @keyframes rippleAnim { to { transform: scale(5.5); opacity: 0; } } /* ═══════════════════════════════════════════════════════════════ SOFTWARE CARD — parallax container fix ═══════════════════════════════════════════════════════════════ */ .software-block .container { overflow: hidden; border-radius: 20px; } /* ═══════════════════════════════════════════════════════════════ PARALLAX FIX — FAQ background image must be taller than its container so the y-offset from GSAP never exposes a gap. 130% height + centered with negative top covers the full range. ═══════════════════════════════════════════════════════════════ */ .faq-section__bg { overflow: hidden; /* hard-clip anything sticking out */ } .faq-section__bg img { position: absolute; left: 0; top: -15%; /* center vertically: (130%-100%)/2 = 15% */ width: 100%; height: 130%; /* extra 30% absorbs the 60px GSAP y shift */ max-width: none; object-fit: cover; object-position: center center; } /* ═══════════════════════════════════════════════════════════════ TICKER — pause on hover ═══════════════════════════════════════════════════════════════ */ .ticker-wrap:hover .ticker-track { animation-play-state: paused; } /* ═══════════════════════════════════════════════════════════════ FAQ CARDS — GSAP-enhanced open/close ═══════════════════════════════════════════════════════════════ */ .gsap-faq-ready .faq-card__a { max-height: none !important; transition: none !important; } /* ═══════════════════════════════════════════════════════════════ SCROLL PROGRESS BAR — top of page reading indicator ═══════════════════════════════════════════════════════════════ */ #sqg-progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; background: linear-gradient(90deg, var(--color-accent) 0%, #00f5ff 100%); box-shadow: 0 0 8px rgba(107, 236, 164, .8), 0 0 16px rgba(0, 245, 255, .4); z-index: 99999; pointer-events: none; transform: scaleX(0); transform-origin: left center; } /* ═══════════════════════════════════════════════════════════════ REUSABLE SCROLL REVEAL CLASSES (for all pages) Usage: add class to element, GSAP picks it up via initScrollReveal() ═══════════════════════════════════════════════════════════════ */ .js-anim .sq-reveal { opacity: 0; } .js-anim .sq-reveal-left { opacity: 0; } .js-anim .sq-reveal-right { opacity: 0; } .js-anim .sq-reveal-scale { opacity: 0; } /* ═══════════════════════════════════════════════════════════════ UTILITY — glow text, line draw underline ═══════════════════════════════════════════════════════════════ */ .glow-text { text-shadow: 0 0 24px rgba(107, 236, 164, .45); } /* Animated underline on hover */ .line-draw { position: relative; display: inline-block; } .line-draw::after { content: ''; position: absolute; bottom: -2px; left: 0; width: 0; height: 2px; background: var(--color-accent); transition: width .35s ease; } .line-draw:hover::after { width: 100%; } /* ═══════════════════════════════════════════════════════════════ COUNTER — tabular nums for animating numbers ═══════════════════════════════════════════════════════════════ */ [data-count] { font-variant-numeric: tabular-nums; display: inline-block; } /* ═══════════════════════════════════════════════════════════════ NAV DROPDOWN — animated reveal ═══════════════════════════════════════════════════════════════ */ .nav-dropdown { transform-origin: top center; transition: opacity .22s ease, transform .22s ease; } .nav-item.has-dropdown:not(:hover) .nav-dropdown { opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; } .nav-item.has-dropdown:hover .nav-dropdown { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; display: block; }