/* ============================================================ parrot.css == The mascot drawn by js/parrot.js. Its feathers and its outfit follow the nearest [data-mode]; its pose follows --swipe, the signed drag the deck publishes on (-1 no … +1 yes); its face follows data-mood. ============================================================================ */ .parrot { /* Classic colours, for anywhere without a mode. */ --p-body1: #ff8a70; --p-body2: #f0453e; --p-body3: #a81c2f; --p-belly1: #ffb938; --p-belly2: #ffe07a; --p-wing1: #ffd23f; --p-wing2: #2fc4a2; --p-wing3: #2b5fd9; --p-beak1: #fff0b0; --p-beak2: #e59a14; --p-ink: #2a1a2e; --p-edge: #6d1024; --swipe-now: var(--swipe, 0); display: block; line-height: 0; pointer-events: none; } .parrot__svg { display: block; width: 100%; height: auto; overflow: visible; } .p-s { transition: stop-color .4s ease; } .p-body1 { stop-color: var(--p-body1); } .p-body2 { stop-color: var(--p-body2); } .p-body3 { stop-color: var(--p-body3); } .p-belly1 { stop-color: var(--p-belly1); } .p-belly2 { stop-color: var(--p-belly2); } .p-wing1 { stop-color: var(--p-wing1); } .p-wing2 { stop-color: var(--p-wing2); } .p-wing3 { stop-color: var(--p-wing3); } .p-beak1 { stop-color: var(--p-beak1); } .p-beak2 { stop-color: var(--p-beak2); } /* ------------------------------------------------------------ palettes -- */ [data-mode="duel"] .parrot { --p-body1: #ff9ccb; --p-body2: #ff5fa2; --p-body3: #a61e6a; --p-belly1: #ffd1e6; --p-belly2: #fff1f7; --p-wing1: #a8e8ff; --p-wing2: #38bdf8; --p-wing3: #5b2fd6; --p-edge: #5b0f3f; } [data-mode="zen"] .parrot { --p-body1: #a6f7e4; --p-body2: #3fd1b4; --p-body3: #127d86; --p-belly1: #e5fff6; --p-belly2: #fffbe9; --p-wing1: #c8fbe9; --p-wing2: #5eead4; --p-wing3: #1b6fa0; --p-edge: #0b4a5e; } [data-mode="timeAttack"] .parrot { --p-body1: #ffd36b; --p-body2: #ff9a2b; --p-body3: #c24a0e; --p-belly1: #fff0b5; --p-belly2: #fffbe0; --p-wing1: #fff27a; --p-wing2: #ff6a2b; --p-wing3: #b3230f; --p-edge: #6a2405; } [data-mode="suddenDeath"] .parrot { --p-body1: #ff6b76; --p-body2: #c81e3a; --p-body3: #4e0716; --p-belly1: #3a2230; --p-belly2: #5a3a46; --p-wing1: #6b6a80; --p-wing2: #2b2838; --p-wing3: #0f0c16; --p-beak1: #f3ead8; --p-beak2: #a89c80; --p-edge: #2a040b; } [data-mode="review"] .parrot { --p-body1: #a9ccff; --p-body2: #4f8cff; --p-body3: #1f3f9e; --p-belly1: #d9fff0; --p-belly2: #f4fffa; --p-wing1: #d6fff0; --p-wing2: #6ee7b7; --p-wing3: #1f8a70; --p-edge: #152d6c; } /* ------------------------------------------------------------- outfits -- */ .p-fit { display: none; } [data-mode="duel"] .parrot .p-fit--duel, [data-mode="zen"] .parrot .p-fit--zen, [data-mode="timeAttack"] .parrot .p-fit--timeAttack, [data-mode="suddenDeath"] .parrot .p-fit--suddenDeath, [data-mode="review"] .parrot .p-fit--review { display: inline; } /* Hats cover the crest. */ [data-mode="suddenDeath"] .parrot .p-crest, [data-mode="review"] .parrot .p-crest { display: none; } /* ---------------------------------------------------------------- parts -- */ .p-shadow { fill: #000; opacity: .25; } .p-tailMid { fill: var(--p-body3); } .p-feet path { fill: none; stroke: #8a8f9c; stroke-width: 5.5; stroke-linecap: round; } .p-scallop, .p-quill { fill: none; stroke: var(--p-edge); stroke-opacity: .28; stroke-width: 1.6; stroke-linecap: round; } .p-patch { fill: #fff; opacity: .92; } .p-blush { fill: #ff7aa2; opacity: .35; } .p-eyeWhite { fill: #fff; } .p-iris { fill: var(--p-ink); } .p-dot { fill: #050308; } .p-glint { fill: #fff; } .p-eyeRing { fill: none; stroke: var(--p-edge); stroke-opacity: .35; stroke-width: 1.5; } .p-lid { fill: var(--p-body2); } .p-joy { fill: none; stroke: var(--p-ink); stroke-width: 4.5; stroke-linecap: round; opacity: 0; } .p-tear { fill: #7fd3ff; opacity: 0; } .p-browL, .p-browR { fill: none; stroke: var(--p-edge); stroke-width: 4.5; stroke-linecap: round; } .p-mouth { fill: #3a1630; } .p-tongue { fill: #ff8fa6; } .p-beakShine { fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; opacity: .7; } .p-nostril { fill: #6b4a0a; opacity: .6; } /* Duel */ .p-band { fill: #ff2f7d; stroke: #7a0f3e; stroke-width: 2; } .p-bandKnot { fill: #ff2f7d; stroke: #7a0f3e; stroke-width: 1.5; stroke-linejoin: round; } .p-bandMark { fill: #ffe14d; } .p-shield { fill: #38bdf8; stroke: #123a8a; stroke-width: 2.5; stroke-linejoin: round; } .p-shieldRim { fill: none; stroke: #e0f6ff; stroke-width: 2; opacity: .7; } .p-bolt { fill: #ffd23f; stroke: #8a5200; stroke-width: 1.2; stroke-linejoin: round; } /* Zen */ .p-lotus1 { fill: #ffc7e0; stroke: #d56b9c; stroke-width: 1.2; } .p-lotus2 { fill: #9ff0d8; stroke: #2a9d86; stroke-width: 1.2; } .p-stem { fill: none; stroke: #2a9d6a; stroke-width: 3; stroke-linecap: round; } .p-leaf { fill: #6ee7a0; stroke: #1f7a50; stroke-width: 1.2; } /* Time Attack */ .p-sweat { fill: #fff; stroke: #b3450e; stroke-width: 2; } .p-sweatStripe { fill: none; stroke: #ff6a2b; stroke-width: 3.5; } .p-speed { fill: none; stroke: #fff; stroke-width: 3; stroke-linecap: round; opacity: .55; } .p-watchCase { fill: #ff8a2b; stroke: #7a2a05; stroke-width: 2.5; } .p-watchFace { fill: #fffaf0; } .p-watchTicks { fill: none; stroke: #7a2a05; stroke-width: 2; stroke-linecap: round; } .p-watchHand { fill: none; stroke: #e23b1a; stroke-width: 2.6; stroke-linecap: round; transform-box: view-box; transform-origin: 40px 186px; animation: p-tick 4s steps(8) infinite; } .p-watchPin { fill: #7a2a05; } /* Sudden Death */ .p-bandana { fill: #1a0a10; stroke: #000; stroke-width: 2; } .p-bandanaTail { fill: #1a0a10; } .p-skull path { fill: #f5ecec; } .p-skullEye { fill: #1a0a10; } .p-strap { fill: none; stroke: #0d0508; stroke-width: 3; } .p-patchEye { fill: #0d0508; } .p-bone { fill: #f3ead8; stroke: #8a7d62; stroke-width: 1.2; } /* Review */ .p-capTop { fill: #1d2c6b; stroke: #0b1440; stroke-width: 2; stroke-linejoin: round; } .p-capBase { fill: #26398a; stroke: #0b1440; stroke-width: 2; } .p-tassel { fill: none; stroke: #ffd23f; stroke-width: 2.5; stroke-linecap: round; } .p-tasselEnd { fill: #ffd23f; } .p-lens { fill: #dff3ff; fill-opacity: .18; stroke: #1d2c6b; stroke-width: 3.2; } .p-frame { fill: none; stroke: #1d2c6b; stroke-width: 3.2; stroke-linecap: round; } .p-bookCover { fill: #2f6fe0; stroke: #173b8a; stroke-width: 2; stroke-linejoin: round; } .p-bookPage { fill: #fffdf5; } .p-bookLine { fill: none; stroke: #9aa8c8; stroke-width: 1.4; stroke-linecap: round; } /* ---------------------------------------------------------------- motion -- Each moving part turns round its own joint, in drawing coordinates. The swipe pose uses `rotate`/`translate`; the idle and mood animations use `transform`, so the two add up instead of fighting. */ .p-rig, .p-hop, .p-head, .p-headMood, .p-wingL, .p-wingR, .p-pupil, .p-lid, .p-browL, .p-browR, .p-jaw, .p-crest, .p-tear, .p-joy { transform-box: view-box; } .p-rig { transform-origin: 100px 226px; rotate: calc(var(--swipe-now) * 7deg); transition: rotate .12s ease-out; } .p-hop { transform-origin: 100px 226px; animation: p-breathe 3.4s ease-in-out infinite; } .p-head { transform-origin: 100px 118px; rotate: calc(var(--swipe-now) * 9deg); transition: rotate .12s ease-out; } .p-headMood { transform-origin: 100px 118px; transition: transform .3s ease; } .p-crest { transform-origin: 104px 34px; animation: p-sway 3s ease-in-out infinite alternate; } /* The wing on the side the card is going to rises with it. */ .p-wingL { transform-origin: 62px 126px; rotate: calc(clamp(0, var(--swipe-now) * -1, 1) * 75deg); transition: rotate .12s ease-out; } .p-wingR { transform-origin: 138px 126px; rotate: calc(clamp(0, var(--swipe-now), 1) * -75deg); transition: rotate .12s ease-out; } .p-pupil { translate: calc(var(--swipe-now) * 4px) 0; transition: translate .12s ease-out; } /* Yes lifts the brows; no knits them. */ .p-browL { transform-origin: 78px 48px; rotate: calc(var(--swipe-now) * -16deg); translate: 0 calc(clamp(0, var(--swipe-now), 1) * -3px); transition: rotate .15s ease-out, translate .15s ease-out; } .p-browR { transform-origin: 122px 48px; rotate: calc(var(--swipe-now) * 16deg); translate: 0 calc(clamp(0, var(--swipe-now), 1) * -3px); transition: rotate .15s ease-out, translate .15s ease-out; } .p-lid { transform-origin: 0 56px; transform: scaleY(0); animation: p-blink 5.5s infinite; } .p-jaw { transform-origin: 100px 98px; transition: translate .15s ease; } /* Zen keeps its eyes half closed. */ [data-mode="zen"] .parrot .p-lid { animation-name: p-blinkCalm; transform: scaleY(.42); } /* ----------------------------------------------------------------- moods -- */ .parrot[data-mood="happy"] .p-eyes { opacity: 0; } .parrot[data-mood="happy"] .p-joy { opacity: 1; } .parrot[data-mood="happy"] .p-jaw { translate: 0 6px; } .parrot[data-mood="happy"] .p-browL, .parrot[data-mood="happy"] .p-browR { translate: 0 -5px; } .parrot[data-mood="happy"] .p-hop { animation: p-jump .6s cubic-bezier(.3, .7, .4, 1); } .parrot[data-mood="happy"] .p-wingL { rotate: 60deg; } .parrot[data-mood="happy"] .p-wingR { rotate: -60deg; } .parrot[data-mood="happy"] .p-blush { opacity: .6; } .parrot[data-mood="sad"] .p-browL { rotate: -20deg; translate: 0 2px; } .parrot[data-mood="sad"] .p-browR { rotate: 20deg; translate: 0 2px; } .parrot[data-mood="sad"] .p-pupil { translate: 0 3px; } .parrot[data-mood="sad"] .p-lid { animation: none; transform: scaleY(.35); } .parrot[data-mood="sad"] .p-tear { opacity: 1; animation: p-tearFall 1.1s ease-in both; } .parrot[data-mood="sad"] .p-headMood { transform: rotate(-8deg) translateY(4px); } .parrot[data-mood="sad"] .p-hop { animation: p-droop 1s ease-out; } .parrot[data-mood="sad"] .p-crest { animation: none; transform: rotate(-18deg); } /* The sad one on a card back is still. */ .card__mascot .parrot[data-mood="sad"] .p-tear { animation: none; } .card__mascot .parrot[data-mood="sad"] .p-hop { animation: none; } /* ------------------------------------------------------------- keyframes -- */ @keyframes p-breathe { 50% { transform: scale(1.02, .98); } } @keyframes p-sway { to { transform: rotate(7deg); } } @keyframes p-blink { 0%, 92%, 100% { transform: scaleY(0); } 95% { transform: scaleY(1); } } @keyframes p-blinkCalm { 0%, 90%, 100% { transform: scaleY(.42); } 94% { transform: scaleY(1); } } @keyframes p-jump { 0% { transform: none; } 30% { transform: translateY(-22px) scale(1.04, .97); } 60% { transform: translateY(0) scale(1.06, .92); } 80% { transform: scale(.98, 1.02); } } @keyframes p-droop { 0% { transform: none; } 40% { transform: translateY(5px) scale(1.03, .94); } 100% { transform: none; } } @keyframes p-tearFall { from { transform: translateY(0); } to { transform: translateY(14px); } } @keyframes p-tick { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .parrot * { animation: none !important; transition: none !important; } .p-rig, .p-head, .p-wingL, .p-wingR, .p-pupil { rotate: none; translate: none; } }