/* Anything But the Norm — motion layer. Everything is scoped to .js-motion, which is only set when the visitor has not asked for reduced motion. */
body > div { overflow-x: clip !important; }
header { position: sticky; top: 0; z-index: 50; transition: background-color .3s ease, box-shadow .3s ease; }
header.is-scrolled { background-color: rgba(251, 246, 236, .92); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); box-shadow: 0 10px 30px -22px rgba(19, 40, 77, .55); }
.abtn-progress { position: fixed; top: 0; left: 0; right: 0; height: 4px; background: #D13D23; transform-origin: 0 50%; transform: scaleX(0); z-index: 60; pointer-events: none; }

.js-motion .rv { opacity: 0; transform: translateY(32px); transition: opacity .8s cubic-bezier(.2, .7, .2, 1), transform .8s cubic-bezier(.2, .7, .2, 1); will-change: opacity, transform; }
.js-motion .rv-fade { opacity: 0; transition: opacity .9s ease; }
.js-motion .rv.in, .js-motion .rv-fade.in { opacity: 1; transform: none; }

/* Hero entrance */
.js-motion .hero-in { animation: abtn-rise .9s cubic-bezier(.2, .7, .2, 1) both; }
.js-motion h1 em { display: inline-block; transform-origin: 50% 80%; animation: abtn-wiggle 1.1s ease-in-out 1.1s both; }
@keyframes abtn-rise { from { opacity: 0; transform: translateY(36px); } to { opacity: 1; transform: none; } }
@keyframes abtn-wiggle { 0%, 100% { transform: rotate(0); } 20% { transform: rotate(-5deg) scale(1.06); } 40% { transform: rotate(4deg) scale(1.06); } 60% { transform: rotate(-2deg); } 80% { transform: rotate(1deg); } }

/* Living shapes */
.js-motion .blob-a { animation: abtn-blob 9s ease-in-out infinite; }
@keyframes abtn-blob { 0%, 100% { transform: rotate(-6deg) scale(1); border-radius: 58% 42% 46% 54% / 52% 44% 56% 48%; } 50% { transform: rotate(-1deg) scale(1.035); border-radius: 46% 54% 56% 44% / 44% 56% 46% 54%; } }
.js-motion .blob-b { animation: abtn-blob2 11s ease-in-out infinite; }
@keyframes abtn-blob2 { 0%, 100% { border-radius: 48% 52% 44% 56% / 46% 50% 50% 54%; } 50% { border-radius: 54% 46% 52% 48% / 52% 46% 54% 48%; } }
.js-motion .seal-a { animation: abtn-bob-a 4.5s ease-in-out infinite; }
@keyframes abtn-bob-a { 0%, 100% { transform: rotate(-10deg) translateY(0); } 50% { transform: rotate(-4deg) translateY(-8px); } }
.js-motion .seal-b { animation: abtn-bob-b 5s ease-in-out infinite; }
@keyframes abtn-bob-b { 0%, 100% { transform: rotate(10deg) scale(1); } 50% { transform: rotate(16deg) scale(1.05); } }
.js-motion .sparkle { transform-origin: 50% 50%; animation: abtn-twinkle 3.2s ease-in-out infinite; }
@keyframes abtn-twinkle { 0%, 100% { transform: scale(1) rotate(0); opacity: 1; } 50% { transform: scale(.72) rotate(18deg); opacity: .65; } }

/* Books */
article > [role="img"] { transition: transform .45s cubic-bezier(.2, .7, .2, 1), box-shadow .45s ease; }
article:hover > [role="img"] { transform: translateY(-8px) rotate(-1.2deg); box-shadow: 0 1px 0 rgba(19, 40, 77, .12), 0 30px 44px -18px rgba(19, 40, 77, .5), inset 10px 0 0 rgba(0, 0, 0, .10), inset 12px 0 0 rgba(255, 255, 255, .18); }
.js-motion .spine { opacity: 0; transform: rotate(180deg) translateY(60px); transition: opacity .6s ease, transform .8s cubic-bezier(.3, 1.4, .5, 1); }
.js-motion .spine.in { opacity: 1; transform: rotate(180deg); }

/* Toolbox */
.js-motion [data-panel].pop { animation: abtn-pop .45s cubic-bezier(.2, .7, .2, 1) both; }
@keyframes abtn-pop { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
[data-tool] { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .2s ease; }
[data-tool]:hover { transform: translateX(4px); }
[data-flip] { transition: background-color .25s ease, color .25s ease, border-color .25s ease, transform .25s ease; }
[data-flip]:hover { transform: translateY(-3px); }
.js-motion [data-flip].flipping { animation: abtn-flip .5s ease-in-out; }
@keyframes abtn-flip { 0% { transform: perspective(700px) rotateY(0); } 50% { transform: perspective(700px) rotateY(90deg); } 100% { transform: perspective(700px) rotateY(0); } }

/* Buttons */
a[href="#join"], button[type="submit"] { transition: transform .2s ease, box-shadow .2s ease; }
a[href="#join"]:hover, button[type="submit"]:hover { transform: translateY(-2px); box-shadow: 0 10px 20px -12px rgba(19, 40, 77, .6); }
details > p { animation: none; }
.js-motion details[open] > p { animation: abtn-pop .4s ease both; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto !important; }
}