/* A separate moving veil, never a change to the two registered art halves. */
.pian-castle-sequence{--mist-thread-x:65.5%;--mist-origin-y:calc(60 * var(--dohwa-font-unit))}
.pian-castle-mist{display:none;position:absolute;z-index:3;inset:0 0 auto;height:100%;pointer-events:none;overflow:hidden;
  --mist-radius-x:1px;--mist-radius-y:1px;
  background:rgb(0 0 0 / 82%);
  -webkit-backdrop-filter:grayscale(1) blur(8px) brightness(.62);backdrop-filter:grayscale(1) blur(8px) brightness(.62);
  /* The painted cord stays visible through a narrow, feathered opening.
     This changes only fog opacity, never redraws or moves the red cord. */
  --mist-cord-mask:linear-gradient(to right,#000 calc(var(--mist-thread-x) - 3%),rgb(0 0 0 / 4%) calc(var(--mist-thread-x) - .65%),rgb(0 0 0 / 4%) calc(var(--mist-thread-x) + .65%),#000 calc(var(--mist-thread-x) + 3%));
  -webkit-mask-image:radial-gradient(ellipse var(--mist-radius-x) var(--mist-radius-y) at var(--mist-thread-x) var(--mist-origin-y),transparent 0 88%,rgb(0 0 0 / 18%) 94%,#000 100%),linear-gradient(#000 0 94%,transparent 100%),var(--mist-cord-mask);
  mask-image:radial-gradient(ellipse var(--mist-radius-x) var(--mist-radius-y) at var(--mist-thread-x) var(--mist-origin-y),transparent 0 88%,rgb(0 0 0 / 18%) 94%,#000 100%),linear-gradient(#000 0 94%,transparent 100%),var(--mist-cord-mask);
  -webkit-mask-composite:source-in,source-in;mask-composite:intersect,intersect;
}
.pian-castle-sequence[data-mist-state="locked"] .pian-castle-mist,.pian-castle-sequence[data-mist-state="revealing"] .pian-castle-mist{display:block}
.pian-castle-mist::before{content:"";position:absolute;inset:-4% -16%;background:radial-gradient(ellipse at 20% 14%,rgb(0 0 0 / 50%),transparent 35%),radial-gradient(ellipse at 84% 43%,rgb(0 0 0 / 45%),transparent 38%),radial-gradient(ellipse at 22% 74%,rgb(0 0 0 / 55%),transparent 37%);animation:dohwa-mist-drift 9s ease-in-out infinite alternate}
.pian-fate-trigger{position:absolute;z-index:4;left:var(--mist-thread-x);top:var(--mist-origin-y);transform:translate(-50%,calc(-34 * var(--dohwa-font-unit)));width:calc(188 * var(--dohwa-font-unit));height:calc(152 * var(--dohwa-font-unit));padding:0;background:transparent;border:0;border-radius:calc(24 * var(--dohwa-font-unit));opacity:0;visibility:hidden;pointer-events:none;transition:opacity .28s ease-out,visibility 0s linear .28s;touch-action:manipulation;cursor:pointer;-webkit-tap-highlight-color:transparent}
.pian-fate-trigger[hidden]{display:none}
.pian-castle-sequence[data-mist-state="locked"] .pian-fate-trigger{opacity:1;visibility:visible;pointer-events:auto;transition:opacity .28s ease-out}
.pian-fate-trigger:focus-visible{outline:1px solid #e8bbae;outline-offset:4px}
.pian-fate-dot{position:absolute;left:50%;top:calc(34 * var(--dohwa-font-unit));transform:translate(-50%,-50%);width:calc(22 * var(--dohwa-font-unit));height:calc(22 * var(--dohwa-font-unit));border:1px solid #ffb6ad99;border-radius:50%;background:radial-gradient(circle at 38% 32%,#ffe0d3 0,#ed7374 16%,#be243d 53%,#610e25 100%);box-shadow:0 0 calc(12 * var(--dohwa-font-unit)) #df365a88,0 0 calc(35 * var(--dohwa-font-unit)) #b61f3f55;animation:dohwa-fate-heartbeat 3.8s ease-in-out infinite}
.pian-fate-dot::before{content:"";position:absolute;inset:calc(-9 * var(--dohwa-font-unit));border:1px solid #e4908b55;border-radius:50%;animation:dohwa-fate-beacon 3.8s ease-out infinite}
.pian-fate-side-hint{position:absolute;right:calc(50% + 28 * var(--dohwa-font-unit));top:calc(34 * var(--dohwa-font-unit));transform:translateY(-50%);display:flex;align-items:center;gap:calc(10 * var(--dohwa-font-unit));width:max-content;white-space:nowrap;color:#efded2;font:400 calc(18 * var(--dohwa-font-unit))/1.5 var(--dohwa-font-dialogue);text-shadow:0 2px 12px #000}
.pian-fate-side-hint>span{color:#ed8b83;font-size:calc(24 * var(--dohwa-font-unit));line-height:1}
.pian-fate-hint{position:absolute;left:50%;top:calc(74 * var(--dohwa-font-unit));width:100%;transform:translateX(-50%);box-sizing:border-box;padding:calc(8 * var(--dohwa-font-unit)) 0;text-align:center;color:#efded2;white-space:nowrap;text-shadow:0 2px 12px #000;transition:color .25s ease}
.pian-fate-hint strong{display:block;font:400 calc(18 * var(--dohwa-font-unit))/1.5 var(--dohwa-font-dialogue);letter-spacing:.045em}
.pian-fate-hint small{display:block;margin-top:calc(7 * var(--dohwa-font-unit));font:400 calc(11 * var(--dohwa-font-unit))/1.5 var(--dohwa-font-dialogue);letter-spacing:.025em;color:#bc9792}
.pian-fate-trigger:hover .pian-fate-hint,.pian-fate-trigger:focus-visible .pian-fate-hint{color:#fff3e9}
.pian-fate-trigger:active .pian-fate-dot{filter:brightness(1.2)}
@keyframes dohwa-fate-heartbeat{0%,100%{transform:translate(-50%,-50%) scale(1);opacity:.85}50%{transform:translate(-50%,-50%) scale(1.08);opacity:1}}
@keyframes dohwa-mist-drift{from{transform:translate(-3%,0)}to{transform:translate(3%,1%)}}
@keyframes dohwa-fate-beacon{0%{transform:scale(.86);opacity:0}20%{opacity:.65}100%{transform:scale(1.4);opacity:0}}
@media(prefers-reduced-motion:reduce){.pian-castle-mist::before,.pian-fate-dot,.pian-fate-dot::before,.pian-fate-dot::after,.pian-fate-hint{animation:none}.pian-fate-trigger{transition:none}}