/* Writing logo: the primary Chiobu script logo "writes" itself in, then the 美女 seal stamps.
   Brand guide: the logo stays solid colour (no glow, no outline, no recolour, no distortion), so
   the effect is only a moving mask over the untouched SVG plus a short scale pop on the seal.
   Markup:
     <span class="logo-write" data-write="load|view" aria-hidden="true">
       <img class="logo-write__ink"  src="/logo/chiobu_primary_logo.svg?v=3" alt="" width="1450" height="800">
       <img class="logo-write__seal" src="/logo/chiobu_primary_logo.svg?v=3" alt="" width="1450" height="800">
     </span>
   data-write="load": plays on page load (CSS only).  data-write="view": /js/logo-write.js adds .is-on in view.
   The same mask also works on text: add class="ink-write" + data-write to any element.
   No JS (no .js class) and reduced motion: everything is fully visible, nothing animates. */
.logo-write{position:relative;display:block;aspect-ratio:1450/800;line-height:0}
.logo-write img{position:absolute;inset:0;width:100%;height:100%;max-width:none}
/* the seal (bottom right of the artwork) lives on its own copy so it can stamp after the script */
.logo-write__ink{clip-path:polygon(0 0,100% 0,100% 57%,87% 57%,87% 100%,0 100%)}
.logo-write__seal{clip-path:inset(57% 0 0 87%);transform-origin:93% 78%}

/* mask that sweeps in on the script's slant: 250% wide, opaque left half, soft edge */
.js [data-write] .logo-write__ink,.js .ink-write[data-write]{
  -webkit-mask-image:linear-gradient(100deg,#000 45%,transparent 55%);mask-image:linear-gradient(100deg,#000 45%,transparent 55%);
  -webkit-mask-size:250% 100%;mask-size:250% 100%;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:0 0;mask-position:0 0}
@media(prefers-reduced-motion:no-preference){
  .js [data-write="view"]:not(.is-on) .logo-write__ink,.js .ink-write[data-write="view"]:not(.is-on){-webkit-mask-position:100% 0;mask-position:100% 0}
  .js [data-write="view"]:not(.is-on) .logo-write__seal{opacity:0}
}

.js [data-write="load"] .logo-write__ink,.js .ink-write[data-write="load"],
.js [data-write="view"].is-on .logo-write__ink,.js .ink-write[data-write="view"].is-on{
  animation:lw-write var(--lw-dur,1.6s) cubic-bezier(.5,.08,.3,1) var(--lw-delay,0s) both}
.js [data-write="load"] .logo-write__seal,.js [data-write="view"].is-on .logo-write__seal{
  animation:lw-stamp .55s cubic-bezier(.3,1.6,.5,1) calc(var(--lw-delay,0s) + var(--lw-dur,1.6s) * .82) both}

@keyframes lw-write{
  from{-webkit-mask-position:100% 0;mask-position:100% 0}
  to{-webkit-mask-position:0 0;mask-position:0 0}}
@keyframes lw-stamp{
  0%{opacity:0;transform:scale(1.6) rotate(-9deg)}
  55%{opacity:1;transform:scale(.93) rotate(1deg)}
  100%{opacity:1;transform:none}}

@media(prefers-reduced-motion:reduce){
  .js [data-write] .logo-write__ink,.js .ink-write[data-write]{-webkit-mask-image:none;mask-image:none}
}