:root {
  --deep: #04041c;
  --night: #0a0a2e;
  --signal: #d7ff3a;
  --gutter: clamp(16px, 3.4vw, 48px);
  --mark: min(30vh, 46vw, 300px);
}

* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; background: var(--deep); color: #fff; overscroll-behavior: none; transition: background-color .8s; }
body { font-family: "Funnel Display", "Segoe UI", system-ui, sans-serif; }
a { color: inherit; text-decoration: none; }

/* A little light behind the mark, so the deep night has somewhere to fall away to. */
.sky {
  position: fixed; inset: 0; pointer-events: none; transition: opacity .8s;
  background: radial-gradient(max(44vw, 40vh) max(34vw, 46vh) at 50% 38%, #0c0d42, rgba(12, 13, 66, 0) 100%);
}

.gate { position: fixed; inset: 0; display: grid; place-content: center; justify-items: center; gap: clamp(28px, 5.5vh, 56px); padding: 0 var(--gutter); }

/* The mark comes alone in the middle of the screen, then rises to make room for the choice. */
.emblem {
  position: relative; width: var(--mark); height: var(--mark);
  translate: 0 var(--lift, 0); opacity: 0;
  animation: rise .8s .15s ease-out forwards;
}
.open .emblem { transition: translate 1s cubic-bezier(.6, 0, .15, 1), scale .7s, opacity .5s; }
.leaving .emblem { scale: 1.12; opacity: 0; animation: none; }
@keyframes rise { to { opacity: 1; } }

.ink { position: absolute; inset: 0; translate: 0 var(--bob, 0); transition: rotate .6s, scale .6s; }
.ink svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; overflow: visible; transition: opacity .6s, fill .6s; }
.solid { fill: #fff; }
.shade { fill: #3d4ee6; translate: 3.2% 3.6%; opacity: 0; }
.base { fill: #12145a; opacity: 0; }
.dotted { opacity: 0; }
#dots circle { fill: #4d5be8; }
.outline { fill: none; stroke: var(--signal); stroke-width: 6; stroke-linejoin: round; opacity: 0; }

/* One ground for rest and Professional: a hairline grid pinned to the screen, whole pixels so the lines stay crisp.
   Hovering Professional lights those same lines and their crossings, so nothing swaps. */
.lattice {
  position: fixed; inset: 0; opacity: 0; transition: opacity .8s; pointer-events: none;
  background:
    linear-gradient(rgba(74, 86, 232, .2) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(74, 86, 232, .2) 1px, transparent 1px) 0 0 / 52px 52px;
  -webkit-mask: radial-gradient(62% 72% at 50% 42%, #000 30%, transparent 100%);
  mask: radial-gradient(62% 72% at 50% 42%, #000 30%, transparent 100%);
}
.lattice::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .8s;
  background:
    radial-gradient(circle at 26.5px 26.5px, #4d5be8 1.1px, transparent 1.6px) -26px -26px / 52px 52px,
    linear-gradient(rgba(74, 86, 232, .14) 1px, transparent 1px) 0 0 / 52px 52px,
    linear-gradient(90deg, rgba(74, 86, 232, .14) 1px, transparent 1px) 0 0 / 52px 52px;
}
.ready .lattice { opacity: 1; }
[data-aim="cel"] .lattice, [data-aim="cel"] .sky { opacity: 0; }
[data-aim="field"] .lattice::after { opacity: 1; }
.leaving .lattice { opacity: 0; transition-duration: .25s; }

/* The painted version trades the grid for the flat wavy rings of its sky. */
.rings { position: absolute; left: 50%; top: 50%; translate: -50% -50%; opacity: 0; transition: opacity .8s; pointer-events: none; }
.rings { width: 250%; height: 250%; overflow: visible; }
.rings path { transform-origin: 0 0; animation: turn 120s linear infinite; }
.rings .r1 { fill: #0c0d38; }
.rings .r2 { fill: #0f1148; animation-direction: reverse; }
.rings .r3 { fill: #13165a; }
@keyframes turn { to { rotate: 360deg; } }

[data-aim="field"] .solid { opacity: 0; }
[data-aim="field"] .base, [data-aim="field"] .dotted, [data-aim="field"] .outline { opacity: 1; }

[data-aim="cel"], [data-aim="cel"] body { background-color: var(--night); }
[data-aim="cel"] .solid { fill: var(--signal); }
[data-aim="cel"] .shade, [data-aim="cel"] .rings { opacity: 1; }
[data-aim="cel"] .ink { rotate: -8deg; scale: 1.04; transition: rotate .7s cubic-bezier(.3, 1.7, .5, 1), scale .7s cubic-bezier(.3, 1.7, .5, 1); }

/* The choice is these two buttons and nothing else on the page reacts to the pointer. */
.choose {
  position: relative; display: grid; justify-items: center; gap: clamp(16px, 2.4vh, 24px);
  opacity: 0; translate: 0 8px;
  transition: opacity .8s, translate .8s cubic-bezier(.2, .7, .2, 1);
}
.ready .choose { opacity: 1; translate: 0; }
.leaving .choose { opacity: 0; transition-duration: .25s; }
.choose h1 { margin: 0; font-size: clamp(20px, 1.9vw, 30px); font-weight: 300; letter-spacing: -.01em; line-height: 1.1; text-align: center; }
.ways { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.way {
  display: inline-flex; justify-content: center; align-items: center; gap: .42em; min-height: 44px; padding: 0 22px;
  border: 1px solid rgba(255, 255, 255, .34); font-size: 15px; letter-spacing: .01em; white-space: nowrap;
  transition: border-color .5s, color .5s; outline: 0;
}
.way:hover, .way:focus-visible, .way.on { border-color: var(--signal); color: var(--signal); }
/* FUN is the page's one secret: warped past reading at rest, on hover it straightens, tips up and floats with the
   painted mark. A screen with no hover shows it plain, or nobody would ever read it. */
.way b {
  display: inline-block; font-size: 1.3em; font-weight: 800; line-height: 1; color: var(--signal);
  translate: 0 calc(var(--bob, 0px) * .45); transform-origin: 20% 60%;
  transition: rotate .6s cubic-bezier(.3, 1.9, .5, 1), scale .6s cubic-bezier(.3, 1.9, .5, 1);
  filter: url(#warp); margin-left: 5px;
}
.way b.clear { filter: none; }
@media (hover: none) { .way b { filter: none; margin-left: 0; } }
.way:hover b, .way:focus-visible b, .way.on b { rotate: -6deg; scale: 1.08; }

@media (max-width: 400px) {
  .way { padding: 0 14px; }
}

.bar { position: fixed; z-index: 2; top: 0; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: clamp(16px, 2.6vh, 28px) var(--gutter); pointer-events: none; }
.bar a { pointer-events: auto; }
.brand svg { display: block; width: 139px; height: 12.4px; fill: #fff; opacity: 0; transition: opacity .7s; }
.what { margin: 0; font-size: 13px; font-weight: 300; line-height: 1.2; color: #fff; opacity: 0; transition: opacity .7s; }
.ready .brand svg { opacity: 1; }
.ready .what { opacity: .62; }

@media (prefers-reduced-motion: reduce) {
  .emblem, .ink, .ink svg, .sky, .lattice, .lattice::after, .rings, .choose, .way, .way b, .brand svg, .what { transition-duration: .01s; transition-delay: 0s; }
  .emblem { animation-duration: .01s; animation-delay: 0s; }
  .rings path { animation: none; }
  [data-aim="cel"] .ink { rotate: none; scale: none; transition: none; }
}