@import url("https://fonts.googleapis.com/css2?family=Yomogi&display=swap");

/* Politician demo — quiet handwritten resolve in the mobile hero.
   This is intentionally small and non-looping: it should feel like a note in the margin,
   not a campaign slogan competing with the main headline. */
@keyframes civic-hero-handwrite-line {
  from {
    clip-path: inset(0 100% 0 0);
    opacity: 0.16;
    transform: translateY(0.18rem) rotate(-3.5deg);
  }
  to {
    clip-path: inset(0 0 0 0);
    opacity: 0.72;
    transform: translateY(0) rotate(-3.5deg);
  }
}

[data-demo-static][data-category="politician"] #politician-top > section:first-of-type > .container-x::before,
[data-demo-static][data-category="politician"] #politician-top > section:first-of-type > .container-x::after {
  display: none;
}

@media (max-width: 767px) {
  [data-demo-static][data-category="politician"] #politician-top > section:first-of-type > .container-x::before,
  [data-demo-static][data-category="politician"] #politician-top > section:first-of-type > .container-x::after {
    position: absolute;
    left: clamp(1.4rem, 6vw, 2.1rem);
    z-index: 6;
    display: block;
    max-width: 13.5rem;
    overflow: hidden;
    color: rgba(8, 42, 82, 0.74);
    font-family: "Yomogi", "Shippori Mincho B1", "Noto Serif JP", cursive;
    font-weight: 400;
    letter-spacing: 0.045em;
    line-height: 1.5;
    text-shadow:
      0 1px 0 rgba(255,255,255,0.86),
      0 10px 28px rgba(73,126,178,0.12);
    white-space: nowrap;
    pointer-events: none;
    opacity: 0;
    will-change: clip-path, opacity, transform;
  }

  [data-demo-static][data-category="politician"] #politician-top > section:first-of-type > .container-x::before {
    content: "小さな声を、";
    top: clamp(-22.5rem, -39vh, -17.6rem);
    font-size: clamp(1.02rem, 4.6vw, 1.34rem);
    animation: civic-hero-handwrite-line 1.04s steps(6, end) 0.72s both;
  }

  [data-demo-static][data-category="politician"] #politician-top > section:first-of-type > .container-x::after {
    content: "置き去りにしない。";
    top: calc(clamp(-22.5rem, -39vh, -17.6rem) + 1.86rem);
    font-size: clamp(1.08rem, 4.85vw, 1.45rem);
    animation: civic-hero-handwrite-line 1.34s steps(9, end) 1.58s both;
  }
}

@media (prefers-reduced-motion: reduce) {
  [data-demo-static][data-category="politician"] #politician-top > section:first-of-type > .container-x::before,
  [data-demo-static][data-category="politician"] #politician-top > section:first-of-type > .container-x::after {
    animation: none !important;
    clip-path: none !important;
    opacity: 0.72 !important;
    transform: rotate(-3.5deg) !important;
  }
}