/* ========================================================================== animations.css — keyframes, reveal-on-scroll, page-flip loader, stamp press Everything animates transform/opacity only. base.css neutralises motion for prefers-reduced-motion. ========================================================================== */ /* -------------------------------------------------------------------------- Keyframes -------------------------------------------------------------------------- */ @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes pop-in { from { opacity: 0; transform: translate3d(0, -6px, 0) scale(.98); } to { opacity: 1; transform: none; } } @keyframes failsafe-show { to { opacity: 1; transform: none; } } /* RTL ticker: text enters from the left edge and travels right */ @keyframes ticker-rtl { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(50%, 0, 0); } } /* a book slides along the shelf, stands up and settles */ @keyframes slot-settle { 0% { opacity: 0; transform: translate3d(-34px, -16px, 0) rotate(-7deg); } 55% { opacity: 1; transform: translate3d(2px, 1px, 0) rotate(.8deg); } 80% { transform: translate3d(-1px, 0, 0) rotate(-.3deg); } 100% { opacity: 1; transform: none; } } /* the book dropped back into its gap */ @keyframes spine-back { 0% { transform: translate3d(0, -8px, 0); } 60% { transform: translate3d(0, 1px, 0); } 100% { transform: none; } } @keyframes pin-bob { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(0, -4px, 0); } } @keyframes spread-open { from { transform: rotateY(-180deg); } to { transform: rotateY(0deg); } } @keyframes rise-in { from { opacity: 0; transform: translate3d(0, 16px, 0); } to { opacity: 1; transform: none; } } @keyframes magnifier-bob { 0%, 100% { transform: translate3d(0, 0, 0) rotate(0deg); } 25% { transform: translate3d(-10px, -6px, 0) rotate(-6deg); } 50% { transform: translate3d(-18px, 2px, 0) rotate(-2deg); } 75% { transform: translate3d(-6px, 6px, 0) rotate(4deg); } } @keyframes lens-glint { 0%, 60%, 100% { opacity: 0; } 70% { opacity: .9; } } @keyframes stamp-press { 0% { opacity: 0; transform: translate3d(0, -40px, 0) scale(1.9) rotate(-18deg); } 45% { opacity: 1; transform: translate3d(0, 0, 0) scale(.93) rotate(-9deg); } 62% { transform: scale(1.03) rotate(-9deg); } 100% { opacity: 1; transform: scale(1) rotate(-9deg); } } @keyframes ink-ring { 0%, 40% { opacity: 0; transform: scale(.7); } 55% { opacity: .5; } 100% { opacity: 0; transform: scale(1.6); } } @keyframes page-flip { 0% { transform: rotateY(0deg); } 45%, 100% { transform: rotateY(180deg); } } @keyframes lean-tilt { 0%, 100% { transform: rotate(14deg); } 50% { transform: rotate(17deg); } } /* -------------------------------------------------------------------------- Reveal on scroll (app.js adds .is-in). html.js is set in ; the failsafe shows content after 3 s even if app.js never runs. -------------------------------------------------------------------------- */ .reveal { transition: opacity .75s var(--ease), transform .75s var(--ease); } html.js .reveal:not(.is-in) { opacity: 0; transform: translate3d(0, 22px, 0); animation: failsafe-show 0s 3s forwards; } /* home hero entrance */ .hero__inner > * { animation: rise-in .8s var(--ease) backwards; } .hero__inner > :nth-child(2) { animation-delay: .06s; } .hero__inner > :nth-child(3) { animation-delay: .12s; } .hero__inner > :nth-child(4) { animation-delay: .18s; } .hero__inner > :nth-child(5) { animation-delay: .24s; } .hero__inner > :nth-child(6) { animation-delay: .3s; } /* -------------------------------------------------------------------------- Page-flip loader (loader.php) — pages turn from left to right, like an Arabic book -------------------------------------------------------------------------- */ .loader { display: inline-flex; align-items: center; gap: 12px; color: var(--ink-2); font-size: .9375rem; } .loader__book { position: relative; flex: none; width: 40px; height: 26px; perspective: 180px; } .loader__book::before, .loader__book::after { /* the two halves of the open book */ content: ""; position: absolute; top: 0; bottom: 0; width: 50%; background: #FFFCF6; border: 1.5px solid var(--primary); } .loader__book::before { left: 0; border-radius: 3px 0 0 3px; border-right-width: .75px; } .loader__book::after { right: 0; border-radius: 0 3px 3px 0; border-left-width: .75px; } .loader__page { position: absolute; z-index: 1; top: 1px; bottom: 1px; left: 1.5px; width: calc(50% - 1.5px); background: linear-gradient(90deg, #F4EAD4, #FFFCF6); border: 1px solid rgba(14, 5, 131, .45); border-radius: 2px 0 0 2px; transform-origin: 100% 50%; animation: page-flip 1.5s var(--ease-io) infinite; } .loader__page:nth-child(2) { animation-delay: .25s; } .loader__page:nth-child(3) { animation-delay: .5s; } .loader__text { white-space: nowrap; } @media (prefers-reduced-motion: reduce) { .loader__page { animation: none; display: none; } } /* -------------------------------------------------------------------------- Stamp press before printing -------------------------------------------------------------------------- */ .stamp-press { position: fixed; inset: 0; z-index: 400; display: grid; place-items: center; background: rgba(246, 241, 231, .72); pointer-events: none; animation: fade-in .2s ease; } .stamp-press__stamp { position: relative; width: 190px; height: 190px; color: rgba(138, 42, 36, .88); animation: stamp-press .75s var(--ease) forwards; } .stamp-press__stamp svg { width: 100%; height: 100%; } .stamp-press__stamp::after { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 3px solid rgba(138, 42, 36, .45); opacity: 0; animation: ink-ring .75s ease-out forwards; } /* -------------------------------------------------------------------------- Empty state art: a bobbing magnifier over a closed book -------------------------------------------------------------------------- */ .empty__magnifier { transform-box: fill-box; transform-origin: 50% 50%; animation: magnifier-bob 4.5s ease-in-out infinite; } .empty__glint { animation: lens-glint 4.5s ease-in-out infinite; } /* 404 art */ .mini-shelf { display: flex; justify-content: center; align-items: flex-end; gap: 2px; width: min(360px, 90%); height: 130px; margin: 0 auto; padding: 0 12px; border-bottom: 12px solid var(--wood); border-radius: 0 0 4px 4px; box-shadow: 0 8px 12px -8px rgba(46, 28, 15, .6); } .mini-shelf__book { width: var(--w, 22px); height: var(--h, 100px); border-radius: 2px 2px 0 0; background: var(--bk); background-image: linear-gradient(90deg, rgba(0, 0, 0, .3), rgba(255, 255, 255, .12) 40%, rgba(0, 0, 0, .3)); box-shadow: inset 0 10px 0 -7px rgba(210, 178, 108, .8), inset 0 -10px 0 -7px rgba(210, 178, 108, .8); } .mini-shelf__gap { position: relative; width: 34px; height: 100px; display: grid; place-items: center; font-family: var(--font-title); font-weight: 700; font-size: 2.2rem; color: var(--gold); } .mini-shelf__book--lean { transform-origin: 100% 100%; transform: rotate(14deg); animation: lean-tilt 3.2s ease-in-out infinite; }