/* The whale surfaces first; its breath then unfolds above the waterline. */
.comment-whale-submit{position:relative;isolation:isolate}
.comment-whale-submit .comment-whale{display:block;width:100%;height:100%;flex:none;overflow:visible}
.comment-whale-submit .cwh-swimmer{transform:translateY(0);transition:transform .65s cubic-bezier(.25,.7,.25,1)}
.comment-whale-submit .cwh-tail{transform-origin:105px 72px;transition:transform .6s ease}
.comment-whale-submit .cwh-spout{opacity:0;transform:scale(.7,.15);transform-origin:47px 55px;transition:opacity .12s ease,transform .18s ease}
.comment-whale-submit .cwh-surface-ripples{opacity:0;transition:opacity .25s ease}
.comment-whale-submit:is(:hover,:focus-visible):not(:disabled) .cwh-swimmer{transform:translateY(-22px)}
.comment-whale-submit:is(:hover,:focus-visible):not(:disabled) .cwh-tail{transform:rotate(-6deg)}
.comment-whale-submit:is(:hover,:focus-visible):not(:disabled) .cwh-spout{opacity:1;transform:scale(1);transition:opacity .2s ease .4s,transform .45s cubic-bezier(.2,.75,.25,1) .35s}
.comment-whale-submit:is(:hover,:focus-visible):not(:disabled) .cwh-surface-ripples{opacity:1;transition-delay:.25s}
.comment-whale-submit:is(:hover,:focus-visible):not(:disabled) .cwh-drop{animation:cwh-droplet-fall 1.25s ease-in infinite;animation-delay:.75s}
.comment-whale-submit:is(:hover,:focus-visible):not(:disabled) .cwh-drop-right{animation-delay:.95s}
.comment-whale-submit:is(:hover,:focus-visible):not(:disabled) .cwh-drop-small{animation-delay:1.2s}
@keyframes cwh-droplet-fall{0%,12%{opacity:0;transform:translateY(-2px)}25%{opacity:1}85%{opacity:1}100%{opacity:0;transform:translateY(12px)}}

/* A little seascape sits beside the note, without sitting behind its words. */
.listening-note{position:relative;isolation:isolate;overflow:hidden;min-height:190px;background:linear-gradient(120deg,#f7fcff,#edf7fb)}
.listening-note-copy{position:relative;z-index:1;max-width:62%}
.listening-note-art{position:absolute;right:0;bottom:4px;width:44%;max-width:340px;pointer-events:none}
.listening-note .listening-note-art img{display:block;width:100%;height:auto;object-fit:contain}
@media(max-width:960px){
  .listening-note{min-height:0}
  .listening-note-copy{max-width:none}
  .listening-note-art{position:relative;right:auto;bottom:auto;width:min(100%,300px);margin:-8px -12px -20px auto}
}
@media(prefers-reduced-motion:reduce){.comment-whale-submit .comment-whale *{animation:none!important;transition:none!important}}
:root[data-motion="reduced"] .comment-whale-submit .comment-whale *{animation:none!important;transition:none!important}