/* ================================
   Comic Text — Full CSS
   ================================ */

/* Container stays the same */
.comic-text-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 1002;
}

/* Base element: NO visuals or animation by default.
   Each variant (.bang, .murmur, etc.) sets its own styles. */
.comic-text {
  position: absolute;
  font-family: 'Comic Sans MS', cursive;
  font-weight: bold;
  pointer-events: none;
  white-space: nowrap;
  letter-spacing: var(--tracking, 0);

  /* shared utilities */
  --stroke-width: 2px;
  --stroke-color: #000;
  -webkit-text-stroke: var(--stroke-width) var(--stroke-color);
  --tilt: 0deg;

  /* Allow variants to opt into either:
     - halftone background-clip text, or
     - normal colored text */
  color: inherit;
  -webkit-background-clip: initial;
  background-clip: initial;
  background: none;

  /* No default animation; variants will specify. */
  animation: none;
}

/* ================================
   Halftone helper variables (opt-in)
   These are read by variants that use halftone backgrounds.
   ================================ */
/* 
  --comic-color: fill behind dots
  --dot-color: halftone dot color
  --dot-fill: dot radius (%) within the tile
  --dot-softness: small % band to anti-alias edges
  --dot-spacing: tile size; larger = bigger/more spaced dots
*/

/* Per-letter styling when we “charify” the text */
.comic-text.charred .char {
  display: inline-block;
  /* global knobs (tweak per variant or per element) */
  margin-right: var(--char-overlap, -0.02em); /* overlaps neighbors */
  transform: translateY(var(--char-ty, 0)) rotate(var(--char-r, 0));
  transform-origin: 50% 80%;
  -webkit-text-stroke: var(--stroke-width) var(--stroke-color);
}

/* Slightly stronger for BANG */
.comic-text.bang.charred {
  --tracking: -0.07em;
  --char-overlap: -0.03em;
  background: none;
}

.comic-text.bang.charred .char {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background:
    radial-gradient(
      var(--dot-color) var(--dot-fill),
      transparent calc(var(--dot-fill) + var(--dot-softness))
    ) 0 0 / var(--dot-spacing) var(--dot-spacing),
    var(--comic-color);
}

/* Softer for murmur */
.comic-text.murmur.charred {
  --tracking: -0.035em;
  --char-overlap: -0.018em;
}

/* Respect reduced motion */
@media (prefers-reduced-motion: reduce) {
  .comic-text.charred .char {
    transform: none !important;
  }
}

/* ================================
   BANG — explosive, pop + drift
   ================================ */
.comic-text.bang {
  font-family: 'Bangers', cursive;
  font-size: 4rem;

  /* Visuals: halftone on loud orange fill */
  --comic-color: rgb(255, 115, 0);
  --dot-color: #ffffff;       /* white dots read “comic” over orange */
  --dot-fill: 28%;
  --dot-softness: 1%;
  --dot-spacing: 5px;

  color: transparent;
  background:
    radial-gradient(
      var(--dot-color) var(--dot-fill),
      transparent calc(var(--dot-fill) + var(--dot-softness))
    ) 0 0 / var(--dot-spacing) var(--dot-spacing),
    var(--comic-color);
  -webkit-background-clip: text;
  background-clip: text;

  /* Motion: quick pop + slight shake, then rise & fade */
  animation:
    bang-pop 320ms cubic-bezier(.2, .9, .2, 1.2),
    bang-shake 280ms ease-out,
    bang-rise-fade 900ms 280ms ease-out forwards;
  transform-origin: center;
  will-change: transform, opacity;
}

/* POP: squash & stretch with a tiny overshoot */
@keyframes bang-pop {
  0%   { transform: rotate(var(--tilt)) scale(.6); opacity: 0; }
  60%  { transform: rotate(calc(var(--tilt) * 1)) scale(1.15); opacity: 1; }
  100% { transform: rotate(var(--tilt)) scale(1.0); opacity: 1; }
}

/* SHAKE: quick impact jitter */
@keyframes bang-shake {
  0%   { transform: translateX(0) rotate(var(--tilt)); }
  20%  { transform: translateX(-3px) rotate(calc(var(--tilt) - .5deg)); }
  40%  { transform: translateX(3px)  rotate(calc(var(--tilt) + .4deg)); }
  60%  { transform: translateX(-2px) rotate(calc(var(--tilt) - .3deg)); }
  80%  { transform: translateX(2px)  rotate(calc(var(--tilt) + .2deg)); }
  100% { transform: translateX(0) rotate(var(--tilt)); }
}

/* DRIFT: float upward while fading and slightly enlarging */
@keyframes bang-rise-fade {
  0%   { opacity: 1; transform: translateY(0)        rotate(var(--tilt)) scale(1.0); }
  100% { opacity: 0; transform: translateY(-44px)    rotate(var(--tilt)) scale(1.15); }
}

/* ================================
   MURMUR — quiet, subtle wisp
   ================================ */
.comic-text.murmur {
  font-size: 2.0rem;
  font-style: italic;

  /* Visuals: soft solid text (no halftone), thinner stroke */
  --comic-color: #cfcfcfcf;
  color: var(--comic-color);
  -webkit-text-stroke: 1.5px #000;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;

  /* Motion: fade in + gentle sway upward */
  animation: murmur-wisp 1400ms ease-out forwards;
  transform-origin: center left;
  will-change: transform, opacity;
}

@keyframes murmur-wisp {
  0%   { opacity: 0;   transform: rotate(var(--tilt)) translate(0, 8px)   scale(0.98); }
  15%  { opacity: 0.92; transform: rotate(calc(var(--tilt) - .3deg)) translate(3px, 0) scale(1); }
  35%  { opacity: 0.88; transform: rotate(calc(var(--tilt) + .2deg)) translate(-2px, -8px) scale(1.02); }
  65%  { opacity: 0.64; transform: rotate(calc(var(--tilt) - .2deg)) translate(2px, -18px) scale(1.03); }
  100% { opacity: 0;    transform: rotate(var(--tilt)) translate(0, -34px) scale(1.05); }
}

/* ================================
   Optional: Another SFX style (quiet default halftone)
   Uncomment if you want a middle-ground style.
   ================================ */
/*
.comic-text.sfx {
  font-size: 3rem;

  --comic-color: #ffd766;
  --dot-color: #000000;
  --dot-fill: 22%;
  --dot-softness: 0.8%;
  --dot-spacing: 4px;

  color: transparent;
  background:
    radial-gradient(
      var(--dot-color) var(--dot-fill),
      transparent calc(var(--dot-fill) + var(--dot-softness))
    ) 0 0 / var(--dot-spacing) var(--dot-spacing),
    var(--comic-color);
  -webkit-background-clip: text;
  background-clip: text;

  animation: sfx-float 1100ms ease-out forwards;
  transform-origin: center;
}
.comic-text.sfx.charred {
  background: none;
}

.comic-text.sfx.charred .char {
  color: transparent;
  -webkit-background-clip: text;
  background-clip: text;
  background:
    radial-gradient(
      var(--dot-color) var(--dot-fill),
      transparent calc(var(--dot-fill) + var(--dot-softness))
    ) 0 0 / var(--dot-spacing) var(--dot-spacing),
    var(--comic-color);
}
@keyframes sfx-float {
  0%   { opacity: 0; transform: rotate(var(--tilt)) translateY(6px)  scale(.98); }
  20%  { opacity: 1; transform: rotate(var(--tilt)) translateY(0)    scale(1.02); }
  100% { opacity: 0; transform: rotate(var(--tilt)) translateY(-28px) scale(1.06); }
}
*/

/* ================================
   Accessibility: prefers-reduced-motion
   Tone down animations for users who prefer less motion.
   ================================ */
@media (prefers-reduced-motion: reduce) {
  .comic-text.bang,
  .comic-text.murmur
  /* , .comic-text.sfx */
  {
    animation-duration: 160ms !important;
    animation-iteration-count: 1;
    animation-name: none;
    opacity: 1;
    transform: rotate(var(--tilt));
  }
}