/* Way Home Brush: the road is an ink brush stroke; photographs, colours and backgrounds bloom in like watercolour on paper.
   Loaded after way-home.css. The SVG filter lives inline in the page (#ink). */
.road{--road-stroke:3.2}
.road path{stroke:#2a1911;stroke-width:3.2px;filter:url(#ink)}
.road-arrival path{stroke:#fff7ef}
/* The hanok stays a clean pen line; only the road is brushed. */

/* Watercolour blooms. A blot-shaped alpha mask grows from a point until it covers the element. */
.print{--bo:50% 50%;--blot:url(/img/way-home/blot-1.png)}
.print img{position:relative}
.wash{isolation:isolate;position:relative;background:none}
.wash::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--wash);pointer-events:none}
.season{--wash:linear-gradient(180deg,var(--paper) 50%,#f8e4d4 100%);--bo:56% 40%}
.room{--wash:linear-gradient(180deg,var(--paper) 0%,#f5e1cf 42%,#dcae8f 100%);--bo:44% 46%}
.close{--wash:var(--ink);--bo:50% 34%}
.arrival{background:var(--paper)}
.arrival-stage::after{content:none}
.arrival-frame::after{content:"";position:absolute;inset:0;pointer-events:none;background:linear-gradient(0deg,#1a120eb0 0%,#1a120e40 28%,transparent 55%),linear-gradient(90deg,#1a120e55,transparent 45%)}

@media (scripting:enabled){
  .print img,.wash::before,.arrival-frame{
    -webkit-mask-image:var(--blot);mask-image:var(--blot);
    -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
    -webkit-mask-position:var(--bo);mask-position:var(--bo);
    -webkit-mask-size:1% 1%;mask-size:1% 1%}
  .wash::before{--blot:url(/img/way-home/blot-2.png)}
  .arrival-frame{--blot:url(/img/way-home/blot-3.png);--bo:52% 58%}
  .print.is-in img{animation:bloom 1.9s cubic-bezier(.22,.55,.28,1) var(--delay,0s) forwards}
  .wash.is-in::before{animation:bloom-wash 2.6s cubic-bezier(.3,.5,.3,1) forwards}
  .arrival-stage.is-in .arrival-frame{animation:bloom-wash 2.8s cubic-bezier(.3,.5,.3,1) forwards}
}
@keyframes bloom{to{-webkit-mask-size:340% 340%;mask-size:340% 340%}}
@keyframes bloom-wash{to{-webkit-mask-size:400% 400%;mask-size:400% 400%}}

@media (max-width:760px){
  .leg-copy,.leg-foot,.scroll-hint{text-shadow:0 0 2px var(--halo),0 0 2px var(--halo),0 0 3px var(--halo),0 0 3px var(--halo),0 0 4px var(--halo),0 0 5px var(--halo),0 0 6px var(--halo),0 0 7px var(--halo)}
}
@media (prefers-reduced-motion:reduce){
  .print img,.wash::before,.arrival-frame{-webkit-mask:none!important;mask:none!important;animation:none!important}
  .road path{filter:none}
}