/* ============================================================
   GRIDPOINT PAGE LOADER: "grid to point" (see loader.js)
   ============================================================ */
html.gl-lock, html.gl-lock body { overflow: hidden; }

#gp-loader { position: fixed; inset: 0; z-index: 99999; pointer-events: all; }
#gp-loader.gl-out { pointer-events: none; }

.gl-panel { position: absolute; inset: 0; transition: transform .9s cubic-bezier(.76, 0, .24, 1); }
.gl-orange { background: #FE8B03; }
.gl-navy {
  background: radial-gradient(60% 50% at 50% 45%, rgba(0, 54, 230, .35), transparent 70%), #011134;
  display: grid; place-items: center;
}
/* curtain: navy lifts first, the orange layer follows just behind it */
.gl-out .gl-navy { transform: translateY(-100%); }
.gl-out .gl-orange { transform: translateY(-100%); transition-delay: .12s; }

.gl-center { display: flex; flex-direction: column; align-items: center; transition: opacity .35s, transform .9s cubic-bezier(.76, 0, .24, 1); }
.gl-out .gl-center { opacity: 0; transform: translateY(-40px); }

/* 1. the grid of dots, 2. they converge on one point, 3. the mark appears */
.gl-grid { position: relative; width: 120px; height: 120px; }
.gl-grid i {
  position: absolute; left: 50%; top: 50%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%;
  background: #fff; box-shadow: 0 0 16px rgba(1, 234, 254, .6);
  opacity: 0; transform: translate(calc(var(--x) * 38px), calc(var(--y) * 38px)) scale(.4);
  animation: glDot 1.05s cubic-bezier(.65, 0, .35, 1) forwards; animation-delay: var(--d);
}
.gl-grid i:nth-child(5) { background: #FE8B03; box-shadow: 0 0 20px rgba(254, 139, 3, .9); }
@keyframes glDot {
  0%   { opacity: 0; transform: translate(calc(var(--x) * 38px), calc(var(--y) * 38px)) scale(.4); }
  30%  { opacity: 1; transform: translate(calc(var(--x) * 38px), calc(var(--y) * 38px)) scale(1); }
  62%  { opacity: 1; transform: translate(calc(var(--x) * 38px), calc(var(--y) * 38px)) scale(1); }
  100% { opacity: 0; transform: translate(0, 0) scale(.2); }
}
.gl-mark {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  opacity: 0; transform: scale(.6); filter: drop-shadow(0 0 30px rgba(254, 139, 3, .55));
  animation: glMark .6s cubic-bezier(.16, 1, .3, 1) .82s forwards;
}
@keyframes glMark { to { opacity: 1; transform: scale(1); } }

.gl-logo { margin: 26px 0 0; font: 800 clamp(22px, 2.6vw, 32px)/1 'Archivo', sans-serif; letter-spacing: -.02em; color: #fff; opacity: 0; transform: translateY(18px); animation: glUp .6s cubic-bezier(.16, 1, .3, 1) 1s forwards; }
.gl-tag {
  margin: 14px 0 0; font: 700 12px/1 'Manrope', 'Segoe UI', sans-serif; letter-spacing: .28em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6); opacity: 0; transform: translateY(12px); animation: glUp .6s cubic-bezier(.16, 1, .3, 1) 1.12s forwards;
}
@keyframes glUp { to { opacity: 1; transform: none; } }

.gl-bar { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255, 255, 255, .08); }
.gl-bar b { display: block; height: 100%; width: 100%; transform-origin: left; transform: scaleX(0); background: linear-gradient(90deg, #FE8B03, #FE5900); animation: glBar 1.5s cubic-bezier(.65, 0, .35, 1) forwards; }
@keyframes glBar { to { transform: scaleX(1); } }
.gl-count { position: absolute; right: clamp(20px, 4vw, 48px); bottom: 22px; font: 900 clamp(40px, 6vw, 84px)/1 'Archivo', sans-serif; letter-spacing: -.04em; color: rgba(255, 255, 255, .1); font-variant-numeric: tabular-nums; }

@media (max-width: 600px) { .gl-grid { width: 96px; height: 96px; } .gl-logo { font-size: 22px; } .gl-tag { font-size: 10px; letter-spacing: .22em; } }
.gl-logo b { font-weight: 800; color: #FE8B03; }