/* ===========================================================================
   REAL APEX BOT — PUBLIC LOGIN (M3, LANE D)
   Page-specific rules only. Shared vocabulary lives in skin.css.
   =========================================================================== */

/* ===========================================================================
   ARENA BACKDROP
   =========================================================================== */
.arena {
  position: fixed;
  inset: 0;
  z-index: -3;
  overflow: hidden;
  pointer-events: none;
}

.arena__sky {
  position: absolute;
  inset: -20%;
  background:
    radial-gradient(120% 80% at 50% -10%, #6a3cff 0%, rgba(106, 60, 255, 0) 60%),
    radial-gradient(90% 60% at 12% 10%, rgba(52, 232, 255, 0.35) 0%, rgba(52, 232, 255, 0) 55%),
    radial-gradient(80% 60% at 88% 18%, rgba(255, 212, 38, 0.22) 0%, rgba(255, 212, 38, 0) 55%),
    linear-gradient(180deg, var(--apex-bg-2) 0%, var(--apex-bg) 62%, #0c0726 100%);
}

.arena__beams {
  position: absolute;
  top: -30vh;
  left: 50%;
  width: 180vmax;
  height: 120vmax;
  transform: translateX(-50%);
  animation: beam-sweep 44s linear infinite;
}
.arena__beams i {
  position: absolute;
  top: 0; left: 50%;
  width: 7vmax;
  height: 100%;
  transform-origin: 50% 0;
  transform: rotate(calc(-52deg + var(--i) * 21deg));
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.16), rgba(255, 255, 255, 0));
  filter: blur(14px);
  opacity: 0.55;
}
@keyframes beam-sweep {
  0%   { transform: translateX(-50%) rotate(-5deg); }
  50%  { transform: translateX(-50%) rotate(5deg); }
  100% { transform: translateX(-50%) rotate(-5deg); }
}

.arena__ring {
  position: absolute;
  border-radius: 50%;
  border: 2px solid rgba(52, 232, 255, 0.28);
  box-shadow: 0 0 60px rgba(52, 232, 255, 0.18) inset;
}
.arena__ring--a {
  width: 92vmin; height: 92vmin;
  left: -26vmin; bottom: -42vmin;
  border-color: rgba(180, 92, 255, 0.3);
  animation: ring-pulse 11s ease-in-out infinite;
}
.arena__ring--b {
  width: 64vmin; height: 64vmin;
  right: -20vmin; top: 8vmin;
  animation: ring-pulse 14s ease-in-out infinite reverse;
}
@keyframes ring-pulse {
  0%, 100% { transform: scale(1);    opacity: 0.55; }
  50%      { transform: scale(1.09); opacity: 0.9; }
}

.arena__floor {
  position: absolute;
  left: -20%; right: -20%; bottom: -10%;
  height: 46vh;
  background:
    repeating-linear-gradient(90deg, rgba(52, 232, 255, 0.16) 0 2px, rgba(0, 0, 0, 0) 2px 9%),
    repeating-linear-gradient(0deg,  rgba(52, 232, 255, 0.12) 0 2px, rgba(0, 0, 0, 0) 2px 14%);
  transform: perspective(60vh) rotateX(72deg);
  transform-origin: 50% 100%;
  mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0), #000 55%);
  -webkit-mask-image: linear-gradient(180deg, rgba(0, 0, 0, 0), #000 55%);
  opacity: 0.6;
}

.arena__motes { position: absolute; inset: 0; }
.arena__motes i {
  position: absolute;
  left: var(--x);
  bottom: -4vh;
  width: calc(6px * var(--s));
  height: calc(6px * var(--s));
  border-radius: 50%;
  background: var(--apex-yellow);
  box-shadow: 0 0 14px var(--apex-yellow);
  opacity: 0;
  animation: mote-rise 13s linear infinite;
  animation-delay: var(--d);
}
@keyframes mote-rise {
  0%   { transform: translateY(0) scale(.6);        opacity: 0; }
  12%  {                                            opacity: .9; }
  85%  {                                            opacity: .5; }
  100% { transform: translateY(-104vh) scale(1.25); opacity: 0; }
}

/* ===========================================================================
   DECORATIVE CANDLE ART — ornament. No axis, no numbers, not market data.
   =========================================================================== */
.candles {
  position: fixed;
  left: -4vw;
  bottom: 2vh;
  width: min(78vw, 560px);
  height: auto;
  z-index: -2;
  opacity: 0.42;
  filter: drop-shadow(0 0 26px rgba(52, 232, 255, 0.35));
  pointer-events: none;
}
.candles .candle {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: candle-breathe 5.2s ease-in-out infinite;
  animation-delay: var(--d);
}
@keyframes candle-breathe {
  0%, 100% { transform: translateY(0)     scaleY(1); }
  50%      { transform: translateY(-7px)  scaleY(1.09); }
}
.candles__trail {
  stroke-dasharray: 60 600;
  animation: trail-run 6.5s linear infinite;
}
@keyframes trail-run {
  from { stroke-dashoffset: 660; }
  to   { stroke-dashoffset: 0; }
}

/* ===========================================================================
   FLOATING ROCKET
   =========================================================================== */
.rocket {
  position: fixed;
  right: 2vw;
  top: 24vh;
  width: clamp(72px, 12vw, 140px);
  z-index: -1;
  pointer-events: none;
  animation: rocket-float 9s ease-in-out infinite;
  filter: drop-shadow(0 18px 34px rgba(255, 122, 26, 0.35));
}
@keyframes rocket-float {
  0%, 100% { transform: translate3d(0, 0, 0)        rotate(-8deg); }
  35%      { transform: translate3d(-14px, -34px, 0) rotate(-2deg); }
  70%      { transform: translate3d(10px, -14px, 0)  rotate(-13deg); }
}
.rocket__flame {
  transform-box: fill-box;
  transform-origin: 50% 0;
  animation: flame-flicker 0.32s steps(2, end) infinite alternate;
}
@keyframes flame-flicker {
  from { transform: scaleY(0.82) scaleX(1.05); opacity: 0.85; }
  to   { transform: scaleY(1.18) scaleX(0.92); opacity: 1; }
}
.rocket__sparks {
  animation: spark-drift 1.6s ease-in infinite;
  transform-box: fill-box;
}
@keyframes spark-drift {
  0%   { transform: translateY(-10px); opacity: 0; }
  40%  { opacity: 1; }
  100% { transform: translateY(26px);  opacity: 0; }
}

/* ===========================================================================
   TICKER — LIVE DATA ONLY
   =========================================================================== */
.ticker {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: stretch;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  background: linear-gradient(90deg, rgba(10, 6, 34, 0.94), rgba(26, 19, 72, 0.9));
  border-bottom: 2px solid var(--apex-panel-edge);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  overflow: hidden;
}
.ticker__badge { display: flex; align-items: center; flex: 0 0 auto; }
.ticker__viewport {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  display: flex;
  align-items: center;
}
.ticker__track {
  display: flex;
  align-items: center;
  gap: 1.6rem;
  white-space: nowrap;
  will-change: transform;
}
.ticker[data-state="live"] .ticker__track {
  animation: ticker-run var(--ticker-duration, 40s) linear infinite;
}
@keyframes ticker-run {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.ticker__viewport:hover .ticker__track { animation-play-state: paused; }

.tick {
  display: inline-flex;
  align-items: baseline;
  gap: 0.45rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: 0.06em;
  font-size: 0.86rem;
  text-transform: uppercase;
}
.tick__sym   { color: var(--apex-text); }
.tick__price { color: var(--apex-cyan); font-variant-numeric: tabular-nums; }
.tick__chg   { font-variant-numeric: tabular-nums; }
.tick__chg--up   { color: var(--apex-ok); }
.tick__chg--down { color: var(--apex-danger); }
.tick__chg--flat { color: var(--apex-text-dim); }

/* Only ONE of track / message is ever shown. There is no third "placeholder"
   state, because there is no placeholder data anywhere in this page. */
.ticker__message { margin: 0; }
.ticker[data-state="live"]       .ticker__message { display: none; }
.ticker[data-state="offline"]    .ticker__track,
.ticker[data-state="connecting"] .ticker__track   { display: none; }
.ticker[data-state="offline"]    .ticker__message { color: var(--apex-offline); }
.ticker[data-state="connecting"] .ticker__message { color: var(--apex-text-dim); }
.ticker[data-state="connecting"] .ticker__message::before { animation: mote-blink 1.1s ease-in-out infinite; }
@keyframes mote-blink { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }

/* ===========================================================================
   TOPBAR
   =========================================================================== */
.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1rem 0.25rem;
  max-width: 1180px;
  margin: 0 auto;
}
.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  text-decoration: none;
  color: inherit;
}
.brand__mark { width: 38px; height: 38px; flex: 0 0 auto; animation: mark-glow 4.5s ease-in-out infinite; }
@keyframes mark-glow {
  0%, 100% { filter: drop-shadow(0 0 4px rgba(255, 212, 38, 0.4)); }
  50%      { filter: drop-shadow(0 0 16px rgba(255, 212, 38, 0.85)); }
}
.brand__text { display: flex; flex-direction: column; line-height: 1; }
.brand__text strong {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  letter-spacing: 0.08em;
  font-size: 1.15rem;
}
.brand__text em {
  font-style: normal;
  font-size: 0.66rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--apex-cyan);
  margin-top: 0.22rem;
}
.topbar__chip { flex: 0 0 auto; }

/* ===========================================================================
   SHELL
   =========================================================================== */
.shell {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.2rem 1rem 2rem;
  display: grid;
  gap: 1.8rem;
}

/* ===========================================================================
   PITCH
   =========================================================================== */
.pitch__eyebrow {
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.7rem;
  color: var(--apex-yellow);
  margin: 0 0 0.6rem;
}
.pitch__title {
  font-size: clamp(2.6rem, 12vw, 5.4rem);
  margin: 0 0 0.7rem;
  display: flex;
  flex-direction: column;
}
.pitch__title-lead { color: var(--apex-text); }
.pitch__title-hero {
  font-style: italic;
  background: linear-gradient(100deg, var(--apex-yellow) 0%, #fff6c2 22%, var(--apex-cyan) 48%, var(--apex-purple) 78%, var(--apex-yellow) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: hero-shine 7s linear infinite;
}
@keyframes hero-shine {
  from { background-position: 0% 50%; }
  to   { background-position: 260% 50%; }
}
.pitch__lead {
  font-size: 1.06rem;
  color: var(--apex-text);
  margin: 0 0 0.9rem;
  max-width: 62ch;
}
.pitch__lead strong { color: var(--apex-yellow); }
.pitch__body {
  color: var(--apex-text-dim);
  margin: 0 0 1.4rem;
  max-width: 62ch;
}

.perks {
  list-style: none;
  margin: 0 0 1.5rem;
  padding: 0;
  display: grid;
  gap: 0.8rem;
}
.perk h2 {
  font-size: 0.92rem;
  letter-spacing: 0.1em;
  color: var(--apex-cyan);
  margin: 0 0 0.3rem;
}
.perk p { margin: 0; font-size: 0.92rem; color: var(--apex-text-dim); }
.perk { transition: transform 180ms ease; }
.perk:hover { transform: translateY(-3px); }

.quote { margin: 0; }
.quote blockquote {
  margin: 0 0 0.5rem;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  font-style: italic;
  font-size: clamp(1.1rem, 4.4vw, 1.5rem);
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--apex-text);
}
.quote figcaption {
  font-size: 0.72rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--apex-yellow);
}

/* ===========================================================================
   LOGIN
   =========================================================================== */
.gate { display: block; }
.login { display: grid; gap: 0.85rem; }
.login__lead { margin: 0; color: var(--apex-text-dim); font-size: 0.95rem; }

/* --- code slots --- */
.code {
  position: relative;
  display: block;
  padding: 0.2rem;
  border-radius: var(--radius);
}
.code:focus-within { outline: 3px solid var(--apex-cyan); outline-offset: 4px; }
.code__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  border: 0;
  padding: 0;
  font-size: 16px;            /* keeps iOS from zooming on focus */
  cursor: pointer;
}
.code__slots {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 0.4rem;
}
.code__slot {
  display: block;
  height: clamp(3rem, 13vw, 3.9rem);
  border: 2px solid rgba(111, 92, 255, 0.75);
  border-radius: var(--radius);
  background: rgba(10, 6, 34, 0.62);
  clip-path: polygon(0 8px, 8px 0, 100% 0, 100% calc(100% - 8px), calc(100% - 8px) 100%, 0 100%);
  position: relative;
}
.code__slot::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 0.62rem;
  height: 0.62rem;
  border-radius: 50%;
  background: var(--apex-yellow);
  box-shadow: 0 0 14px var(--apex-yellow);
  transform: translate(-50%, -50%) scale(0);
  transition: transform 140ms cubic-bezier(.2, 1.7, .5, 1);
}
.code__slot.is-filled { border-color: var(--apex-yellow); background: rgba(255, 212, 38, 0.1); }
.code__slot.is-filled::after { transform: translate(-50%, -50%) scale(1); }
.code__slot.is-next { border-color: var(--apex-cyan); animation: slot-wait 1.4s ease-in-out infinite; }
@keyframes slot-wait {
  0%, 100% { box-shadow: 0 0 0 rgba(52, 232, 255, 0); }
  50%      { box-shadow: 0 0 0 4px rgba(52, 232, 255, 0.22); }
}
.code.is-wrong { animation: code-shake 0.42s ease-in-out; }
@keyframes code-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-9px); }
  45%      { transform: translateX(8px); }
  70%      { transform: translateX(-5px); }
}
.code.is-wrong .code__slot { border-color: var(--apex-danger); }

.code__hint { margin: 0; font-size: 0.78rem; color: var(--apex-text-dim); }

/* --- keypad --- */
.keypad {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.5rem;
}

/* --- remember device --- */
.remember {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  user-select: none;
  padding: 0.25rem 0;
}
.remember input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
}
.remember__box {
  width: 1.4rem;
  height: 1.4rem;
  flex: 0 0 auto;
  border: 2px solid var(--apex-panel-edge);
  background: rgba(10, 6, 34, 0.6);
  clip-path: polygon(0 6px, 6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%);
  display: grid;
  place-items: center;
  transition: background-color 140ms ease, border-color 140ms ease;
}
.remember__box::after {
  content: "";
  width: 0.72rem;
  height: 0.38rem;
  border-left: 3px solid #1a1030;
  border-bottom: 3px solid #1a1030;
  transform: rotate(-45deg) scale(0);
  transition: transform 150ms cubic-bezier(.2, 1.7, .5, 1);
  margin-top: -3px;
}
.remember input:checked + .remember__box { background: var(--apex-yellow); border-color: #fff3a8; }
.remember input:checked + .remember__box::after { transform: rotate(-45deg) scale(1); }
.remember input:focus-visible + .remember__box { outline: 3px solid var(--apex-cyan); outline-offset: 3px; }
.remember__text { font-size: 0.95rem; color: var(--apex-text); }

/* --- submit --- */
.login__submit { width: 100%; font-size: 1.1rem; padding: 1.05rem 1.4rem; }
.login__submit:not(:disabled) { animation: cta-pulse 3.4s ease-in-out infinite; }
@keyframes cta-pulse {
  0%, 100% { box-shadow: 0 6px 0 #b98f00, 0 14px 28px rgba(255, 212, 38, 0.24); }
  50%      { box-shadow: 0 6px 0 #b98f00, 0 14px 40px rgba(255, 212, 38, 0.55); }
}
.login.is-busy .login__submit { opacity: .6; }

/* --- messages --- */
.login__msg {
  margin: 0;
  font-size: 0.92rem;
  padding: 0.6rem 0.75rem;
  border-left: 3px solid currentColor;
  background: rgba(10, 6, 34, 0.5);
}
.login__msg--error  { color: var(--apex-danger); }
.login__msg--status { color: var(--apex-cyan); }
.login__fine { margin: 0; font-size: 0.74rem; color: var(--apex-text-dim); }

/* ===========================================================================
   FOOTER + FOUNDER SIGNATURE
   =========================================================================== */
.footer {
  max-width: 1180px;
  margin: 0 auto;
  padding: 1.5rem 1rem 3rem;
  text-align: center;
  border-top: 1px solid rgba(111, 92, 255, 0.28);
}
.sig { display: inline-block; margin-bottom: 0.9rem; }
.sig__name {
  margin: 0;
  font-family: "Snell Roundhand", "Segoe Script", "Brush Script MT",
               "Apple Chancery", "URW Chancery L", "Z003", "Zapf Chancery", cursive;
  font-size: clamp(2.1rem, 9vw, 3.1rem);
  font-weight: 400;
  line-height: 1;
  color: var(--apex-text);
  text-shadow: 0 2px 18px rgba(52, 232, 255, 0.35);
  transform: rotate(-2.2deg);
}
.sig__flourish {
  display: block;
  width: min(280px, 72vw);
  height: 18px;
  margin: 0.15rem auto 0.35rem;
}
.sig__flourish path {
  stroke-dasharray: 420;
  stroke-dashoffset: 420;
  animation: sig-draw 2.6s ease-out 0.4s forwards;
}
@keyframes sig-draw { to { stroke-dashoffset: 0; } }
.sig__role {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-stretch: condensed;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  font-size: 0.68rem;
  color: var(--apex-text-dim);
}
.footer__fine {
  margin: 0 auto;
  max-width: 52ch;
  font-size: 0.74rem;
  color: var(--apex-text-dim);
}

/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (min-width: 620px) {
  .perks { grid-template-columns: 1fr 1fr; }
  .keypad { gap: 0.6rem; }
}

@media (min-width: 980px) {
  .shell {
    grid-template-columns: minmax(0, 1.25fr) minmax(340px, 0.85fr);
    gap: 2.6rem;
    padding-top: 2rem;
  }
  .gate { position: sticky; top: 4.6rem; align-self: start; }
  .candles { width: min(46vw, 620px); opacity: 0.5; }
  .rocket  { right: 30vw; top: 16vh; }
}

@media (min-width: 1280px) {
  .rocket { right: 34vw; }
}

/* Short viewports: keep the ornament out of the way. */
@media (max-height: 620px) {
  .rocket { opacity: 0.5; }
}

/* ===========================================================================
   REDUCED MOTION — explicit static degradation.
   skin.css already collapses durations; these rules make sure nothing lands
   in a mid-animation end state (notably the marquee and the signature).
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .arena__beams,
  .arena__motes i,
  .arena__ring,
  .candles .candle,
  .candles__trail,
  .rocket,
  .rocket__flame,
  .rocket__sparks,
  .brand__mark,
  .pitch__title-hero,
  .login__submit,
  .code__slot.is-next,
  .ticker__message::before {
    animation: none !important;
    transform: none !important;
  }
  .ticker[data-state="live"] .ticker__track {
    animation: none !important;
    transform: none !important;
  }
  .ticker__viewport { overflow-x: auto; }
  .candles__trail { stroke-dasharray: none; }
  .sig__flourish path { animation: none !important; stroke-dashoffset: 0; }
  .pitch__title-hero { background-position: 30% 50%; }
  .code.is-wrong { animation: none !important; }
}