/* Neden biz — stacking plates. Shared rules live in ../shared/site.css */

/* Veil a covered field dims toward: the ground of the field around it (read where it is declared, so every
   palette gets its own ground); only drawn when motion is on */
.hero, .stack { --veil: var(--ink); }
.p-dim { display: none; }
.motion .p-dim { display: block; position: absolute; inset: 0; background: var(--veil); opacity: 0; pointer-events: none; }

/* 1 · Hero */
.hero-type {
  font-size: var(--t-display); line-height: 1; letter-spacing: -.025em;
  font-variation-settings: "wght" 850, "wdth" 100;
}
.hero-type .c { --w: 850; }
.hl { display: inline-block; padding-bottom: .06em; }
.hl.masked { clip-path: inset(-40% -50vw 0 -50vw); }
.hero-sub {
  margin-top: clamp(20px, 4svh, 44px);
  font-size: var(--t-lead); line-height: 1.4;
  font-variation-settings: "wght" 460, "wdth" 110;
  color: color-mix(in srgb, var(--paper) 80%, var(--ink));
}

/* 2 · Plates: a vertical sequence by default (motion off), a stack when the script takes over */
.plate { align-content: center; gap: clamp(22px, 4.5svh, 52px); }
.p-head {
  width: 100%;
  max-width: 16ch; margin-inline: auto;
  font-size: var(--t-display); line-height: 1; letter-spacing: -.025em;
  font-variation-settings: "wght" 850, "wdth" 100;
  text-wrap: balance;
}
.p-head .c { --w: 850; }
.p-head .ln { white-space: nowrap; }
.plate[data-theme="ink"] .p-head { color: var(--red); }
.plate[data-theme="paper"] .p-head { color: var(--cobalt); }
.p-text {
  max-width: 34ch; margin-inline: auto;
  font-size: var(--t-text); line-height: 1.4;
  font-variation-settings: "wght" 470, "wdth" 100; text-wrap: balance;
}

.count { display: none; }
.motion .stack.stacked { position: relative; z-index: 2; height: 100svh; overflow: clip; background: transparent; }
.motion .stacked .plate { position: absolute; inset: 0; min-height: 0; will-change: transform; }
.motion .stacked .count {
  display: flex; gap: 10px; position: absolute; z-index: 5;
  left: 50%; bottom: max(24px, 3.5svh); translate: -50% 0;
  color: var(--paper); transition: color .45s var(--ease);
}
.count i { width: 8px; height: 8px; border-radius: 50%; background: currentColor; opacity: .32; }
.count-pill { position: absolute; left: -8px; top: 0; width: 24px; height: 8px; border-radius: 4px; background: currentColor; will-change: transform; }

/* 3 · Close */
.motion .close { z-index: 3; }
.close { align-content: center; gap: clamp(22px, 4svh, 44px); }
.close-h {
  width: 100%;
  max-width: 16ch; margin-inline: auto;
  font-size: var(--t-h2); line-height: 1.04; letter-spacing: -.025em;
  font-variation-settings: "wght" 820, "wdth" 100; text-wrap: balance;
}
.close-h .c { --w: 820; }
.close-h .ln { white-space: nowrap; }
.close-p {
  max-width: 30ch; margin-inline: auto;
  font-size: var(--t-lead); line-height: 1.4;
  font-variation-settings: "wght" 460, "wdth" 100;
}
.close-links {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px;
  font-size: clamp(1rem, 1.4vw, 1.2rem); font-variation-settings: "wght" 560, "wdth" 110;
}
.close-links a { text-underline-offset: .25em; text-decoration-thickness: 1px; }
.close-links a:hover { color: var(--cobalt); }

@media (prefers-contrast: more) { .hero-sub { color: inherit; } }