/* ==========================================================================
   YummyPenny — marketing layer (v2)
   Styles for the Power Terminal showcase section (_mkt_terminal.html) and a
   site-wide scroll-reveal system. Loaded after app.css/dark.css from
   base.html. Only NEW classes live here (plus [data-reveal]); nothing in
   app.css is overridden.

   The showcase frame is deliberately dark in BOTH themes — the real
   Terminal is a dark-native product, and the ad should look like the thing.
   ========================================================================== */

/* ---------------------------------------------------------- scroll reveal
   Scoped under html.yp-js (set by the pre-paint boot script in base.html):
   content only STARTS hidden when JavaScript is provably running, so a
   blocked script can never leave the page permanently blank. No-JS
   visitors simply see everything, motionless. */
.yp-js [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s cubic-bezier(.2, .7, .2, 1);
}
.yp-js [data-reveal].is-revealed { opacity: 1; transform: none; }
.yp-js [data-reveal-stagger] > * { transition-delay: 0s; }
.yp-js [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: .05s; }
.yp-js [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: .13s; }
.yp-js [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: .21s; }
.yp-js [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: .29s; }
.yp-js [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: .37s; }
.yp-js [data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: .45s; }
@media (prefers-reduced-motion: reduce) {
  .yp-js [data-reveal] { opacity: 1; transform: none; transition: none; }
}

/* -------------------------------------------------- terminal showcase frame */
.mkt-term-frame {
  position: relative;
  background: #0C110E;
  border: 1px solid #33403A;
  border-radius: 18px;
  overflow: hidden;
  box-shadow: 0 46px 100px -48px rgba(6, 28, 18, .75);
  font-family: var(--mono);
  color: #A3AFA7;
}
.mkt-term-frame::after {              /* soft phosphor glow off the glass */
  content: "";
  position: absolute; inset: 0;
  pointer-events: none;
  background: radial-gradient(60% 40% at 80% 0%, rgba(52, 196, 129, .07), transparent 70%);
}

.mkt-term-bar {
  display: flex; align-items: center; gap: 12px;
  padding: 11px 16px;
  border-bottom: 1px solid #242D26;
  font-size: .72rem;
}
.mkt-term-brand { font-weight: 700; color: #E9EFEA; letter-spacing: -.01em; }
.mkt-term-brand b { color: #34C481; }
.mkt-term-tag { font-size: .58rem; letter-spacing: .14em; color: #75817A; text-transform: uppercase; }
.mkt-term-search {
  flex: 1; max-width: 300px; margin-left: auto;
  border: 1px solid #242D26; border-radius: 8px;
  padding: 6px 10px; font-size: .64rem; color: #75817A;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.mkt-term-search b { color: #34C481; font-weight: 700; }

.mkt-term-cols,
.mkt-term-row {
  display: grid;
  grid-template-columns: 46px minmax(0, 1fr) 74px 60px 52px;
  gap: 10px; align-items: center;
  padding: 0 16px;
}
.mkt-term-cols {
  padding-top: 6px; padding-bottom: 6px;
  font-size: .52rem; text-transform: uppercase; letter-spacing: .13em;
  color: #75817A; border-bottom: 1px solid #242D26;
}
.mkt-term-row {
  min-height: 40px;
  border-bottom: 1px solid #1A231C;
  border-left: 2px solid transparent;
  font-size: .68rem;
}
.mkt-term-row:last-of-type { border-bottom: 0; }
.mkt-term-row.hot  { border-left-color: #E4655A; }
.mkt-term-row.warm { border-left-color: #E8834E; }
.mkt-term-row.good { border-left-color: rgba(52, 196, 129, .55); }
.mkt-term-row.cur  { background: rgba(52, 196, 129, .12); border-left-color: #34C481; }

.mtr-tick { font-size: .58rem; font-weight: 700; letter-spacing: .06em; color: #34C481; }
.mtr-item { min-width: 0; color: #C9D3CC; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mtr-now { font-weight: 700; color: #E9EFEA; text-align: right; font-variant-numeric: tabular-nums; }
.mtr-off { text-align: right; color: #34C481; font-variant-numeric: tabular-nums; }
.mkt-term-row.hot .mtr-off { color: #E4655A; font-weight: 700; }
.mkt-term-row.warm .mtr-off { color: #E8834E; }
.mtr-odds { text-align: right; }
.mtr-odds span {
  display: inline-block; font-size: .56rem; font-weight: 700;
  border-radius: 999px; padding: 2px 7px;
  color: #A3AFA7; background: #182019; border: 1px solid #242D26;
  font-variant-numeric: tabular-nums;
}
.mkt-term-row.cur .mtr-odds span,
.mtr-odds span.s { color: #8CE6BC; background: rgba(52, 196, 129, .14); border-color: rgba(52, 196, 129, .4); }
.mtr-odds span.vs { color: #F1A9A2; background: rgba(228, 101, 90, .14); border-color: rgba(228, 101, 90, .45); }

.mkt-term-status {
  display: flex; align-items: center; gap: 16px;
  padding: 8px 16px;
  border-top: 1px solid #242D26;
  font-size: .58rem; letter-spacing: .04em; color: #75817A;
}
.mkt-term-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: #34C481; box-shadow: 0 0 6px #34C481;
  animation: mkt-pulse 2s infinite;
}
@keyframes mkt-pulse { 50% { opacity: .45; } }
.mkt-term-status .k {
  border: 1px solid #242D26; border-radius: 5px; padding: 1px 5px;
  font-size: .54rem; color: #A3AFA7;
}

.mkt-term-note {
  margin: 14px 0 0; text-align: center;
  font-family: var(--mono); font-size: .68rem; color: var(--faint);
}

/* feature trio under the frame */
.mkt-term-feats {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
  margin-top: 34px;
}
.mkt-tf {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 16px;
  padding: 22px;
  box-shadow: var(--shadow-s);
  transition: transform .22s, border-color .2s;
}
.mkt-tf:hover { transform: translateY(-4px); border-color: var(--line-2); }
.mkt-tf h3 { font-family: var(--display); font-weight: 700; font-size: 1.06rem; letter-spacing: -.01em; margin: 0 0 6px; color: var(--ink); }
.mkt-tf h3 .k { font-family: var(--mono); font-size: .62rem; color: var(--save); border: 1px solid var(--line); border-radius: 5px; padding: 1px 6px; margin-left: 6px; vertical-align: 2px; }
.mkt-tf p { margin: 0; font-size: .88rem; color: var(--muted); line-height: 1.55; }

.mkt-term-ctas { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; justify-content: center; margin-top: 30px; }
.mkt-term-ctas .ghost {
  font-family: var(--body); font-weight: 600; font-size: .92rem;
  color: var(--muted); text-decoration: none;
  border: 1px solid var(--line); border-radius: 12px; padding: 13px 20px;
  transition: color .15s, border-color .15s;
}
.mkt-term-ctas .ghost:hover { color: var(--ink); border-color: var(--line-2); }

@media (max-width: 700px) {
  .mkt-term-cols, .mkt-term-row { grid-template-columns: 40px minmax(0, 1fr) 64px 48px; }
  .mkt-term-cols .mtr-odds, .mkt-term-row .mtr-odds { display: none; }
  .mkt-term-search { display: none; }
  .mkt-term-feats { grid-template-columns: 1fr; }
}