/* JS初期化前の一瞬表示を防止 */
html.js [data-text-reveal]:not([data-ready]),
html.js [data-text-clip-appear]:not([data-ready]){
  visibility:hidden;
}

/* ---------------------------------------------------------
   Optical（SVGで楕円を回転させながら描画）
   --------------------------------------------------------- */

.optical-svg-host{
  position:relative;
  display:inline-block;
  color:transparent;
}

.optical-svg-fallback{
  visibility:hidden;
}

.optical-svg{
  position:absolute;
  top:0;
  left:0;
  display:block;
  overflow:visible;
}

/* ---------------------------------------------------------
   Heading reveal
   --------------------------------------------------------- */

.text-reveal{
  --reveal-pos:-20%;
  --reveal-feather:18%;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      #000 calc(var(--reveal-pos) - var(--reveal-feather)),
      rgba(0,0,0,.52) var(--reveal-pos),
      transparent calc(var(--reveal-pos) + var(--reveal-feather)),
      transparent 100%
    );

  mask-image:
    linear-gradient(
      90deg,
      #000 0%,
      #000 calc(var(--reveal-pos) - var(--reveal-feather)),
      rgba(0,0,0,.52) var(--reveal-pos),
      transparent calc(var(--reveal-pos) + var(--reveal-feather)),
      transparent 100%
    );

  -webkit-mask-repeat:no-repeat;
  mask-repeat:no-repeat;
}

/* ---------------------------------------------------------
   Body text clip appear
   --------------------------------------------------------- */

.text-clip-appear{
  --text-clip-from:rgba(23,25,29,.18);
  --text-clip-to:currentColor;
  color:var(--text-clip-from);
  display:block;
  position:relative;
}

.text-clip-appear__placeholder,
.text-clip-appear__base,
.text-clip-appear__overlay,
.text-clip-appear__base-line,
.text-clip-appear__base-line-inner,
.text-clip-appear__overlay-line,
.text-clip-appear__overlay-line-inner{
  white-space:inherit;
  display:block;
}

.text-clip-appear__placeholder{
  visibility:hidden;
}

.text-clip-appear__base,
.text-clip-appear__overlay{
  pointer-events:none;
  position:absolute;
  inset:0;
}

.text-clip-appear__base{
  color:var(--text-clip-from);
}

.text-clip-appear__overlay{
  color:var(--text-clip-to);
}

.text-clip-appear__base-line,
.text-clip-appear__overlay-line{
  clip-path:var(--text-clip-line-mask);
  position:absolute;
  inset:0;
  overflow:hidden;
}

.text-clip-appear__base-line-inner,
.text-clip-appear__overlay-line-inner{
  color:inherit;
  will-change:clip-path;
}