:root{--brass:#4CAF50;--brass-dim:#388E3C;--hair:#C8E6C9;--ivory-dim:#5A7A5A;--ink-2:#F8FBF8;--ink-3:#E8F5E9} ::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-thumb{background:linear-gradient(180deg,#388E3C,#4CAF50);border-radius:3px} ::selection{background:rgba(76,175,80,0.18);color:#1B2E1B} .bg-gradient{position:fixed;top:0;left:0;right:0;bottom:0;z-index:-1;pointer-events:none;background:radial-gradient(ellipse 80% 60% at 15% 20%,rgba(76,175,80,0.05) 0%,transparent 55%),radial-gradient(ellipse 60% 50% at 85% 75%,rgba(0,137,123,0.04) 0%,transparent 50%)} .stage,.static-page,.hero,.features,.privacy-strip,.site-footer{position:relative;z-index:1} .topnav{background:rgba(255,255,255,0.84)!important;backdrop-filter:blur(18px) saturate(1.5)!important;-webkit-backdrop-filter:blur(18px) saturate(1.5)!important;border-bottom:1px solid rgba(200,230,201,0.5)!important} .side-menu-3d{background:rgba(255,255,255,0.96)!important;backdrop-filter:blur(22px)!important;-webkit-backdrop-filter:blur(22px)!important;box-shadow:8px 0 48px rgba(10,25,10,0.16)!important} .card-3d,.box-3d{transition:transform 0.4s cubic-bezier(0.16,1,0.3,1),box-shadow 0.4s cubic-bezier(0.16,1,0.3,1),border-color 0.25s ease} .card-3d:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(30,50,20,0.1),0 0 0 1px rgba(76,175,80,0.08)} .box-3d:hover{transform:translateY(-2px);box-shadow:0 20px 60px rgba(20,40,15,0.12)} .btn-3d{transition:all 0.25s cubic-bezier(0.16,1,0.3,1)!important} .btn-3d:hover{transform:translateY(-2px) scale(1.02)!important;box-shadow:0 8px 28px rgba(76,175,80,0.22)!important} .logo-container-3d{display:inline-flex} .logo-3d{transition:transform 0.4s ease,filter 0.4s ease} .logo-3d:hover{transform:scale(1.04);filter:drop-shadow(0 6px 16px rgba(76,175,80,0.18))} .hero-3d{display:grid;grid-template-columns:1.1fr 0.9fr;gap:48px;align-items:center;max-width:1200px;margin:0 auto} .hero-3d-left,.hero-3d-right{position:relative;z-index:1} .hero-3d-right{perspective:900px} .hero-3d-board-container{transform:rotateY(-5deg) rotateX(3deg);transition:transform 0.7s ease;transform-style:preserve-3d} .hero-3d-board-container:hover{transform:rotateY(-1deg) rotateX(1deg)} .static-page,.stage,.features,.privacy-strip{animation:fadeUp 0.45s ease-out} @keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}} .blog-card{background:var(--ink-2);border:1px solid var(--hair);border-radius:10px;padding:28px 32px;margin-bottom:20px;transition:all 0.3s ease} .blog-card:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(30,50,20,0.1);border-color:#4CAF50} .blog-card h2{font-family:var(--display);font-size:24px;margin:0 0 8px} .blog-card h2 a{color:var(--ivory);text-decoration:none}.blog-card h2 a:hover{color:#4CAF50} .blog-date{font-size:13px;color:var(--ivory-dim);font-family:var(--mono);margin-bottom:12px} .blog-excerpt{font-size:15px;color:var(--ivory-dim);line-height:1.7} .blog-tag{display:inline-block;font-size:11px;font-weight:600;padding:3px 12px;border-radius:20px;margin:0 6px 10px 0;background:rgba(76,175,80,0.08);color:#388E3C;border:1px solid rgba(76,175,80,0.15)} @media(max-width:1024px){.hero-3d{grid-template-columns:1fr;gap:32px}.hero-3d-right{order:-1}} @media(max-width:768px){.hero-3d{padding:32px 16px 24px}.hero-3d-board-container{transform:rotateY(-1deg) rotateX(1deg) scale(0.92)}} /* ══════════════════════════════════════════════════════════════ BRILLIANT MOVE CELEBRATION Full-screen cinematic moment triggered when a !! move is found. Pure CSS + JS — no canvas, no external deps. ══════════════════════════════════════════════════════════════ */ /* Root overlay — fixed, above everything, pointer-events off */ #brilliant-overlay { position: fixed; inset: 0; z-index: 99999; pointer-events: none; overflow: hidden; } /* Radial flash from board center */ .brl-flash { position: absolute; inset: 0; background: radial-gradient(ellipse 60% 50% at 50% 50%, rgba(27,166,160,0.28) 0%, rgba(27,166,160,0.10) 45%, transparent 75%); animation: brlFlash 0.9s ease-out forwards; } @keyframes brlFlash { 0% { opacity: 0; transform: scale(0.6); } 18% { opacity: 1; transform: scale(1.05); } 100% { opacity: 0; transform: scale(1.4); } } /* "!!" giant symbol — bursts from center then floats up */ .brl-bang { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%) scale(0); font-family: 'Fraunces', serif; font-size: clamp(72px, 14vw, 140px); font-weight: 700; color: #1BA6A0; line-height: 1; letter-spacing: -4px; text-shadow: 0 0 30px rgba(27,166,160,0.9), 0 0 80px rgba(27,166,160,0.5), 0 4px 24px rgba(0,0,0,0.4); animation: brlBang 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; white-space: nowrap; } @keyframes brlBang { 0% { transform: translate(-50%, -50%) scale(0.1); opacity: 0; } 18% { transform: translate(-50%, -50%) scale(1.18); opacity: 1; } 32% { transform: translate(-50%, -50%) scale(0.96); opacity: 1; } 75% { transform: translate(-50%, -68%) scale(1.0); opacity: 1; } 100% { transform: translate(-50%, -82%) scale(0.9); opacity: 0; } } /* "BRILLIANT" label pill — appears below the "!!" with clear separation */ .brl-label { position: absolute; left: 50%; top: 62%; transform: translate(-50%, 20px) scale(0.7); background: #1BA6A0; color: #fff; font-family: 'Inter', sans-serif; font-size: clamp(13px, 2.5vw, 22px); font-weight: 800; letter-spacing: 0.35em; text-transform: uppercase; padding: 7px 28px; border-radius: 4px; box-shadow: 0 4px 24px rgba(27,166,160,0.55), 0 2px 8px rgba(0,0,0,0.3); white-space: nowrap; opacity: 0; animation: brlLabel 2.6s cubic-bezier(0.22, 1, 0.36, 1) forwards; animation-delay: 0.08s; } @keyframes brlLabel { 0% { transform: translate(-50%, 20px) scale(0.7); opacity: 0; } 20% { transform: translate(-50%, 4px) scale(1.04); opacity: 1; } 35% { transform: translate(-50%, 6px) scale(1.0); opacity: 1; } 72% { transform: translate(-50%, 6px) scale(1.0); opacity: 1; } 100% { transform: translate(-50%, -8px) scale(0.9); opacity: 0; } } /* Particles — 24 symbols burst outward from center */ .brl-particle { position: absolute; pointer-events: none; font-weight: 900; font-family: 'Inter', sans-serif; color: #1BA6A0; text-shadow: 0 0 8px rgba(27,166,160,0.7); transform-origin: center; opacity: 0; animation: brlParticle var(--dur, 1.1s) var(--delay, 0s) cubic-bezier(0.2, 0.8, 0.4, 1) forwards; } @keyframes brlParticle { 0% { transform: translate(0, 0) scale(0.4) rotate(0deg); opacity: 1; } 60% { opacity: 0.85; } 100% { transform: translate(var(--tx), var(--ty)) scale(0) rotate(var(--rot)); opacity: 0; } } /* Ring pulse from board edge */ .brl-ring { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 50%; border: 3px solid rgba(27,166,160,0.7); transform: translate(-50%, -50%); animation: brlRing var(--rdur, 1s) var(--rdelay, 0s) ease-out forwards; } @keyframes brlRing { 0% { width: 0; height: 0; opacity: 0.9; border-width: 4px; } 100% { width: var(--rsize, 400px); height: var(--rsize, 400px); opacity: 0; border-width: 1px; } } /* ── Piece drag GPU promotion ── */ /* Promote piece images to their own compositing layer so pointer/touch events drive the drag via the GPU instead of triggering layout reflows. This eliminates the "sticky" cursor lag during piece dragging. */ #myBoard img { transform: translateZ(0); -webkit-backface-visibility: hidden; backface-visibility: hidden; will-change: auto; /* upgraded to "transform" by the browser during drag */ }