/* ══════════════════════════════════════════════════════════════════
   DESIGN PRIMITIVES — shared canonical components per DESIGN_SYSTEM.md
   §1 background layers · §3 glass card · §6 CTA · §7 typography
   §14 specimen-frame brand signature · meta-label with pulse-dot
   Opacity + sizing calibrated against LIVE protocols.is shipped CSS,
   not just the spec doc. Prefix .dp-* = design-primitive.
   ══════════════════════════════════════════════════════════════════ */

/* ── §1 background layer system ────────────────────────────────── */

.dp-atmosphere {
  position: absolute; inset: 0;
  pointer-events: none; z-index: 0;
}

/* Spotlight radial-gradients — opacity calibrated against protocols.is .hm-hero::before */
.dp-spotlight-emerald {
  position: absolute; top: 8%; left: 50%;
  transform: translateX(-50%);
  width: 900px; height: 900px;
  background: radial-gradient(ellipse 70% 50% at 50% 50%,
    rgba(16, 185, 129, 0.14) 0%, transparent 60%);
  filter: blur(40px);
}
.dp-spotlight-blue {
  position: absolute; bottom: 15%; right: 15%;
  width: 700px; height: 700px;
  background: radial-gradient(ellipse 60% 45% at 50% 50%,
    rgba(59, 130, 246, 0.10) 0%, transparent 60%);
  filter: blur(48px);
}

/* Dotgrid — matches protocols.is .hm-hero::after (40px emerald, radial masked) */
.dp-dotgrid {
  position: absolute; inset: 0;
  background-image: radial-gradient(
    rgba(16, 185, 129, 0.06) 1px, transparent 1px);
  background-size: 40px 40px;
  mask-image: radial-gradient(ellipse 55% 45% at 50% 42%, #000 10%, transparent 75%);
  -webkit-mask-image: radial-gradient(ellipse 55% 45% at 50% 42%, #000 10%, transparent 75%);
  opacity: 0.45;
  pointer-events: none;
}

.dp-stars {
  position: absolute; inset: 0;
  overflow: hidden;
}
.dp-stars::before, .dp-stars::after {
  content: '';
  position: absolute; inset: 0;
  width: 200%; height: 100%;
  background-image:
    radial-gradient(1px 1px at 10% 20%, rgba(255,255,255,0.5), transparent 50%),
    radial-gradient(1px 1px at 35% 50%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 60% 15%, rgba(255,255,255,0.6), transparent 50%),
    radial-gradient(1px 1px at 80% 75%, rgba(255,255,255,0.4), transparent 50%),
    radial-gradient(1px 1px at 20% 85%, rgba(255,255,255,0.5), transparent 50%);
  background-repeat: repeat;
  background-size: 400px 400px;
}
.dp-stars::before { animation: dp-drift-a 85s linear infinite; opacity: 0.6; }
.dp-stars::after { animation: dp-drift-b 140s linear infinite; opacity: 0.35; }
@keyframes dp-drift-a { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes dp-drift-b { from { transform: translateX(-10%); } to { transform: translateX(-60%); } }

.dp-noise {
  position: fixed; inset: 0;
  pointer-events: none; z-index: 1;
  opacity: 0.025;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='128' height='128'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 1 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  background-size: 128px 128px;
  mix-blend-mode: overlay;
}

/* ── §3 canonical glass card ─── matches protocols.is .hm-product ─ */

@property --dp-border-angle {
  syntax: '<angle>';
  initial-value: 0deg;
  inherits: false;
}
@keyframes dp-rotate-border { to { --dp-border-angle: 360deg; } }

.dp-card {
  position: relative;
  background: var(--surface);
  backdrop-filter: var(--blur-card);
  -webkit-backdrop-filter: var(--blur-card);
  border: var(--stroke) solid var(--border);
  border-radius: var(--radius-card);
  padding: var(--pad-card);
  overflow: hidden;
  transition: transform 0.35s var(--ease-reveal), border-color 0.35s var(--ease);
}
.dp-card > * { position: relative; z-index: 2; }
.dp-card::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.05),
    inset 0 0 20px rgba(255, 255, 255, 0.015);
  pointer-events: none;
  z-index: 1;
}
.dp-card::after {
  content: '';
  position: absolute; inset: -1px;
  border-radius: inherit;
  background: conic-gradient(
    from var(--dp-border-angle),
    transparent 60%,
    rgba(16, 185, 129, 0.35) 75%,
    rgba(59, 130, 246, 0.25) 85%,
    transparent 95%
  );
  mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask:
    linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  mask-composite: exclude;
  -webkit-mask-composite: xor;
  padding: 1px;
  opacity: 0;
  transition: opacity 0.4s var(--ease);
  animation: dp-rotate-border 4s linear infinite;
  pointer-events: none;
}
.dp-card:hover {
  transform: translateY(-3px);
  border-color: rgba(255, 255, 255, 0.08);
}
.dp-card:hover::after { opacity: 1; }

/* Primary card variant — matches protocols.is .hm-product--primary:
   gradient bg + .55 default conic reveal + larger padding */
.dp-card--primary {
  background:
    linear-gradient(135deg, rgba(16, 185, 129, 0.08) 0%, rgba(59, 130, 246, 0.05) 100%),
    var(--surface);
  padding: var(--pad-card-primary);
}
.dp-card--primary::after { opacity: 0.55; }
.dp-card--primary:hover::after { opacity: 1; }

/* ── §14 specimen-frame corner L-brackets (brand signature) ─────
   Per DESIGN_SYSTEM §14: apply ONLY where framing illustrative content.
   Not on every section decoratively. Matches protocols.is .hm-hero-tick,
   .hm-product-tick, .hm-footer-tick. */

.dp-tick {
  position: absolute;
  width: var(--tick-size);
  height: var(--tick-size);
  border: 1px solid rgba(16, 185, 129, 0.5);
  pointer-events: none;
  z-index: 1;
}
.dp-tick--tl { top: var(--tick-inset); left: var(--tick-inset); border-right: none; border-bottom: none; }
.dp-tick--tr { top: var(--tick-inset); right: var(--tick-inset); border-left: none; border-bottom: none; }
.dp-tick--bl { bottom: var(--tick-inset); left: var(--tick-inset); border-right: none; border-top: none; }
.dp-tick--br { bottom: var(--tick-inset); right: var(--tick-inset); border-left: none; border-top: none; }

.dp-tick--hero { width: var(--tick-size-hero); height: var(--tick-size-hero); }
.dp-tick--hero.dp-tick--tl, .dp-tick--hero.dp-tick--tr { top: var(--tick-inset-hero); }
.dp-tick--hero.dp-tick--bl, .dp-tick--hero.dp-tick--br { bottom: var(--tick-inset-hero); }
.dp-tick--hero.dp-tick--tl, .dp-tick--hero.dp-tick--bl { left: var(--tick-inset-hero); }
.dp-tick--hero.dp-tick--tr, .dp-tick--hero.dp-tick--br { right: var(--tick-inset-hero); }

@media (max-width: 640px) {
  .dp-tick { width: 11px; height: 11px; }
  .dp-tick--tl, .dp-tick--tr { top: 10px; }
  .dp-tick--bl, .dp-tick--br { bottom: 10px; }
  .dp-tick--tl, .dp-tick--bl { left: 10px; }
  .dp-tick--tr, .dp-tick--br { right: 10px; }
  .dp-tick--hero { width: 12px; height: 12px; }
  .dp-tick--hero.dp-tick--tl, .dp-tick--hero.dp-tick--tr { top: 18px; }
  .dp-tick--hero.dp-tick--bl, .dp-tick--hero.dp-tick--br { bottom: 18px; }
  .dp-tick--hero.dp-tick--tl, .dp-tick--hero.dp-tick--bl { left: 18px; }
  .dp-tick--hero.dp-tick--tr, .dp-tick--hero.dp-tick--br { right: 18px; }
}

/* ── Meta label with pulsing emerald dot (brand signature) ─────
   Matches protocols.is .hm-hero-meta / .hm-product-meta — mono 10px
   0.15em tracking with 5px glowing emerald dot before. On elonmuskular
   per operator's lowercase copy-rule: text inside .dp-meta is lowercase
   (no text-transform). Use .dp-meta--upper for press kit where UPPERCASE
   is operator-approved. */

@keyframes dp-pulse-dot {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%      { opacity: 0.55; transform: scale(0.82); }
}

.dp-meta {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  color: var(--text-meta);
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
}
.dp-meta--upper { text-transform: uppercase; }
.dp-meta::before {
  content: '';
  width: 5px;
  height: 5px;
  background: var(--emerald);
  border-radius: 50%;
  box-shadow: 0 0 6px rgba(16, 185, 129, 0.5);
  flex-shrink: 0;
  animation: dp-pulse-dot 2.4s ease-in-out infinite;
}

/* ── §6 CTA ────────────────────────────────────────────────────── */

@keyframes dp-breathe {
  0%, 100% {
    box-shadow:
      0 0 24px rgba(16, 185, 129, 0.3),
      0 0 60px rgba(16, 185, 129, 0.1);
  }
  50% {
    box-shadow:
      0 0 32px rgba(16, 185, 129, 0.4),
      0 0 80px rgba(16, 185, 129, 0.15);
  }
}

.dp-cta-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: linear-gradient(135deg, var(--emerald-bright), var(--emerald));
  color: #022c22;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 14px 28px;
  border-radius: var(--radius-cta);
  border: var(--stroke) solid rgba(255, 255, 255, 0.1);
  text-decoration: none;
  animation: dp-breathe 3s ease-in-out infinite;
  transition: transform 0.2s var(--ease);
}
.dp-cta-primary:hover {
  animation: none;
  transform: translateY(-1px);
  box-shadow:
    0 0 40px rgba(16, 185, 129, 0.45),
    0 0 100px rgba(16, 185, 129, 0.2),
    0 0 200px rgba(16, 185, 129, 0.08);
}

.dp-cta-ghost {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent;
  color: rgba(255, 255, 255, 0.72);
  font-family: var(--font-body);
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.01em;
  padding: 14px 26px;
  border-radius: var(--radius-cta);
  border: var(--stroke) solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.dp-cta-ghost:hover {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.03);
  color: var(--text-high);
}

/* ── §7 typography classes ────────────────────────────────────── */

.dp-h-xl {
  font-family: var(--font-display);
  font-size: var(--t-display-xl-size);
  font-weight: var(--t-display-xl-weight);
  letter-spacing: var(--t-display-xl-track);
  line-height: var(--t-display-xl-lh);
  color: var(--text-high);
  margin: 0;
}
.dp-h-l {
  font-family: var(--font-display);
  font-size: var(--t-display-l-size);
  font-weight: var(--t-display-l-weight);
  letter-spacing: var(--t-display-l-track);
  line-height: var(--t-display-l-lh);
  color: var(--text-high);
  margin: 0;
}
.dp-h-m {
  font-family: var(--font-display);
  font-size: var(--t-display-m-size);
  font-weight: var(--t-display-m-weight);
  letter-spacing: var(--t-display-m-track);
  line-height: var(--t-display-m-lh);
  color: var(--text-high);
  margin: 0;
}
.dp-h-s {
  font-family: var(--font-display);
  font-size: var(--t-display-s-size);
  font-weight: var(--t-display-s-weight);
  letter-spacing: var(--t-display-s-track);
  line-height: var(--t-display-s-lh);
  color: var(--text-high);
  margin: 0;
}

.dp-body-l { font-family: var(--font-body); font-size: var(--t-body-l-size); line-height: var(--t-body-l-lh); color: var(--text-body); }
.dp-body-m { font-family: var(--font-body); font-size: var(--t-body-m-size); line-height: var(--t-body-m-lh); color: var(--text-body); }
.dp-body-s { font-family: var(--font-body); font-size: var(--t-body-s-size); line-height: var(--t-body-s-lh); color: var(--text-meta); }

/* Reading prose — long-form essay body (manifesto, letters).
   Serif at higher opacity than .dp-body-m because reading density benefits
   from legibility. 18px / 1.68 line-height per corpus convention. */
.dp-prose {
  font-family: var(--font-serif);
  font-size: var(--t-body-l-size);
  line-height: 1.68;
  color: var(--text-reading);
}

/* Mono label — chrome register. Operator's elonmuskular rule is lowercase.
   `.dp-label--upper` re-enables uppercase where operator explicitly wants
   (e.g., engineering specimen labels on press kit). */
.dp-label {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--t-label-size);
  font-weight: 500;
  letter-spacing: var(--t-label-track);
  color: rgba(52, 211, 153, 0.88);
}
.dp-label--upper { text-transform: uppercase; letter-spacing: 0.14em; }

/* ── §7 gradient text (allowed on headlines) ─────────────────── */

.dp-h-gradient {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.45), var(--emerald) 60%, var(--blue) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  text-shadow:
    0 0 80px rgba(16, 185, 129, 0.12),
    0 0 160px rgba(16, 185, 129, 0.06);
}

/* ── Reduced motion fallback (required per §5 + §9 ship-check) ─ */

@media (prefers-reduced-motion: reduce) {
  .dp-card, .dp-cta-primary { animation: none; transition: none; }
  .dp-card::after { animation: none; opacity: 0; }
  .dp-stars::before, .dp-stars::after { animation: none; }
  .dp-meta::before { animation: none; }
}