/*
 * Motor Claude — tema Jardim de Papel (skin jardim). Usa a peça do Castelo de Papel
 * (castelo.css e castelo.js, prefixo ct); aqui ficam só as diferenças do jardim:
 * letras, cores do lacre, o ramo da capa e as borboletas de papel batendo as asas.
 */
@font-face{font-family:"Allura";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/allura-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Great Vibes";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/great-vibes-latin-400-normal.woff2") format("woff2")}
@font-face{font-family:"Marcellus";font-style:normal;font-weight:400;font-display:swap;src:url("../fonts/marcellus-latin-400-normal.woff2") format("woff2")}

body.sg-engine-claude_v1:has(.ct-root[data-ct-kind="jardim"]){--ct-script:"Allura","Pinyon Script",cursive;--ct-title:"Marcellus","EB Garamond",serif}
body.sg-engine-claude_v1:has(.ct-root[data-ct-kind="jardim"][data-ct-font="romantica"]){--ct-script:"Great Vibes","Pinyon Script",cursive}
body.sg-engine-claude_v1:has(.ct-root[data-ct-kind="jardim"][data-ct-font="classica"]){--ct-script:"Pinyon Script","Allura",cursive}
/* Allura é mais fina que a Imperial Script: o nome fica um pouco maior. */
body.sg-engine-claude_v1 .ct-root[data-ct-kind="jardim"] .ct-name{font-size:calc(var(--ct-zw,300px) * .23)!important}
.ct-root[data-ct-kind="jardim"][data-ct-paper="lavanda"]{--ct-wax:#5E4A86}
.ct-root[data-ct-kind="jardim"][data-ct-paper="noite"]{--ct-wax:#B8903F}
/* Ramo de folhas em folha metálica no alto da capa (no lugar da tiara do castelo). */
.ct-root[data-ct-kind="jardim"] .ct-crown{width:calc(var(--ct-cw) * .3);top:24%}

/* ---------------- Borboletas de papel ---------------- */
/* Cada uma no fim de um fio (posição gravada com a imagem), com as asas batendo devagar
   (quadros renderizados, ida e volta) e um balanço leve no fio. */
.ct-flies{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity 1s ease .5s}
.ct-root.is-opened .ct-flies{opacity:1}
.ct-fly{position:absolute;width:var(--ct-fw);aspect-ratio:1;translate:-50% -50%;transform-origin:50% -60%;
  background:var(--ct-fly) 0 0/800% 100% no-repeat;filter:brightness(1.3) saturate(1.1) drop-shadow(0 6px 5px rgba(10,20,15,.28));
  animation:ct-flap var(--ct-fd,1.8s) steps(7) var(--ct-fo,0s) infinite alternate,ct-sway 6s ease-in-out var(--ct-fo,0s) infinite}
@keyframes ct-flap{from{background-position:0 0}to{background-position:100% 0}}
@keyframes ct-sway{0%,100%{transform:rotate(-3deg)}50%{transform:rotate(3deg)}}
@media (prefers-reduced-motion:reduce){.ct-fly{animation:none}}