/* ---------------------------------------------------------------------------
   Gravity Studios splash.

   Every position here is measured, not eyeballed. The artwork is 1362 x 1155
   and the pieces sit at (image pixels):
     G mark            x 536-858   y 285-644
     arc glow (peak)   x 686       y 618
     GRAVITY           x 204-1194  y 722-816
     divider line      x 606-760   y 835-847
     STUDIOS           x 454-954   y 875-908
   so the overlays below are those numbers as percentages of the stage, and the
   stage keeps the artwork's aspect ratio at every screen size.

   The artwork ships as three transparent layers cut from the original — the G
   mark, GRAVITY and STUDIOS — with a true alpha channel extracted from its
   near-black background. The original's background was not flat (a vignette
   plus compression blocks), so as a single opaque image it showed as a box the
   moment anything lit the screen around it. The divider line's blue glow was
   removed from the artwork and is redrawn here so it can ignite.

   Only opacity and transform are animated. The game builds its world on the
   main thread while this plays, in stalls of 100 ms and more; animations of
   those two properties run on the compositor and keep going through the
   stalls, where clip-path, filter or letter-spacing animations would stutter
   exactly when the player is looking at them. So the blur-in is a crossfade
   from a pre-blurred copy, and each glint is a band sliding inside a mask made
   of the layer's own artwork, so light only ever crosses the metal.

   --k scales the whole timeline: 1 for the first viewing, less for a reload in
   the same session. .is-live (added on the first frame) runs the ambience and
   dust; .is-go (added once the logo layers have loaded) runs the reveal.
   ------------------------------------------------------------------------ */

.splash {
  --bg: rgb(2 4 12);            /* sampled from the artwork's background */
  --k: 1;
  position: fixed;
  inset: 0;
  z-index: 2147483000;
  display: grid;
  place-items: center;
  overflow: hidden;
  background: var(--bg);
  color: #dfe6f0;
  cursor: default;
  user-select: none;
  -webkit-user-select: none;
  opacity: 1;
  transition: opacity calc(var(--k) * 0.7s) ease;
}

/* A faint blue ambience behind the mark, so the screen is not flat black. */
.splash__ambient {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(ellipse 42% 34% at 50% 48%, rgb(34 82 190 / 0.13), transparent 70%),
    radial-gradient(ellipse 90% 70% at 50% 50%, transparent 55%, rgb(0 0 0 / 0.55));
  opacity: 0;
}

.splash__motes { position: absolute; inset: 0; pointer-events: none; }
.splash__mote {
  position: absolute;
  width: var(--s, 2px);
  height: var(--s, 2px);
  border-radius: 50%;
  background: rgb(170 200 255);
  box-shadow: 0 0 6px rgb(90 150 255 / 0.9);
  opacity: 0;
  will-change: transform, opacity;
}

.splash__stage {
  position: relative;
  width: min(92vw, calc(78vh * 1362 / 1155), 980px);
  width: min(92vw, calc(78dvh * 1362 / 1155), 980px);
  aspect-ratio: 1362 / 1155;
  container-type: size;
  isolation: isolate;
  overflow: hidden;
  transform: scale(1);
  will-change: transform;
}

/* The three layers, placed at their measured spots in the original artwork. */
.splash__part {
  position: absolute;
  opacity: 0;
  will-change: transform, opacity;
}
.splash__part img {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: none;
  -webkit-user-drag: none;
}
.splash__mark    { left: 33.26%;  top: 22.771%; width: 32.305%; height: 38.874%; transform: scale(1.07); }
.splash__gravity { left: 14.023%; top: 61.645%; width: 74.596%; height: 9.61%;  transform: translateY(18%) scaleX(1.05); }
.splash__studios { left: 32.305%; top: 74.632%; width: 38.767%; height: 4.848%; transform: translateY(40%); }
.splash__bloom   { left: 33.26%;  top: 22.771%; width: 32.305%; height: 38.874%;
                   filter: blur(12px) brightness(1.7); transform: scale(1.12); }

/* A glint: a bright band sliding inside a mask cut from the layer's own
   artwork. The mask is set inline next to each image so its URL resolves
   against the page. */
.splash__shine {
  position: absolute;
  inset: 0;
  overflow: hidden;
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.splash__band {
  position: absolute;
  top: -20%;
  bottom: -20%;
  left: 0;
  width: 38%;
  background: linear-gradient(100deg, transparent 15%, rgb(255 255 255 / 0.9) 50%, transparent 85%);
  transform: translateX(-130%) skewX(-12deg);
  will-change: transform;
}

/* Light pooling in the bottom of the arc, over the artwork's own glow. */
.splash__glow {
  position: absolute;
  left: 50.37%;
  top: 53.51%;
  width: 34%;
  height: 11%;
  margin: -5.5% 0 0 -17%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(70 150 255 / 0.95), rgb(30 90 255 / 0.45) 45%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transform: rotate(-9deg) scale(0.6);
  will-change: transform, opacity;
}

/* The divider line between GRAVITY and STUDIOS, ignited from its centre. */
.splash__line {
  position: absolute;
  left: 44.5%;
  top: 72.6%;
  width: 11.3%;
  height: max(2px, 0.28%);
  border-radius: 2px;
  background: linear-gradient(90deg, transparent, rgb(120 190 255) 30%, #fff 50%, rgb(120 190 255) 70%, transparent);
  box-shadow: 0 0 10px rgb(60 150 255 / 0.9), 0 0 24px rgb(40 110 255 / 0.6);
  opacity: 0;
  transform: scaleX(0);
  will-change: transform, opacity;
}

/* A horizontal lens flare through the line as it lights. */
.splash__flare {
  position: absolute;
  left: 10%;
  top: 72.3%;
  width: 80%;
  height: 0.9%;
  border-radius: 50%;
  background: radial-gradient(closest-side, rgb(190 225 255 / 0.95), rgb(60 140 255 / 0.4) 40%, transparent);
  mix-blend-mode: screen;
  opacity: 0;
  transform: scaleX(0.2);
  will-change: transform, opacity;
}

/* "MADE BY" above the mark, so the screen reads as one line with the artwork's
   own wordmark finishing it. Tracked like STUDIOS, in the same cool silver. */
.splash__made {
  position: absolute;
  left: 0;
  right: 0;
  top: 15.6%;
  margin: 0;
  padding-left: 0.62em;          /* tracking adds space after the last letter too */
  text-align: center;
  font-family: "Avenir Next", "Futura", "Century Gothic", "Segoe UI", system-ui, sans-serif;
  font-weight: 500;
  font-size: 2.3vh;
  font-size: 3cqh;
  line-height: 1;
  letter-spacing: 0.62em;
  text-transform: uppercase;
  background: linear-gradient(180deg, #f4f7fb 0%, #c3ccd8 55%, #8c98aa 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  opacity: 0;
  transform: translateY(40%);
  will-change: transform, opacity;
}

.splash__copy {
  position: absolute;
  left: 0;
  right: 0;
  bottom: max(3.5vh, env(safe-area-inset-bottom));
  margin: 0;
  text-align: center;
  font-family: "Avenir Next", "Segoe UI", system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgb(180 192 210 / 0.42);
  opacity: 0;
}

.splash__skip {
  position: absolute;
  right: max(24px, env(safe-area-inset-right));
  bottom: max(3vh, env(safe-area-inset-bottom));
  padding: 8px 14px;
  border: 1px solid rgb(180 200 230 / 0.2);
  border-radius: 999px;
  background: rgb(10 16 30 / 0.5);
  color: rgb(200 212 230 / 0.8);
  font: 600 11px/1 "Avenir Next", "Segoe UI", system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  cursor: pointer;
  opacity: 0;
}
.splash__skip:hover,
.splash__skip:focus-visible { color: #fff; border-color: rgb(120 180 255 / 0.6); outline: none; }

/* ---- the timeline --------------------------------------------------------- */

.splash.is-live .splash__ambient { animation: sg-fade calc(var(--k) * 1.6s) calc(var(--k) * 0.05s) ease-out both; }
.splash.is-go .splash__bloom   { animation: sg-bloom calc(var(--k) * 1.3s) calc(var(--k) * 0.1s) ease-out both; }
.splash.is-go .splash__mark    { animation: sg-logo calc(var(--k) * 1.25s) calc(var(--k) * 0.25s) cubic-bezier(0.16, 1, 0.3, 1) both; }
.splash.is-go .splash__glow    {
  animation:
    sg-ignite calc(var(--k) * 1.4s) calc(var(--k) * 0.75s) cubic-bezier(0.2, 0.8, 0.2, 1) both,
    sg-breathe 2.6s calc(var(--k) * 2.15s) ease-in-out infinite alternate;
}
.splash.is-go .splash__mark .splash__band    { animation: sg-sweep calc(var(--k) * 1.0s) calc(var(--k) * 0.95s) cubic-bezier(0.45, 0, 0.25, 1) both; }
.splash.is-go .splash__gravity { animation: sg-word calc(var(--k) * 1.1s) calc(var(--k) * 1.05s) cubic-bezier(0.16, 1, 0.3, 1) both; }
.splash.is-go .splash__gravity .splash__band { animation: sg-sweep calc(var(--k) * 1.15s) calc(var(--k) * 1.3s) cubic-bezier(0.45, 0, 0.25, 1) both; }
.splash.is-go .splash__line    { animation: sg-line calc(var(--k) * 0.75s) calc(var(--k) * 1.7s) cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.splash.is-go .splash__flare   { animation: sg-flare calc(var(--k) * 1.1s) calc(var(--k) * 1.7s) ease-out both; }
.splash.is-go .splash__studios { animation: sg-rise calc(var(--k) * 0.9s) calc(var(--k) * 1.85s) cubic-bezier(0.16, 1, 0.3, 1) both; }
.splash.is-go .splash__made    { animation: sg-rise calc(var(--k) * 0.9s) calc(var(--k) * 2.05s) cubic-bezier(0.16, 1, 0.3, 1) both; }
.splash.is-go .splash__copy    { animation: sg-fade calc(var(--k) * 1s) calc(var(--k) * 2.4s) ease-out both; }
.splash.is-go .splash__skip    { animation: sg-skip 0.6s calc(var(--k) * 0.9s) ease-out both; }
.splash.is-live .splash__mote    {
  animation:
    sg-mote-in 1.4s var(--d, 0s) ease-out both,
    sg-drift var(--t, 8s) var(--d, 0s) linear infinite;
}

@keyframes sg-fade   { from { opacity: 0; } to { opacity: 1; } }
@keyframes sg-skip   { from { opacity: 0; } to { opacity: 0.85; } }
@keyframes sg-bloom  { 0% { opacity: 0; } 35% { opacity: 0.85; } 100% { opacity: 0; transform: scale(1); } }
@keyframes sg-logo   { from { opacity: 0; transform: scale(1.07); } to { opacity: 1; transform: scale(1); } }
@keyframes sg-ignite {
  0%   { opacity: 0;    transform: rotate(-9deg) scale(0.6); }
  28%  { opacity: 1;    transform: rotate(-9deg) scale(1.08); }
  100% { opacity: 0.55; transform: rotate(-9deg) scale(1); }
}
@keyframes sg-breathe { from { opacity: 0.55; } to { opacity: 0.8; } }
@keyframes sg-line   {
  0%   { opacity: 0; transform: scaleX(0); }
  40%  { opacity: 1; }
  100% { opacity: 0.6; transform: scaleX(1); }
}
@keyframes sg-flare  {
  0%   { opacity: 0;    transform: scaleX(0.2); }
  30%  { opacity: 0.95; transform: scaleX(1); }
  100% { opacity: 0;    transform: scaleX(1.5); }
}
@keyframes sg-sweep  { from { transform: translateX(-130%) skewX(-12deg); } to { transform: translateX(290%) skewX(-12deg); } }
@keyframes sg-word   { from { opacity: 0; transform: translateY(18%) scaleX(1.05); } to { opacity: 1; transform: translateY(0) scaleX(1); } }
@keyframes sg-rise   { from { opacity: 0; transform: translateY(40%); } to { opacity: 1; transform: translateY(0); } }
@keyframes sg-mote-in { from { opacity: 0; } to { opacity: var(--a, 0.6); } }
@keyframes sg-drift  {
  from { transform: translate(0, 0); }
  to   { transform: translate(var(--dx, 0px), var(--dy, -40px)); }
}

/* ---- leaving -------------------------------------------------------------- */

/* pointer-events off at once: the element can outlive its fade by most of a
   second while the game boots, and must not eat clicks meant for the menu. */
.splash.is-out { opacity: 0; pointer-events: none; }
.splash.is-out .splash__stage {
  transform: scale(1.035);
  transition: transform calc(var(--k) * 0.9s) cubic-bezier(0.2, 0.7, 0.2, 1);
}
.splash.is-out .splash__glow { animation: sg-exit-flare 0.5s ease-out both; }
@keyframes sg-exit-flare { to { opacity: 1; transform: rotate(-9deg) scale(1.2); } }
.splash.is-skip { opacity: 0; transition-duration: 0.35s; pointer-events: none; }

/* ---- reduced motion: a plain, calm fade ---------------------------------- */

.splash.is-reduced .splash__bloom,
.splash.is-reduced .splash__shine,
.splash.is-reduced .splash__flare,
.splash.is-reduced .splash__motes { display: none; }
.splash.is-reduced.is-go .splash__part,
.splash.is-reduced.is-go .splash__made,
.splash.is-reduced.is-go .splash__glow,
.splash.is-reduced.is-go .splash__line { animation: sg-fade 0.8s ease-out both; transform: none; }
.splash.is-reduced.is-out .splash__stage { transform: none; }