/* GENERATED from brand/elephant.mjs — run: node bin/sync-brand.mjs */ .wyn-elephant { display: block; overflow: visible; } /* ── pivots: every part turns around where it actually joins the body ────── */ .wyn-elephant .el-body-grp { transform-box: view-box; transform-origin: 60px 108px; } .wyn-elephant .el-head-grp { transform-box: view-box; transform-origin: 60px 70px; } .wyn-elephant .el-ear-l { transform-box: view-box; transform-origin: 39px 46px; } .wyn-elephant .el-ear-r { transform-box: view-box; transform-origin: 81px 46px; } .wyn-elephant .el-trunk { transform-box: view-box; transform-origin: 57px 54px; } .wyn-elephant .el-trunk-2 { transform-box: view-box; transform-origin: 48px 74px; } .wyn-elephant .el-trunk-3 { transform-box: view-box; transform-origin: 44px 89px; } .wyn-elephant .el-leg-l { transform-box: view-box; transform-origin: 52px 94px; } .wyn-elephant .el-leg-r { transform-box: view-box; transform-origin: 68px 94px; } .wyn-elephant .el-tail { transform-box: view-box; transform-origin: 86px 90px; } .wyn-elephant .el-shadow { transform-box: view-box; transform-origin: 60px 113px; } .wyn-elephant .el-joy { opacity: 0; } .wyn-elephant .el-eyes-open { opacity: 0; } /* Pose changes spring, so the elephant never snaps between states. */ .wyn-elephant .el-body-grp, .wyn-elephant .el-head-grp, .wyn-elephant .el-leg, .wyn-elephant .el-trunk, .wyn-elephant .el-trunk-2, .wyn-elephant .el-trunk-3, .wyn-elephant .el-ear, .wyn-elephant .el-shadow, .wyn-elephant .el-eyes-open, .wyn-elephant .el-eyes-closed { transition: transform .55s cubic-bezier(.34,1.4,.5,1), opacity .28s ease; } /* ── SIT — idle: sits cutely, trunk swinging slowly side to side ─────────── */ .wyn-elephant[data-pose="sit"] .el-body-grp { transform: translateY(4px) scaleY(.97); } .wyn-elephant[data-pose="sit"] .el-head-grp { animation: elBreathe 4.4s ease-in-out infinite; } .wyn-elephant[data-pose="sit"] .el-trunk { animation: elTrunkSway 4s ease-in-out infinite; } .wyn-elephant[data-pose="sit"] .el-trunk-2 { animation: elTrunkSway2 4s ease-in-out infinite; } .wyn-elephant[data-pose="sit"] .el-trunk-3 { animation: elTrunkSway3 4s ease-in-out infinite; } .wyn-elephant[data-pose="sit"] .el-ear-l { animation: elEarIdleL 5s ease-in-out infinite; } .wyn-elephant[data-pose="sit"] .el-ear-r { animation: elEarIdleR 5s ease-in-out infinite; } .wyn-elephant[data-pose="sit"] .el-tail { animation: elTail 4.6s ease-in-out infinite; } @keyframes elBreathe { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-1.4px) } } @keyframes elTrunkSway { 0%,100% { transform: rotate(-13deg) } 50% { transform: rotate(13deg) } } @keyframes elTrunkSway2 { 0%,100% { transform: rotate(9deg) } 50% { transform: rotate(-9deg) } } @keyframes elTrunkSway3 { 0%,100% { transform: rotate(-6deg) } 50% { transform: rotate(6deg) } } @keyframes elEarIdleL { 0%,100% { transform: rotate(0deg) } 50% { transform: rotate(6deg) } } @keyframes elEarIdleR { 0%,100% { transform: rotate(0deg) } 50% { transform: rotate(-6deg) } } @keyframes elTail { 0%,100% { transform: rotate(0deg) } 50% { transform: rotate(-15deg) } } /* ── STAND — the pointer moved: springs up, eyes open, ears perk ─────────── */ .wyn-elephant[data-pose="stand"] .el-eyes-open { opacity: 1; } .wyn-elephant[data-pose="stand"] .el-eyes-closed { opacity: 0; } .wyn-elephant[data-pose="stand"] .el-body-grp { animation: elStandUp .66s cubic-bezier(.34,1.5,.5,1); } .wyn-elephant[data-pose="stand"] .el-head-grp { animation: elHeadPerk .66s cubic-bezier(.34,1.5,.5,1); } .wyn-elephant[data-pose="stand"] .el-ear-l { animation: elEarPerkL .66s cubic-bezier(.34,1.6,.5,1), elEarIdleL 3.6s ease-in-out .66s infinite; } .wyn-elephant[data-pose="stand"] .el-ear-r { animation: elEarPerkR .66s cubic-bezier(.34,1.6,.5,1), elEarIdleR 3.6s ease-in-out .66s infinite; } .wyn-elephant[data-pose="stand"] .el-trunk { animation: elTrunkSway 2.6s ease-in-out infinite; } .wyn-elephant[data-pose="stand"] .el-trunk-2 { animation: elTrunkSway2 2.6s ease-in-out infinite; } .wyn-elephant[data-pose="stand"] .el-tail { animation: elTail 2.2s ease-in-out infinite; } @keyframes elStandUp { 0% { transform: translateY(4px) scaleY(.97) } 52% { transform: translateY(-5px) scaleY(1.05) } 100% { transform: none } } @keyframes elHeadPerk { 0% { transform: translateY(2px) } 52% { transform: translateY(-3px) scale(1.03) } 100% { transform: none } } @keyframes elEarPerkL { 0% { transform: rotate(0) } 45% { transform: rotate(-20deg) } 100% { transform: rotate(0) } } @keyframes elEarPerkR { 0% { transform: rotate(0) } 45% { transform: rotate(20deg) } 100% { transform: rotate(0) } } /* ── WORK — called upon: comes alive, ears flapping ──────────────────────── */ .wyn-elephant[data-pose="work"] .el-eyes-open { opacity: 1; } .wyn-elephant[data-pose="work"] .el-eyes-closed { opacity: 0; } .wyn-elephant[data-pose="work"] .el-ear-l { animation: elFlapL .32s ease-in-out infinite; } .wyn-elephant[data-pose="work"] .el-ear-r { animation: elFlapR .32s ease-in-out infinite; } .wyn-elephant[data-pose="work"] .el-body-grp { animation: elBob .5s ease-in-out infinite; } .wyn-elephant[data-pose="work"] .el-head-grp { animation: elHeadBob .5s ease-in-out infinite; } .wyn-elephant[data-pose="work"] .el-trunk { animation: elTrunkWork .8s ease-in-out infinite; } .wyn-elephant[data-pose="work"] .el-trunk-2 { animation: elTrunkWork2 .8s ease-in-out infinite; } .wyn-elephant[data-pose="work"] .el-tail { animation: elTail .9s ease-in-out infinite; } @keyframes elFlapL { 0%,100% { transform: rotate(4deg) } 50% { transform: rotate(-26deg) } } @keyframes elFlapR { 0%,100% { transform: rotate(-4deg) } 50% { transform: rotate(26deg) } } @keyframes elBob { 0%,100% { transform: translateY(0) } 50% { transform: translateY(-3px) } } @keyframes elHeadBob { 0%,100% { transform: translateY(0) rotate(0) } 50% { transform: translateY(-2px) rotate(2deg) } } @keyframes elTrunkWork { 0%,100% { transform: rotate(-19deg) } 50% { transform: rotate(17deg) } } @keyframes elTrunkWork2 { 0%,100% { transform: rotate(13deg) } 50% { transform: rotate(-13deg) } } /* ── CHEER — done: rears up, both front legs and the trunk raised in joy ─── */ .wyn-elephant[data-pose="cheer"] .el-eyes-closed { opacity: 1; } .wyn-elephant[data-pose="cheer"] .el-eyes-open { opacity: 0; } .wyn-elephant[data-pose="cheer"] .el-body-grp { animation: elRear 1.5s cubic-bezier(.34,1.4,.5,1); } .wyn-elephant[data-pose="cheer"] .el-leg-l { animation: elLegRaiseL 1.5s cubic-bezier(.34,1.4,.5,1); } .wyn-elephant[data-pose="cheer"] .el-leg-r { animation: elLegRaiseR 1.5s cubic-bezier(.34,1.4,.5,1); } .wyn-elephant[data-pose="cheer"] .el-trunk { animation: elTrunkRaise 1.5s cubic-bezier(.34,1.4,.5,1); } .wyn-elephant[data-pose="cheer"] .el-trunk-2 { animation: elTrunkCurl2 1.5s cubic-bezier(.34,1.4,.5,1); } .wyn-elephant[data-pose="cheer"] .el-trunk-3 { animation: elTrunkCurl3 1.5s cubic-bezier(.34,1.4,.5,1); } .wyn-elephant[data-pose="cheer"] .el-ear-l { animation: elFlapL .24s ease-in-out 6; } .wyn-elephant[data-pose="cheer"] .el-ear-r { animation: elFlapR .24s ease-in-out 6; } .wyn-elephant[data-pose="cheer"] .el-head-grp { animation: elHeadCheer 1.5s cubic-bezier(.34,1.4,.5,1); } .wyn-elephant[data-pose="cheer"] .el-shadow { animation: elShadowRear 1.5s cubic-bezier(.34,1.4,.5,1); } .wyn-elephant[data-pose="cheer"] .el-joy { animation: elJoy 1.5s ease-out; } /* the body tips back onto its seat and hops */ @keyframes elRear { 0% { transform: none } 20% { transform: translateY(3px) scaleY(.94) } 46% { transform: translateY(-9px) rotate(-4deg) } 66% { transform: translateY(-5px) rotate(-2deg) } 84% { transform: translateY(-11px) rotate(-5deg) } 100% { transform: none } } /* both front legs swing up and out — the "two front legs raised" beat */ @keyframes elLegRaiseL { 0% { transform: none } 44% { transform: rotate(-58deg) translate(-4px,-7px) } 66% { transform: rotate(-44deg) translate(-3px,-5px) } 84% { transform: rotate(-64deg) translate(-5px,-8px) } 100% { transform: none } } @keyframes elLegRaiseR { 0% { transform: none } 44% { transform: rotate(58deg) translate(4px,-7px) } 66% { transform: rotate(44deg) translate(3px,-5px) } 84% { transform: rotate(64deg) translate(5px,-8px) } 100% { transform: none } } /* the trunk swings up and curls over the head */ @keyframes elTrunkRaise { 0% { transform: none } 40% { transform: rotate(122deg) } 70% { transform: rotate(112deg) } 86% { transform: rotate(128deg) } 100% { transform: none } } @keyframes elTrunkCurl2 { 0% { transform: none } 40% { transform: rotate(48deg) } 86% { transform: rotate(56deg) } 100% { transform: none } } @keyframes elTrunkCurl3 { 0% { transform: none } 40% { transform: rotate(56deg) } 86% { transform: rotate(64deg) } 100% { transform: none } } @keyframes elHeadCheer { 0% { transform: none } 46% { transform: translateY(-3px) scale(1.05) } 100% { transform: none } } @keyframes elShadowRear { 0% { transform: none } 46% { transform: scale(.72); opacity: .5 } 100% { transform: none } } @keyframes elJoy { 0% { opacity: 0; transform: scale(.6) } 28% { opacity: 1; transform: scale(1.08) } 72% { opacity: 1 } 100% { opacity: 0; transform: scale(1.26) } } /* ── SPIN — the other celebration: turns sideways and spins right around ── Done with scaleX rather than rotateY: flattening to an edge reads as "turning sideways", passing through negative scale reads as coming round the far side, and it stays pin-sharp at 46px where a 3D transform would shimmer. */ .wyn-elephant[data-pose="spin"] .el-eyes-open { opacity: 1; } .wyn-elephant[data-pose="spin"] .el-eyes-closed { opacity: 0; } .wyn-elephant[data-pose="spin"] .el-body-grp { animation: elSpin 1.5s cubic-bezier(.4,.05,.35,1); } .wyn-elephant[data-pose="spin"] .el-head-grp { animation: elSpinHead 1.5s ease-in-out; } .wyn-elephant[data-pose="spin"] .el-ear-l { animation: elFlapL .26s ease-in-out 5; } .wyn-elephant[data-pose="spin"] .el-ear-r { animation: elFlapR .26s ease-in-out 5; } .wyn-elephant[data-pose="spin"] .el-trunk { animation: elTrunkSpin 1.5s ease-in-out; } .wyn-elephant[data-pose="spin"] .el-trunk-2 { animation: elTrunkSpin2 1.5s ease-in-out; } .wyn-elephant[data-pose="spin"] .el-tail { animation: elTail .3s ease-in-out 5; } .wyn-elephant[data-pose="spin"] .el-shadow { animation: elShadowSpin 1.5s cubic-bezier(.4,.05,.35,1); } .wyn-elephant[data-pose="spin"] .el-joy { animation: elJoy 1.5s ease-out; } @keyframes elSpin { 0% { transform: scaleX(1) translateY(0) } 12% { transform: scaleX(.92) translateY(3px) } /* crouch before the turn */ 30% { transform: scaleX(.10) translateY(-8px) } /* edge-on — sideways */ 50% { transform: scaleX(-1) translateY(-11px) } /* round the far side */ 70% { transform: scaleX(-.10) translateY(-8px) } /* edge-on again */ 88% { transform: scaleX(1) translateY(1px) } /* lands facing front */ 100% { transform: scaleX(1) translateY(0) } } @keyframes elSpinHead { 0%,100% { transform: rotate(0) } 30% { transform: rotate(-9deg) } 70% { transform: rotate(9deg) } } @keyframes elTrunkSpin { 0%,100% { transform: rotate(0) } 30% { transform: rotate(-40deg) } 50% { transform: rotate(0deg) } 70% { transform: rotate(40deg) } } @keyframes elTrunkSpin2 { 0%,100% { transform: rotate(0) } 30% { transform: rotate(-26deg) } 70% { transform: rotate(26deg) } } @keyframes elShadowSpin { 0%,100% { transform: none } 30% { transform: scale(.8); opacity: .6 } 50% { transform: scale(.7); opacity: .5 } 70% { transform: scale(.8); opacity: .6 } } /* ── blink, only while the eyes are open ─────────────────────────────────── */ .wyn-elephant[data-pose="stand"] .el-eyes-open, .wyn-elephant[data-pose="work"] .el-eyes-open { animation: elBlink 5.4s infinite; transform-box: view-box; transform-origin: 60px 47px; } @keyframes elBlink { 0%,92%,100% { transform: scaleY(1) } 95% { transform: scaleY(.1) } } /* Greyscale variant for surfaces that must stay strictly monochrome. */ .wyn-elephant.mono { filter: grayscale(1) contrast(1.06); } @media (prefers-reduced-motion: reduce) { .wyn-elephant, .wyn-elephant * { animation: none !important; transition: none !important; } }