/* SBG BRUSH — sakura-hero.css v1.0
   Ink & Bloom hero (approved build: sbg-brush-hero-v6, wave-growth edition)
   Scope: all rules prefixed .skr / skr- to avoid collision with style.css
   (site --ink is dark charcoal; hero uses its own scoped palette) */

.skr{
  --skr-washi:#f0ebdf;
  --skr-ink:#221d18;
  --skr-ink-soft:#4a443c;
  position:relative;height:100vh;min-height:560px;overflow:hidden;
  color:var(--skr-ink);
  font-family:'Shippori Mincho',serif;
  background:
    radial-gradient(1100px 650px at 62% 34%, rgba(255,252,244,.85), transparent 62%),
    radial-gradient(900px 600px at 10% 90%, rgba(210,198,172,.5), transparent 60%),
    radial-gradient(700px 500px at 92% 88%, rgba(216,205,182,.4), transparent 60%),
    var(--skr-washi);
}
/* washi grain */
.skr::after{
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.55;z-index:5;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/><feColorMatrix type='matrix' values='0 0 0 0 0.55 0 0 0 0 0.52 0 0 0 0 0.45 0 0 0 0.05 0'/></filter><rect width='220' height='220' filter='url(%23n)'/></svg>");
}
.skr__vignette{
  position:absolute;inset:0;pointer-events:none;z-index:5;
  background:radial-gradient(120% 120% at 50% 45%, transparent 58%, rgba(58,48,38,.16) 100%);
}

.skr__scene{position:absolute;inset:0}
.skr__scene svg{width:100%;height:100%;display:block}

/* gentle breeze after full bloom */
#skr-branches,#skr-blossoms,#skr-fg{transform-box:view-box;transform-origin:50% -10%}
.skr-swaying #skr-branches,.skr-swaying #skr-blossoms{animation:skrSway 12s ease-in-out 11s infinite alternate}
.skr-swaying #skr-fg{animation:skrSway2 8s ease-in-out 11s infinite alternate}
@keyframes skrSway{from{transform:rotate(-0.25deg)}to{transform:rotate(0.35deg)}}
@keyframes skrSway2{from{transform:rotate(-0.5deg) translateY(0)}to{transform:rotate(0.5deg) translateY(6px)}}

.skr-branch{
  fill:none;stroke-linecap:round;
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:skrDraw var(--dur,.4s) linear var(--delay,0s) forwards;
}
@keyframes skrDraw{to{stroke-dashoffset:0}}

.skr-cluster{opacity:0;
  animation:skrBloom .8s cubic-bezier(.2,1.35,.4,1) var(--bd,3s) forwards}
@keyframes skrBloom{
  0%{opacity:0;transform:scale(.1)}
  62%{opacity:1;transform:scale(1.1)}
  100%{opacity:1;transform:scale(1)}
}
.skr-fgbloom{opacity:0;animation:skrFgIn 1.8s ease var(--bd,6.5s) forwards}
@keyframes skrFgIn{to{opacity:var(--fo,.4)}}
.skr-fleck{opacity:0;animation:skrFleckIn 1.4s ease var(--bd,4s) forwards}
@keyframes skrFleckIn{to{opacity:1}}

/* ---- copy ---- */
.skr__copy{
  position:absolute;inset:0;z-index:4;
  display:flex;flex-direction:column;align-items:center;justify-content:center;
  text-align:center;pointer-events:none;padding:0 20px;
}
.skr__copy::before{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);
  width:min(900px,94vw);height:330px;border-radius:50%;
  background:radial-gradient(ellipse, rgba(240,235,223,.75) 0%, rgba(240,235,223,.42) 55%, transparent 77%);
  z-index:-1;
}
.skr .kicker{
  color:var(--skr-ink-soft);
  text-shadow:0 0 14px rgba(240,235,223,.9);
  opacity:0;animation:skrFadeUp 1.4s ease 4.6s forwards;
}
.skr__title{
  font-family:'Shippori Mincho',serif;
  font-size:clamp(52px,10vw,132px);
  font-weight:700;letter-spacing:.08em;line-height:1.1;
  margin:14px 0 18px;color:var(--skr-ink);
  text-shadow:0 0 26px rgba(240,235,223,.95),0 0 60px rgba(240,235,223,.7);
  opacity:0;animation:skrFadeUp 1.8s cubic-bezier(.2,.7,.3,1) 5.2s forwards;
}
.skr__tagline{
  font-size:clamp(15px,1.9vw,21px);letter-spacing:.28em;text-indent:.28em;
  color:var(--skr-ink);
  text-shadow:0 0 14px rgba(240,235,223,.9);
  opacity:0;animation:skrFadeUp 1.6s ease 6.4s forwards;
}
.skr__sub{
  margin-top:16px;
  font-size:clamp(11px,1.2vw,14px);line-height:2;letter-spacing:.08em;
  color:var(--skr-ink-soft);
  text-shadow:0 0 12px rgba(240,235,223,.9);
  opacity:0;animation:skrFadeUp 1.6s ease 6.8s forwards;
}
@keyframes skrFadeUp{
  from{opacity:0;transform:translateY(22px);filter:blur(6px)}
  to{opacity:1;transform:translateY(0);filter:blur(0)}
}

.skr__side{
  position:absolute;left:34px;top:50%;transform:translateY(-50%);z-index:4;
  writing-mode:vertical-rl;
  font-size:15px;letter-spacing:.5em;color:var(--skr-ink-soft);
  text-shadow:0 0 12px rgba(240,235,223,.9);
  opacity:0;animation:skrFadeUp 2s ease 7.2s forwards;
}

.skr__scroll{
  position:absolute;bottom:30px;left:50%;transform:translateX(-50%);z-index:4;
  font-size:11px;letter-spacing:.4em;text-indent:.4em;
  color:var(--skr-ink-soft);text-align:center;
  text-shadow:0 0 12px rgba(240,235,223,.9);
  opacity:0;animation:skrFadeUp 1.5s ease 7.6s forwards;
}
.skr__scroll::after{
  content:"";display:block;width:1px;height:40px;margin:10px auto 0;
  background:linear-gradient(var(--skr-ink-soft),transparent);
}

/* falling petals */
.skr-petal{
  position:absolute;top:-30px;z-index:5;pointer-events:none;
  width:10px;height:8px;border-radius:60% 40% 55% 45%;
  background:radial-gradient(circle at 30% 30%, #eeb4c0, #cf6b7f);
  opacity:0;
  animation:skrFall var(--fd,9s) linear var(--fdel,9s) infinite;
}
@keyframes skrFall{
  0%{opacity:0;transform:translate(0,0) rotate(0deg)}
  8%{opacity:.75}
  100%{opacity:0;transform:translate(var(--sway,-120px),108vh) rotate(560deg)}
}

/* material chip sits on washi in this section */
.skr .chip{position:absolute;left:28px;bottom:28px;z-index:6}

@media (max-width:720px){
  .skr__side{display:none}
}
/* ?static=1 — 完全静止（即・満開） */
.skr--static .skr-branch{animation:none;stroke-dashoffset:0}
.skr--static .skr-cluster,.skr--static .skr-fleck,.skr--static .kicker,
.skr--static .skr__title,.skr--static .skr__tagline,.skr--static .skr__sub,
.skr--static .skr__side,.skr--static .skr__scroll{animation:none;opacity:1;transform:none}
.skr--static .skr-fgbloom{animation:none;opacity:var(--fo,.4)}

/* OS reduced-motion: 成長・開花のワンショットは再生し、無限ループ（揺れ・舞い散り）のみ停止。
   完全静止は ?static=1 で。 */
@media (prefers-reduced-motion:reduce){
  .skr-petal{display:none}
  .skr-swaying #skr-branches,.skr-swaying #skr-blossoms,.skr-swaying #skr-fg{animation:none}
}