/* Motion follows the school's warm, rhythmic identity. */
section[id]{scroll-margin-top:100px}
.record-stage{min-width:0;position:relative;display:grid;justify-items:center;gap:32px}
.record-stage .record{width:100%;box-shadow:none;filter:drop-shadow(12px 18px 0 #a46f4066);animation:spin 16s linear infinite}
.record:before{content:'';position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 25deg,transparent 0deg,#f2e8d82b 38deg,transparent 72deg,transparent 180deg,#f2e8d817 218deg,transparent 255deg);pointer-events:none}
.record-center{position:relative;z-index:1}
.record-controls{display:flex;gap:18px;align-items:center}
.equalizer{display:flex;align-items:center;gap:4px;height:26px;color:var(--caramel)}
.equalizer i{width:4px;height:100%;border-radius:4px;background:currentColor;animation:beat 1s ease-in-out infinite alternate;transform-origin:center}
.equalizer i:nth-child(2){animation-delay:-.7s}.equalizer i:nth-child(3){animation-delay:-.3s}.equalizer i:nth-child(4){animation-delay:-.9s}.equalizer i:nth-child(5){animation-delay:-.5s}
@keyframes beat{from{transform:scaleY(.25)}to{transform:scaleY(1)}}
.navlinks>a:not(.pill){position:relative;padding:6px 0}
.navlinks>a:not(.pill):after{content:'';position:absolute;left:0;right:0;bottom:0;height:2px;background:#d8b890;transform:scaleX(0);transform-origin:left;transition:transform .25s}
.navlinks>a:hover:after,.navlinks>a:focus-visible:after{transform:scaleX(1)}
.pill{transition:transform .25s,box-shadow .25s,background .25s}
.pill:hover,.pill:focus-visible{transform:translateY(-4px);box-shadow:0 8px 18px #2d21192b}
.pill:active,.course:active{transform:translateY(0) scale(.98)}
.person{transition:transform .3s,box-shadow .3s,border-color .3s}
.benefit{transition:background .3s}.benefit strong{transition:transform .3s}
.course{transition:transform .3s,box-shadow .3s,border-color .3s}
.course:after{content:'';position:absolute;inset:0;pointer-events:none;background:linear-gradient(115deg,transparent 25%,#fffaf326 48%,transparent 70%);transform:translateX(-120%);transition:transform .65s}
.course:hover:after,.course:focus-visible:after{transform:translateX(120%)}
.course:focus-visible,.pill:focus-visible{outline:3px solid #d8b890;outline-offset:5px}
.contact-box:after{pointer-events:none;animation:sway 7s ease-in-out infinite alternate;transform-origin:center}
@keyframes sway{from{transform:rotate(-8deg) translateY(0)}to{transform:rotate(6deg) translateY(-12px)}}
@media(hover:hover) and (pointer:fine){.person:hover{transform:translateY(-7px);box-shadow:0 16px 30px #542f1820;border-color:var(--caramel)}.benefit:hover{background:#a46f4012}.benefit:hover strong{transform:translateX(5px)}.course:hover{box-shadow:0 18px 28px #0003}}
@media(max-width:850px){.record-stage{width:min(78vw,480px);margin:auto}.record-stage .record{width:100%;margin:0}}
html.motion-enabled .record-stage .record{animation:spin 10s linear infinite}
html.motion-enabled .pill{transition:transform .25s,box-shadow .25s,background .25s}
html.motion-enabled .course{transition:transform .3s,box-shadow .3s,border-color .3s}