/* Confluo intro. Five venues' liquidity flows into one point and leaves as one
   route: the name, drawn. It sits over the live app, which loads underneath,
   and clears itself with a shockwave on "Start trading". */

.intro {
  position: fixed; inset: 0; z-index: 90; overflow-x: hidden; overflow-y: auto;
  display: grid; grid-template-rows: auto auto; align-content: center; justify-items: center; gap: clamp(4px, 2vh, 24px);
  padding: clamp(8px, 3vh, 32px) 16px clamp(24px, 6vh, 64px);
  background:
    radial-gradient(900px 500px at 64% 38%, rgba(60, 240, 208, .10), transparent 70%),
    radial-gradient(800px 600px at 20% 80%, rgba(139, 108, 255, .12), transparent 70%),
    rgba(5, 7, 13, .78);
  backdrop-filter: blur(6px);
}
body.intro-open { overflow: hidden; }
body.intro-open .top, body.intro-open main, body.intro-open .foot { opacity: 0; transform: translateY(26px) scale(.985); }
.top, main, .foot { transition: opacity .9s var(--ease), transform 1s var(--ease); }
body.app-in main { transition-delay: .12s; }
body.app-in .foot { transition-delay: .24s; }

/* the flow */
.intro-flow { width: min(1000px, 100%); height: clamp(180px, 32vh, 400px); overflow: visible; align-self: center; flex: none; }
.intro-stream { fill: none; stroke: url(#introStream); stroke-width: 3; stroke-linecap: round; stroke-dasharray: 900; stroke-dashoffset: 900; animation: intro-draw 1.6s var(--ease) forwards; }
.intro-stream-glow { fill: none; stroke: var(--c1); stroke-width: 12; stroke-opacity: .06; filter: blur(6px); }
@keyframes intro-draw { to { stroke-dashoffset: 0; } }
.intro-out { fill: none; stroke: url(#introOut); stroke-width: 5; stroke-linecap: round; stroke-dasharray: 400; stroke-dashoffset: 400; filter: url(#introGlow); animation: intro-draw 1.2s 1.5s var(--ease) forwards; }
.intro-particle { fill: #fff; filter: drop-shadow(0 0 6px var(--c1)); }
.intro-core { transform-box: fill-box; transform-origin: center; opacity: 0; animation: core-in .9s 1.1s var(--spring) forwards; }
@keyframes core-in { from { opacity: 0; transform: scale(.2); } to { opacity: 1; transform: scale(1); } }
.core-dot { fill: #fff; filter: url(#introGlow); }
.core-glow { transform-box: fill-box; transform-origin: center; animation: core-breathe 2.4s ease-in-out infinite; }
@keyframes core-breathe { 50% { transform: scale(1.18); opacity: .85; } }
.core-wave { fill: none; stroke: var(--c1); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: core-wave 2.6s ease-out infinite; }
.core-wave.w2 { animation-delay: 1.3s; }
@keyframes core-wave { from { transform: scale(.6); opacity: .8; } to { transform: scale(3.4); opacity: 0; } }

/* the venues */
.intro-venue { opacity: 0; transform-box: fill-box; transform-origin: center; animation: venue-in .7s var(--spring) forwards; transition: transform 1s var(--ease), opacity .8s var(--ease); }
@keyframes venue-in { from { opacity: 0; transform: translateX(-30px) scale(.6); } to { opacity: 1; transform: none; } }
.intro-venue .vbg { fill: #e9f2ef; stroke: rgba(255, 255, 255, .25); stroke-width: 1; }
.intro-venue .vbg.dark { fill: #0b0f1a; stroke: var(--edge-2); }
.intro-venue .vring { fill: none; stroke: var(--c1); stroke-opacity: .35; stroke-dasharray: 3 6; transform-box: fill-box; transform-origin: center; animation: rot 16s linear infinite; }
.intro-venue text { font: 500 13px "Space Grotesk", sans-serif; fill: var(--muted); text-anchor: end; }

/* the copy */
@keyframes intro-up { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.intro-copy { display: grid; justify-items: center; text-align: center; gap: clamp(8px, 1.6vh, 14px); max-width: 720px; }
.intro-kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12px; letter-spacing: .14em; text-transform: uppercase; color: #ffc2cc; padding: 6px 14px; border-radius: 999px; border: 1px solid rgba(255, 107, 129, .35); background: rgba(255, 107, 129, .08); opacity: 0; animation: intro-up .7s .2s var(--ease) forwards; }
.intro-kicker .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bad); animation: beacon 2s infinite; }
.intro-title { margin: 0; font-size: clamp(56px, min(11vw, 13vh), 124px); line-height: .95; font-weight: 700; letter-spacing: -0.045em; display: flex; }
.intro-title .ch {
  display: inline-block;
  background: linear-gradient(110deg, #fff 20%, #b9c6ff 45%, var(--c1) 60%, #fff 80%) 0 0 / 260% 100%;
  -webkit-background-clip: text; background-clip: text; color: transparent;
  opacity: 0; transform: translateY(.45em) rotate(6deg);
  animation: ch-in .9s var(--spring) forwards, shine 6s 2s linear infinite;
}
@keyframes ch-in { to { opacity: 1; transform: none; } }
@keyframes shine { to { background-position: -260% 0; } }
.intro-tag { margin: 0; font-size: clamp(18px, 2.6vw, 26px); color: var(--text); opacity: 0; animation: intro-up .8s .9s var(--ease) forwards; }
.intro-tag b { font-weight: 600; background: linear-gradient(90deg, var(--c1), #9fb0ff); -webkit-background-clip: text; background-clip: text; color: transparent; }
.intro-sub { margin: 0; max-width: 560px; font-size: 14.5px; line-height: 1.6; color: var(--muted); opacity: 0; animation: intro-up .8s 1.05s var(--ease) forwards; }
.intro-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: min(560px, 100%); margin-top: 4px; opacity: 0; animation: intro-up .8s 1.2s var(--ease) forwards; }
.intro-stats div { padding: 10px 6px; border-radius: 14px; background: rgba(16, 21, 34, .6); border: 1px solid var(--edge); }
.intro-stats b { display: block; font-size: 22px; font-weight: 600; font-variant-numeric: tabular-nums; }
.intro-stats span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }

/* the call to action */
.intro-go {
  position: relative; isolation: isolate; display: inline-flex; align-items: center; gap: 12px;
  margin-top: 10px; padding: 17px 34px; border: 0; border-radius: 999px;
  font-size: 17px; font-weight: 600; color: var(--bg);
  background: linear-gradient(135deg, var(--c1), #7c8cff 60%, var(--c2)); background-size: 200% 200%;
  box-shadow: 0 18px 50px -16px rgba(60, 240, 208, .65);
  opacity: 0; animation: intro-up .8s 1.45s var(--ease) forwards, hue-drift 6s 2s ease-in-out infinite;
  transition: transform .35s var(--spring), box-shadow .35s;
}
.intro-go:hover { transform: translateY(-3px) scale(1.03); box-shadow: 0 26px 60px -16px rgba(60, 240, 208, .85); }
.intro-go:active { transform: scale(.97); }
.intro-go svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .35s var(--spring); }
.intro-go:hover svg { transform: translateX(4px); }
.intro-go-ring { position: absolute; inset: -6px; z-index: -1; border-radius: inherit; border: 1.5px solid rgba(60, 240, 208, .55); animation: go-ring 2.4s ease-out infinite; }
@keyframes go-ring { from { opacity: .9; transform: scale(.96); } to { opacity: 0; transform: scale(1.25); } }
.intro-hint { margin: 0; font-size: 12px; color: var(--faint); opacity: 0; animation: intro-up .8s 1.8s var(--ease) forwards; }
.intro-hint kbd { font: 500 11px var(--mono); padding: 2px 6px; border-radius: 6px; border: 1px solid var(--edge-2); color: var(--muted); }

/* leaving: everything converges, a wave clears the screen, the app arrives */
.intro-shock { position: absolute; left: 64%; top: 38%; width: 40px; height: 40px; margin: -20px; border-radius: 50%; pointer-events: none; opacity: 0; background: radial-gradient(circle, rgba(255, 255, 255, .9), rgba(60, 240, 208, .5) 30%, rgba(139, 108, 255, .2) 55%, transparent 70%); }
.intro.leaving .intro-shock { animation: shock 1.1s .35s var(--ease) forwards; }
@keyframes shock { 0% { opacity: 1; transform: scale(1); } 100% { opacity: 0; transform: scale(90); } }
.intro.leaving .intro-venue { transform: scale(.3); opacity: 0; transition-duration: .6s; }
.intro.leaving .intro-stream { animation: intro-retract .7s var(--ease) forwards; }
@keyframes intro-retract { from { stroke-dashoffset: 0; } to { stroke-dashoffset: -900; } }
.intro.leaving .intro-stream-glow, .intro.leaving .intro-particle { transition: opacity .4s var(--ease); opacity: 0; }
.intro.leaving .intro-core { animation: core-flash .7s var(--ease) forwards; }
@keyframes core-flash { 40% { transform: scale(1.8); opacity: 1; } 100% { transform: scale(.1); opacity: 0; } }
.intro.leaving .intro-copy > * { transition: opacity .5s var(--ease), transform .7s var(--ease); opacity: 0; transform: translateY(-24px); }
.intro.leaving .intro-copy > *:nth-child(2) { transition-delay: .05s; }
.intro.leaving .intro-copy > *:nth-child(n+3) { transition-delay: .1s; }
.intro.leaving { animation: intro-out .9s .55s var(--ease) forwards; }
@keyframes intro-out { to { opacity: 0; backdrop-filter: blur(0); visibility: hidden; } }

@media (max-width: 720px) {
  .intro-flow { height: clamp(160px, 30vh, 260px); }
  .intro-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .intro-venue text { display: none; }
  .intro-shock { left: 50%; top: 22%; }
}
@media (prefers-reduced-motion: reduce) {
  .intro-title .ch { opacity: 1; transform: none; }
}