:root{
  --paint: #1b2a6b;
  --base: #ffffff;
  --metal: #2b2b2b;
  --handle: #7a4b2b;

  /* 塗り終わるまでの時間 */
  --duration: 1400ms;
}

/* ===== Overlay ===== */
.rl{
  position: fixed;
  inset: 0;
  z-index: 99999;
  background: var(--base);
  display: grid;
  place-items: center;
  overflow: hidden;
  opacity: 1;
  pointer-events: all;
}

.rl__base{
  position:absolute;
  inset:0;
  background: var(--base);
}

/* ===== Paint layer ===== */
/* ===== Paint layer (COLOR MUST BE HERE) ===== */
.rl__paint{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:0%;
  background: var(--paint) !important; /* ←塗色は必ず本体で出す */
  box-shadow: inset 0 -14px 30px rgba(0,0,0,0.15);
}

/* 波は“色”ではなく、濡れた縁のハイライトとして乗せる（装飾） */
.rl__paint::before{
  content:"";
  position:absolute;
  left:-6%;
  right:-6%;
  bottom:-10px;
  height:22px;

  background:
    radial-gradient(circle at 12px 0px, rgba(255,255,255,.35) 0 12px, transparent 13px);
  background-size: 120px 22px;
  background-repeat: repeat-x;

  opacity:.55;
  filter: blur(1.1px);
  pointer-events:none;
}

/* 塗装のムラ（テクスチャ）は“別レイヤー”で乗せる（本体色を殺さない） */
/* スケッチ（鉛筆線）オーバーレイ：塗られた面の上で動く */
.rl__paint::after{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;

  /* 2方向の細線 + うっすら陰影で「描いてる感」 */
  background:
    repeating-linear-gradient(
      16deg,
      rgba(255,255,255,.14) 0 2px,
      rgba(255,255,255,0)   2px 7px
    ),
    repeating-linear-gradient(
      -18deg,
      rgba(0,0,0,.10) 0 1px,
      rgba(0,0,0,0)   1px 6px
    ),
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(0,0,0,.14));

  /* “スケッチが走る”演出 */
  background-size: 220px 220px, 240px 240px, 100% 100%;
  background-position: 0 0, 0 0, 0 0;
  mix-blend-mode: overlay;
  opacity: .95;

  /* 最初は少しラフ、終わりで馴染む */
  filter: blur(.15px);
  animation: sketchMove 520ms linear infinite, sketchSettle var(--duration) ease forwards;
}

/* アニメ開始は is-animating の時だけ */
.rl:not(.is-animating) .rl__paint::after{
  animation: none;
  opacity: 0;
}

@keyframes sketchMove{
  0%   { background-position:   0   0,   0   0, 0 0; }
  100% { background-position: 120px 80px, -90px 110px, 0 0; }
}

/* 描き終わりに“馴染ませる”：線が落ち着いて消えすぎない程度に */
@keyframes sketchSettle{
  0%   { opacity: .95; filter: blur(.15px); }
  65%  { opacity: .75; filter: blur(.10px); }
  100% { opacity: .55; filter: blur(0px); }
}



/* ===== Splatter (optional) ===== */
.rl__splatter{
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:0;
  background:
    radial-gradient(circle at 14% 18%, rgba(255,255,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 22% 24%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 78% 20%, rgba(255,255,255,.22) 0 2px, transparent 3px),
    radial-gradient(circle at 84% 28%, rgba(255,255,255,.16) 0 1px, transparent 2px),
    radial-gradient(circle at 64% 42%, rgba(0,0,0,.08) 0 1px, transparent 2px),
    radial-gradient(circle at 36% 46%, rgba(0,0,0,.08) 0 1px, transparent 2px);
  mix-blend-mode: overlay;
}

/* ローラーは使わない（HTML削除済みでも安全のため） */
.rl__roller{ display:none !important; }

/* ===== Center logo ===== */
.rl__center{
  position: relative;
  z-index: 2;
  display:grid;
  place-items:center;
  gap: 14px;
  padding: 26px 20px;
}

.rl__logo{
  width: min(300px, 74vw);
  opacity: 0;
  transform: translateY(10px) scale(.98);
  animation: rlLogoIn 420ms ease forwards;
  animation-delay: var(--duration); /* 塗り終わりで出す */
  filter: drop-shadow(0 12px 18px rgba(0,0,0,.28));
}

.rl__text{
  color: rgba(255,255,255,.86);
  font-size: 14px;
  letter-spacing: .14em;
  opacity: 0;
  animation: rlTextIn 420ms ease forwards;
  animation-delay: calc(var(--duration) + 180ms);
  text-shadow: 0 10px 16px rgba(0,0,0,.22);
}

/* ===== Leave ===== */
.rl.is-leaving{
  animation: rlFadeOut 320ms ease forwards;
  pointer-events:none;
}

/* ===== Animations ===== */
/* 上から下の塗りは使わない（保険） */
.rl__paint{
  height: 100% !important;
  opacity: 0 !important;
}

/* ===== Paint-by-sketch SVG ===== */
.rl__ink{
  position:absolute;
  inset:0;
  z-index: 2;
  width:100%;
  height:100%;
  pointer-events:none;
  opacity: 0;
}

.rl__ink .ink{
  fill: none;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
}

/* 先に白いスケッチ線 */
.rl__ink .ink--guide{
  stroke: rgba(255,255,255,.75);
  stroke-width: 5.5;
  opacity: .35;
}

/* その後に“塗料の筆跡”が出る */
.rl__ink .ink--paint{
  stroke: var(--paint);
  stroke-width: 34;          /* ←塗ってる太さ */
  opacity: .92;
  filter: drop-shadow(0 12px 14px rgba(0,0,0,.10));
}

/* アニメ開始 */
.rl.is-animating .rl__ink{
  opacity: 1;
}

/* 全パスが描かれる */
.rl.is-animating .rl__ink .ink{
  animation: inkDraw var(--duration) cubic-bezier(.35,.01,.2,1) forwards;
}

/* “塗り”は少し遅れて追いかける（塗ってる感） */
.rl.is-animating .rl__ink .ink--paint{
  animation-delay: 140ms;
}

/* 上から順に描く（段階ディレイ） */
.rl.is-animating .rl__ink path:nth-of-type(1){ animation-delay: 0ms; }
.rl.is-animating .rl__ink path:nth-of-type(2){ animation-delay: 120ms; }
.rl.is-animating .rl__ink path:nth-of-type(3){ animation-delay: 240ms; }
.rl.is-animating .rl__ink path:nth-of-type(4){ animation-delay: 360ms; }

/* ※ paint側も同じ順で +140ms したいので、paintだけ上書き */
.rl.is-animating .rl__ink path.ink--paint:nth-of-type(5){ animation-delay: 140ms; }
.rl.is-animating .rl__ink path.ink--paint:nth-of-type(6){ animation-delay: 260ms; }
.rl.is-animating .rl__ink path.ink--paint:nth-of-type(7){ animation-delay: 380ms; }
.rl.is-animating .rl__ink path.ink--paint:nth-of-type(8){ animation-delay: 500ms; }

@keyframes inkDraw{
  to { stroke-dashoffset: 0; }
}


@keyframes rlSplatter{
  0%{opacity:0;}
  18%{opacity:1;}
  55%{opacity:.6;}
  100%{opacity:0;}
}

@keyframes rlLogoIn{ to { opacity: 1; transform: translateY(0) scale(1);} }
@keyframes rlTextIn{ to { opacity: 1; } }
@keyframes rlFadeOut{ to { opacity: 0; } }

/* 波の“控えめ揺れ”（演出重視：少しだけ） */
@keyframes waveWobble{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(1px); }
  100% { transform: translateY(0); }
}

/* JSで付与されるクラスでアニメ開始 */

.rl.is-animating .rl__splatter{
  animation: rlSplatter var(--duration) ease forwards;
}

/* reduced motion */
@media (prefers-reduced-motion: reduce){
  .rl__paint, .rl__splatter, .rl__logo, .rl__text{
    animation: none !important;
  }
  .rl__paint{ height: 100%; }
  .rl__logo, .rl__text{ opacity: 1; transform:none; }
}

.rl__paint{
  z-index: 1;
}

.rl__paint::before{
  z-index: 2;
}

.rl__paint::after{
  z-index: 1;
}

/* ===== Sketch SVG overlay ===== */
.rl__sketch{
  position:absolute;
  inset:0;
  z-index: 2;              /* paint(1) の上、logo(3) の下に */
  width:100%;
  height:100%;
  pointer-events:none;
  opacity: 0;              /* is-animating で出す */
}

.rl__sketch .sk{
  fill: none;
  stroke: rgba(255,255,255,.55);
  stroke-linecap: round;
  stroke-linejoin: round;

  /* “描いてる”表現の基本 */
  stroke-dasharray: 2200;
  stroke-dashoffset: 2200;
}

.rl__sketch .sk--bold{
  stroke-width: 7.5;
  opacity: .22;
}

.rl__sketch .sk--thin{
  stroke-width: 2.2;
  opacity: .18;
}

/* 塗り開始と同時にスケッチ開始 */
.rl.is-animating .rl__sketch{
  opacity: 1;
}

.rl.is-animating .rl__sketch .sk{
  animation:
    sketchDraw var(--duration) cubic-bezier(.35,.01,.2,1) forwards,
    sketchFade calc(var(--duration) + 250ms) ease forwards;
}

/* 先に“太線”が走って、その後に細線が走る感じに */
.rl.is-animating .rl__sketch .sk--bold{
  animation-delay: 0ms, 0ms;
}
.rl.is-animating .rl__sketch .sk--thin{
  animation-delay: 120ms, 0ms;
}

/* 線が描かれる */
@keyframes sketchDraw{
  to { stroke-dashoffset: 0; }
}

/* 描き終わったら馴染ませる（消しすぎない） */
@keyframes sketchFade{
  0%   { opacity: 1; }
  70%  { opacity: .55; }
  100% { opacity: .35; }
}
.rl__base{ z-index: 0; }
.rl__paint{ z-index: 1; }
.rl__splatter{ z-index: 2; }
.rl__center{ z-index: 3; }

/* ===== Roller Paint SVG ===== */
.rl__ink{
  position:absolute;
  inset:0;
  z-index: 2;
  width:100%;
  height:100%;
  pointer-events:none;
  background: var(--base); /* 未塗装部分は白 */
}

/* ローラー1往復分 */
.rl__ink .ink{
  fill: none;
  stroke: var(--paint);
  stroke-width: 120;          /* ← ローラー幅 */
  stroke-linecap: round;

  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;

  filter: drop-shadow(0 10px 14px rgba(0,0,0,.12));
}

/* アニメーション開始 */
.rl.is-animating .rl__ink .ink{
  animation: rollerDraw 900ms cubic-bezier(.35,.01,.2,1) forwards;
}

/* 上から順に塗る */
.rl.is-animating .rl__ink path:nth-child(1){ animation-delay: 0ms; }
.rl.is-animating .rl__ink path:nth-child(2){ animation-delay: 90ms; }
.rl.is-animating .rl__ink path:nth-child(3){ animation-delay: 180ms; }
.rl.is-animating .rl__ink path:nth-child(4){ animation-delay: 270ms; }
.rl.is-animating .rl__ink path:nth-child(5){ animation-delay: 360ms; }
.rl.is-animating .rl__ink path:nth-child(6){ animation-delay: 450ms; }
.rl.is-animating .rl__ink path:nth-child(7){ animation-delay: 540ms; }
.rl.is-animating .rl__ink path:nth-child(8){ animation-delay: 630ms; }
.rl.is-animating .rl__ink path:nth-child(9){ animation-delay: 720ms; }
.rl.is-animating .rl__ink path:nth-child(10){ animation-delay: 810ms; }

@keyframes rollerDraw{
  to { stroke-dashoffset: 0; }
}

/* ===== Alternating roller direction ===== */

/* 奇数行：左 → 右（通常） */
.rl.is-animating .rl__ink path:nth-child(odd){
  stroke-dasharray: 1400;
  stroke-dashoffset: 1400;
  animation-name: rollerDrawLR;
  stroke-linecap: round;
}

/* 偶数行：右 → 左（逆） */
.rl.is-animating .rl__ink path:nth-child(even){
  stroke-dasharray: 1400;
  stroke-dashoffset: -1400;
  animation-name: rollerDrawRL;
  stroke-linecap: butt;
}

/* 左 → 右 */
@keyframes rollerDrawLR{
  to { stroke-dashoffset: 0; }
}

/* 右 → 左 */
@keyframes rollerDrawRL{
  to { stroke-dashoffset: 0; }
}