/* ================================================================ NEON ARENA · MOTION SYSTEM (2026 UU — top-tier effects layer) Landing 入場戲 · 全程 ambient · press 回饋。 只 animate transform/opacity（60fps）。reduced-motion 全降級。 DOM 由 motion.js 注入；本檔淨係 style + keyframes。 ================================================================ */ /* ---------- Ambient background stack (fixed, behind everything) ---------- */ #arena-bg { position: fixed; inset: 0; z-index: -1; /* behind all content; body is transparent + base lives on , so the ambient shows without lifting anything (keeps fixed modals / dropdowns positioned correctly). */ overflow: hidden; pointer-events: none; } /* Synthwave perspective floor grid — scrolls toward viewer */ .arena-grid { position: absolute; left: -60%; right: -60%; bottom: -8%; height: 62%; background-image: linear-gradient(rgba(var(--neon-cyan-rgb, 34,211,238), 0.6) 1.5px, transparent 1.5px), linear-gradient(90deg, rgba(var(--neon-orange-rgb, 255,115,36), 0.5) 1.5px, transparent 1.5px); background-size: 56px 56px; transform-origin: 50% 100%; animation: arenaGridScroll 4s linear infinite; -webkit-mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.7) 46%, transparent 88%); mask-image: linear-gradient(to top, #000 0%, rgba(0,0,0,0.7) 46%, transparent 88%); opacity: 1; will-change: transform; } /* Scroll the floor via GPU transform (translateY of one cell = seamless loop), not background-position — avoids a full-layer repaint every frame. */ @keyframes arenaGridScroll { from { transform: perspective(320px) rotateX(64deg) translateY(0); } to { transform: perspective(320px) rotateX(64deg) translateY(56px); } } /* Aurora mesh — large neon blobs drifting slowly */ .arena-aurora { position: absolute; inset: -25%; background: radial-gradient(44% 46% at 18% 24%, rgba(var(--neon-orange-rgb, 255,115,36), 0.52), transparent 60%), radial-gradient(42% 44% at 84% 18%, rgba(var(--neon-cyan-rgb, 34,211,238), 0.48), transparent 60%), radial-gradient(46% 48% at 64% 86%, rgba(255, 82, 217, 0.40), transparent 62%), radial-gradient(30% 32% at 50% 50%, rgba(var(--neon-cyan-rgb,34,211,238), 0.18), transparent 70%); filter: blur(22px) saturate(1.4); animation: arenaAuroraDrift 18s ease-in-out infinite alternate; will-change: transform; } @keyframes arenaAuroraDrift { 0% { transform: translate3d(-5%, -3%, 0) scale(1.08) rotate(0deg); } 50% { transform: translate3d(6%, 4%, 0) scale(1.28) rotate(8deg); } 100% { transform: translate3d(-3%, 6%, 0) scale(1.12) rotate(-6deg); } } /* Floating spark particles canvas */ #arena-particles { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 1; } /* Sweeping broadcast beam — diagonal light bar crossing the whole screen */ .arena-beam { position: absolute; top: -20%; left: -40%; width: 38%; height: 140%; background: linear-gradient(100deg, transparent, rgba(var(--neon-cyan-rgb,34,211,238), 0.10), rgba(255,255,255,0.06), rgba(var(--neon-cyan-rgb,34,211,238), 0.10), transparent); transform: skewX(-14deg); filter: blur(6px); animation: arenaBeam 7s ease-in-out infinite; will-change: transform, left; } @keyframes arenaBeam { 0%, 62% { left: -45%; opacity: 0; } 70% { opacity: 1; } 100% { left: 130%; opacity: 0; } } /* Cursor-follow spotlight — fixed-size circle moved by transform (no per-frame gradient recompute). motion.js sets translate3d. */ #arena-spotlight { position: absolute; top: 0; left: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; background: radial-gradient(circle, rgba(var(--neon-cyan-rgb,34,211,238), 0.16), rgba(var(--neon-orange-rgb,255,115,36), 0.07) 42%, transparent 68%); opacity: 0; transition: opacity 0.35s ease; will-change: transform; } #arena-spotlight.on { opacity: 1; } /* Subtle CRT scanlines for arena-broadcast texture */ .arena-scanlines { position: absolute; inset: 0; background: repeating-linear-gradient( to bottom, rgba(255,255,255,0.018) 0px, rgba(255,255,255,0.018) 1px, transparent 1px, transparent 3px); opacity: 0.5; } /* Top vignette so header stays legible over the moving bg */ .arena-vignette { position: absolute; inset: 0; background: radial-gradient(120% 90% at 50% 0%, transparent 55%, rgba(0,0,0,0.45) 100%); } /* ---------- Landing 入場 orchestration (home) ---------- */ /* Logo ignites like a neon sign powering on */ .is-landing .logo { animation: logoIgnite 1.5s cubic-bezier(0.22,1,0.36,1) both; } .logo .logo-region { animation: regionFlicker 2.4s steps(1) 0.3s 1 both; } @keyframes logoIgnite { 0% { opacity: 0; filter: brightness(0.4); letter-spacing: 0.12em; } 40% { opacity: 1; } 100% { opacity: 1; filter: brightness(1); letter-spacing: -0.02em; } } @keyframes regionFlicker { 0%,8% { opacity: 0; } 9%,11% { opacity: 1; } 12%,16% { opacity: 0.3; } 17%,22% { opacity: 1; } 23%,26% { opacity: 0.5; } 27%,100%{ opacity: 1; } } /* Hero text + tiles rise-up with stagger (delays applied by motion.js via --d) */ .is-landing .home-headline, .is-landing .home-tagline, .is-landing .updates-panel, .is-landing .home-tile { animation: arenaRiseUp 0.7s cubic-bezier(0.16,1,0.3,1) both; animation-delay: var(--d, 0ms); } @keyframes arenaRiseUp { from { opacity: 0; transform: translate3d(0, 26px, 0) scale(0.985); } to { opacity: 1; transform: none; } } /* Headline gradient shimmer sweep (continuous) */ .home-headline { background-size: 200% auto; animation: headlineShimmer 6s ease-in-out infinite; } @keyframes headlineShimmer { 0%,100% { background-position: 0% center; } 50% { background-position: 120% center; } } /* One-shot light sweep bar across hero on landing */ .is-landing .home-container::before { content: ""; position: absolute; top: 0; left: -30%; width: 30%; height: 100%; background: linear-gradient(100deg, transparent, rgba(var(--neon-cyan-rgb,34,211,238), 0.14), transparent); transform: skewX(-18deg); animation: heroSweep 1.3s ease-out 0.2s 1 both; pointer-events: none; } .home-container { position: relative; overflow: hidden; } @keyframes heroSweep { to { left: 130%; } } /* ---------- Persistent ambient on key elements ---------- */ /* Logo region breathes a soft neon glow */ .logo .logo-region { text-shadow: 0 0 10px rgba(var(--neon-orange-rgb,255,115,36), 0.45); animation: regionBreathe 3.4s ease-in-out infinite; } @keyframes regionBreathe { 0%,100% { text-shadow: 0 0 8px rgba(var(--neon-orange-rgb,255,115,36), 0.35); } 50% { text-shadow: 0 0 18px rgba(var(--neon-orange-rgb,255,115,36), 0.75); } } /* Home tiles: idle glow breathing + animated neon edge */ .home-tile { position: relative; isolation: isolate; } .home-tile::after { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(130deg, rgba(var(--neon-cyan-rgb,34,211,238),0.0) 20%, rgba(var(--neon-cyan-rgb,34,211,238),0.55) 50%, rgba(var(--neon-orange-rgb,255,115,36),0.0) 80%); background-size: 220% 220%; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; animation: tileEdge 5s linear infinite; opacity: 0.7; z-index: 2; pointer-events: none; } @keyframes tileEdge { to { background-position: 220% 0; } } .home-tile-glow { position: absolute; inset: 0; border-radius: inherit; z-index: 0; background: radial-gradient(60% 80% at 50% 120%, rgba(var(--neon-orange-rgb,255,115,36),0.35), transparent 70%); opacity: 0.55; animation: tileBreathe 4s ease-in-out infinite; } @keyframes tileBreathe { 0%,100%{opacity:0.35} 50%{opacity:0.75} } /* Primary CTA buttons get an animated sheen */ .btn-primary, .btn-accent { position: relative; overflow: hidden; } .btn-primary::before, .btn-accent::before { content: ""; position: absolute; top: 0; left: 0; width: 50%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.35), transparent); transform: translateX(-200%) skewX(-20deg); animation: btnSheen 4.5s ease-in-out infinite; will-change: transform; } @keyframes btnSheen { 0%,72% { transform: translateX(-200%) skewX(-20deg); } 86%,100% { transform: translateX(440%) skewX(-20deg); } } /* Headline — strong neon glow pulse */ .home-headline { filter: drop-shadow(0 0 16px rgba(var(--neon-orange-rgb,255,115,36),0.45)); animation: headlineShimmer 6s ease-in-out infinite, headlineGlow 3s ease-in-out infinite; } @keyframes headlineGlow { 0%,100% { filter: drop-shadow(0 0 12px rgba(var(--neon-orange-rgb,255,115,36),0.35)); } 50% { filter: drop-shadow(0 0 26px rgba(var(--neon-cyan-rgb,34,211,238),0.6)); } } /* Home tile — dramatic hover lift + glow burst */ .home-tile { transition: transform 0.25s cubic-bezier(0.16,1,0.3,1), box-shadow 0.25s ease; } .home-tile:hover { transform: translateY(-6px) scale(1.015); box-shadow: 0 18px 50px -18px rgba(var(--color-primary-rgb,255,115,36),0.65), 0 0 0 1px rgba(var(--neon-cyan-rgb,34,211,238),0.35); } .home-tile:hover .home-tile-glow { opacity: 1; } .home-tile:hover::after { animation-duration: 1.6s; opacity: 1; } /* ---------- Press / click feedback ---------- */ /* Ripple — span injected by motion.js at pointer position */ .arena-ripple { position: absolute; border-radius: 50%; transform: translate(-50%, -50%) scale(0); background: radial-gradient(circle, rgba(var(--neon-cyan-rgb,34,211,238),0.55) 0%, rgba(var(--neon-cyan-rgb,34,211,238),0.15) 45%, transparent 70%); pointer-events: none; z-index: 5; animation: arenaRipple 0.6s ease-out forwards; mix-blend-mode: screen; } @keyframes arenaRipple { to { transform: translate(-50%, -50%) scale(1); opacity: 0; } } /* Press burst ring on tiles / primary */ .home-tile:active, .btn:active { animation: pressKick 0.18s ease-out; } @keyframes pressKick { 50% { transform: scale(0.95); } } .home-tile:active .home-tile-glow { opacity: 1; } /* Result button select → neon shockwave (augments resultPop) */ .result-btn.selected-win-a::after, .result-btn.selected-win-b::after, .result-btn.selected-draw::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(var(--neon-win-rgb,52,226,155),0.6); animation: resultShock 0.5s ease-out; pointer-events: none; } .result-btn { position: relative; } @keyframes resultShock { from { box-shadow: 0 0 0 0 rgba(var(--neon-win-rgb,52,226,155),0.55); } to { box-shadow: 0 0 0 14px rgba(var(--neon-win-rgb,52,226,155),0); } } /* ---------- View transition (any view becoming active) ---------- */ .view.active { animation: viewEnter 0.45s cubic-bezier(0.16,1,0.3,1); } @keyframes viewEnter { from { opacity: 0; transform: translate3d(0, 14px, 0); } to { opacity: 1; transform: none; } } /* ---------- Reduced motion — keep it tasteful & still ---------- */ @media (prefers-reduced-motion: reduce) { .arena-grid, .arena-aurora, .arena-scanlines, .arena-beam, #arena-bg, .home-headline, .logo .logo-region, .home-tile::after, .home-tile-glow, .btn-primary::before, .btn-accent::before, .is-landing .logo, .is-landing .home-headline, .is-landing .home-tagline, .is-landing .updates-panel, .is-landing .home-tile, .is-landing .home-container::before, .view.active { animation: none !important; } #arena-particles, .arena-beam { display: none; } #arena-spotlight { display: none; } .arena-aurora { opacity: 0.5; } .home-headline { filter: none; } .logo .logo-region { text-shadow: 0 0 10px rgba(var(--neon-orange-rgb,255,115,36),0.45); } }