/* ==========================================================================
   Cathode Dreams — logotype treatments
   Original typographic homages: per-series font, weight, slant, spacing, palette.
   ========================================================================== */

.lt {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: .18em;
  line-height: 1.05;
  --lt-on: #fff;
}

.lt-text {
  font-family: var(--lt-font, var(--font-impact));
  font-weight: 400;
  letter-spacing: var(--lt-space, .06em);
  transform: skewX(var(--lt-skew, 0deg));
  background: linear-gradient(180deg, var(--lt-c1) 20%, var(--lt-c2) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
  -webkit-text-stroke: 1.5px var(--lt-stroke, transparent);
  paint-order: stroke fill;
  text-wrap: balance;
}
.lt[style*="--lt-stroke:none"] .lt-text { -webkit-text-stroke: 0; }

.lt-sm .lt-text { font-size: clamp(.95rem, 2.2vw, 1.25rem); }
.lt-md .lt-text { font-size: clamp(1.5rem, 4.2vw, 2.6rem); }
.lt-lg .lt-text { font-size: clamp(2rem, 6.5vw, 4.2rem); }

.lt-jp {
  font-size: clamp(.72rem, 1.6vw, .95rem);
  letter-spacing: .35em;
  color: var(--lt-c1);
  opacity: .92;
  font-weight: 600;
  text-shadow: 0 1px 0 rgba(0,0,0,.6);
}
.lt-jp-mincho { font-family: var(--font-mincho); }
.lt-jp-dot { font-family: var(--font-pixel); }

/* marks & motif decorations */
.lt-marks, .lt-motif { display: inline-flex; gap: 6px; color: var(--lt-c1); }
.lt-marks svg, .lt-motif svg { width: 1.15em; height: 1.15em; filter: drop-shadow(0 2px 4px rgba(0,0,0,.5)); }
.lt-motif { position: absolute; top: -0.6em; left: -1.1em; opacity: .85; }
.lt-sm .lt-motif { display: none; }

/* ---- plates: the disc sleeve / title-card backgrounds ---- */
.lt-plate { padding: .55em 1em .65em; border-radius: 6px; box-shadow: var(--shadow), inset 0 0 0 1px rgba(255,255,255,.06); }

.lt-p-onyx      { background: #0d0d18; border: 1px solid #2b2b4a; }
.lt-p-cream     { background: #f5ead2; color: #3a2410; }
.lt-p-vhs       { background: repeating-linear-gradient(135deg, #14141f 0 12px, #1b1b2c 12px 24px); border: 1px solid #3a3a5c; }
.lt-p-imperial  { background: linear-gradient(160deg, #1a1206, #2e2008); border: 1px solid #8a6a24; }
.lt-p-ocean     { background: linear-gradient(180deg, #062033, #0a3a55); border: 1px solid #1e6f9e; }
.lt-p-relic     { background: linear-gradient(180deg, #241505, #38220a); border: 1px solid #7a5b1e; }
.lt-p-rose      { background: linear-gradient(180deg, #2e0a22, #4d1238); border: 1px solid #a2447e; }
.lt-p-navy      { background: linear-gradient(180deg, #071026, #0d2044); border: 1px solid #2e4d8a; }
.lt-p-steel     { background: linear-gradient(180deg, #151a20, #232b35); border: 1px solid #465564; }
.lt-p-denim     { background: linear-gradient(180deg, #10233c, #1a3a5e); border: 1px solid #3e6ea0; }
.lt-p-ink       { background: linear-gradient(180deg, #121212, #262626); border: 1px solid #555; }
.lt-p-eva       { background: linear-gradient(180deg, #120607, #4d0a10 130%); border: 1px solid #7a1a20; position: relative; }
.lt-p-eva::after { content: ""; position: absolute; left: 8%; right: 8%; bottom: .18em; height: 3px; background: #ff2a2a; transform: skewX(-14deg); }
.lt-p-rune      { background: radial-gradient(circle at 50% 30%, #34104d, #1a0826 75%); border: 1px solid #7a3fae; }
.lt-p-sun       { background: radial-gradient(circle at 50% 120%, #ffd23e 0%, #e86a10 45%, #7a1c00 100%); }
.lt-p-circuit   { background: linear-gradient(180deg, #04141c, #0a2a38); border: 1px solid #1e6f8a; }
.lt-p-wing      { background: linear-gradient(180deg, #101020, #23233c); border: 1px solid #c8a34a; }
.lt-p-cosmos    { background: radial-gradient(circle at 20% 20%, #1a1a4e, #0a0a1e 70%); border: 1px solid #4d4d9e; }
.lt-p-blood     { background: linear-gradient(180deg, #0f0202, #2e0505); border: 1px solid #8a1414; }
.lt-p-washi     { background: linear-gradient(180deg, #efe6d4, #e0d2b8); color: #2a1c0c; }
.lt-p-gaia      { background: linear-gradient(180deg, #0c2e3a, #14556a); border: 1px solid #3fa7c4; }
.lt-p-poke      { background: linear-gradient(180deg, #1a3fae, #0d2160); border: 1px solid #ffe23e; }
.lt-p-sakura    { background: linear-gradient(180deg, #4d1238, #7a2a55); border: 1px solid #ff9ecf; }
.lt-p-nightcity { background: linear-gradient(180deg, #12001f, #2a0a4d); border: 1px solid #ff5edb; }
.lt-p-egypt     { background: linear-gradient(180deg, #1a1406, #382a0a); border: 1px solid #c8a34a; }
.lt-p-asphalt   { background: repeating-linear-gradient(90deg, #101014 0 8px, #181822 8px 16px); border: 1px solid #3a3a4c; }
.lt-p-notebook  { background: linear-gradient(180deg, #fff3f7, #ffe0ec); color: #4d1238; }
.lt-p-deep      { background: linear-gradient(180deg, #021520, #0a4d6e); border: 1px solid #2a8fb5; }
.lt-p-jolly     { background: linear-gradient(180deg, #e83a1a, #8a1408); border: 1px solid #ffd23e; }
.lt-p-grid      { background: linear-gradient(rgba(92,215,255,.16) 1px, transparent 1px), linear-gradient(90deg, rgba(92,215,255,.16) 1px, transparent 1px), #06121e; background-size: 14px 14px; border: 1px solid #1e5f8a; }
.lt-p-turna     { background: linear-gradient(180deg, #efe8ce, #d4c48e); color: #3a2f14; }
.lt-p-deco      { background: radial-gradient(circle at 50% 0%, #3a2f14, #1a160a); border: 1px solid #b08a4a; }
.lt-p-forest    { background: linear-gradient(180deg, #0d1f0a, #1e3a12); border: 1px solid #4d7a2e; }
.lt-p-poster    { background: #e8dcc2; color: #2a1c0c; border: 3px double #8a6a3e; }
.lt-p-wired     { background: #050607; border: 1px solid #7dff9e; }
.lt-p-doremi    { background: linear-gradient(180deg, #ff9ecf, #d460a0); border: 1px solid #ffd23e; }
.lt-p-paper     { background: linear-gradient(180deg, #f7f1e2, #e8dcc2); color: #4d3a1e; border: 1px solid #c9b892; }
.lt-p-sky       { background: linear-gradient(180deg, #0a1f4d, #3a6ea8); border: 1px solid #8fc3e8; }
.lt-p-sunset    { background: radial-gradient(circle at 50% 100%, #ffd23e 0%, #ff7a1a 40%, #7a1c4d 100%); }

/* plates with light text need darker JP/contrast fixes */
.lt-p-cream .lt-jp, .lt-p-washi .lt-jp, .lt-p-notebook .lt-jp, .lt-p-poster .lt-jp { color: rgba(0,0,0,.65); text-shadow: none; }
.lt-p-sun .lt-jp { color: #fff; }
.lt-p-jolly .lt-jp, .lt-p-doremi .lt-jp { color: #fff; }

/* light-plate text strokes look better inverted */
.lt-p-cream .lt-text, .lt-p-washi .lt-text, .lt-p-notebook .lt-text, .lt-p-turna .lt-text, .lt-p-poster .lt-text { -webkit-text-stroke: 0; }

/* kind-specific flavor */
.lt .lt-text { transition: transform .3s var(--ease); }
.lt:hover .lt-text { transform: skewX(var(--lt-skew, 0deg)) scale(1.02); }
.reduced-motion .lt:hover .lt-text, .no-motion .lt:hover .lt-text { transform: none; }

/* terminal kind gets a blinking cursor block */
.lt-terminal { font-family: var(--font-terminal); }
.lt-terminal .lt-text::after { content: "▮"; margin-left: .12em; color: var(--lt-c1); animation: termBlink 1.1s steps(2) infinite; font-size: .8em; }
@keyframes termBlink { 50% { opacity: 0; } }
.reduced-motion .lt-terminal .lt-text::after, .no-motion .lt-terminal .lt-text::after { animation: none; }