/* SpeakMind — 2026 trend layers
   1. Kinetic type    — scroll-driven variable font weight (JS sets inline weight)
   2. Type banner     — viewport-scaled mantra, text as architecture
   3. Print details   — registration marks, deckled torn edges, rubber stamps
   4. Micro polish    — functional micro-interactions (press, underline, key-press)
   All gated by body classes / component mount so each can be toggled in Tweaks. */

/* ============ 2. Type banner ============ */
.type-banner {
  padding: clamp(70px, 9vw, 130px) 0 clamp(56px, 7vw, 100px);
  overflow: hidden;
  text-align: center;
  position: relative;
}
.tb-line {
  font-size: clamp(58px, 12.5vw, 230px);
  line-height: 0.92;
  font-weight: 700;
  letter-spacing: -0.035em;
  white-space: nowrap;
  will-change: transform;
}
.tb-outline {
  color: transparent;
  -webkit-text-stroke: clamp(1.2px, 0.16vw, 2.6px) var(--ink);
}
@supports not (-webkit-text-stroke: 1px black) {
  .tb-outline { color: var(--text-faint); }
}
.tb-fill { color: var(--accent); }
.tb-cap {
  margin-top: clamp(20px, 3vw, 34px);
  font-size: 12px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-faint);
}

/* ============ 3. Print details ============ */
/* registration marks — pinned to sheet corners */
.print-marks {
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 99;
  color: rgba(28, 24, 19, 0.38);
}
.print-marks span { position: absolute; width: 18px; height: 18px; }
.print-marks .tl { top: 15px; left: 15px; }
.print-marks .tr { top: 15px; right: 15px; }
.print-marks .bl { bottom: 15px; left: 15px; }
.print-marks .br { bottom: 15px; right: 15px; }
@media (max-width: 700px) { .print-marks { display: none; } }

/* numbered section kickers become little rubber stamps */
body.print-details .eyebrow[data-no]::before {
  display: inline-block;
  padding: 2px 6px;
  border: 1px solid rgba(28, 24, 19, 0.32);
  border-radius: 4px;
  transform: rotate(-3deg);
  font-size: 10.5px;
}
body.print-details .band-ink .eyebrow[data-no]::before {
  border-color: rgba(242, 234, 217, 0.32);
}

/* deckled / torn edges on the ink color-block band */
body.print-details .band-ink {
  clip-path: polygon(
    0 8px, 3% 2px, 6% 10px, 10% 4px, 13% 11px, 17% 1px, 21% 7px, 25% 3px,
    29% 12px, 33% 5px, 37% 9px, 41% 2px, 45% 10px, 50% 4px, 54% 11px, 58% 3px,
    62% 8px, 66% 1px, 70% 9px, 74% 5px, 78% 12px, 82% 2px, 86% 7px, 90% 11px,
    94% 3px, 97% 9px, 100% 5px,
    100% calc(100% - 9px), 96% calc(100% - 2px), 92% calc(100% - 11px),
    88% calc(100% - 4px), 84% calc(100% - 10px), 80% calc(100% - 1px),
    76% calc(100% - 8px), 72% calc(100% - 3px), 68% calc(100% - 12px),
    64% calc(100% - 6px), 60% calc(100% - 10px), 56% calc(100% - 2px),
    52% calc(100% - 9px), 48% calc(100% - 4px), 44% calc(100% - 11px),
    40% calc(100% - 3px), 36% calc(100% - 8px), 32% calc(100% - 1px),
    28% calc(100% - 10px), 24% calc(100% - 5px), 20% calc(100% - 12px),
    16% calc(100% - 2px), 12% calc(100% - 7px), 8% calc(100% - 11px),
    4% calc(100% - 4px), 0 calc(100% - 8px)
  );
}

/* rubber-stamp entrance for badges + CTA mark */
@keyframes stamp-in {
  0%   { opacity: 0; transform: scale(1.7) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(0.95) rotate(-1deg); }
  100% { opacity: 1; transform: scale(1) rotate(-3deg); }
}
body.print-details .price-badge { transform: rotate(-3deg); }
body.print-details .reveal.in .price-badge {
  animation: stamp-in 0.45s var(--ease) 0.3s both;
}
@keyframes stamp-in-straight {
  0%   { opacity: 0; transform: scale(1.7) rotate(-7deg); }
  60%  { opacity: 1; transform: scale(0.95) rotate(1deg); }
  100% { opacity: 1; transform: scale(1) rotate(0deg); }
}
body.print-details .cta-mark.reveal.in {
  animation: stamp-in-straight 0.5s var(--ease) both;
}

/* ============ 4. Micro polish ============ */
/* buttons: real press */
body.micro-polish .btn:active {
  transform: translateY(1px) scale(0.98);
  transition-duration: 0.06s;
}
body.micro-polish .btn-primary:active {
  box-shadow: inset 0 2px 0 rgba(0, 0, 0, 0.18);
}
body.micro-polish .price-btn:active {
  transform: translateY(1px) scale(0.98);
}

/* nav links: flat underline grows from the left, print-rule style */
body.micro-polish .nav-links a { position: relative; }
body.micro-polish .nav-links a::after {
  content: "";
  position: absolute; left: 0; bottom: -5px;
  width: 100%; height: 1px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.25s var(--ease);
}
body.micro-polish .nav-links a:hover::after { transform: scaleX(1); }

/* kbd hint presses itself when you hover the hint row */
body.micro-polish .ov-hint kbd {
  transition: transform 0.12s var(--ease), border-bottom-width 0.12s var(--ease);
}
body.micro-polish .ov-hint:hover kbd {
  transform: translateY(1px);
  border-bottom-width: 1px;
}

/* mic button: tactile squash */
body.micro-polish .mic-btn { transition: transform 0.15s var(--ease); }
body.micro-polish .mic-btn:active { transform: scale(0.9); }

/* app chips + testimonial cards: quiet lift on hover */
body.micro-polish .app-chip {
  transition: transform 0.25s var(--ease), border-color 0.25s;
}
body.micro-polish .app-chip:hover {
  transform: translateY(-2px);
  border-color: var(--accent-line);
}
body.micro-polish .tcard {
  transition: transform 0.3s var(--ease), border-color 0.3s;
}
body.micro-polish .tcard:hover {
  transform: translateY(-3px);
  border-color: var(--border);
}

/* keyboard focus made visible — function over flourish */
body.micro-polish :focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}