/* ============================================================
   DH GLOBAL — Digital Trapper Network · shared design system
   One file. The network floor (index.html) and The Trap Store
   (store.html) both link this so they never drift apart.

   Trap-tech: obsidian base, neon cyan/magenta/violet/lime,
   holographic chrome, frosted glass w/ glow bleed, iridescent
   edge lighting, parallax depth, magnetic hover.

   ADDITIVE ONLY — this file adds tokens + components on top of
   each page's existing inline styles. It never removes or
   redefines a pre-existing class. New components are namespaced
   so they cannot collide with legacy selectors.
   ============================================================ */

/* ---- tokens (namespaced --tt-*, never touch legacy --gold etc.) ---- */
:root{
  --tt-cyn:#00e5ff; --tt-mag:#ff3df2; --tt-vio:#8a5cff; --tt-lime:#c8ff2d;
  --tt-n3:#00a3ff; --tt-obs:#04030a; --tt-obs2:#0a0818;
  --tt-ice:#d8fbff; --tt-frozen:#eafcff;
  --tt-glass:rgba(10,8,24,.30);
  --tt-line:rgba(0,229,255,.28);
}

/* ---- holographic chrome headline ---- */
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hchrome{
    background:linear-gradient(145deg,#d8fbff 0%,#00e5ff 38%,#8a5cff 72%,#ff3df2 100%);
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
  }
}

/* ---- frosted glass w/ glow bleed (translucent, blur, iridescent line) ---- */
.dglass{
  background:var(--tt-glass);
  backdrop-filter:blur(10px) saturate(140%);
  -webkit-backdrop-filter:blur(10px) saturate(140%);
  border:1px solid rgba(255,255,255,.08);
  box-shadow:
    0 0 22px rgba(0,229,255,.10),
    0 0 44px rgba(138,92,255,.08),
    inset 0 1px 0 rgba(255,255,255,.06),
    inset 0 -18px 40px rgba(0,0,0,.20);
}

/* ---- iridescent edge lighting (box-shadow only — consumes NO pseudo) ---- */
.hirid{
  box-shadow:
    0 0 0 1px rgba(0,229,255,.25),
    0 0 18px rgba(0,229,255,.35),
    0 0 40px rgba(255,61,242,.22),
    inset 0 0 20px rgba(138,92,255,.12);
}

/* ---- magnetic pull (applied to CTAs; JS drifts toward cursor) ---- */
.magnet{ transition:transform .18s cubic-bezier(.2,.7,.3,1); will-change:transform; }

/* ---- parallax drift (driven by --px/--py registered props) ---- */
@property --tt-px{ syntax:'<number>'; initial-value:.5; inherits:false; }
@property --tt-py{ syntax:'<number>'; initial-value:.5; inherits:false; }
.parallax{
  transform:translate(
    calc((var(--tt-px,.5) - .5) * -10px),
    calc((var(--tt-py,.5) - .5) * -7px));
}

/* ============================================================
   ROLLING EDGE DISPLAY — seamless loop, pause on hover/touch.
   `.dt-edge` = the strip; `.dt-edge-track` = the moving track.
   JS duplicates content into two `.seg` halves for a gapless loop.
   ============================================================ */
.dt-edge{
  position:relative; overflow:hidden; white-space:nowrap;
  background:linear-gradient(90deg,var(--tt-obs2),rgba(10,8,24,.6),var(--tt-obs2));
  border-top:1px solid var(--tt-line);
  border-bottom:1px solid var(--tt-line);
  box-shadow:inset 0 0 26px rgba(0,229,255,.08);
}
.dt-edge-track{
  display:inline-flex; width:max-content; will-change:transform;
  animation:dt-edge-scroll var(--dur,28s) linear infinite;
}
.dt-edge .seg{ display:inline-flex; align-items:center; gap:18px; padding:0 18px; }
.dt-edge .eg{ display:inline-flex; align-items:center; gap:8px; font-family:var(--font-mono,"JetBrains Mono",monospace);
  font-size:12px; letter-spacing:.03em; color:var(--tt-ice); }
.dt-edge .eg b{ color:var(--tt-cyn); font-weight:600; }
.dt-edge .eg .dot{ width:5px; height:5px; border-radius:50%;
  background:var(--tt-cyn); box-shadow:0 0 8px var(--tt-cyn); }
.dt-edge .eg.mag b{ color:var(--tt-mag); }
.dt-edge .eg.mag .dot{ background:var(--tt-mag); box-shadow:0 0 8px var(--tt-mag); }
.dt-edge .eg.vio b{ color:var(--tt-vio); }
.dt-edge .eg.vio .dot{ background:var(--tt-vio); box-shadow:0 0 8px var(--tt-vio); }
.dt-edge.paused .dt-edge-track{ animation-play-state:paused; }
@keyframes dt-edge-scroll{ from{ transform:translateX(0) } to{ transform:translateX(-50%) } }

/* ---- edge label chip (left, sits above/at the strip start) ---- */
.dt-edge-label{
  display:inline-flex; align-items:center; gap:7px;
  font-family:var(--font-head,"Bebas Neue",sans-serif); font-size:13px; letter-spacing:.14em;
  color:var(--tt-obs); background:linear-gradient(135deg,#d8fbff,#00e5ff 55%,#8a5cff);
  padding:4px 12px; border-radius:5px; box-shadow:0 0 14px rgba(0,229,255,.4);
}

/* ============================================================
   NETWORK BANNER (store ad rendered on the floor)
   ============================================================ */
.net-banner{
  display:flex; align-items:center; justify-content:space-between; gap:18px;
  padding:16px 20px; border-radius:14px; cursor:pointer; text-decoration:none;
  border:1px solid rgba(0,229,255,.22);
}
.net-banner .nb-viz{ font-size:30px; line-height:1; filter:drop-shadow(0 0 10px rgba(0,229,255,.5)); }
.net-banner .nb-body{ flex:1; min-width:0; }
.net-banner .nb-head{
  font-family:var(--font-head,"Bebas Neue",sans-serif); font-size:20px; letter-spacing:.04em; line-height:1.05;
  background:linear-gradient(145deg,#d8fbff,#00e5ff 40%,#8a5cff 78%,#ff3df2);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
}
.net-banner .nb-sub{ font-size:12.5px; color:var(--tt-ice); opacity:.72; margin-top:3px; }
.net-banner .nb-cta{
  white-space:nowrap; font-weight:800; font-size:13px; padding:9px 16px; border-radius:8px;
  color:#02121a; background:linear-gradient(135deg,#d8fbff,#00e5ff); box-shadow:0 0 16px rgba(0,229,255,.3);
}
.net-banner.theme-magenta{ border-color:rgba(255,61,242,.25); }
.net-banner.theme-magenta .nb-cta{ background:linear-gradient(135deg,#ff9df5,#ff3df2); box-shadow:0 0 16px rgba(255,61,242,.3); }
.net-banner.theme-magenta .nb-viz{ filter:drop-shadow(0 0 10px rgba(255,61,242,.5)); }
.net-banner.theme-violet{ border-color:rgba(138,92,255,.28); }
.net-banner.theme-violet .nb-cta{ background:linear-gradient(135deg,#e6dbff,#8a5cff); box-shadow:0 0 16px rgba(138,92,255,.3); }
.net-banner.theme-violet .nb-viz{ filter:drop-shadow(0 0 10px rgba(138,92,255,.5)); }

/* ============================================================
   SPONSORED CARD ("FROM THE FLOOR") in the news/wire rails
   ============================================================ */
.sponsor{
  display:block; padding:14px; border-radius:12px; text-decoration:none;
  border:1px solid var(--tt-line); background:rgba(10,8,24,.42);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  transition:box-shadow .2s ease, transform .2s ease;
}
.sponsor:hover{ box-shadow:0 0 24px rgba(0,229,255,.22),0 0 48px rgba(255,61,242,.12); transform:translateY(-2px); }
.sponsor .sp-tag{
  display:inline-flex; align-items:center; gap:6px; font-size:10px; letter-spacing:.16em; font-weight:800;
  color:var(--tt-cyn); border:1px solid rgba(0,229,255,.4); padding:3px 8px; border-radius:4px; margin-bottom:9px;
}
.sponsor .sp-head{
  font-family:var(--font-head,"Bebas Neue",sans-serif); font-size:15.5px; letter-spacing:.03em; line-height:1.1;
  background:linear-gradient(145deg,#d8fbff,#00e5ff 45%,#ff3df2);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent;
  margin-bottom:5px;
}
.sponsor .sp-sub{ font-size:11.5px; color:var(--tt-ice); opacity:.66; }
.sponsor .sp-cta{ font-size:11px; font-weight:800; color:var(--tt-lime); margin-top:8px; letter-spacing:.05em; }

/* ============================================================
   SHOPPABLE LOWER-THIRD (theater ad-fill + toggleable overlay)
   ============================================================ */
.lower-third{
  display:flex; align-items:center; gap:14px; padding:11px 16px; border-radius:12px;
  border:1px solid rgba(0,229,255,.28); background:rgba(8,6,20,.78);
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  box-shadow:0 0 24px rgba(0,229,255,.18);
}
.lower-third .lt-viz{ font-size:26px; line-height:1; }
.lower-third .lt-name{ font-family:var(--font-head,"Bebas Neue",sans-serif); font-size:16px; letter-spacing:.03em; color:var(--tt-ice); }
.lower-third .lt-price{ font-family:var(--font-mono,"JetBrains Mono",monospace); color:var(--tt-mag); font-weight:700; }
.lower-third .lt-buy{
  white-space:nowrap; font-weight:800; font-size:12px; padding:8px 14px; border-radius:7px;
  color:#02121a; background:linear-gradient(135deg,#d8fbff,#00e5ff); box-shadow:0 0 14px rgba(0,229,255,.35);
}

/* ============================================================
   FLOOR PRESENCE — live counter + rolling "on the floor now" strip
   ============================================================ */
.presence{
  display:flex; align-items:center; gap:12px; padding:9px 16px; border-radius:12px;
  border:1px solid rgba(0,229,255,.2); background:rgba(10,8,24,.4);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.presence .p-dot{ width:9px; height:9px; border-radius:50%; background:var(--tt-lime);
  box-shadow:0 0 10px var(--tt-lime); animation:pulse-dot 1.6s ease-in-out infinite; }
@keyframes pulse-dot{ 50%{ opacity:.35; box-shadow:0 0 3px var(--tt-lime);} }
.presence .p-count{ font-family:var(--font-mono,"JetBrains Mono",monospace); font-size:15px; font-weight:700;
  color:var(--tt-ice); }
.presence .p-count b{ color:var(--tt-lime); }
.presence .p-strip{ flex:1; min-width:0; overflow:hidden; white-space:nowrap; position:relative; }
.presence .p-strip::after{ content:""; position:absolute; inset:0; background:linear-gradient(90deg,transparent,rgba(4,3,10,.0)); }
.presence .p-track{ display:inline-flex; gap:16px; width:max-content; animation:dt-edge-scroll var(--dur,22s) linear infinite; }
.presence .p-item{ font-family:var(--font-mono,"JetBrains Mono",monospace); font-size:11px; color:var(--tt-ice); opacity:.78; }
.presence .p-item b{ color:var(--tt-cyn); font-weight:600; }

/* ============================================================
   NO DAYS OFF STREAK RING (invisible gamification)
   ============================================================ */
.streak{
  display:inline-flex; align-items:center; gap:9px;
  font-family:var(--font-mono,"JetBrains Mono",monospace);
  color:var(--tt-ice); font-size:12px;
}
.streak svg{ display:block; }
.streak .st-ring-bg{ stroke:rgba(255,255,255,.10); }
.streak .st-ring-fill{ stroke:var(--tt-cyn); transition:stroke-dashoffset .6s ease; filter:drop-shadow(0 0 5px rgba(0,229,255,.6)); }
.streak .st-days b{ color:var(--tt-cyn); font-size:13px; }

/* ============================================================
   FLOOR BRIEFING — daily digest strip
   ============================================================ */
.briefing{
  display:flex; align-items:center; gap:12px; flex-wrap:wrap;
  padding:13px 16px; border-radius:13px;
  border:1px solid rgba(138,92,255,.25); background:rgba(12,9,26,.5);
  backdrop-filter:blur(9px); -webkit-backdrop-filter:blur(9px);
}
.briefing .br-label{
  font-family:var(--font-head,"Bebas Neue",sans-serif); letter-spacing:.14em; font-size:13px;
  color:#02121a; background:linear-gradient(135deg,#d8fbff,#8a5cff); padding:4px 11px; border-radius:6px;
  box-shadow:0 0 14px rgba(138,92,255,.4);
}
.briefing .br-item{ display:inline-flex; align-items:center; gap:7px; font-size:12.5px; color:var(--tt-ice); }
.briefing .br-item .k{ color:var(--tt-cyn); font-weight:700; letter-spacing:.04em; }
.briefing .br-item .sep{ color:var(--tt-vio); opacity:.5; }
.briefing .br-mover.up{ color:#7dffb0; }
.briefing .br-mover.dn{ color:#ff5f82; }

/* ---- curriculum product footer chip ("graduates shop the floor") ---- */
.book-cta{
  display:block; margin-top:12px; padding-top:11px; border-top:1px solid rgba(0,229,255,.16);
  text-decoration:none; font-size:11.5px; letter-spacing:.04em;
}
.book-cta .bk{ color:var(--tt-mag); font-weight:800; letter-spacing:.06em; }
.book-cta .bv{ color:var(--tt-ice); opacity:.8; }
.book-cta .ba{ color:var(--tt-lime); font-weight:700; }

/* ---- build-your-position CTA (equities cards / listings) ---- */
.pos-cta{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  font-size:11px; font-weight:800; letter-spacing:.04em; cursor:pointer;
  color:var(--tt-cyn); border:1px solid rgba(0,229,255,.35); padding:4px 10px; border-radius:6px;
  transition:box-shadow .2s ease, background .2s ease;
}
.pos-cta:hover{ background:rgba(0,229,255,.10); box-shadow:0 0 14px rgba(0,229,255,.3); }

/* ---- ownership certificate chip (Your Holdings) ---- */
.owned-chip{
  display:flex; align-items:center; gap:10px; padding:11px 13px; border-radius:11px;
  border:1px solid rgba(255,61,242,.3); background:rgba(10,8,24,.5);
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
}
.owned-chip .oc-no{
  font-family:var(--font-mono,"JetBrains Mono",monospace); font-weight:800; font-size:13px; color:var(--tt-mag);
  text-shadow:0 0 8px rgba(255,61,242,.5);
}
.owned-chip .oc-title{ font-size:12.5px; color:var(--tt-ice); }
.owned-chip .oc-ed{ font-size:10.5px; color:var(--tt-cyn); opacity:.7; letter-spacing:.06em; }