/* apadrinhar.html: the Christmas tree of the 50 children (js/arvore.js). Each bauble is a child. */
/* the tree fits the screen under the list's heading and toolbar */
:root { --arvore: #1d4a32; --arvore-h: clamp(460px, calc(100svh - 350px), 720px); }
@media (max-width: 639px) { :root { --arvore-h: clamp(420px, calc(100svh - 320px), 540px); } }

/* the stage: in tree mode the tree stands in the page and the grid is out of it (no empty space below the tree);
   when the baubles fly, the tree becomes a layer over the top of the grid, at the same place, so nothing jumps */
.tags-palco { position: relative; }
.tags-palco.is-arvore .tags { display: none; }
.tags-palco.is-arvore .arvore { position: relative; }
.tags-palco.is-voando .tags > li { opacity: 0; transform: translateY(12px) scale(.98); }
.tags-palco.is-voando .tags > li.is-chegou { opacity: 1; transform: none; transition: opacity 380ms ease, transform 520ms cubic-bezier(.22,1,.36,1); }
.tags-palco.is-indo .tags > li { opacity: 0; transition: opacity 260ms ease; }

.arvore { position: absolute; inset: 0 0 auto 0; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: var(--s-4); }
.arvore__caixa { position: relative; width: min(100%, calc(var(--arvore-h) * 600 / 860)); aspect-ratio: 600 / 860; }
.arvore__svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.arvore__ramo { fill: var(--arvore); stroke: var(--arvore); stroke-width: 18; stroke-linejoin: round; }
.arvore__sombra { fill: #000; opacity: .16; }
.arvore__tronco { fill: #6b4226; }
.arvore__chao { fill: #000; opacity: .12; }
.arvore__chao--tapete { opacity: .07; }
.arvore__fita { fill: none; stroke: #f2c14e; stroke-width: 4; stroke-dasharray: 2 9; stroke-linecap: round; opacity: .9; }
.arvore__luz { fill: #fff4c2; filter: drop-shadow(0 0 4px #ffe58a); }
.arvore__estrela { fill: #f2c14e; filter: drop-shadow(0 0 10px rgb(242 193 78 / .85)); transform-origin: 300px 52px; }
.arvore__brilho { opacity: .7; }
.arvore__raios { fill: #fff4c2; opacity: .35; transform-origin: 300px 54px; }
.arvore.is-viva .arvore__raios { animation: gira 26s linear infinite; }
.arvore__ver { align-self: center; }
/* the hint under the tree: scroll down for the tags (hidden once the visitor chose with the buttons) */
.arvore__dica { margin: 0; display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); font-weight: 600; font-size: var(--t-small); }
.arvore__seta { display: inline-grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--menta, #7fe3b7); color: var(--pinho, #0b3d2a); animation: seta 1.6s ease-in-out infinite; }
.arvore.is-escolhida .arvore__dica { display: none; }
@keyframes seta { 50% { transform: translateY(5px); } }
.arvore__conta { margin: 0; color: var(--muted); font-size: var(--t-small); text-align: center; max-width: 42ch; }

/* the presents under the tree: wrapping paper, a ribbon across, a lid and a bow */
.arvore__presentes { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.presente { position: absolute; padding: 0; border: 0; background: none; transform: translateX(-50%); cursor: pointer; pointer-events: auto; }
.presente__in { position: absolute; inset: 0; border-radius: 3px; background: linear-gradient(90deg, transparent 43%, var(--fita) 43% 57%, transparent 57%), var(--papel); box-shadow: inset -6px 0 0 rgb(0 0 0 / .14), 0 4px 6px -3px rgb(0 0 0 / .45); transform-origin: 50% 100%; }
.presente__tampa { position: absolute; left: -6%; right: -6%; top: 0; height: 24%; border-radius: 2px; background: linear-gradient(90deg, transparent 43%, var(--fita) 43% 57%, transparent 57%), color-mix(in oklab, var(--papel) 82%, #000); box-shadow: 0 2px 2px -1px rgb(0 0 0 / .3); }
.presente__laco { position: absolute; left: 50%; top: 0; width: 46%; height: 34%; transform: translate(-50%, -78%); }
.presente__laco::before, .presente__laco::after { content: ""; position: absolute; bottom: 0; width: 52%; height: 100%; border: 3.5px solid var(--fita); border-radius: 50% 50% 10% 50%; }
.presente__laco::before { left: 0; transform: rotate(-24deg); transform-origin: 100% 100%; }
.presente__laco::after { right: 0; transform: rotate(24deg) scaleX(-1); transform-origin: 0 100%; }
.presente::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 14px); transform: translate(-50%, 4px); padding: 6px 10px; border-radius: 8px; background: #1e1a16; color: #fff; font: 500 13px/1.25 var(--font-text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; z-index: 3; }
.presente:is(:hover, :focus-visible)::after { opacity: 1; transform: translate(-50%, 0); }
.presente:is(:hover, :focus-visible) { z-index: 20 !important; }
.presente:focus-visible { outline: none; }
.presente:focus-visible .presente__in { outline: 3px solid var(--p-action); outline-offset: 2px; }
@media (hover: hover) and (pointer: fine) { .presente:hover .presente__in { transform: translateY(-3px); transition: transform 150ms ease; } }
.presente.is-nova .presente__in { animation: cai 900ms cubic-bezier(.22,1,.36,1) both; }
.arvore.is-entrar .presente__in { animation: cai 700ms cubic-bezier(.22,1,.36,1) both; animation-delay: calc(1500ms + var(--k) * 45ms); }
.arvore.is-saindo :is(.arvore__presentes, .arvore__conta) { opacity: 0; transition: opacity 400ms ease; }

/* a bauble: a button with a cap, a hook and a shiny ball in its own colour */
.bola { position: absolute; width: 5.2%; aspect-ratio: 1; padding: 0; border: 0; background: none; transform: translate(-50%, -50%); cursor: pointer; z-index: 1; }
.bola::before { content: ""; position: absolute; inset: -40%; }
.bola__in { position: absolute; inset: 0; transform-origin: 50% -40%; transition: opacity 300ms ease, filter 300ms ease; }
.bola__fio { position: absolute; left: 50%; top: -44%; width: 1.5px; height: 34%; margin-left: -.75px; background: rgb(242 193 78 / .85); }
.bola__tampa { position: absolute; left: 50%; top: -14%; width: 36%; height: 20%; transform: translateX(-50%); border-radius: 2px 2px 1px 1px; background: linear-gradient(90deg, #a8842f, #f2d27a, #a8842f); }
.bola__corpo { position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, #fff 0 7%, color-mix(in oklab, var(--c) 55%, #fff) 14%, var(--c) 46%, color-mix(in oklab, var(--c) 58%, #000) 100%); box-shadow: 0 4px 8px -2px rgb(0 0 0 / .45); }
.bola__ok { position: absolute; inset: 22%; border-radius: 50%; display: grid; place-items: center; background: #1e1a16; color: #fff; opacity: 0; transform: scale(.4); transition: opacity 300ms ease, transform 400ms cubic-bezier(.22,1,.36,1); }
.bola__ok svg { width: 70%; height: 70%; }
.bola[data-estado="completa"] .bola__corpo { box-shadow: 0 0 0 2px #f2c14e, 0 0 16px 3px rgb(242 193 78 / .75); }
.bola[data-estado="completa"] .bola__ok { opacity: 1; transform: none; }
.bola[data-estado="metade"] .bola__corpo { box-shadow: 0 0 0 2px #fff, 0 0 0 4px #f2c14e; }
.bola.is-dim .bola__in { opacity: .22; filter: grayscale(.7); }
.bola::after { content: attr(data-tip); position: absolute; left: 50%; bottom: calc(100% + 18px); transform: translate(-50%, 4px); padding: 6px 10px; border-radius: 8px; background: #1e1a16; color: #fff; font: 500 13px/1.25 var(--font-text); white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 120ms ease, transform 120ms ease; z-index: 3; }
.bola:is(:hover, :focus-visible)::after { opacity: 1; transform: translate(-50%, 0); }
.bola:is(:hover, :focus-visible) { z-index: 3; }
.bola:focus-visible { outline: none; }
.bola:focus-visible .bola__corpo { outline: 3px solid var(--p-action); outline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .bola:hover .bola__in { animation: balanca 1100ms cubic-bezier(.22,1,.36,1); } }
.bola.is-nova .bola__in { animation: pop 900ms cubic-bezier(.22,1,.36,1); }

/* the intro: the tree grows, the baubles drop on one by one, the star and lights shine */
.arvore.is-entrar .arvore__svg { animation: cresce 800ms cubic-bezier(.22,1,.36,1) both; transform-origin: 50% 100%; }
.arvore.is-entrar .bola__in { animation: aparece 520ms cubic-bezier(.22,1,.36,1) both; animation-delay: calc(450ms + var(--i) * 22ms); }
.arvore:not([hidden]) .arvore__estrela { animation: brilha 1600ms ease-in-out 2; }
.arvore.is-viva:not([hidden]) .arvore__estrela { animation: brilha 3200ms ease-in-out infinite; }
.arvore.is-viva .arvore__luz { animation: pisca 2400ms ease-in-out var(--d) infinite; }
.arvore.is-saindo .arvore__svg, .arvore.is-saindo .arvore__ver { opacity: 0; transform: scale(.96); transition: opacity 500ms ease 120ms, transform 600ms ease; transform-origin: 50% 100%; }
.arvore.is-saindo .bola { visibility: hidden; }
.arvore.is-esperando .bola { visibility: hidden; }
.arvore.is-esperando .bola.is-chegou { visibility: visible; }

/* the flight: fixed clones of the baubles */
.voo { position: fixed; inset: 0; z-index: 30; pointer-events: none; }
.voo__bola { position: fixed; transform: none; aspect-ratio: 1; }
.voo__bola::after, .voo__bola::before { display: none; }

/* the two views */
.vista { display: inline-flex; padding: 4px; gap: 2px; border-radius: 999px; background: color-mix(in oklab, var(--ink) 7%, var(--bg)); }
.vista button { min-height: 40px; padding: 0 var(--s-4); border: 0; border-radius: 999px; background: none; color: var(--ink); font: 500 var(--t-small)/1 var(--font-text); cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.vista button[aria-pressed="true"] { background: var(--ink); color: var(--bg); }
.vista svg { width: 16px; height: 16px; }

@keyframes cresce { from { opacity: 0; transform: scale(.9) translateY(16px); } }
@keyframes aparece { from { opacity: 0; transform: translateY(-28px) scale(.4); } 70% { transform: translateY(3px) scale(1.06); } }
@keyframes brilha { 50% { filter: drop-shadow(0 0 22px rgb(242 193 78 / 1)); transform: scale(1.12); } }
@keyframes pisca { 50% { opacity: .25; } }
@keyframes balanca { 20% { transform: rotate(14deg); } 45% { transform: rotate(-9deg); } 70% { transform: rotate(4deg); } 100% { transform: rotate(0); } }
@keyframes pop { 40% { transform: scale(1.35); } }
@keyframes gira { to { transform: rotate(360deg); } }
@keyframes oscila { from { rotate: -2.6deg; } to { rotate: 2.6deg; } }
@keyframes neva { from { transform: translate(0, 0); opacity: 0; } 10% { opacity: .85; } 85% { opacity: .85; } to { transform: translate(var(--v), var(--arvore-h)); opacity: 0; } }
@keyframes reflexo { from { transform: translateX(-120%) rotate(25deg); } to { transform: translateX(220%) rotate(25deg); } }
@keyframes faisca { 0% { transform: scale(0) rotate(0); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.2) rotate(90deg); opacity: 0; } }
@keyframes explode { 0% { transform: translate(-50%, -50%) scale(.3); opacity: 0; } 30% { opacity: 1; } 100% { transform: translate(-50%, -50%) scale(1.3); opacity: 0; } }
@keyframes tampa { 30% { transform: translateY(-40%) rotate(-4deg); } 60% { transform: translateY(0); } 80% { transform: translateY(-12%); } }
@keyframes cai { from { opacity: 0; transform: translateY(-140%) rotate(-8deg); } 60% { opacity: 1; transform: translateY(6%) scaleY(.9); } 80% { transform: translateY(-4%); } }

@media (max-width: 639px) {
  .bola { width: 5.8%; }
  .bola::after { font-size: 12px; }
}
/* alive: the baubles sway on their hooks, catch the light now and then, the paid ones sparkle */
.arvore.is-viva .bola { transform-origin: 50% -40%; animation: oscila var(--o, 3s) ease-in-out var(--od, 0s) infinite alternate; }
.arvore.is-viva .bola:is(:hover, :focus-visible) { animation-play-state: paused; }
.arvore.is-saindo .bola, .arvore.is-esperando .bola { animation: none; }
.bola__corpo { overflow: hidden; }
.bola__corpo::after { content: ""; position: absolute; top: -20%; bottom: -20%; left: 0; width: 40%; background: linear-gradient(90deg, transparent, rgb(255 255 255 / .85), transparent); transform: translateX(-120%) rotate(25deg); }
.bola.is-brilho .bola__corpo::after { animation: reflexo 900ms ease-out; }
.bola__in::after { content: ""; position: absolute; right: -45%; top: -35%; width: 70%; aspect-ratio: 1; opacity: 0; pointer-events: none; background: #fff6c8; clip-path: polygon(50% 0, 60% 40%, 100% 50%, 60% 60%, 50% 100%, 40% 60%, 0 50%, 40% 40%); filter: drop-shadow(0 0 3px #ffe58a); }
.bola[data-estado="completa"].is-brilho .bola__in::after { animation: faisca 1100ms ease-out; }
/* not yet confirmed: an amber ring that breathes */
.bola.is-confirmar .bola__corpo { outline: 2px dashed #f2a516; outline-offset: 3px; }
.arvore.is-viva .bola.is-confirmar .bola__corpo { animation: respira 2.4s ease-in-out infinite; }
@keyframes respira { 50% { outline-offset: 5px; outline-color: rgb(242 165 22 / .45); } }
/* the snow over the tree */
.arvore__neve { position: absolute; inset: 0; z-index: 3; pointer-events: none; overflow: hidden; }
.arvore__neve i { position: absolute; top: -2%; left: var(--x); width: var(--s); aspect-ratio: 1; border-radius: 50%; background: #fff; box-shadow: 0 0 4px rgb(255 255 255 / .8); opacity: 0; }
.arvore.is-viva .arvore__neve i { animation: neva var(--t) linear var(--d) infinite; }
/* presents: the lid hops under the pointer, a new one lands with a burst of sparkles */
@media (hover: hover) and (pointer: fine) { .presente:hover .presente__tampa { animation: tampa 600ms cubic-bezier(.22,1,.36,1); } }
.presente.is-nova::before { content: ""; position: absolute; left: 50%; top: 20%; width: 260%; aspect-ratio: 1; pointer-events: none; background: repeating-conic-gradient(rgb(242 193 78 / .95) 0 5deg, transparent 5deg 30deg); -webkit-mask: radial-gradient(circle, transparent 28%, #000 30% 48%, transparent 50%); mask: radial-gradient(circle, transparent 28%, #000 30% 48%, transparent 50%); opacity: 0; animation: explode 800ms ease-out 650ms both; }

/* now and then a few baubles give a good wiggle on their hooks */
.bola.is-abana .bola__in { animation: abana 950ms cubic-bezier(.3,1.4,.5,1); }
@keyframes abana { 12% { transform: rotate(-20deg) scale(1.08); } 30% { transform: rotate(16deg); } 48% { transform: rotate(-10deg) scale(1.04); } 66% { transform: rotate(6deg); } 82% { transform: rotate(-3deg); } }

/* the bauble alarm: every bauble shakes, the lights blink fast, the star flares */
.arvore.is-alarme .bola__in { animation: alarme 120ms linear calc(var(--i) * -13ms) infinite; }
.arvore.is-alarme .arvore__luz { animation: pisca 240ms linear var(--d) infinite; }
.arvore.is-alarme .arvore__estrela { animation: brilha 300ms ease-in-out infinite; }
@keyframes alarme { 25% { transform: rotate(-16deg) translateX(-6%); } 75% { transform: rotate(16deg) translateX(6%); } }

/* the present he grabs lifts towards him; dropped, it falls back with a bounce */
.presente { --para: 1; }
.presente.is-roubado .presente__in { animation: roubado 800ms cubic-bezier(.22,1,.36,1) forwards; }
.presente.is-larga .presente__in { animation: larga 800ms cubic-bezier(.22,1,.36,1); }
@keyframes roubado { 35% { transform: translate(calc(var(--para) * 6%), -46%) rotate(calc(var(--para) * -12deg)); } 60% { transform: translate(calc(var(--para) * 12%), -36%) rotate(calc(var(--para) * -4deg)); } 80% { transform: translate(calc(var(--para) * 10%), -40%) rotate(calc(var(--para) * -8deg)); } to { transform: translate(calc(var(--para) * 12%), -38%) rotate(calc(var(--para) * -6deg)); } }
@keyframes larga { from { transform: translate(calc(var(--para) * 12%), -38%) rotate(calc(var(--para) * -6deg)); } 45% { transform: translateY(5%) scaleY(.86); } 65% { transform: translateY(-12%) rotate(calc(var(--para) * 3deg)); } 82% { transform: translateY(2%) scaleY(.96); } }

/* o Ranzinza (js/ranzinza.js): a grumpy green fellow who tries to steal the presents */
.ranzinza-palco { position: absolute; inset: 0; z-index: 2; overflow: hidden; pointer-events: none; }
.arvore:is(.is-saindo, .is-esperando) .ranzinza-palco { display: none; }
.ranzinza { position: absolute; left: -12%; top: 84%; height: 15%; aspect-ratio: 100 / 130; transform: translate(-50%, -100%); pointer-events: auto; cursor: pointer; }
.ranzinza[hidden] { display: none; }
.rz-vira, .rz-salto { position: absolute; inset: 0; }
.rz-vira { transition: transform 160ms ease; }
.ranzinza.is-vira .rz-vira { transform: scaleX(-1); }
.rz-salto { transform-origin: 50% 100%; transition: transform 260ms cubic-bezier(.22,1,.36,1); }
.rz-salto svg { display: block; width: 100%; height: 100%; overflow: visible; filter: drop-shadow(0 4px 3px rgb(0 0 0 / .22)); }
.ranzinza svg g, .ranzinza svg ellipse, .ranzinza svg path { transition: transform 220ms cubic-bezier(.22,1,.36,1), opacity 160ms ease; }
.rz-braco { transform-origin: 66px 70px; }
.rz-braco-tras { transform-origin: 36px 70px; }
.rz-perna--a { transform-origin: 44px 98px; }
.rz-perna--b { transform-origin: 58px 98px; }
.rz-cabelo { transform-origin: 54px 18px; }
.rz-cabeca { transform-origin: 52px 56px; }
.rz-boca-o { opacity: 0; }
/* the speech bubble: not flipped, above his head */
.rz-balao { position: absolute; left: 50%; bottom: 102%; padding: 3px 9px 4px; border-radius: 12px; background: #fff; color: #1e1a16; font: 800 clamp(12px, 1.5vw, 15px)/1.15 var(--font-display, system-ui); white-space: nowrap; box-shadow: 0 3px 8px -2px rgb(0 0 0 / .3); opacity: 0; transform: translate(-50%, 6px) scale(.6); transition: opacity 140ms ease, transform 260ms cubic-bezier(.3,1.6,.5,1); pointer-events: none; }
.rz-balao::after { content: ""; position: absolute; left: 50%; top: 100%; margin-left: -5px; border: 5px solid transparent; border-top-color: #fff; }
.rz-balao.is-on { opacity: 1; transform: translate(-50%, 0) scale(1); }
/* the dust behind his heels when he runs */
.rz-poeira { position: absolute; left: -6%; bottom: -2%; width: 40%; height: 18%; }
.rz-poeira i { position: absolute; bottom: 0; width: 40%; aspect-ratio: 1; border-radius: 50%; background: rgb(255 255 255 / .85); opacity: 0; }
.rz-poeira i:nth-child(2) { left: 30%; width: 30%; }
.rz-poeira i:nth-child(3) { left: 60%; width: 24%; }
.ranzinza.is-foge .rz-poeira i { animation: poeira 420ms ease-out infinite; }
.ranzinza.is-foge .rz-poeira i:nth-child(2) { animation-delay: 140ms; }
.ranzinza.is-foge .rz-poeira i:nth-child(3) { animation-delay: 280ms; }

/* tiptoeing in: big sneaky steps, eyes darting */
.ranzinza.is-anda .rz-salto { animation: pe-ante-pe 760ms ease-in-out infinite; }
.ranzinza.is-anda .rz-perna--a { animation: perna 760ms ease-in-out infinite; }
.ranzinza.is-anda .rz-perna--b { animation: perna 760ms ease-in-out -380ms infinite; }
.ranzinza.is-anda .rz-braco { transform: rotate(-24deg); }
.ranzinza.is-espreita .rz-olhos { animation: olha 1100ms steps(1) infinite; }
/* the grab: the arm reaches out, a wicked grin */
.ranzinza.is-agarra .rz-braco { transform: rotate(-82deg); }
.ranzinza.is-agarra .rz-salto { transform: rotate(7deg); }
.ranzinza.is-contente .rz-sobrancelha { transform: translateY(-2px); }
.ranzinza.is-contente .rz-olhos { transform: translate(1.5px, 1px); }
/* the alarm: out of his fur */
.ranzinza.is-susto .rz-salto { animation: susto 650ms cubic-bezier(.3,.9,.4,1) both; }
.ranzinza.is-susto .rz-cabelo { transform: scale(1.3, 2); }
.ranzinza:is(.is-susto, .is-escorrega) .rz-palpebras { opacity: 0; }
.ranzinza:is(.is-susto, .is-escorrega) .rz-boca { opacity: 0; }
.ranzinza:is(.is-susto, .is-escorrega) .rz-boca-o { opacity: 1; }
.ranzinza:is(.is-susto, .is-escorrega) .rz-sobrancelha { transform: translateY(-4px); }
.ranzinza.is-susto .rz-braco { transform: rotate(-160deg); }
.ranzinza.is-susto .rz-braco-tras { transform: rotate(150deg); }
.ranzinza.is-susto .rz-perna--a { transform: rotate(-24deg); }
.ranzinza.is-susto .rz-perna--b { transform: rotate(24deg); }
/* the slip on the snow: feet up, on his bum */
.ranzinza.is-escorrega .rz-salto { animation: escorrega 1050ms cubic-bezier(.3,.8,.4,1) forwards; }
.ranzinza.is-escorrega .rz-perna--a { transform: rotate(-80deg); }
.ranzinza.is-escorrega .rz-perna--b { transform: rotate(-62deg); }
.ranzinza.is-escorrega .rz-braco { transform: rotate(-120deg); }
.ranzinza.is-escorrega .rz-braco-tras { transform: rotate(110deg); }
/* back up, shaking his fist */
.ranzinza.is-zangado .rz-braco { animation: punho 200ms ease-in-out infinite alternate; }
.ranzinza.is-zangado .rz-salto { animation: bate-pe 400ms ease-in-out infinite alternate; }
.ranzinza.is-zangado .rz-sobrancelha { transform: translateY(3px); }
.ranzinza.is-zangado .rz-palpebras { transform: translateY(2.5px); }
.ranzinza.is-zangado .rz-boca { transform: scaleY(-1); transform-origin: 55px 48px; }
/* and off he runs */
.ranzinza.is-foge .rz-salto { animation: corre 300ms ease-in-out infinite; }
.ranzinza.is-foge .rz-perna--a { animation: perna 300ms linear infinite; }
.ranzinza.is-foge .rz-perna--b { animation: perna 300ms linear -150ms infinite; }
.ranzinza.is-foge .rz-braco { animation: braco 300ms linear infinite; }
.ranzinza.is-foge .rz-cabelo { transform: scale(1.2, 1.6) rotate(-14deg); }
/* no presents yet: a peek under the tree, a shrug, a slouch */
.ranzinza.is-espia .rz-salto { transform: rotate(18deg) translateX(6%); }
.ranzinza.is-espia .rz-olhos { animation: olha 800ms steps(1) infinite; }
.ranzinza.is-encolhe .rz-braco { transform: rotate(-138deg); }
.ranzinza.is-encolhe .rz-braco-tras { transform: rotate(130deg); }
.ranzinza.is-encolhe .rz-salto { animation: encolhe 1400ms ease-in-out; }
.ranzinza.is-encolhe .rz-palpebras { transform: translateY(2px); }
.ranzinza.is-triste .rz-salto { animation: pe-ante-pe 1000ms ease-in-out infinite; }
.ranzinza.is-triste .rz-cabeca { transform: rotate(10deg) translateY(2px); }
.ranzinza.is-triste .rz-olhos { transform: translateY(2px); }
.ranzinza.is-triste .rz-palpebras { transform: translateY(2px); }

@keyframes pe-ante-pe { 0%, 100% { transform: translateY(0) rotate(-3deg); } 50% { transform: translateY(-9%) rotate(3deg); } }
@keyframes perna { 0%, 100% { transform: rotate(-26deg); } 50% { transform: rotate(26deg); } }
@keyframes braco { 0%, 100% { transform: rotate(-70deg); } 50% { transform: rotate(30deg); } }
@keyframes olha { 0% { transform: translateX(-2.5px); } 50% { transform: translateX(2.5px); } }
@keyframes susto { 0% { transform: scale(1.12, .84); } 35% { transform: translateY(-58%) scale(.88, 1.16); } 62% { transform: translateY(-50%) scale(.96, 1.04); } 100% { transform: translateY(0) scale(1.1, .9); } }
@keyframes escorrega { 0% { transform: none; } 20% { transform: translate(10%, -6%) rotate(-14deg); } 42% { transform: translate(16%, -22%) rotate(-38deg); } 64% { transform: translate(14%, 16%) rotate(-30deg) scale(1.06, .9); } 78% { transform: translate(14%, 9%) rotate(-26deg); } 100% { transform: translate(14%, 13%) rotate(-28deg); } }
@keyframes punho { from { transform: rotate(-156deg); } to { transform: rotate(-128deg); } }
@keyframes bate-pe { from { transform: translateY(0) scaleY(1); } to { transform: translateY(-3%) scaleY(1.03); } }
@keyframes corre { 0%, 100% { transform: translateY(0) rotate(12deg); } 50% { transform: translateY(-8%) rotate(14deg); } }
@keyframes encolhe { 30%, 60% { transform: translateY(-5%); } }
@keyframes poeira { 0% { opacity: .9; transform: translate(0, 0) scale(.4); } 100% { opacity: 0; transform: translate(-60%, -40%) scale(1.3); } }

@media (prefers-reduced-motion: reduce) {
  .arvore *, .arvore, .arvore *::before, .arvore *::after { animation: none !important; transition: none !important; }
  .arvore__neve, .arvore__raios, .ranzinza-palco { display: none; }
}