/* Lockon home — premium motion for the $LOCK panel + Live Activity (DESKTOP >1100px only; mobile untouched).
   Visual layer only: app.js owns the data; lock-activity.js just adds classes / decorative nodes.
   Transform + opacity animations only; paused off screen (.la-paused); reduced motion = static. */

.lt-teaser { display: none; }
/* decorative nodes injected by lock-activity.js are desktop-only */
@media (max-width: 1100px) {
  #live-activity .la-scan, #live-activity .la-listen, #live-activity .la-sweep, #live-activity .la-edge, #live-activity .la-sparks { display: none !important; }
}

@media (min-width: 1101px) {
  :root {
    --la-gold: hsl(45 92% 52%);
    --la-gold-soft: hsl(45 92% 52% / 0.18);
    --la-buy: hsl(var(--money));
    --la-sell: hsl(0 78% 60%);
    --la-burn: hsl(28 96% 58%);
  }

  /* ── $LOCK: pre-launch teaser replaces the empty price panel ── */
  html:not(.lock-launched) body[data-page="home"] #lock-market > :not(.lt-teaser) { display: none; }
  html:not(.lock-launched) body[data-page="home"] #lock-market {
    position: relative;
    overflow: hidden;
    isolation: isolate;
    justify-content: center;
    padding: 22px 26px;
  }
  html:not(.lock-launched) body[data-page="home"] #lock-market::before {
    /* soft static vignette — no images */
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(420px 260px at 18% 50%, hsl(45 92% 52% / 0.09), transparent 70%),
      radial-gradient(600px 300px at 100% 0%, hsl(0 0% 100% / 0.035), transparent 70%);
    pointer-events: none;
  }
  html:not(.lock-launched) .lt-teaser {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    align-items: center;
    gap: 30px;
    min-height: 200px;
  }

  .lt-orb {
    position: relative;
    width: 168px;
    height: 168px;
    display: grid;
    place-items: center;
  }
  .lt-orb-glow {
    position: absolute;
    inset: 18px;
    border-radius: 50%;
    background: radial-gradient(circle, hsl(45 92% 52% / 0.42), hsl(45 92% 52% / 0) 68%);
    opacity: 0.55;
  }
  .lt-orb-ring {
    position: absolute;
    inset: 10px;
    border-radius: 50%;
    background: conic-gradient(from 0deg, transparent 0deg, hsl(45 92% 60% / 0.9) 50deg, transparent 120deg, transparent 360deg);
    -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
    mask: radial-gradient(farthest-side, transparent calc(100% - 2px), #000 calc(100% - 1.5px));
  }
  .lt-orb-ring--2 {
    inset: 0;
    background: none;
    border: 1px dashed hsl(var(--foreground) / 0.14);
    -webkit-mask: none;
    mask: none;
  }
  .lt-orb-core {
    position: relative;
    width: 96px;
    height: 96px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: hsl(110 6% 7%);
    box-shadow: 0 0 0 1px hsl(var(--foreground) / 0.12), 0 18px 40px -16px hsl(0 0% 0% / 0.9), 0 0 36px -6px hsl(45 92% 52% / 0.35);
  }
  .lt-orb-core img { width: 84px; height: 84px; border-radius: 50%; object-fit: cover; }

  .lt-copy { min-width: 0; }
  .lt-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: hsl(var(--secondary));
  }
  .lt-eyebrow strong { color: hsl(var(--foreground)); font-family: var(--font-display); font-size: 15px; letter-spacing: 0; text-transform: none; }
  .lt-soon {
    position: relative;
    overflow: hidden;
    padding: 3px 9px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 750;
    color: hsl(0 0% 6%);
    background: var(--la-gold);
  }
  .lt-soon::after {
    content: "";
    position: absolute;
    inset: 0 auto 0 0;
    width: 55%;
    background: linear-gradient(100deg, transparent, hsl(0 0% 100% / 0.65), transparent);
    transform: translateX(-140%);
  }
  .lt-line {
    margin: 12px 0 0;
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 650;
    line-height: 1.18;
    letter-spacing: -0.025em;
    color: hsl(var(--foreground));
    text-wrap: balance;
  }
  .lt-accrued {
    margin-top: 18px;
    padding: 12px 14px;
    border-radius: 14px;
    background: hsl(var(--foreground) / 0.045);
    box-shadow: inset 0 0 0 1px hsl(var(--foreground) / 0.08);
    max-width: 420px;
  }
  .lt-accrued[hidden] { display: none; }
  .lt-accrued-label { font-size: 11.5px; color: hsl(var(--secondary)); }
  .lt-accrued-rows { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 6px; }
  .lt-amt { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 21px; font-weight: 650; font-variant-numeric: tabular-nums; color: hsl(var(--foreground)); }
  .lt-amt img { width: 22px; height: 22px; border-radius: 50%; object-fit: cover; box-shadow: 0 0 0 1px hsl(var(--foreground) / 0.12); }
  .lt-amt small { font-family: var(--font-body); font-size: 12.5px; font-weight: 650; color: hsl(var(--secondary)); }
  .lt-accrued-src { display: inline-block; margin-top: 6px; font-size: 11.5px; color: hsl(var(--secondary)); text-decoration: none; }
  .lt-accrued-src:hover { color: hsl(var(--foreground)); text-decoration: underline; }

  /* After LOCK_MINT: price-panel number tick on change */
  html.lock-launched #lock-market .la-tick { animation: la-tick 0.55s cubic-bezier(0.2, 0.8, 0.2, 1); }

  /* ── Live Activity ───────────────────────────────────────── */
  #live-activity { position: relative; }
  #live-activity .live-type[data-type="buy"] { color: var(--la-buy); background: hsl(var(--money) / 0.1); border-color: hsl(var(--money) / 0.35); }
  #live-activity .live-type[data-type="sell"] { color: hsl(0 85% 74%); background: hsl(0 70% 50% / 0.12); border-color: hsl(0 70% 55% / 0.38); }
  #live-activity .live-type[data-type="burn"] { color: hsl(30 100% 68%); background: hsl(28 96% 55% / 0.12); border-color: hsl(28 96% 55% / 0.38); }
  #live-activity .live-type { position: relative; }

  /* breathing LIVE dot (replaces the box-shadow pulse with a transform/opacity ring) */
  #live-activity .live-pulse .live-dot { position: relative; animation: none; box-shadow: none; }
  #live-activity .live-pulse .live-dot::after {
    content: "";
    position: absolute;
    inset: -4px;
    border-radius: 50%;
    border: 1.5px solid currentColor;
    opacity: 0;
  }
  #live-activity .live-pulse:not(.live-pulse--pending) .live-dot { color: hsl(var(--money)); }

  /* new row: slide in + light sweep + type-coloured edge */
  #live-activity .live-item { position: relative; overflow: hidden; }
  #live-activity .live-item.is-new { animation: la-row-in 0.55s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  #live-activity .live-item.is-new .live-body { animation: none; }
  #live-activity .la-sweep {
    position: absolute;
    inset: 0 auto 0 0;
    width: 45%;
    pointer-events: none;
    background: linear-gradient(100deg, transparent, var(--la-c, hsl(0 0% 100% / 0.16)), transparent);
    opacity: 0;
    animation: la-sweep 1.1s cubic-bezier(0.4, 0, 0.2, 1) 0.12s both;
  }
  #live-activity .la-edge {
    position: absolute;
    left: 0;
    top: 8px;
    bottom: 8px;
    width: 2px;
    border-radius: 2px;
    background: var(--la-e, hsl(var(--foreground) / 0.5));
    transform-origin: 50% 0;
    animation: la-edge 2.4s ease-out both;
    pointer-events: none;
  }
  #live-activity .live-item[data-la="buy"] { --la-c: hsl(var(--money) / 0.22); --la-e: var(--la-buy); }
  #live-activity .live-item[data-la="sell"] { --la-c: hsl(0 78% 60% / 0.22); --la-e: var(--la-sell); }
  #live-activity .live-item[data-la="burn"] { --la-c: hsl(28 96% 58% / 0.24); --la-e: var(--la-burn); }

  /* burn spark burst (6 sparks from the badge) */
  #live-activity .la-sparks { position: absolute; left: 50%; top: 50%; width: 0; height: 0; pointer-events: none; }
  #live-activity .la-sparks i {
    position: absolute;
    left: -2px;
    top: -2px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--la-burn);
    box-shadow: 0 0 6px hsl(28 96% 58% / 0.9);
    opacity: 0;
    animation: la-spark 0.9s cubic-bezier(0.1, 0.7, 0.3, 1) 0.18s both;
  }
  #live-activity .la-sparks i:nth-child(1) { --dx: 26px; --dy: -14px; }
  #live-activity .la-sparks i:nth-child(2) { --dx: 30px; --dy: 6px; animation-delay: 0.22s; }
  #live-activity .la-sparks i:nth-child(3) { --dx: 8px; --dy: -20px; width: 3px; height: 3px; }
  #live-activity .la-sparks i:nth-child(4) { --dx: -24px; --dy: -12px; animation-delay: 0.24s; }
  #live-activity .la-sparks i:nth-child(5) { --dx: -28px; --dy: 9px; width: 3px; height: 3px; }
  #live-activity .la-sparks i:nth-child(6) { --dx: -4px; --dy: 18px; animation-delay: 0.2s; }

  /* idle: thin scanning line over the feed + "Listening" hint */
  #live-activity .la-scan {
    position: absolute;
    left: 12px;
    right: 12px;
    top: var(--la-top, 56px);
    height: var(--la-h, 200px);
    pointer-events: none;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.6s ease;
    border-radius: 8px;
  }
  #live-activity .la-scan::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, hsl(var(--money) / 0.75) 30%, hsl(var(--money) / 0.75) 70%, transparent);
    box-shadow: 0 0 10px hsl(var(--money) / 0.6);
  }
  #live-activity .la-scan::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: -36px;
    height: 36px;
    background: linear-gradient(180deg, transparent, hsl(var(--money) / 0.06));
  }
  #live-activity.la-idle .la-scan { opacity: 1; }
  #live-activity .la-listen {
    margin: 0 10px 0 auto;
    align-self: center;
    font-size: 10.5px;
    font-weight: 650;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: hsl(var(--secondary));
    opacity: 0;
    transition: opacity 0.6s ease;
  }
  #live-activity.la-idle .la-listen { opacity: 1; }
  #live-activity .la-listen i { display: inline-block; font-style: normal; opacity: 0.25; }

  /* ── Ambient loops — only with .la-motion (JS, motion allowed) ── */
  .la-motion .lt-orb-ring { animation: la-spin 9s linear infinite; }
  .la-motion .lt-orb-ring--2 { animation: la-spin 48s linear infinite reverse; }
  .la-motion .lt-orb-glow { animation: la-glow 3.6s ease-in-out infinite; }
  .la-motion .lt-orb-core { animation: la-float 5.2s ease-in-out infinite; }
  .la-motion .lt-soon::after { animation: la-shine 3.6s ease-in-out 0.8s infinite; }
  .la-motion #live-activity .live-pulse .live-dot { animation: la-breathe 2.4s ease-in-out infinite; }
  .la-motion #live-activity .live-pulse .live-dot::after { animation: la-ring 2.4s ease-out infinite; }
  .la-motion #live-activity.la-idle .la-scan::before,
  .la-motion #live-activity.la-idle .la-scan::after { animation: la-scan 3.8s cubic-bezier(0.45, 0, 0.55, 1) infinite; }
  .la-motion #live-activity .la-listen i { animation: la-dots 1.4s ease-in-out infinite; }
  .la-motion #live-activity .la-listen i:nth-child(2) { animation-delay: 0.2s; }
  .la-motion #live-activity .la-listen i:nth-child(3) { animation-delay: 0.4s; }
  .la-paused *, .la-paused *::before, .la-paused *::after { animation-play-state: paused !important; }

  @keyframes la-spin { to { transform: rotate(1turn); } }
  @keyframes la-glow { 0%, 100% { opacity: 0.4; transform: scale(0.94); } 50% { opacity: 0.8; transform: scale(1.06); } }
  @keyframes la-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
  @keyframes la-shine { 0% { transform: translateX(-140%); } 45%, 100% { transform: translateX(260%); } }
  @keyframes la-breathe { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.55; transform: scale(0.82); } }
  @keyframes la-ring { 0% { opacity: 0.7; transform: scale(0.5); } 70%, 100% { opacity: 0; transform: scale(1.7); } }
  @keyframes la-scan { 0% { transform: translateY(0); opacity: 0; } 8% { opacity: 1; } 92% { opacity: 1; } 100% { transform: translateY(var(--la-h, 200px)); opacity: 0; } }
  @keyframes la-dots { 0%, 100% { opacity: 0.25; } 50% { opacity: 1; } }
  @keyframes la-row-in { 0% { opacity: 0; transform: translateX(-18px); } 100% { opacity: 1; transform: none; } }
  @keyframes la-sweep { 0% { opacity: 0; transform: translateX(-110%); } 15% { opacity: 1; } 100% { opacity: 0; transform: translateX(260%); } }
  @keyframes la-edge { 0% { opacity: 0; transform: scaleY(0); } 15% { opacity: 1; transform: scaleY(1); } 70% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1); } }
  @keyframes la-spark { 0% { opacity: 0; transform: translate(0, 0) scale(0.6); } 15% { opacity: 1; } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(0.2); } }
  @keyframes la-tick { 0% { opacity: 0.25; transform: translateY(6px); } 100% { opacity: 1; transform: none; } }
}

@media (prefers-reduced-motion: reduce) {
  .lt-teaser *, #live-activity .la-sweep, #live-activity .la-edge, #live-activity .la-sparks i,
  #live-activity .live-item.is-new, #live-activity .la-scan::before, #live-activity .la-scan::after,
  #live-activity .live-dot, #live-activity .live-dot::after, .la-tick { animation: none !important; }
  #live-activity .la-sparks, #live-activity .la-sweep { display: none; }
}

/* ── $LOCK holder rewards bar ───────────────────────────────────
   Pre-launch: hidden everywhere (the teaser card carries one line instead).
   Post-launch: black/white restyle (no gold line) + real figures from lock-activity.js (.lr-real). */
html:not(.lock-launched) body[data-page="home"] #holder-rewards { display: none !important; }

@media (min-width: 1101px) {
  html:not(.lock-launched) .lt-holders {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 10px 0 0;
    font-size: 13px;
    color: hsl(var(--secondary));
  }
  .lt-holders svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; opacity: 0.85; }
}
.lt-holders { display: none; }

html.lock-launched #holder-rewards::before { display: none; }
html.lock-launched #holder-rewards .holder-rewards-badge,
html.lock-launched #holder-rewards .holder-rewards-badge:not(.holder-rewards-badge--pending) {
  color: hsl(var(--foreground));
  border-color: hsl(var(--foreground) / 0.22);
  background: hsl(var(--foreground) / 0.06);
}
html.lock-launched #holder-rewards .holder-live-dot { background: hsl(var(--foreground)); box-shadow: none; animation: none; }
html.lock-launched #holder-rewards .holder-progress-block { border-color: hsl(var(--foreground) / 0.12); background: hsl(var(--foreground) / 0.03); }
html.lock-launched #holder-rewards .holder-progress-fill { background: linear-gradient(90deg, hsl(var(--foreground) / 0.55), hsl(var(--foreground))); box-shadow: none; }
html.lock-launched #holder-rewards .holder-progress-glow { background: hsl(var(--foreground)); box-shadow: 0 0 12px hsl(var(--foreground) / 0.4); }
html.lock-launched #holder-rewards .holder-reach,
html.lock-launched #holder-rewards .holder-reach .holder-reach-time,
html.lock-launched #holder-rewards .holder-progress-pct,
html.lock-launched #holder-rewards .holder-pot,
html.lock-launched #holder-rewards .holder-last { color: hsl(var(--foreground)); }
html.lock-launched #holder-rewards .holder-stat { border-color: hsl(var(--foreground) / 0.12); }
/* Only real numbers: hide app.js's placeholder pot / payout widgets; the real block (.lr-real) replaces them */
html.lock-launched #holder-rewards .holder-progress-block,
html.lock-launched #holder-rewards .holder-stat:not(.holder-stat--elig),
html.lock-launched #holder-rewards .holder-cutoff,
html.lock-launched #holder-rewards .holder-payouts { display: none; }
html.lock-launched #holder-rewards .holder-rewards-grid { grid-template-columns: minmax(0, 1fr); }

.lr-real { display: none; }
html.lock-launched #holder-rewards .lr-real:not([hidden]) {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-left: auto;
  margin-right: 12px;
}
.lr-item { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; min-width: 0; }
.lr-item[hidden] { display: none; }
.lr-label { font-size: 11px; color: hsl(var(--secondary)); white-space: nowrap; }
.lr-val {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  color: hsl(var(--foreground));
  white-space: nowrap;
}
.lr-val img { width: 16px; height: 16px; border-radius: 50%; object-fit: cover; }
.lr-val small { font-family: var(--font-body); font-size: 11.5px; color: hsl(var(--secondary)); }
.lr-sep { width: 1px; height: 26px; background: hsl(var(--foreground) / 0.12); }
.la-motion .lr-tick { animation: la-tick2 0.5s cubic-bezier(0.2, 0.8, 0.2, 1); }
@keyframes la-tick2 { 0% { opacity: 0.3; transform: translateY(5px); } 100% { opacity: 1; transform: none; } }
@media (max-width: 768px) {
  html.lock-launched #holder-rewards .lr-real:not([hidden]) { margin: 6px 0 0; gap: 12px; }
  html.lock-launched #holder-rewards .holder-rewards-head { flex-wrap: wrap; }
  .lr-item { align-items: flex-start; }
}
@media (prefers-reduced-motion: reduce) { .lr-tick { animation: none !important; } }