/* parts/japanese.css: owned by the japanese workstream. Loaded after styles.css.
   Quiet Japanese details: washi paper on light sections, a hanko sign-off,
   and a lantern glow that drifts after the cursor on dark sections. */

:root {
  --jp-red: #bc002d;
  --jp-lantern: 232, 32, 47;
}

/* 1. Washi paper ------------------------------------------------------- */
/* Fine grain plus long horizontal fibres, tiled. Colour stays var(--light)
   (background-color is untouched), dark sections stay matte. */
.section--light {
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='420' height='420'%3E%3Cfilter id='f' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.03 0.2' numOctaves='3' seed='11' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.45  0 0 0 0 0.36  0 0 0 0 0.26  0 0 0 0.6 -0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23f)' opacity='0.5'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='g' x='0' y='0' width='100%25' height='100%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' seed='4' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.38  0 0 0 0 0.3  0 0 0 0 0.22  0 0 0 0.55 -0.2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 420px 420px, 260px 260px;
  background-repeat: repeat, repeat;
  /* a breath of warmth at the edges, like a sheet under lamplight */
  box-shadow: inset 0 0 140px rgba(140, 105, 60, 0.07);
}

/* 2. Hanko seal -------------------------------------------------------- */
.jp-seal {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding: 44px 20px 76px;
  background: var(--bg);
  pointer-events: none;
}

.jp-seal__mark {
  display: block;
  width: 46px;
  height: 46px;
  transform: rotate(-2.5deg);
  opacity: 0.92;
  mix-blend-mode: normal;
}

.jp-seal__mark svg {
  display: block;
  width: 100%;
  height: 100%;
}

.jp-seal.jp-seal--armed .jp-seal__mark {
  opacity: 0;
  transform: rotate(-2.5deg) scale(1.12);
}

.jp-seal.jp-seal--armed.is-pressed .jp-seal__mark {
  opacity: 0.92;
  transform: rotate(-2.5deg) scale(1);
  transition:
    opacity 0.5s ease-out,
    transform 0.7s cubic-bezier(0.22, 1.2, 0.36, 1);
}

/* 3. Lantern glow ------------------------------------------------------ */
.jp-glow {
  position: fixed;
  top: 0;
  left: 0;
  width: 760px;
  height: 760px;
  margin: -380px 0 0 -380px;
  z-index: 40; /* under the fixed header (50), over page content */
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(
    circle at center,
    rgba(var(--jp-lantern), 0.1) 0%,
    rgba(var(--jp-lantern), 0.055) 28%,
    rgba(var(--jp-lantern), 0.02) 52%,
    rgba(var(--jp-lantern), 0) 70%
  );
  mix-blend-mode: screen;
  transition: opacity 0.9s ease;
  will-change: transform, opacity;
}

.jp-glow.is-on {
  opacity: 1;
}

@media (hover: none), (pointer: coarse), (prefers-reduced-motion: reduce) {
  .jp-glow {
    display: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  .jp-seal.jp-seal--armed .jp-seal__mark,
  .jp-seal.jp-seal--armed.is-pressed .jp-seal__mark {
    opacity: 0.92;
    transform: rotate(-2.5deg);
    transition: none;
  }
}

@media (max-width: 640px) {
  .jp-seal {
    padding-top: 36px;
    padding-bottom: 56px;
  }
  .jp-seal__mark {
    width: 40px;
    height: 40px;
  }
}