/* Hero craft: washi texture, headline line wipe, hanko stamp.
   Load sequence (≈1.45 s total, all CSS, no JS needed):
     0.00–0.85 s  headline lines wipe in (up to 4 lines, 100 ms apart, 0.55 s each)
     0.85–1.25 s  seal presses in, impact at ≈1.09 s
     1.05–1.45 s  ink ring spreads and fades behind the seal */

/* 1. Washi texture --------------------------------------------------------
   A 220px tile of fractal noise, rasterised once by the browser and repeated.
   Alpha is ≈3% on average (max ≈15% on the darkest fibres), tinted toward sumi,
   so the paper colour shifts by roughly one or two RGB steps: text contrast is unaffected.
   Add the texture on top of your existing body background colour. */
:root {
  --washi-texture: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.16 0 0 0 0 0.14 0 0 0 0 0.11 0.6 0 0 0 -0.25'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}

body {
  background-image: var(--washi-texture);
  background-repeat: repeat;
}

/* 2. Headline line wipe ---------------------------------------------------
   Markup: <h1 class="hero-title"><span class="hero-line">First line</span> <span class="hero-line">Second</span></h1> */
.hero-line {
  display: block;
}

/* 3. Hanko seal -----------------------------------------------------------
   Markup: <div class="hanko" role="img" aria-label="Topis Mos seal">Topis<br>Mos</div>
   plus the hidden <svg> that defines #hanko-rough (see index.html).
   The filter gives the ink a slightly uneven, hand-stamped edge. It is applied to the
   red shape only (::after), never to the text, which would smear the letters. */
.hanko {
  position: relative;
  isolation: isolate;
  display: grid;
  place-items: center;
  flex: none;
  width: clamp(5rem, 12vw, 7rem);
  aspect-ratio: 1;
  border-radius: 6px;
  color: var(--washi);
  font-family: var(--font-head, serif);
  font-size: clamp(1rem, 2.4vw, 1.3rem);
  line-height: 1.1;
  letter-spacing: 0.02em;
  text-align: center;
  rotate: -4deg;
}

/* The ink */
.hanko::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background: var(--shu);
  filter: url(#hanko-rough);
}

/* Ink-spread ring: invisible unless the stamp animation runs */
.hanko::before {
  content: "";
  position: absolute;
  inset: -2px;
  border: 2px solid var(--shu);
  border-radius: inherit;
  opacity: 0;
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  @supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {
    .hero-line {
      /* The mask only covers the element's box. With a tight line-height, descenders
         (g, p) and accents hang outside it and would be cut off, so pad the box to hold
         them and cancel the padding with negative margins so the layout doesn't move. */
      padding-block: 0.12em 0.22em;
      margin-block: -0.12em -0.22em;
      -webkit-mask-image: linear-gradient(to right, #000 40%, transparent 60%);
      mask-image: linear-gradient(to right, #000 40%, transparent 60%);
      -webkit-mask-size: 250% 100%;
      mask-size: 250% 100%;
      -webkit-mask-repeat: no-repeat;
      mask-repeat: no-repeat;
      animation: hero-wipe 0.55s cubic-bezier(0.3, 0.1, 0.2, 1) both;
    }

    .hero-line:nth-child(2) { animation-delay: 0.1s; }
    .hero-line:nth-child(3) { animation-delay: 0.2s; }
    .hero-line:nth-child(4) { animation-delay: 0.3s; }
  }

  /* `scale` (not `transform`) so any rotation you already set on .hanko is kept */
  .hanko {
    animation: hanko-press 0.4s cubic-bezier(0.3, 0, 0.2, 1) 0.85s both;
  }

  .hanko::before {
    animation: hanko-ink 0.4s ease-out 1.05s both;
  }
}

@keyframes hero-wipe {
  from {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  to {
    -webkit-mask-position: 0 0;
    mask-position: 0 0;
  }
}

@keyframes hanko-press {
  0%   { opacity: 0; scale: 1.35; }
  60%  { opacity: 1; scale: 0.94; }
  100% { opacity: 1; scale: 1; }
}

@keyframes hanko-ink {
  0%   { opacity: 0.35; scale: 0.95; }
  100% { opacity: 0;    scale: 1.6; }
}