/* Merged page: direction A (rink hero, bench scene) + B's self-building owl and wordmark sign-off. Loaded after a.css. */

/* ---------- the owl builds itself above the headline ---------- */
.owl-build { position: relative; width: 68px; height: 68px; margin: 0 0 14px; color: var(--ink); overflow: visible; }
.owl-build::before { content: none; }
.owl-build .p-stem, .owl-build .p-bowl, .owl-build .p-head, .owl-build .p-w, .owl-build .eyes, .owl-build .glow { transform-box: fill-box; transform-origin: center; }
.owl-build .p-stem { transform-origin: 50% 100%; animation: m-stem 800ms 80ms var(--ease-out) both; }
.owl-build .p-bowl { animation: m-bowl 950ms 220ms var(--ease-out) both; }
.owl-build .p-w { animation: m-punch 460ms 820ms var(--ease-out) both; }
.owl-build .p-head { transform-origin: 50% 100%; animation: m-land 680ms 960ms cubic-bezier(.3, 1.5, .5, 1) both; }
.owl-build .eyes { animation: m-open 320ms 1480ms var(--ease-out) backwards; } /* backwards only, so the pointer can move the eyes afterwards */
.owl-build .glow { opacity: .8; animation: m-fade 800ms 1600ms both; }
@media (prefers-color-scheme: light) { .owl-build .glow { opacity: .35; } }
.owl-build.cheer .glow { animation: m-flare 1200ms var(--ease-out); }
@keyframes m-stem { from { transform: scaleY(0); } }
@keyframes m-bowl { from { opacity: 0; transform: translateX(30%) rotate(120deg) scale(.4); } }
@keyframes m-punch { from { transform: scale(0); } }
@keyframes m-land { from { opacity: 0; transform: translateY(-80%); } 60% { opacity: 1; } }
@keyframes m-open { from { transform: scaleY(0); } }
@keyframes m-fade { from { opacity: 0; } }
@keyframes m-flare { 30% { opacity: 1; transform: scale(1.6); } }

/* phone: keep the rink's near end above the fold with the owl added */
@media (max-width: 599px) { .dir-m .hero-a { padding-bottom: 196px; } }
@media (min-width: 600px) { .owl-build { width: 84px; height: 84px; margin-bottom: 18px; } }
@media (min-width: 1000px) { .owl-build { width: 104px; height: 104px; margin: 0 0 20px -6px; } }

/* ---------- closing: the wordmark signs off under the CTA ---------- */
.dir-m .close-a { padding-bottom: clamp(40px, 7vh, 72px); }
.sign {
  max-width: 1440px; margin: 0 auto; padding: 0 var(--gutter) 10px;
  font-weight: 800; line-height: .82; letter-spacing: -.06em; text-align: center; white-space: nowrap;
  font-size: clamp(64px, calc((100vw - 2 * var(--gutter)) / 4.75), 280px);
  color: var(--ink); user-select: none; overflow: clip;
}
/* the one claim kept from the old bench section: a quiet line above the closing call */
.dir-m .close-a .proof { margin: 0 auto 18px; max-width: 30ch; color: var(--ink-2); font-size: clamp(15px, 1.6vw, 17px); line-height: 1.5; }