/* Pale watermarks sit behind the headings without reserving layout space. */
.has-motif{position:relative;isolation:isolate;align-self:start;padding-right:0}
.has-motif>.section-number,.has-motif>h2,.has-motif>p{position:relative;z-index:1}
.section-motif{
  --motif-active:#809874;
  position:absolute;z-index:0;left:0;top:50%;transform:translateY(-50%);
  width:140px;max-width:100%;height:100px;
  display:block;pointer-events:none;user-select:none;
  background:#e1e8db;opacity:.8;
  -webkit-mask:var(--motif) center/contain no-repeat;
  mask:var(--motif) center/contain no-repeat;
}
.motif-book{--motif:url('./assets/motifs/book-open-text.svg');--motif-rest-opacity:.62;width:140px;height:104px;opacity:.62}
.motif-satellite{--motif:url('./assets/motifs/satellite.svg');width:150px;height:108px}
.motif-code{--motif:url('./assets/motifs/code-xml.svg');--motif-rest-opacity:.72;width:140px;height:98px;opacity:.72}
.motif-education{--motif:url('./assets/motifs/graduation-cap.svg');width:150px;height:108px}
.motif-audio{--motif:url('./assets/motifs/audio-lines.svg');width:145px;height:92px;opacity:.65}
.motif-trophy{--motif:url('./assets/motifs/trophy.svg');--motif-rest-opacity:.72;width:125px;height:106px;opacity:.72}
.motif-track{
  --motif:url('./assets/motifs/xian-xvua-circuit.svg');
  width:215px;height:108px;
}
/* Reuse the original fine-line SVG geometry; each phrase ends at rest. */
svg.section-motif{background:none;mask:none;-webkit-mask:none;color:#e1e8db;overflow:visible}
.motif-playing .motif-book{animation:svg-motif-tint 2.6s ease-in-out both}
.book-leaf{transform-box:view-box;transform-origin:50% 50%}
.motif-playing .book-leaf-left{animation:book-open-left 2.6s cubic-bezier(.2,.65,.3,1) both}
.motif-playing .book-leaf-right{animation:book-open-right 2.6s cubic-bezier(.2,.65,.3,1) both}
.motif-playing .motif-code{animation:svg-motif-tint 2.6s ease-in-out both}
.code-key{transform-box:fill-box;transform-origin:center}
.motif-playing .code-key{animation:code-keystroke .65s ease-out both}
.motif-playing .code-key-left{animation-delay:.18s}
.motif-playing .code-key-slash{animation-delay:.6s}
.motif-playing .code-key-right{animation-delay:1.02s}
.motif-playing .motif-satellite{animation:satellite-drift 3.1s ease-in-out both,motif-tint 3.1s ease-in-out both}
.motif-playing .motif-education{animation:svg-motif-tint 2.8s ease-in-out both}
.cap-flying{transform-box:view-box;transform-origin:50% 50%}
.motif-playing .cap-flying{animation:cap-toss 2.8s linear both}
.motif-playing .motif-trophy{animation:svg-motif-tint 2.7s ease-in-out both}
.motif-playing .trophy-rising{animation:trophy-emerge 2.7s cubic-bezier(.2,.7,.3,1) both}
.motif-audio path{transform-box:fill-box;transform-origin:center}
.motif-playing .motif-audio{animation:audio-tint 3.3s ease-in-out both}
.motif-playing .motif-audio path{animation:audio-phrase 2.8s ease-in-out both}
.motif-audio path:nth-child(2){animation-delay:.09s}
.motif-audio path:nth-child(3){animation-delay:.18s}
.motif-audio path:nth-child(4){animation-delay:.27s}
.motif-audio path:nth-child(5){animation-delay:.36s}
.motif-audio path:nth-child(6){animation-delay:.45s}
@keyframes book-open-left{0%,12%{transform:scaleX(.04) skewY(-18deg)}65%{transform:scaleX(1.035) skewY(1deg)}82%,100%{transform:scaleX(1) skewY(0)}}
@keyframes book-open-right{0%,12%{transform:scaleX(.04) skewY(18deg)}65%{transform:scaleX(1.035) skewY(-1deg)}82%,100%{transform:scaleX(1) skewY(0)}}
@keyframes code-keystroke{0%,18%{opacity:0;transform:translateY(1.5px) scale(.75)}19%{opacity:1;transform:translateY(1.5px) scale(.75)}55%{opacity:1;transform:translateY(-.25px) scale(1.13)}100%{opacity:1;transform:translateY(0) scale(1)}}
@keyframes satellite-drift{0%{opacity:.35;transform:translateY(-50%) rotate(-38deg)}30%{opacity:.76;transform:translate(-3px,calc(-50% - 4px)) rotate(30deg)}65%{opacity:.76;transform:translate(2px,calc(-50% + 2px)) rotate(-16deg)}84%{opacity:.76;transform:translateY(-50%) rotate(5deg)}100%{opacity:.8;transform:translateY(-50%) rotate(0)}}
@keyframes cap-toss{0%{transform:translateY(0) rotate(0);animation-timing-function:ease-in}12%{transform:translateY(1.3px) rotate(-6deg);animation-timing-function:cubic-bezier(.15,.7,.3,1)}45%{transform:translate(1.5px,-9px) rotate(24deg);animation-timing-function:cubic-bezier(.55,0,.8,.45)}76%{transform:translateY(0) rotate(-5deg);animation-timing-function:ease-out}89%{transform:translateY(-.7px) rotate(1deg)}100%{transform:translateY(0) rotate(0)}}
@keyframes trophy-emerge{0%,10%{transform:translateY(22px)}57%{transform:translateY(-.7px)}78%,100%{transform:translateY(0)}}
@keyframes audio-phrase{0%,100%{transform:scaleY(1)}12%{transform:scaleY(.55)}26%{transform:scaleY(1.2)}41%{transform:scaleY(.4)}57%{transform:scaleY(1.1)}73%{transform:scaleY(.65)}88%{transform:scaleY(1.08)}}
@keyframes motif-tint{0%,80%{background-color:var(--motif-active)}100%{background-color:#e1e8db}}
@keyframes svg-motif-tint{0%,78%{color:var(--motif-active);opacity:.76}100%{color:#e1e8db;opacity:var(--motif-rest-opacity,.8)}}
@keyframes audio-tint{0%,80%{color:var(--motif-active);opacity:.76}100%{color:#e1e8db;opacity:.65}}
@media(prefers-reduced-motion:reduce){.motif-playing .section-motif,.motif-playing .section-motif *{animation:none!important}}
@media(max-width:760px){
  .section-motif{width:125px;height:86px}
  .motif-track{width:175px;height:88px}
}
@media print{
  .section-motif{display:none}
  .has-motif{padding-right:0}
}