/* Motion for the website. Everything here waits for prefers-reduced-motion: no-preference, except the
   still pictures that stand in for moving ones. */
.motion-loop{display:block}
.motion-loop img{display:block;width:100%;height:100%;object-fit:contain;object-position:center bottom}

/* Character profiles: a button swaps the drawing for the moving character. */
.profile-art{position:relative}
.profile-art .motion-loop{display:none;width:100%;height:100%;max-height:520px}
.profile-art.is-moving>img{display:none}
.profile-art.is-moving .motion-loop{display:block}
.motion-toggle{position:absolute;left:14px;bottom:14px;z-index:2;display:inline-flex;align-items:center;gap:7px;font:900 14px/1 var(--sans);color:var(--ink);background:#fffdf2;border:2px solid var(--ink);border-radius:999px;padding:9px 14px;box-shadow:2px 3px 0 var(--ink);cursor:pointer}
.motion-toggle:hover{background:#ffe17b}
.motion-toggle span{font-size:11px}
.profile-studio-link{display:inline-block;margin-left:14px;font-size:14px;font-weight:900;text-decoration:underline;text-underline-offset:4px;color:#086b8c}
@media(prefers-reduced-motion:reduce){.motion-toggle{display:none}}
@media(max-width:520px){.profile-art .motion-loop{height:230px}.motion-toggle{left:8px;bottom:8px;font-size:13px;padding:7px 11px}.profile-studio-link{display:block;margin:12px 0 0}}

/* The wrong-turn page's dizzy knight. */
.lost-knight{width:min(300px,64vw);aspect-ratio:4/5;margin:0 0 14px -20px}

/* Sir Bacon swings his sword beside the Scripture Sword Quest invitation. */
.sq-home-invite{display:grid;grid-template-columns:minmax(0,1fr) 230px;align-items:center;gap:10px 30px}
.sq-home-invite>.eyebrow,.sq-home-invite>h2,.sq-home-invite>p,.sq-home-invite>.button{grid-column:1}
.sq-home-invite>.button{justify-self:start}
.invite-knight{grid-column:2;grid-row:1/span 4;width:230px;aspect-ratio:4/5;margin:-30px 0 -38px}
/* Phones: the words use the full width and Sir Bacon stands beside the Play button. */
@media(max-width:700px){.sq-home-invite{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}.sq-home-invite>.eyebrow,.sq-home-invite>h2,.sq-home-invite>p{grid-column:1/-1}.sq-home-invite>.button{grid-row:4;align-self:end}.invite-knight{grid-column:2;grid-row:4;width:116px;margin:-20px -6px -18px 0}}

/* Audio page: the knights move on their stage. */
.audio-cast .motion-loop{position:relative;z-index:1;filter:drop-shadow(3px 5px 0 #9b541833)}
.audio-cast .audio-sirbacon{height:440px;width:62%;margin-bottom:-18px}
.audio-cast .audio-hamlet{height:385px;width:50%;margin-left:-14%;margin-bottom:-12px}
@media(max-width:800px){.audio-cast .audio-sirbacon{height:330px;width:66%}.audio-cast .audio-hamlet{height:285px;width:50%}}
@media(max-width:520px){.audio-cast .audio-sirbacon{height:250px;width:58%}.audio-cast .audio-hamlet{height:215px;width:46%}}

@media(prefers-reduced-motion:no-preference){
 /* Pages fade and rise into place. */
 .site-header{view-transition-name:site-header}
 main{view-transition-name:page}
 ::view-transition-old(page){animation:page-out .16s ease-in both}
 ::view-transition-new(page){animation:page-in .34s cubic-bezier(.2,.8,.3,1) both}
 @keyframes page-out{to{opacity:0;transform:translateY(-6px)}}
 @keyframes page-in{from{opacity:0;transform:translateY(14px)}}

 /* Cards and sections ease in as they scroll into view. */
 .reveal{transition:opacity .5s ease,transform .55s cubic-bezier(.2,.8,.3,1);transition-delay:var(--reveal-delay,0ms)}
 .reveal:not(.revealed){opacity:0;transform:translateY(22px)}

 /* The hero's speech bubble pops in, then bobs. */
 .hero-speech{animation:bubble-pop .55s .45s cubic-bezier(.3,1.7,.5,1) both,bubble-bob 4s 1.2s ease-in-out infinite}
 @keyframes bubble-pop{from{opacity:0;scale:.4}}
 @keyframes bubble-bob{50%{translate:0 -6px}}

 /* CLANK! shakes in time with Sir Bacon's swing. */
 .sound-burst{animation:clank 1s ease-out infinite}
 @keyframes clank{0%,45%{scale:1;rotate:0deg}55%{scale:1.16;rotate:-6deg}65%{rotate:5deg}75%{scale:1;rotate:-2deg}85%{rotate:0deg}}

 /* Profiles open with a small bounce. */
 dialog[open]{animation:dialog-in .32s cubic-bezier(.25,1.4,.5,1)}
 dialog[open]::backdrop{animation:fade-in .25s ease}
 @keyframes dialog-in{from{opacity:0;scale:.92;translate:0 18px}}
 @keyframes fade-in{from{opacity:0}}

 /* Newsletter section links slide their marker. */
 [data-section-link]{transition:background-color .25s,color .25s,box-shadow .25s}
}
@media print{.reveal{opacity:1!important;transform:none!important}}
.audio-cast .motion-loop img{height:100%;width:100%;margin:0;filter:none}

/* Panel-by-panel comic reader: the page glides from panel to panel inside a window sized to each one. */
.view-switch{display:inline-flex;gap:6px}
.toolbar-button[hidden]{display:none}
.toolbar-button[aria-pressed=true]{background:#ffd34c}
.comic-stage[data-view=panels]{overflow:hidden}
.comic-stage[data-view=panels] .comic-page,.comic-stage:not([data-view=panels]) .panel-reader{display:none}
.panel-frame{position:relative;overflow:hidden;height:60vh;margin:0 auto;background:#0d2b3b;cursor:pointer;touch-action:pan-y;transition:height .45s cubic-bezier(.4,.1,.2,1),width .45s cubic-bezier(.4,.1,.2,1)}
.panel-page{position:absolute;top:0;left:0;max-width:none;height:auto;transform-origin:0 0;transition:transform .55s cubic-bezier(.4,.1,.2,1);user-select:none;-webkit-user-select:none}
.panel-progress{height:6px;background:#ffffff26}
.panel-progress span{display:block;height:100%;width:0;background:#ffd34c;transition:width .3s}
.panel-controls{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:12px;color:white;font-weight:900}
.panel-controls .toolbar-button:disabled{opacity:.45;cursor:default}
@media(max-width:520px){.view-switch{width:100%}.view-switch .toolbar-button{flex:1;justify-content:center}.panel-controls{padding:10px 4px}}
@media(prefers-reduced-motion:reduce){.panel-frame,.panel-page,.panel-progress span{transition:none}}
@media print{.panel-reader,.view-switch{display:none!important}.comic-stage .comic-page{display:block!important}}