/* Three original watercolor characters, each with three gesture frames. */
.journal-card-visual{position:relative;margin-top:151px}
.journal-recommender{--character-width:164px;--rest-frame:-33.333333%;--bubble-paper:#fff9ec;--bubble-tilt:-5deg;position:absolute;right:3px;bottom:100%;width:var(--character-width);height:calc(var(--character-width)*.88);z-index:3;pointer-events:none}
.journal-recommender-wave{--bubble-paper:#fff6ed;--bubble-tilt:-3deg}
.journal-recommender-note{--bubble-paper:#f5f7ed;--bubble-tilt:-6deg}
.journal-character-window{position:absolute;inset:0;overflow:hidden}
.journal-character-body{position:absolute;inset:0;display:block}
.journal-character-sheet{position:absolute;left:0;top:0;width:300%;max-width:none;height:var(--character-width);transform:translateX(var(--rest-frame));object-fit:fill}
.journal-recommend-bubble{position:absolute;right:calc(100% - 37px);top:28px;max-width:160px;white-space:nowrap;padding:12px 16px;border:1px solid #786454;border-radius:47% 53% 49% 46% / 48% 44% 55% 52%;background:var(--bubble-paper);color:#594a3d;font-size:12px;font-weight:600;line-height:1.7;letter-spacing:.025em;transform:rotate(var(--bubble-tilt));transform-origin:100% 80%}
.journal-recommend-bubble:after{content:"";position:absolute;right:8px;bottom:-6px;width:11px;height:11px;background:var(--bubble-paper);border-right:1px solid #786454;border-bottom:1px solid #786454;transform:rotate(18deg) skew(17deg);border-bottom-right-radius:3px}
.journal-recommender-wave .journal-recommend-bubble{border-radius:52% 46% 54% 43% / 44% 55% 45% 52%;padding:13px 18px}
.journal-recommender-note .journal-recommend-bubble{border-radius:42% 49% 44% 52% / 52% 43% 54% 44%}
.section-motion-ready .motion-entered .journal-character-sheet{animation:recommend-point 3.2s step-end var(--recommend-delay,0s) both;animation-play-state:paused}
.section-motion-ready .motion-entered .journal-recommender-wave .journal-character-sheet{animation-name:recommend-wave;animation-duration:3.6s}
.section-motion-ready .motion-entered .journal-recommender-note .journal-character-sheet{animation-name:recommend-note;animation-duration:3.4s}
.section-motion-ready .motion-entered .journal-character-body{animation:recommend-rise .65s ease-out var(--recommend-delay,0s) both;animation-play-state:paused}
.section-motion-ready .motion-entered .journal-recommend-bubble{animation:recommend-speak .6s cubic-bezier(.2,.8,.3,1.2) calc(var(--recommend-delay,0s) + .75s) both;animation-play-state:paused}
.section-motion-ready .journal-card.motion-visible .journal-character-sheet,.section-motion-ready .journal-card.motion-visible .journal-character-body,.section-motion-ready .journal-card.motion-visible .journal-recommend-bubble{animation-play-state:running}
@keyframes recommend-point{0%,19%{transform:translateX(0)}32%,58%{transform:translateX(-33.333333%)}68%,83%{transform:translateX(-66.666667%)}93%,100%{transform:translateX(-33.333333%)}}
@keyframes recommend-wave{0%,15%{transform:translateX(0)}28%,44%{transform:translateX(-33.333333%)}54%{transform:translateX(-66.666667%)}67%{transform:translateX(-33.333333%)}80%{transform:translateX(-66.666667%)}94%,100%{transform:translateX(-33.333333%)}}
@keyframes recommend-note{0%,19%{transform:translateX(0)}34%,55%{transform:translateX(-33.333333%)}67%,84%{transform:translateX(-66.666667%)}95%,100%{transform:translateX(-33.333333%)}}
@keyframes recommend-rise{from{transform:translateY(16px)}to{transform:translateY(0)}}
@keyframes recommend-speak{from{opacity:0;transform:translate(5px,8px) rotate(calc(var(--bubble-tilt) - 3deg)) scale(.9)}to{opacity:1;transform:translate(0,0) rotate(var(--bubble-tilt)) scale(1)}}

/* Keep the offer moving continuously, with two compact bounces per cycle. */
.kioku-process .kioku-trial-period{--kioku-offer-cycle:1.6s;position:relative;transform-origin:50% 90%}
.section-motion-ready .kioku-process .kioku-trial-period{animation:kioku-period-accent var(--kioku-offer-cycle) ease-in-out infinite;animation-play-state:paused}
.kioku-process .kioku-trial-period:before,.kioku-process .kioku-trial-period:after{content:"";position:absolute;top:30%;width:5px;height:21px;border-radius:4px;background:currentColor;opacity:0;pointer-events:none}
.kioku-process .kioku-trial-period:before{left:-21px;transform:rotate(-32deg)}
.kioku-process .kioku-trial-period:after{right:-21px;transform:rotate(32deg)}
.section-motion-ready .kioku-process .kioku-trial-period:before,.section-motion-ready .kioku-process .kioku-trial-period:after{animation:kioku-accent-rays var(--kioku-offer-cycle) ease-in-out infinite;animation-play-state:paused}
.section-motion-ready .kioku-process.motion-visible .kioku-trial-period,.section-motion-ready .kioku-process.motion-visible .kioku-trial-period:before,.section-motion-ready .kioku-process.motion-visible .kioku-trial-period:after{animation-play-state:running}
@keyframes kioku-period-accent{0%,100%{transform:translateY(1px) rotate(-2deg) scale(1)}25%{transform:translateY(-7px) rotate(0) scale(1.035)}50%{transform:translateY(0) rotate(2deg) scale(1)}75%{transform:translateY(-5px) rotate(0) scale(1.025)}}
@keyframes kioku-accent-rays{0%,50%,100%{opacity:.18}25%,75%{opacity:.8}}
body.paused .journal-character-sheet,body.paused .journal-character-body,body.paused .journal-recommend-bubble,body.paused .kioku-trial-period,body.paused .kioku-trial-period:before,body.paused .kioku-trial-period:after,body.motion-document-hidden .journal-character-sheet,body.motion-document-hidden .journal-character-body,body.motion-document-hidden .journal-recommend-bubble,body.motion-document-hidden .kioku-trial-period,body.motion-document-hidden .kioku-trial-period:before,body.motion-document-hidden .kioku-trial-period:after{animation-play-state:paused!important}
@media(max-width:1100px) and (min-width:761px){
  .journal-card-visual{margin-top:123px}
  .journal-recommender{--character-width:132px;right:0}
  .journal-recommend-bubble{font-size:11px;padding:10px 12px;right:calc(100% - 42px);top:20px}
  .journal-recommender-wave .journal-recommend-bubble{padding:11px 14px}
}
@media(max-width:760px){
  .journal-card-visual{margin-top:145px}
  .journal-recommender{--character-width:156px;right:5px}
  .journal-recommend-bubble{font-size:12px;padding:11px 14px;top:25px}
  .journal-recommender-wave .journal-recommend-bubble{padding:12px 16px}
}
@media(max-width:380px){
  .journal-card-visual{margin-top:132px}
  .journal-recommender{--character-width:144px;right:0}
  .journal-recommend-bubble{font-size:11px;padding:10px 12px}
  .journal-recommender-wave .journal-recommend-bubble{padding:11px 14px}
}
@media(prefers-reduced-motion:reduce){
  .section-motion-ready .journal-character-sheet,.section-motion-ready .journal-character-body,.section-motion-ready .journal-recommend-bubble,.section-motion-ready .kioku-trial-period,.section-motion-ready .kioku-trial-period:before,.section-motion-ready .kioku-trial-period:after{animation:none!important}
  .journal-character-sheet{transform:translateX(var(--rest-frame))}
  .journal-character-body{transform:none}
  .journal-recommend-bubble{opacity:1}
  .kioku-process .kioku-trial-period{transform:none}
  .kioku-process .kioku-trial-period:before,.kioku-process .kioku-trial-period:after{opacity:0}
}