/* ============================================================
 * WC // UI KIT v2 — NARRATIVE
 * Story-mode primitives: animated frames (stroke draw-in),
 * typewriter text reveal, sequenced chapter cards, big poster
 * headlines, scan-jacked transitions.
 *
 * Arwes-style techniques in WC brand. Pairs with wc2-tokens.css
 * and wc2-shell.css.
 * ============================================================ */

.wc2-dossier {
  position: relative;
  min-height: 100dvh;
  background: var(--wc-bg);
  color: var(--wc-ink-1);
  font-family: var(--wc-font-mono);
  overflow-x: hidden;
}

/* Ambient particle field */
.wc2-dossier__field {
  position: fixed; inset: 0; z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 1400px 800px at 50% -10%, rgba(90, 46, 128, 0.30), transparent 65%),
    radial-gradient(ellipse 900px 600px at 20% 90%, rgba(90, 46, 128, 0.18), transparent 60%),
    radial-gradient(ellipse 700px 500px at 90% 50%, rgba(184, 255, 56, 0.06), transparent 60%);
}

/* ============ ANIMATED FRAME (arwes-style draw-in) ============ */
/* A bracket frame that draws its strokes in via SVG path animation.
   Wrap content in .wc2-frame > .wc2-frame__body, animate by adding .in */
.wc2-frame {
  position: relative;
  padding: var(--wc-sp-7);
  background: rgba(14, 6, 27, 0.65);
  --frame-color: var(--wc-lime);
}
.wc2-frame__svg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  pointer-events: none;
  z-index: 1;
}
.wc2-frame__svg path {
  fill: none;
  stroke: var(--frame-color);
  stroke-width: 1.5;
  stroke-dasharray: 1200;
  stroke-dashoffset: 1200;
  transition: stroke-dashoffset 1.2s var(--wc-ease-out);
}
.wc2-frame.in .wc2-frame__svg path { stroke-dashoffset: 0; }

/* Inner content sits above SVG */
.wc2-frame__body {
  position: relative;
  z-index: 2;
}

/* Backdrop fill that fades in after frame draws */
.wc2-frame__fill {
  position: absolute; inset: 0;
  background:
    linear-gradient(135deg, rgba(184, 255, 56, 0.06), transparent 60%),
    rgba(14, 6, 27, 0.5);
  opacity: 0;
  transition: opacity 0.6s var(--wc-ease-out) 0.6s;
  z-index: 0;
}
.wc2-frame.in .wc2-frame__fill { opacity: 1; }

.wc2-frame.crit { --frame-color: var(--wc-orange); }
.wc2-frame.crit .wc2-frame__fill { background: linear-gradient(135deg, rgba(255, 106, 0, 0.06), transparent 60%), rgba(14, 6, 27, 0.5); }
.wc2-frame.purple { --frame-color: var(--wc-purple); }

/* ============ TYPEWRITER REVEAL ============ */
.wc2-type {
  display: inline;
  position: relative;
}
.wc2-type__char {
  display: inline-block;
  opacity: 0;
  transform: translateY(2px);
  transition: opacity 0.08s linear, transform 0.08s linear;
}
.wc2-type.live .wc2-type__char { opacity: 1; transform: translateY(0); }
/* Caret */
.wc2-type__caret {
  display: inline-block;
  width: 8px; height: 1em;
  vertical-align: -2px;
  background: var(--wc-lime);
  margin-left: 4px;
  animation: wc2-caret 1.0s steps(1) infinite;
}
@keyframes wc2-caret {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
.wc2-type.done .wc2-type__caret { display: none; }

/* ============ POSTER HEADLINE (display chrome) ============ */
.wc2-poster {
  font-family: var(--wc-font-display);
  font-size: clamp(56px, 9vw, 168px);
  line-height: 0.84;
  letter-spacing: -0.035em;
  text-transform: uppercase;
  color: transparent;
  background: linear-gradient(180deg,
    #F2EBFF 0%, #C8BBDB 30%, #8a55c2 52%, #5a3585 56%, #C8BBDB 82%, #F2EBFF 100%);
  background-size: 100% 220%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 8px 20px rgba(0,0,0,0.5));
  animation: wc2-poster-shimmer 9s ease-in-out infinite;
  display: inline-block;
}
@keyframes wc2-poster-shimmer {
  0%, 100% { background-position: 0 0; }
  50%      { background-position: 0 70%; }
}
.wc2-poster .accent {
  -webkit-text-fill-color: var(--wc-lime);
  color: var(--wc-lime);
  background: none;
  filter: drop-shadow(0 0 12px rgba(184, 255, 56, 0.25));
}
.wc2-poster .strike { text-decoration: line-through; text-decoration-color: var(--wc-orange); text-decoration-thickness: 6px; }

/* ============ DOSSIER LAYOUT ============ */
.wc2-dossier__inner {
  position: relative; z-index: 5;
  max-width: 1280px;
  margin: 0 auto;
  padding: 80px 32px 160px;
}

/* Top chrome strip — file/sub identifier */
.wc2-dossier__header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  font: 700 10px var(--wc-font-mono);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
  padding-bottom: 24px;
  border-bottom: 1px solid var(--wc-line);
  margin-bottom: 80px;
}
.wc2-dossier__id {
  color: var(--wc-orange);
  border: 1px solid var(--wc-orange);
  padding: 5px 10px;
  letter-spacing: 0.20em;
}
.wc2-dossier__breadcrumb {
  text-align: center;
  color: var(--wc-ink-4);
  letter-spacing: 0.22em;
}
.wc2-dossier__breadcrumb .sep { color: var(--wc-purple); margin: 0 8px; }
.wc2-dossier__date { color: var(--wc-lime); letter-spacing: 0.18em; }

/* Hero */
.wc2-dossier__hero {
  margin: 64px 0 96px;
}
.wc2-dossier__eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font: 700 11px var(--wc-font-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wc-lime);
  border: 1px solid var(--wc-lime);
  background: rgba(184, 255, 56, 0.06);
  padding: 7px 12px;
  margin-bottom: 32px;
}
.wc2-dossier__eyebrow .pip {
  width: 6px; height: 6px;
  background: var(--wc-lime);
  box-shadow: 0 0 6px var(--wc-lime);
  animation: wc2-blink 1.4s ease-in-out infinite;
}
.wc2-dossier__hero p {
  margin-top: 40px;
  max-width: 62ch;
  font: 500 17px/1.6 var(--wc-font-mono);
  letter-spacing: 0.02em;
  color: var(--wc-ink-2);
}
.wc2-dossier__hero p b { color: var(--wc-lime); font-weight: 700; }

/* Chapter cards */
.wc2-chapters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
  margin: 64px 0;
}
.wc2-chapter {
  position: relative;
  min-height: 220px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.wc2-chapter__num {
  font: 800 11px var(--wc-font-mono);
  letter-spacing: 0.26em;
  color: var(--wc-orange);
}
.wc2-chapter__title {
  font-family: var(--wc-font-display);
  font-size: 26px;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--wc-ink-1);
}
.wc2-chapter__body {
  font: 500 12px/1.6 var(--wc-font-mono);
  color: var(--wc-ink-3);
  letter-spacing: 0.03em;
  flex: 1;
}
.wc2-chapter__foot {
  display: flex; align-items: center; gap: 10px;
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-lime);
}
.wc2-chapter__foot .arrow { transition: transform var(--wc-dur-base); }
.wc2-chapter:hover .wc2-chapter__foot .arrow { transform: translateX(4px); }

/* Big stat strip */
.wc2-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--wc-line);
  border: 1px solid var(--wc-line);
  margin: 96px 0;
}
.wc2-stat {
  background: var(--wc-bg-1);
  padding: 28px 24px;
  display: flex; flex-direction: column;
  gap: 8px;
}
.wc2-stat__label {
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
}
.wc2-stat__val {
  font-family: var(--wc-font-display);
  font-size: 48px;
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--wc-ink-1);
  font-variant-numeric: tabular-nums;
}
.wc2-stat__val em {
  font-style: normal;
  font-family: var(--wc-font-mono);
  font-size: 12px;
  color: var(--wc-lime);
  margin-left: 6px;
  letter-spacing: 0.10em;
}
.wc2-stat__sub {
  font: 500 11px var(--wc-font-mono);
  letter-spacing: 0.06em;
  color: var(--wc-ink-3);
  margin-top: 4px;
}

/* Quote / declaration block */
.wc2-quote {
  margin: 96px auto;
  max-width: 920px;
  padding: 48px 48px 56px;
  text-align: center;
  position: relative;
}
.wc2-quote::before, .wc2-quote::after {
  content: ""; position: absolute;
  width: 24px; height: 24px;
  border: 1px solid var(--wc-lime);
}
.wc2-quote::before { top: 0; left: 0;  border-right: 0; border-bottom: 0; }
.wc2-quote::after  { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.wc2-quote__big {
  font-family: var(--wc-font-display);
  font-size: clamp(28px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--wc-ink-1);
}
.wc2-quote__big .lime { color: var(--wc-lime); }
.wc2-quote__cite {
  margin-top: 24px;
  font: 700 11px var(--wc-font-mono);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--wc-ink-3);
}
.wc2-quote__cite .sep { color: var(--wc-orange); margin: 0 8px; }

/* Bottom CTA */
.wc2-end {
  margin: 96px 0 0;
  text-align: center;
}
.wc2-end__h {
  font-family: var(--wc-font-display);
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.92;
  text-transform: uppercase;
  letter-spacing: -0.02em;
  color: var(--wc-ink-1);
  margin-bottom: 32px;
}
.wc2-end__h .lime { color: var(--wc-lime); }
.wc2-end__ctas {
  display: inline-flex; gap: 12px; flex-wrap: wrap; justify-content: center;
}

/* Signature stripe at the very bottom */
.wc2-signoff {
  margin-top: 96px;
  padding-top: 24px;
  border-top: 1px solid var(--wc-line);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
  font: 700 9px var(--wc-font-mono);
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--wc-ink-4);
}
.wc2-signoff .lime { color: var(--wc-lime); }

/* Reveal-on-scroll utility */
.wc2-reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.7s var(--wc-ease-out), transform 0.7s var(--wc-ease-out);
}
.wc2-reveal.shown { opacity: 1; transform: translateY(0); }
.wc2-reveal.delay-1 { transition-delay: 0.10s; }
.wc2-reveal.delay-2 { transition-delay: 0.20s; }
.wc2-reveal.delay-3 { transition-delay: 0.30s; }
.wc2-reveal.delay-4 { transition-delay: 0.40s; }
.wc2-reveal.delay-5 { transition-delay: 0.50s; }