:root {
  --night: #0a0820;
  --night-deep: #06051a;
  --magenta: #ff2d87;
  --cyan: #00e5ff;
  --sun: #ffd23f;
  --pop: #ff5d1f;
  --ivory: #fef6e4;
}

html { scroll-behavior: smooth; }
body { font-feature-settings: "ss01", "cv11"; background: var(--night); }

/* ───── HALFTONE / DOTS BACKGROUND ───── */
.halftone {
  background-image: radial-gradient(rgba(255,255,255,0.06) 1.2px, transparent 1.2px);
  background-size: 14px 14px;
}
.halftone-mag {
  background-image: radial-gradient(rgba(255,45,135,0.35) 1.4px, transparent 1.4px);
  background-size: 10px 10px;
}
.halftone-cy {
  background-image: radial-gradient(rgba(0,229,255,0.35) 1.4px, transparent 1.4px);
  background-size: 10px 10px;
}
.halftone-sun {
  background-image: radial-gradient(rgba(255,210,63,0.45) 1.4px, transparent 1.4px);
  background-size: 10px 10px;
}

/* ───── COMIC GRID LINES ───── */
.grid-lines {
  background-image:
    linear-gradient(to right, rgba(255,255,255,0.04) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(255,255,255,0.04) 1px, transparent 1px);
  background-size: 64px 64px;
}

/* ───── DUOTONE IMAGE TREATMENT ───── */
.duotone {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.duotone img {
  filter: grayscale(100%) contrast(1.35) brightness(0.85);
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.duotone::before {
  content: "";
  position: absolute; inset: 0;
  background: var(--c1, #ff2d87);
  mix-blend-mode: lighten;
  pointer-events: none;
  z-index: 1;
}
.duotone::after {
  content: "";
  position: absolute; inset: 0;
  background: var(--c2, #0a0820);
  mix-blend-mode: multiply;
  pointer-events: none;
  z-index: 2;
}
.duotone-mag-cy   { --c1:#00e5ff; --c2:#ff2d87; }
.duotone-mag-night{ --c1:#ff2d87; --c2:#0a0820; }
.duotone-cy-night { --c1:#00e5ff; --c2:#0a0820; }
.duotone-sun-mag  { --c1:#ffd23f; --c2:#ff2d87; }
.duotone-sun-cy   { --c1:#ffd23f; --c2:#00e5ff; }
.duotone-pop-night{ --c1:#ff5d1f; --c2:#0a0820; }

/* ───── COMIC OFFSET SHADOW (hard, no blur) ───── */
.shadow-pop      { box-shadow: 8px 8px 0 0 var(--magenta); }
.shadow-pop-cy   { box-shadow: 8px 8px 0 0 var(--cyan); }
.shadow-pop-sun  { box-shadow: 8px 8px 0 0 var(--sun); }
.shadow-pop-night{ box-shadow: 8px 8px 0 0 var(--night-deep); }
.shadow-pop-ivory{ box-shadow: 8px 8px 0 0 var(--ivory); }
.shadow-pop-sm   { box-shadow: 4px 4px 0 0 var(--magenta); }

/* ───── STRIPED PLACEHOLDER ───── */
.ph-stripe {
  background-color: #1a1740;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.04) 0px,
    rgba(255,255,255,0.04) 1px,
    transparent 1px,
    transparent 12px
  );
}
.ph-stripe-mag {
  background-color: #ff2d87;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,0.10) 0px,
    rgba(0,0,0,0.10) 2px,
    transparent 2px,
    transparent 12px
  );
}
.ph-stripe-cy {
  background-color: #00e5ff;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,0.10) 0px,
    rgba(0,0,0,0.10) 2px,
    transparent 2px,
    transparent 12px
  );
}
.ph-stripe-sun {
  background-color: #ffd23f;
  background-image: repeating-linear-gradient(
    135deg,
    rgba(0,0,0,0.10) 0px,
    rgba(0,0,0,0.10) 2px,
    transparent 2px,
    transparent 12px
  );
}

/* ───── NEON GLOW / TEXT EFFECTS ───── */
@keyframes neonPulse {
  0%, 100% { text-shadow: 0 0 0 rgba(255,210,63,0), 0 0 0 rgba(255,45,135,0); }
  50%      { text-shadow: 0 0 24px rgba(255,210,63,0.5), 0 0 8px rgba(255,45,135,0.6); }
}
.neon-glow {
  animation: neonPulse 4s ease-in-out infinite;
}

.text-stroke-ivory {
  -webkit-text-stroke: 2px var(--ivory);
  color: transparent;
}
.text-stroke-mag {
  -webkit-text-stroke: 2px var(--magenta);
  color: transparent;
}
.text-stroke-cy {
  -webkit-text-stroke: 2px var(--cyan);
  color: transparent;
}
.text-stroke-sun {
  -webkit-text-stroke: 2px var(--sun);
  color: transparent;
}

/* Comic chromatic shadow on display text (RGB split) */
.chromatic {
  text-shadow:
    -3px 0 0 var(--magenta),
    3px 0 0 var(--cyan);
}
.chromatic-sun {
  text-shadow:
    -3px 0 0 var(--sun),
    3px 0 0 var(--magenta);
}

/* ───── SOFT PULSE ───── */
@keyframes softPulse {
  0%, 100% { opacity: .55; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}
.soft-pulse { animation: softPulse 2.2s ease-in-out infinite; }

/* ───── REVEAL ───── */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.reveal { opacity: 0; }
.reveal.is-visible { animation: fadeUp .8s cubic-bezier(.22,.61,.36,1) forwards; }

/* ───── MARQUEE ───── */
@keyframes marquee {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-track { animation: marquee 40s linear infinite; }
@keyframes marqueeSlow {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.marquee-slow { animation: marqueeSlow 60s linear infinite; }

/* ───── STEPPER PROGRESS ───── */
.step-line {
  background: linear-gradient(to right, var(--magenta) var(--progress, 0%), rgba(255,255,255,0.10) var(--progress, 0%));
  transition: background 700ms cubic-bezier(.22,.61,.36,1);
}

/* ───── PARALLAX ───── */
.parallax-layer {
  will-change: transform;
  transition: transform 120ms linear;
}

/* ───── FOCUS RINGS ───── */
:focus-visible {
  outline: 2px solid var(--cyan);
  outline-offset: 3px;
}

/* ───── SCROLLBAR ───── */
::-webkit-scrollbar { height: 10px; width: 10px; }
::-webkit-scrollbar-track { background: var(--night-deep); }
::-webkit-scrollbar-thumb { background: var(--magenta); border-radius: 0; }
::-webkit-scrollbar-thumb:hover { background: var(--cyan); }

/* ───── TABULAR ───── */
.tabular { font-variant-numeric: tabular-nums; }

/* ───── BURST / STAR ───── */
.burst {
  clip-path: polygon(
    50% 0%, 60% 25%, 85% 15%, 75% 40%,
    100% 50%, 75% 60%, 85% 85%, 60% 75%,
    50% 100%, 40% 75%, 15% 85%, 25% 60%,
    0% 50%, 25% 40%, 15% 15%, 40% 25%
  );
}

/* ───── ZIGZAG BORDER ───── */
.zigzag-bottom {
  --s: 14px;
  --c: var(--night);
  -webkit-mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50%/var(--s) 100% repeat-x;
          mask:
    conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) 50%/var(--s) 100% repeat-x;
}

/* ───── LIGHTNING BOLT helper (inline svg uses color) ───── */
.bolt { color: var(--sun); }

/* hide scrollbars on snap rows */
.scrollbar-hide::-webkit-scrollbar { display: none; }
.scrollbar-hide { scrollbar-width: none; }

/* Comic page rotation utility (slight tilt) */
.tilt-l { transform: rotate(-1.5deg); }
.tilt-r { transform: rotate(1.5deg); }

/* Hard, blocky button presses */
.btn-pop {
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.btn-pop:hover { transform: translate(-2px, -2px); }
.btn-pop:active { transform: translate(2px, 2px); box-shadow: 2px 2px 0 0 currentColor; }