/* ELIE v5.1.47 — exact START interaction requested by the art direction. Thick black signal bands move continuously to the right while hovered. START emits a fuller omnidirectional pixel burst; the main navigation uses the same visual language at a quieter density. */ /* -------------------------------------------------------------------------- START GAME — GREEN SIGNAL SURFACE + THICK BLACK PARALLEL BANDS -------------------------------------------------------------------------- */ @keyframes elieStartBlackBandsRight{ from{background-position:0 50%} to{background-position:var(--elie-black-band-cycle) 50%} } .home-screen .home-start.home-start-signal, html.phone-landscape .home-screen .home-start.home-start-signal{ transform-origin:50% 50%!important; transition: transform .34s cubic-bezier(.18,.82,.2,1), box-shadow .34s ease, border-color .24s ease!important; will-change:transform,box-shadow!important; } .home-start-signal .home-start-signal-stripes{ --elie-black-band-cycle:clamp(52px,calc(var(--u)*4.85),92px); --elie-black-band-width:clamp(24px,calc(var(--u)*2.28),44px); inset:13.5% 5.5%!important; border-radius:999px!important; background-color:#2ef13a!important; background-image:repeating-linear-gradient( 135deg, #000 0 var(--elie-black-band-width), transparent var(--elie-black-band-width) var(--elie-black-band-cycle) )!important; background-size:auto 100%!important; background-repeat:repeat-x!important; background-position:0 50%!important; filter:none!important; transform:none!important; transition:filter .24s ease!important; will-change:background-position!important; } .home-start-signal .home-start-signal-label{ z-index:5!important; color:#000!important; text-shadow:none!important; } .home-start-signal:not(.lang-ja):not(.lang-zh):not(.lang-ar) .home-start-signal-label{ font-family:"Duplet",Arial,sans-serif!important; font-weight:700!important; font-synthesis:none!important; } @media (hover:hover) and (pointer:fine){ .home-cinematic.is-visible .home-start.home-start-signal:hover, .home-cinematic.is-visible .home-start.home-start-signal:focus-visible, .home-screen .home-start.home-start-signal:hover, .home-screen .home-start.home-start-signal:focus-visible{ transform:translateX(-50%) scale(1.065)!important; border-color:#58ff61!important; box-shadow: 0 0 0 1px rgba(46,241,58,.42), 0 0 30px rgba(46,241,58,.34), 0 0 62px rgba(46,241,58,.14), inset 0 0 22px rgba(46,241,58,.08)!important; } .home-start-signal:hover .home-start-signal-stripes, .home-start-signal:focus-visible .home-start-signal-stripes{ animation:elieStartBlackBandsRight .72s linear infinite!important; filter:brightness(1.04)!important; } } /* -------------------------------------------------------------------------- START PIXELS — FULL EDGE FIELD, MOVING AWAY IN EVERY DIRECTION -------------------------------------------------------------------------- */ .home-start-signal.home-nav-enriched{ overflow:visible!important; isolation:isolate!important; } .home-start-signal.home-nav-enriched .home-nav-pixel-field{ left:-33%!important; right:-33%!important; top:-88%!important; bottom:-88%!important; z-index:1!important; opacity:0!important; transition:opacity .18s ease!important; } .home-start-signal.home-nav-enriched:hover .home-nav-pixel-field, .home-start-signal.home-nav-enriched:focus-visible .home-nav-pixel-field{ opacity:1!important; } .home-start-signal .home-nav-pixel-field i{ z-index:1!important; background:#2ef13a!important; box-shadow:0 0 7px rgba(46,241,58,.72),0 0 14px rgba(46,241,58,.24)!important; animation-name:elieStartPixelScatter!important; animation-timing-function:cubic-bezier(.12,.72,.18,1)!important; animation-iteration-count:infinite!important; } .home-start-signal .home-nav-pixel-field i:nth-child(5n){background:#86ff8c!important} .home-start-signal .home-nav-pixel-field i:nth-child(7n){background:#d9ffdb!important} /* Override the original upward-only drift with a balanced radial field. */ .home-start-signal .home-nav-pixel-field i:nth-child(8n+1){--pixel-drift-x:-88px!important;--pixel-drift-y:-62px!important} .home-start-signal .home-nav-pixel-field i:nth-child(8n+2){--pixel-drift-x:0px!important;--pixel-drift-y:-94px!important} .home-start-signal .home-nav-pixel-field i:nth-child(8n+3){--pixel-drift-x:88px!important;--pixel-drift-y:-60px!important} .home-start-signal .home-nav-pixel-field i:nth-child(8n+4){--pixel-drift-x:108px!important;--pixel-drift-y:2px!important} .home-start-signal .home-nav-pixel-field i:nth-child(8n+5){--pixel-drift-x:78px!important;--pixel-drift-y:72px!important} .home-start-signal .home-nav-pixel-field i:nth-child(8n+6){--pixel-drift-x:0px!important;--pixel-drift-y:98px!important} .home-start-signal .home-nav-pixel-field i:nth-child(8n+7){--pixel-drift-x:-82px!important;--pixel-drift-y:70px!important} .home-start-signal .home-nav-pixel-field i:nth-child(8n+8){--pixel-drift-x:-108px!important;--pixel-drift-y:0px!important} @keyframes elieStartPixelScatter{ 0%{opacity:0;transform:translate3d(0,0,0) rotate(0deg) scale(.34)} 10%{opacity:.96} 54%{opacity:.82} 100%{opacity:0;transform:translate3d(var(--pixel-drift-x),var(--pixel-drift-y),0) rotate(var(--pixel-rotation)) scale(.14)} } /* -------------------------------------------------------------------------- MAIN NAVIGATION — SAME PIXEL LANGUAGE, DELIBERATELY SPARSER -------------------------------------------------------------------------- */ .topbar-v518 .nav-btn{ isolation:isolate!important; overflow:visible!important; } .topbar-v518 .nav-btn::before, .topbar-v518 .nav-btn::after{ content:""; position:absolute; left:50%; top:50%; z-index:-1; width:3px; height:3px; background:#2ef13a; pointer-events:none; opacity:0; box-shadow: -46px -5px 0 #2ef13a, -31px 20px 0 #54ff60, -14px -24px 0 #2ef13a, 18px -22px 0 #54ff60, 34px 19px 0 #2ef13a, 48px -3px 0 #54ff60; transform:translate(-50%,-50%) scale(.5); } .topbar-v518 .nav-btn::after{ width:2px; height:2px; box-shadow: -39px -18px 0 #54ff60, -24px 28px 0 #2ef13a, 25px 27px 0 #54ff60, 41px -17px 0 #2ef13a; } @keyframes elieNavSparseScatterA{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.45)} 16%{opacity:.74} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.42) rotate(8deg)} } @keyframes elieNavSparseScatterB{ 0%{opacity:0;transform:translate(-50%,-50%) scale(.48) rotate(0deg)} 18%{opacity:.62} 100%{opacity:0;transform:translate(-50%,-50%) scale(1.32) rotate(-10deg)} } @media (hover:hover) and (pointer:fine){ .topbar-v518 .nav-btn:not(:disabled):hover, .topbar-v518 .nav-btn:not(:disabled):focus-visible{ transform:translateY(-1px) scale(1.022)!important; } .topbar-v518 .nav-btn:hover::before, .topbar-v518 .nav-btn:focus-visible::before{ animation:elieNavSparseScatterA 1.25s cubic-bezier(.16,.72,.2,1) infinite!important; } .topbar-v518 .nav-btn:hover::after, .topbar-v518 .nav-btn:focus-visible::after{ animation:elieNavSparseScatterB 1.55s cubic-bezier(.16,.72,.2,1) -.52s infinite!important; } } /* The JS pixel field already exists on the home navigation. Keep only a quiet subset so it supports, rather than competes with, the START interaction. */ .topbar-v518 .nav-btn .home-nav-pixel-field i:nth-child(n+7){display:none!important} .topbar-v518 .nav-btn .home-nav-pixel-field i{ box-shadow:0 0 4px rgba(46,241,58,.42)!important; animation-duration:1.9s!important; } .topbar-v518 .nav-btn .home-nav-pixel-field i:nth-child(4n+1){--pixel-drift-x:-24px!important;--pixel-drift-y:-20px!important} .topbar-v518 .nav-btn .home-nav-pixel-field i:nth-child(4n+2){--pixel-drift-x:22px!important;--pixel-drift-y:-18px!important} .topbar-v518 .nav-btn .home-nav-pixel-field i:nth-child(4n+3){--pixel-drift-x:23px!important;--pixel-drift-y:18px!important} .topbar-v518 .nav-btn .home-nav-pixel-field i:nth-child(4n+4){--pixel-drift-x:-22px!important;--pixel-drift-y:18px!important} @media (orientation:landscape) and (pointer:coarse){ .home-start-signal .home-start-signal-stripes{ --elie-black-band-cycle:clamp(38px,7.8vw,58px); --elie-black-band-width:clamp(17px,3.5vw,27px); } /* No sticky hover or unnecessary particle load on touch devices. */ .home-start-signal .home-nav-pixel-field, .topbar-v518 .nav-btn::before, .topbar-v518 .nav-btn::after{display:none!important} } @media (prefers-reduced-motion:reduce){ .home-start-signal:hover .home-start-signal-stripes, .home-start-signal:focus-visible .home-start-signal-stripes{animation-duration:1.8s!important} .home-start-signal .home-nav-pixel-field i, .topbar-v518 .nav-btn::before, .topbar-v518 .nav-btn::after{animation-duration:3.2s!important} }