/* ============================================================================
   WC LOCKUP — locked wordmark component
   Spec: memory rule project_wc_wordmark_locked.md (locked wordmark)
   Em-based single precomp. Drag .wc-logo font-size, whole lockup scales.
   ============================================================================ */

@font-face {
  font-family: "Ruckle";
  src: url("../fonts/ruckle.ttf") format("truetype");
  font-display: swap;
}
@font-face {
  font-family: "Cynatar";
  src: url("../fonts/cynatar.otf") format("opentype");
  font-display: swap;
}

/* Brand vars — fallbacks. If a host page defines --wc-purple / --wc-lime /
   --wc-orange / --wc-bg, those win. */
.wc-logo {
  --wcl-purple: var(--wc-purple, #5A2E80);
  --wcl-lime:   var(--wc-lime,   #B8FF38);
  --wcl-orange: var(--wc-orange, #FF8C42);
  --wcl-bg:     var(--wc-bg,     #150A22);

  /* ROOT EM CONTEXT — change this, whole lockup scales. */
  font-size: var(--wc-logo-size, 80px);

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  cursor: default;
  -webkit-user-select: none;
          user-select: none;
}

/* ---- WARUNG ---- */
.wc-logo__warung-wrap {
  position: relative;
  display: inline-block;
}
.wc-logo__warung {
  position: relative;
  font-family: "Ruckle", cursive;
  font-size: 1em;
  line-height: 0.85;
  color: var(--wcl-purple);
  letter-spacing: -0.01em;
  white-space: nowrap;
  /* No glow on warung — the canvas renderer is the visual, and text-shadow
     on the transparent live element offsets visibly from the canvas glyphs. */
}

/* Canvas IS the warung visual — always shown. Live text below is kept for
   layout sizing and text-shadow glow, but rendered transparent. The
   continuous-render JS animates a sort intensity that idles near zero and
   ramps to full on hover, so there's no two-renderer alignment problem. */
.wc-logo__canvas {
  position: absolute;
  top: 0; left: 0;
  pointer-events: none;
  opacity: 1;
}
.wc-logo__warung { color: transparent !important; }

/* ---- CYBER ROW ---- */
.wc-logo__cyber-row {
  display: flex;
  align-items: baseline;
  justify-content: center;
  /* AUTOMATED OVERLAP — works at any size, no per-tier tuning.
     Overlap = -0.2em - 21px. Balanced em + px so both nav AND hero land at
     similar proportional overlap. Measured against real renders:
       nav 26px  → -26.2px (~55% of cyber covered) — matches tuned target
       hero 200px → -61px (~55% of cyber covered) — proportional at scale
     Tuning knobs:
       - increase the 21px → more overlap EVERYWHERE (especially at small)
       - increase the 0.2em → more spread (more overlap at large) */
  margin-top: calc(-0.2em - 21px);
}
.wc-logo__cyber-wrap {
  position: relative;
  display: inline-block;
}
.wc-logo__cyber {
  font-family: "Cynatar", sans-serif;
  color: var(--wcl-lime);
  text-transform: uppercase;
  display: inline-block;
  position: relative;
  font-size: 0.925em;      /* 74/80 */
  letter-spacing: 0.113em;
  line-height: 1;
  white-space: nowrap;
  padding: 0 0.15em;        /* 12/80 — room for chromatic translate */
  margin-left: calc(0.125em - 0.15em);  /* (10/80) - padding compensation */
  transition: text-shadow 800ms ease-in-out;
  text-shadow:
    0 0 var(--wcl-c-g1, 4px) var(--wcl-lime),
    0 0 var(--wcl-c-g2, 10px) color-mix(in srgb, var(--wcl-lime) var(--wcl-c-mix, 40%), transparent);
}
.wc-logo.is-bursting .wc-logo__cyber { text-shadow: none; }

/* ---- CHROMATIC ABERRATION (cyber pseudos) ---- */
.wc-logo__cyber::before,
.wc-logo__cyber::after {
  content: attr(data-text);
  position: absolute;
  top: 0; left: 0;
  width: 100%;
  height: 100%;
  color: var(--wcl-lime);
  /* NO background — clip-path on transparent text gives the chromatic-slice
     effect without occluding warung pixels underneath in the overlap zone. */
  background: transparent;
  pointer-events: none;
  overflow: hidden;
  padding-left: 0.15em;
  opacity: 0;
  transition: opacity 80ms linear;
}
/* Pseudos visible only while a burst is active or during a flicker pulse —
   NOT just on :hover, so the calm phase after the burst fade stays quiet. */
.wc-logo.is-bursting .wc-logo__cyber::before,
.wc-logo.is-bursting .wc-logo__cyber::after,
.wc-logo.is-flickering .wc-logo__cyber::before,
.wc-logo.is-flickering .wc-logo__cyber::after { opacity: 1; }
.wc-logo__cyber::before {
  transform: translateX(calc(-1 * var(--wcl-glitch-offset, 0.0125em)));
  text-shadow: calc(-1 * var(--wcl-glitch-offset, 0.0125em)) 0 var(--wcl-orange);
  animation: wcl-glitch-1 var(--wcl-glitch-speed, 8s) infinite linear alternate-reverse;
}
.wc-logo__cyber::after {
  transform: translateX(var(--wcl-glitch-offset, 0.0125em));
  text-shadow: var(--wcl-glitch-offset, 0.0125em) 0 var(--wcl-purple);
  animation: wcl-glitch-2 var(--wcl-glitch-speed, 8s) infinite linear alternate-reverse;
}
.wc-logo.is-bursting .wc-logo__cyber::before,
.wc-logo.is-flickering .wc-logo__cyber::before {
  transform: translateX(calc(-1 * var(--wcl-glitch-offset-hot, 0.075em)));
  text-shadow: calc(-1 * var(--wcl-glitch-offset-hot, 0.075em)) 0 var(--wcl-orange);
  animation-duration: var(--wcl-glitch-speed-hot, 2s);
}
.wc-logo.is-bursting .wc-logo__cyber::after,
.wc-logo.is-flickering .wc-logo__cyber::after {
  transform: translateX(var(--wcl-glitch-offset-hot, 0.075em));
  text-shadow: var(--wcl-glitch-offset-hot, 0.075em) 0 var(--wcl-purple);
  animation-duration: var(--wcl-glitch-speed-hot, 2s);
}

@keyframes wcl-glitch-1 {
  0%   { clip-path: inset(78% 0 6%  0); }
  5%   { clip-path: inset(15% 0 64% 0); }
  10%  { clip-path: inset(40% 0 30% 0); }
  15%  { clip-path: inset(60% 0 10% 0); }
  20%  { clip-path: inset(82% 0 14% 0); }
  25%  { clip-path: inset(25% 0 50% 0); }
  30%  { clip-path: inset(70% 0 20% 0); }
  35%  { clip-path: inset(35% 0 55% 0); }
  40%  { clip-path: inset(8%  0 80% 0); }
  45%  { clip-path: inset(48% 0 32% 0); }
  50%  { clip-path: inset(20% 0 65% 0); }
  55%  { clip-path: inset(62% 0 24% 0); }
  60%  { clip-path: inset(12% 0 75% 0); }
  65%  { clip-path: inset(54% 0 28% 0); }
  70%  { clip-path: inset(85% 0 5%  0); }
  75%  { clip-path: inset(28% 0 58% 0); }
  80%  { clip-path: inset(72% 0 18% 0); }
  85%  { clip-path: inset(45% 0 40% 0); }
  90%  { clip-path: inset(18% 0 70% 0); }
  95%  { clip-path: inset(68% 0 22% 0); }
  100% { clip-path: inset(38% 0 52% 0); }
}
@keyframes wcl-glitch-2 {
  0%   { clip-path: inset(22% 0 66% 0); }
  5%   { clip-path: inset(80% 0 6%  0); }
  10%  { clip-path: inset(48% 0 32% 0); }
  15%  { clip-path: inset(15% 0 70% 0); }
  20%  { clip-path: inset(55% 0 28% 0); }
  25%  { clip-path: inset(72% 0 18% 0); }
  30%  { clip-path: inset(8%  0 80% 0); }
  35%  { clip-path: inset(62% 0 14% 0); }
  40%  { clip-path: inset(28% 0 58% 0); }
  45%  { clip-path: inset(85% 0 8%  0); }
  50%  { clip-path: inset(45% 0 38% 0); }
  55%  { clip-path: inset(12% 0 75% 0); }
  60%  { clip-path: inset(68% 0 22% 0); }
  65%  { clip-path: inset(35% 0 50% 0); }
  70%  { clip-path: inset(78% 0 12% 0); }
  75%  { clip-path: inset(20% 0 65% 0); }
  80%  { clip-path: inset(58% 0 28% 0); }
  85%  { clip-path: inset(40% 0 45% 0); }
  90%  { clip-path: inset(82% 0 10% 0); }
  95%  { clip-path: inset(25% 0 60% 0); }
  100% { clip-path: inset(65% 0 25% 0); }
}

/* ---- FLANKERS ---- */
.wc-logo__flanker {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-family: "JetBrains Mono", monospace;
  font-weight: 800;
  line-height: 1;
  color: var(--wcl-lime);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  white-space: pre;
  opacity: 1;
  pointer-events: none;
  display: inline-flex;
  align-items: baseline;
}
.wc-logo__flanker--left  {
  right: 100%;
  margin-right: calc(0em + var(--wcl-fl-left-off, -0.0625em));   /* gap 0 + left-off -5/80 */
  justify-content: flex-end;
}
.wc-logo__flanker--right {
  left: 100%;
  margin-left:  calc(0em + var(--wcl-fl-right-off, -0.0875em));  /* gap 0 + right-off -7/80 */
  justify-content: flex-start;
}
.wc-logo__char {
  display: inline-block;
  line-height: 1;
  text-shadow:
    0 0 var(--wcl-f-g1, 3px) var(--wcl-lime),
    0 0 var(--wcl-f-g2, 8px) color-mix(in srgb, var(--wcl-lime) var(--wcl-f-mix, 35%), transparent);
  transition: text-shadow 700ms ease-in-out;
}
.wc-logo.is-bursting .wc-logo__char { text-shadow: none; }
.wc-logo.is-bursting .wc-logo__flanker {
  text-shadow:
    1px 0 0 var(--wcl-orange),
   -1px 0 0 color-mix(in srgb, var(--wcl-lime) 70%, transparent);
}

@keyframes wcl-glitch-jit {
  0%, 100% { transform: translateY(-50%) translate(0, 0); }
  25%      { transform: translateY(-50%) translate(-1px, -1px); }
  50%      { transform: translateY(-50%) translate(1px, 1px); }
  75%      { transform: translateY(-50%) translate(-1px, 1px); }
}
.wc-logo.is-bursting .wc-logo__flanker {
  animation: wcl-glitch-jit 0.12s steps(4) infinite;
}

/* Static modifier: skip animations + canvas (use this in headers/nav) */
.wc-logo--static .wc-logo__cyber::before,
.wc-logo--static .wc-logo__cyber::after { display: none; }
.wc-logo--static .wc-logo__flanker { display: none; }
.wc-logo--static .wc-logo__canvas { display: none; }

/* ---- Size presets ---- */
.wc-logo--hero { --wc-logo-size: clamp(96px, 14vw, 200px); }
.wc-logo--nav  { --wc-logo-size: 26px; }
/* No per-tier overlap overrides — the calc() formula on .wc-logo__cyber-row
   above handles all sizes automatically. */