/* Quick logo impact: contour sweep, chromatic offset and snap zoom. No strobe. */
.ag-intro{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;overflow:hidden;background:#000;color:#fff;isolation:isolate;animation:ag-intro-exit .25s 2.25s ease-in forwards}
.ag-intro-mark{position:relative;width:min(72vw,440px);aspect-ratio:944/535;animation:ag-logo-impact 2.5s both;will-change:transform}
.ag-intro-logo{display:block;width:100%;height:auto;animation:ag-logo-colour 1.8s both}
.ag-intro-contour{position:absolute;inset:0;width:100%;height:100%;overflow:visible;pointer-events:none;filter:drop-shadow(-3px 0 2px #1677ff) drop-shadow(3px 0 2px #ff2448) drop-shadow(0 0 10px #287cff);animation:ag-contour-sweep 2.2s both}
.ag-intro-skip{position:absolute;z-index:3;bottom:max(32px,env(safe-area-inset-bottom));left:50%;transform:translateX(-50%);min-height:44px;padding:10px 18px;border:1px solid #ffffff50;border-radius:3px;background:#080a10;color:#fff;font:500 14px/1.4 Arial,sans-serif;white-space:nowrap;cursor:pointer}
.ag-intro-skip span{margin-left:12px}.ag-intro-skip:hover{background:#172238}.ag-intro-skip:focus-visible{outline:2px solid #fff;outline-offset:5px}
@keyframes ag-logo-impact{0%{transform:scale(.74) rotate(-3deg)}24%{transform:scale(1.07) rotate(.7deg)}42%,82%{transform:scale(1) rotate(0)}100%{transform:scale(1.14)}}
@keyframes ag-logo-colour{0%,20%{opacity:.12;filter:brightness(.6)}50%{opacity:1;filter:brightness(1.35) drop-shadow(-4px 0 1px #1677ff) drop-shadow(4px 0 1px #ff2448)}100%{opacity:1;filter:brightness(1)}}
@keyframes ag-contour-sweep{0%{opacity:0;clip-path:inset(-15% 100% -15% -15%)}12%{opacity:1}52%{opacity:1;clip-path:inset(-15% -15% -15% -15%)}72%{opacity:.8;clip-path:inset(-15% -15% -15% -15%)}100%{opacity:0;clip-path:inset(-15% -15% -15% -15%)}}
@keyframes ag-intro-exit{to{opacity:0;visibility:hidden;pointer-events:none}}
@media(prefers-reduced-motion:reduce){.ag-intro{display:none!important}.ag-intro,.ag-intro *{animation:none!important}}

/* A soft tricolour glow follows the header logo without changing its layout. */
.header .brand img{animation:ag-header-glow 6s ease-in-out infinite}
@keyframes ag-header-glow{
  0%,100%{filter:brightness(1) drop-shadow(0 0 0 transparent)}
  25%{filter:brightness(1.12) drop-shadow(-2px 0 5px #ffffff70)}
  45%{filter:brightness(1.2) drop-shadow(0 0 4px #ffffff70)}
  65%{filter:brightness(1.12) drop-shadow(2px 0 5px #ff244877)}
  82%{filter:brightness(1) drop-shadow(0 0 0 transparent)}
}
@media(prefers-reduced-motion:reduce){.header .brand img{animation:none!important}}