/* Small responses to browsing; transforms stay on the illustrations, not the copy. */
:root{--play-ease:cubic-bezier(.22,.8,.25,1);--play-time:650ms}
.home-work figure,.about-photo,.timeline-feature>figure,.photo-mosaic figure,.selected-heading figure{transition:transform var(--play-time) var(--play-ease)}
.about-photo.reveal,.timeline-feature>figure.reveal{transition:opacity .9s var(--ease),translate .9s var(--ease),transform var(--play-time) var(--play-ease)}
.home-work-link i,.book-reading-note>span,.goroku-teaser>span{transition:transform .45s var(--play-ease),translate .45s var(--play-ease)}
.home-work.motion-active .home-work-link i{translate:4px -4px;transform:rotate(8deg)}

/* A little turn of the record, with a light-catching arc to make the turn visible. */
.portal-record,.record-surface{transition:transform 1.6s var(--play-ease)}
.portal-record:before,.record-surface:before{content:'';position:absolute;inset:8%;border:2px solid transparent;border-top-color:#eee9d440;border-left-color:#eee9d418;border-radius:50%;rotate:-35deg}
.home-work-songs.motion-active .portal-record{transform:rotate(125deg)}
.home-work-songs.motion-active figure{transform:translate(-3px,-5px) rotate(2deg)}
.song-layout.motion-active .record-surface{transform:rotate(150deg)}
.selected-song:before{content:'';position:absolute;left:0;right:0;top:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:left;transition:transform .65s var(--play-ease)}
.selected-song h3{transition:translate .5s var(--play-ease)}
.selected-song.motion-active:before{transform:scaleX(1)}
.selected-song.motion-active h3{translate:4px 0}
.selected-song.motion-active .track-arrow{opacity:1;translate:0 -3px}

/* The television's tuning knobs and a soft reflection across the glass. */
.portal-tv-dial{transition:transform .8s var(--play-ease)}
.portal-tv-screen:before{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(110deg,transparent 25%,#fff5 47%,#fff1 58%,transparent 73%);transform:translateX(-130%);transition:transform 1.1s var(--play-ease);z-index:2}
.portal-tv-screen:before{border-radius:inherit}
.home-work-tv.motion-active .portal-tv{transform:translateY(-4px) rotate(-1.5deg)}
:is(.home-work-tv,.tv-photo).motion-active .portal-tv-dial,.selected-tv.is-tuning .portal-tv-dial{transform:rotate(95deg)}
:is(.home-work-tv,.tv-photo).motion-active .portal-tv-dial-small,.selected-tv.is-tuning .portal-tv-dial-small{transform:rotate(-55deg);transition-delay:.1s}
:is(.home-work-tv,.tv-photo).motion-active .portal-tv-screen:before,.selected-tv.is-tuning .portal-tv-screen:before{transform:translateX(130%)}
.tv-photo>div{position:relative;overflow:visible;transition:transform .7s var(--play-ease),box-shadow .7s var(--play-ease)}
.tv-photo.motion-active>div{transform:translateY(-4px) rotate(-.6deg);box-shadow:5px 7px 0 #615c4b,9px 15px 18px #292f2929,inset 1px 1px 0 #ddd5bd}
.tv-program h3,.program-toggle{transition:translate .45s var(--play-ease),scale .45s var(--play-ease)}
.tv-program.motion-active h3{translate:4px 0}
.tv-program.motion-active .program-toggle{scale:1.25}

/* Radio signals answer briefly, rather than adding another perpetual animation. */
.portal-airwaves{position:absolute;right:28%;top:18%;width:60px;height:60px;pointer-events:none;z-index:1;rotate:-12deg}
.portal-airwaves i{position:absolute;inset:0;border:2px solid transparent;border-top-color:#ffead3aa;border-left-color:#ffead3aa;border-radius:50%;opacity:0;transform:scale(.35)}
.portal-airwaves i:nth-child(2){inset:-12px}.portal-airwaves i:nth-child(3){inset:-24px}
.home-work-radio.motion-active .portal-airwaves i{animation:play-signal 1.2s ease-out 2}
.home-work-radio.motion-active .portal-airwaves i:nth-child(2){animation-delay:.12s}
.home-work-radio.motion-active .portal-airwaves i:nth-child(3){animation-delay:.24s}
.home-work-radio.motion-active figure{transform:translateY(-5px) rotate(-1deg);transform-origin:center bottom}
@keyframes play-signal{0%{opacity:0;transform:scale(.45)}30%{opacity:.8}100%{opacity:0;transform:scale(1.13)}}
.radio-feature figure{transition:transform .7s var(--play-ease);transform-origin:35% 85%}
.radio-feature.motion-active figure{transform:rotate(-.8deg) translateY(-3px)}
.radio-wave{transition:transform .6s var(--play-ease)}
.radio-feature.motion-active .radio-wave{transform:scaleY(1.13)}
.radio-feature.motion-active .radio-wave i{animation-duration:1.1s;background:#b2554080}
.radio-program:before{transition:left .8s var(--play-ease),box-shadow .5s var(--play-ease)}
.radio-program.motion-active:before{left:calc(100% - 7px);box-shadow:0 0 0 5px #b2554012}
.radio-program>a{transition:translate .45s var(--play-ease)}
.radio-program.motion-active>a{translate:3px 0}

/* Keep the book-cover gesture that inspired this set; also support focus and touch. */
.home-work-books.motion-active figure{transform:translate(-4px,-8px) rotate(3deg)}
.shelf-book.motion-active .book-title-page{transform:rotateY(-5deg) translateY(-5px);box-shadow:8px 8px 0 #c5beb1}
.shelf-book.motion-active .book-reading-note>span{transform:translate(3px,-3px) rotate(7deg)}

/* A loose album of photographs, each with its own small response. */
.about-photo.motion-active{transform:rotate(-1.2deg)}
.timeline-feature.motion-active>figure{transform:rotate(1.4deg)}
.photo-mosaic.motion-active figure:nth-child(1){transform:translateY(-5px) rotate(-2deg)}
.photo-mosaic.motion-active figure:nth-child(2){transform:translateY(-9px) rotate(.6deg)}
.photo-mosaic.motion-active figure:nth-child(3){transform:translateY(-4px) rotate(2deg)}
.photo-mosaic figure:nth-child(2){transition-delay:60ms}.photo-mosaic figure:nth-child(3){transition-delay:120ms}
.goroku-teaser img{transition:rotate .6s var(--play-ease);transform-origin:25% 80%}
.goroku-teaser img.photo-enter[data-photo-entrance].is-visible{transition:clip-path 1.2s var(--ease),opacity .9s ease-out,translate 1.2s var(--ease),scale 1.5s var(--ease),transform .65s var(--ease),filter .6s ease,rotate .6s var(--play-ease)}
.goroku-teaser.motion-active img{rotate:-3deg}
.goroku-teaser:nth-of-type(even).motion-active img{rotate:3deg}
.goroku-teaser.motion-active>span{transform:translate(3px,-3px)}
.selected-heading figure.motion-active{transform:rotate(-1.5deg) translateY(-3px)}

@media(max-width:700px){
 .portal-airwaves{right:24%;top:30%;width:40px;height:40px}
 .portal-airwaves i:nth-child(2){inset:-8px}.portal-airwaves i:nth-child(3){inset:-16px}
 .photo-mosaic.motion-active figure:nth-child(2){transform:translateY(-5px) rotate(.6deg)}
}
@media(prefers-reduced-motion:reduce){
 .motion-active :is(.portal-record,.record-surface,.portal-tv-dial,.portal-tv-screen:before,.track-arrow,.book-title-page),
 .motion-active.home-work figure,.motion-active.about-photo,.motion-active.timeline-feature>figure,
 .motion-active.photo-mosaic figure,.motion-active.tv-photo>div,.motion-active.radio-feature figure,
 .motion-active.radio-feature .radio-wave,.selected-heading figure.motion-active{transform:none}
 .portal-airwaves{display:none}
 .motion-active.goroku-teaser img{rotate:none}
}