/* Sakura's pastel glass and two drifting particle layers, shared with HyperFrames.
   Learning Lab supplies the quiet paper texture and inset white edge. */
.nipyon-turn {
  --field-ink: rgb(0 166 184 / 85%);
  --field-gold: rgb(255 230 168 / 95%);
  --field-blush: rgb(255 183 197 / 54%);
  --field-mint: rgb(157 255 229 / 42%);
  --field-cream: rgb(255 230 168 / 50%);
  isolation: isolate;
  overflow: hidden;
  border-color: rgb(0 166 184 / 26%);
  border-radius: 20px;
  background:
    radial-gradient(circle at 12% 18%, rgb(255 255 255 / 92%), transparent 30%),
    linear-gradient(135deg, var(--field-blush), var(--field-mint) 48%, var(--field-cream));
  box-shadow: 0 14px 38px rgb(0 166 184 / 9%), inset 0 1px 0 rgb(255 255 255 / 72%);
}
.nipyon-turn--tsuki {
  --field-ink: rgb(76 168 158 / 78%);
  --field-gold: rgb(247 217 142 / 92%);
  --field-blush: rgb(212 242 234 / 65%);
  --field-mint: rgb(190 228 244 / 40%);
  --field-cream: rgb(250 236 188 / 46%);
}
.nipyon-turn--selene {
  --field-ink: rgb(121 132 196 / 72%);
  --field-gold: rgb(221 204 248 / 90%);
  --field-blush: rgb(223 216 248 / 58%);
  --field-mint: rgb(189 224 249 / 38%);
  --field-cream: rgb(248 235 207 / 42%);
}
.nipyon-turn > :not(.nipyon-window-field) { position: relative; z-index: 1; }
.nipyon-window-field { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.nipyon-window-field::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(transparent 50%, rgb(0 0 0 / 2.6%) 50%);
  background-size: 100% 4px;
  mix-blend-mode: multiply;
}
.nipyon-window-field > span {
  position: absolute; inset: -35%; pointer-events: none;
  background:
    linear-gradient(115deg, transparent 0 42%, rgb(255 255 255 / 82%) 43%, transparent 45% 100%),
    radial-gradient(circle, rgb(255 255 255 / 95%) 0 2px, transparent 3px),
    radial-gradient(circle, var(--field-ink) 0 1px, transparent 2px),
    radial-gradient(circle, var(--field-gold) 0 1px, transparent 2px);
  background-size: 100% 100%, 92px 74px, 67px 58px, 112px 91px;
  mix-blend-mode: screen;
  opacity: .5;
  transform: translate3d(-6%, -3%, 0);
}
.nipyon-window-field > [data-nipyon-drift="back"] { opacity: .34; }
/* One sparse motif per variation, drifting with the same field. */
.nipyon-turn--tsuki .nipyon-window-field > span::before {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='138' height='106' viewBox='0 0 138 106'%3E%3Cpath d='M37 31l2 5 5 2-5 2-2 5-2-5-5-2 5-2z' fill='%23e8d59f' fill-opacity='.75'/%3E%3C/svg%3E") repeat;
}
.nipyon-turn--selene .nipyon-window-field > span::before {
  content: ""; position: absolute; inset: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='151' height='117' viewBox='0 0 151 117'%3E%3Ccircle cx='53' cy='43' r='4' fill='none' stroke='%23b9c4e5' stroke-opacity='.7'/%3E%3Cpath d='M104 82l3 4-3 4-3-4z' fill='%23ded0ed' fill-opacity='.8'/%3E%3C/svg%3E") repeat;
}