.animation-hero[data-v-715ec277]{--animation-state:paused;background:linear-gradient(135deg,rgba(var(--color-bg-secondary),.8),rgba(var(--color-bg-primary),.75)),radial-gradient(circle at 12% 18%,rgba(var(--color-primary),.12),transparent 30%),radial-gradient(circle at 86% 16%,rgba(var(--color-accent),.12),transparent 32%),rgba(var(--color-bg-secondary),.5);border:1px solid rgba(var(--panel-border),.28);border-radius:1rem;box-shadow:0 24px 80px #0003,inset 0 1px rgba(var(--panel-border),.35);display:flex;flex-direction:column;gap:2rem;isolation:isolate;margin:0 auto 5rem;max-width:1100px;overflow:hidden;padding:4rem 3rem;position:relative;text-align:center}.animation-hero[data-v-715ec277]>*{position:relative;z-index:1}.animation-hero.is-visible[data-v-715ec277]{--animation-state:running}@media(max-width:768px){.animation-hero[data-v-715ec277]{gap:1.5rem;margin-bottom:4rem;padding:3rem 1.5rem}}@media(max-width:480px){.animation-hero[data-v-715ec277]{margin-bottom:3rem;padding:2rem 1rem}}@media(max-width:400px){.animation-hero[data-v-715ec277]{padding:1.5rem .5rem}}.animation-hero[data-v-715ec277]:after,.animation-hero[data-v-715ec277]:before{content:"";inset:0;pointer-events:none;position:absolute}.animation-hero[data-v-715ec277]:before{background:radial-gradient(circle at 64% 90%,rgba(var(--color-accent),.12),transparent 38%);opacity:.9}.animation-hero[data-v-715ec277]:after{background:linear-gradient(120deg,rgba(var(--color-primary),.08),transparent 32%,rgba(var(--color-accent),.12) 68%,transparent 100%);opacity:.8}.animation-hero__eyebrow[data-v-715ec277]{align-items:center;background:linear-gradient(135deg,rgba(var(--color-primary),.12),rgba(var(--color-accent),.08));border:1px solid rgba(var(--color-primary),.2);border-radius:9999px;box-shadow:0 2px 16px rgba(var(--color-primary),.1);color:rgb(var(--color-primary));display:inline-flex;font-size:.75rem;font-weight:600;justify-content:center;letter-spacing:.08em;margin:0 auto;overflow:hidden;padding:.5rem 2rem;position:relative;text-transform:uppercase}.animation-hero__eyebrow[data-v-715ec277]:after{background:linear-gradient(90deg,transparent,rgba(var(--color-primary),.25),transparent);content:"";inset:0;opacity:0;position:absolute;transition:opacity .2s ease-in-out}.animation-hero__eyebrow[data-v-715ec277]:hover:after{opacity:1}.animation-hero__orbits[data-v-715ec277]{inset:-20% -12%;pointer-events:none;position:absolute;z-index:0}.animation-hero__sun[data-v-715ec277]{background:radial-gradient(circle at 30% 30%,#fdb813,#ff6b08);border-radius:50%;box-shadow:0 0 20px #fdb813cc,0 0 40px #fdb81366,inset 0 0 10px #ff6b0899;height:24px;width:24px;z-index:2}.animation-hero__ring[data-v-715ec277],.animation-hero__sun[data-v-715ec277]{left:50%;position:absolute;top:50%;transform:translate(-50%,-50%)}.animation-hero__ring[data-v-715ec277]{animation-play-state:var(--animation-state);border:1px solid rgba(var(--color-primary),.18);border-radius:50%;opacity:.7}.animation-hero__ring_mercury[data-v-715ec277]{height:80px;width:80px}.animation-hero__ring_venus[data-v-715ec277]{height:120px;width:120px}.animation-hero__ring_earth[data-v-715ec277]{height:170px;width:170px}.animation-hero__ring_mars[data-v-715ec277]{height:220px;width:220px}.animation-hero__ring_jupiter[data-v-715ec277]{height:300px;width:300px}.animation-hero__ring_saturn[data-v-715ec277]{height:380px;width:380px}.animation-hero__ring_uranus[data-v-715ec277]{height:460px;width:460px}.animation-hero__ring_neptune[data-v-715ec277]{height:540px;width:540px}.animation-hero__planet[data-v-715ec277]{animation-play-state:var(--animation-state);border-radius:50%;left:50%;position:absolute;top:50%;z-index:1}.animation-hero__planet_mercury[data-v-715ec277]{animation:orbit-mercury-715ec277 8s linear infinite;background:radial-gradient(circle at 35% 35%,#a89a8e,#6b5d53);box-shadow:0 0 8px #a89b8f99;height:6px;width:6px}.animation-hero__planet_venus[data-v-715ec277]{animation:orbit-venus-715ec277 12s linear infinite;background:radial-gradient(circle at 35% 35%,#ffc649,#e8a825);box-shadow:0 0 12px #ffc649b3;height:9px;width:9px}.animation-hero__planet_earth[data-v-715ec277]{animation:orbit-earth-715ec277 16s linear infinite;background:radial-gradient(circle at 35% 35%,#4a90e2,#2e5c8a);box-shadow:0 0 14px #4a90e2cc,0 0 4px #ffffff4d;height:10px;width:10px}.animation-hero__planet_mars[data-v-715ec277]{animation:orbit-mars-715ec277 20s linear infinite;background:radial-gradient(circle at 35% 35%,#e27b58,#b85835);box-shadow:0 0 10px #e27b58b3;height:7px;width:7px}.animation-hero__planet_jupiter[data-v-715ec277]{animation:orbit-jupiter-715ec277 28s linear infinite;background:radial-gradient(circle at 35% 35%,#d4a574,#c88b3a);box-shadow:0 0 20px #c88b3ab3;height:18px;width:18px}.animation-hero__planet_saturn[data-v-715ec277]{animation:orbit-saturn-715ec277 36s linear infinite;background:radial-gradient(circle at 35% 35%,#fad5a5,#e8ba7a);box-shadow:0 0 18px #fad4a3b3,0 0 25px #fad4a34d;height:16px;width:16px}.animation-hero__planet_uranus[data-v-715ec277]{animation:orbit-uranus-715ec277 44s linear infinite;background:radial-gradient(circle at 35% 35%,#4fd0e7,#3aa8be);box-shadow:0 0 16px #4fd0e7b3;height:12px;width:12px}.animation-hero__planet_neptune[data-v-715ec277]{animation:orbit-neptune-715ec277 52s linear infinite;background:radial-gradient(circle at 35% 35%,#4166f5,#2943b8);box-shadow:0 0 16px #4166f5b3;height:12px;width:12px}.animation-hero__title[data-v-715ec277]{background:linear-gradient(180deg,rgb(var(--color-text-primary)) 0,rgba(var(--color-text-primary),.8));-webkit-background-clip:text;font-size:clamp(1.875rem,6vw,58px);font-weight:700;letter-spacing:-.025em;line-height:1.05;margin:0;-webkit-text-fill-color:transparent;background-clip:text}@media(max-width:768px){.animation-hero__title[data-v-715ec277]{font-size:1.875rem;line-height:1.1}}.animation-hero__subtitle[data-v-715ec277]{color:rgba(var(--color-text-secondary),.92);font-size:1.125rem;line-height:1.8;margin:0 auto;max-width:760px;text-wrap:balance}@media(max-width:768px){.animation-hero__subtitle[data-v-715ec277]{font-size:1rem;line-height:1.7}}.animation-hero__meta[data-v-715ec277]{display:flex;flex-wrap:wrap;gap:.5rem;justify-content:center;margin:-.5rem auto 0}.animation-hero__chip[data-v-715ec277]{align-items:center;background:rgba(var(--color-bg-primary),.6);border:1px solid rgba(var(--color-primary),.22);border-radius:9999px;box-shadow:0 2px 12px rgba(var(--color-primary),.14);color:rgb(var(--color-text-primary));display:inline-flex;font-size:.75rem;gap:.25rem;letter-spacing:.01em;padding:.5rem 1rem}.animation-hero__actions[data-v-715ec277]{align-items:center;display:flex;flex-wrap:wrap;gap:1.5rem;justify-content:center;margin-top:1rem}@media(max-width:480px){.animation-hero__actions[data-v-715ec277]{align-items:stretch;flex-direction:column;gap:1rem}}.animation-hero__back-link[data-v-715ec277]{background:rgba(var(--color-bg-primary),.08);border:1px solid rgba(var(--color-border),.6);border-radius:9999px;box-shadow:inset 0 1px rgba(var(--color-border),.25);color:rgb(var(--color-text-primary));font-size:.875rem;font-weight:500;padding:.5rem 1rem;text-decoration:none;transition:border-color .2s ease-in-out,transform .2s ease-in-out,box-shadow .2s ease-in-out;white-space:nowrap}.animation-hero__back-link[data-v-715ec277]:hover{border-color:rgba(var(--color-primary),.5);box-shadow:inset 0 1px rgba(var(--color-border),.25),0 4px 12px #0000001a;transform:translateY(-1px)}.animation-hero__back-link[data-v-715ec277]:active{transform:translateY(0)}.animation-hero__link[data-v-715ec277]{align-items:center;background:linear-gradient(145deg,rgba(var(--color-bg-secondary),.82),rgba(var(--color-bg-secondary),.64));border:1px solid rgba(var(--panel-border),.35);border-radius:9999px;color:rgb(var(--color-text-primary));display:inline-flex;font-size:.875rem;font-weight:500;gap:.5rem;padding:1rem 2rem;text-decoration:none;transition:border-color .2s ease-in-out,background-color .2s ease-in-out,color .2s ease-in-out,transform .2s ease-in-out,box-shadow .2s ease-in-out}.animation-hero__link[data-v-715ec277]:hover{background:rgba(var(--color-primary),.12);border-color:rgba(var(--color-primary),.5);box-shadow:0 8px 24px rgba(var(--color-primary),.15),0 0 0 1px rgba(var(--color-primary),.08);color:rgb(var(--color-primary));transform:translateY(-2px)}.animation-hero__link[data-v-715ec277]:active{transform:translateY(0)}@keyframes orbit-mercury-715ec277{0%{transform:translate(-50%,-50%) rotate(0) translate(40px) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn) translate(40px) rotate(-1turn)}}@keyframes orbit-venus-715ec277{0%{transform:translate(-50%,-50%) rotate(0) translate(60px) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn) translate(60px) rotate(-1turn)}}@keyframes orbit-earth-715ec277{0%{transform:translate(-50%,-50%) rotate(0) translate(85px) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn) translate(85px) rotate(-1turn)}}@keyframes orbit-mars-715ec277{0%{transform:translate(-50%,-50%) rotate(0) translate(110px) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn) translate(110px) rotate(-1turn)}}@keyframes orbit-jupiter-715ec277{0%{transform:translate(-50%,-50%) rotate(0) translate(150px) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn) translate(150px) rotate(-1turn)}}@keyframes orbit-saturn-715ec277{0%{transform:translate(-50%,-50%) rotate(0) translate(190px) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn) translate(190px) rotate(-1turn)}}@keyframes orbit-uranus-715ec277{0%{transform:translate(-50%,-50%) rotate(0) translate(230px) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn) translate(230px) rotate(-1turn)}}@keyframes orbit-neptune-715ec277{0%{transform:translate(-50%,-50%) rotate(0) translate(270px) rotate(0)}to{transform:translate(-50%,-50%) rotate(1turn) translate(270px) rotate(-1turn)}}@media(prefers-reduced-motion:reduce){.animation-hero__planet[data-v-715ec277]{animation:none!important}}.animation-builder[data-v-6b1f7af3]{display:flex;flex-direction:column;gap:4rem;width:100%}@media(max-width:768px){.animation-builder[data-v-6b1f7af3]{gap:3rem}}.animation-builder__header[data-v-6b1f7af3]{margin:0 auto;max-width:900px;text-align:center;width:100%}.animation-builder__container[data-v-6b1f7af3]{background:rgba(var(--color-bg-secondary),.5);border:1px solid rgba(var(--panel-border),.25);border-radius:1rem;box-shadow:0 8px 32px #0000001a;padding:3rem;width:100%}@media(max-width:768px){.animation-builder__container[data-v-6b1f7af3]{padding:2rem}}@media(max-width:640px){.animation-builder__container[data-v-6b1f7af3]{padding:1.5rem}}@media(max-width:400px){.animation-builder__container[data-v-6b1f7af3]{padding:1rem}}.animation-builder__content[data-v-6b1f7af3]{align-items:start;display:grid;gap:3rem;grid-template-columns:380px 1fr}@media(max-width:1024px){.animation-builder__content[data-v-6b1f7af3]{gap:2rem;grid-template-columns:1fr}}.animation-builder__controls-section[data-v-6b1f7af3]{display:flex;flex-direction:column;gap:1.5rem}.animation-builder__right[data-v-6b1f7af3]{display:flex;flex-direction:column;gap:3rem;overflow:hidden}@media(max-width:768px){.animation-builder__right[data-v-6b1f7af3]{gap:2rem}}.animation-builder__code-section[data-v-6b1f7af3],.animation-builder__preview-section[data-v-6b1f7af3]{display:flex;flex-direction:column;gap:1.5rem}.animation-builder__preview-actions[data-v-6b1f7af3]{display:flex;gap:.5rem;justify-content:flex-end;margin-top:.5rem}.animation-builder__play-button[data-v-6b1f7af3]{background:linear-gradient(135deg,rgb(var(--color-primary)),rgb(var(--color-accent)))!important;border:none!important;border-radius:9999px;color:#fff!important;font-size:.75rem;font-weight:600;outline:none;padding:.25rem 1.5rem;transition:transform .2s ease,box-shadow .2s ease}.animation-builder__play-button[data-v-6b1f7af3]:hover:not(:disabled){background:linear-gradient(135deg,rgb(var(--color-primary-hover)),rgb(var(--color-accent)))!important;box-shadow:0 4px 12px #00000026;transform:translateY(-1px)}.animation-builder__play-button[data-v-6b1f7af3]:active:not(:disabled){transform:translateY(0)}.animation-builder__play-button[data-v-6b1f7af3]:focus-visible{outline:2px solid rgb(var(--color-primary));outline-offset:2px}.animation-builder__section-label[data-v-6b1f7af3]{color:rgba(var(--color-text-secondary),.7);font-size:.875rem;margin:0}.animation-builder__section-label[data-v-6b1f7af3],.animation-builder__tag[data-v-6b1f7af3]{font-weight:600;letter-spacing:.08em;text-transform:uppercase}.animation-builder__tag[data-v-6b1f7af3]{align-items:center;background:linear-gradient(135deg,rgba(var(--color-accent),.12),rgba(var(--color-primary),.08));border:1px solid rgba(var(--color-accent),.2);border-radius:9999px;box-shadow:0 2px 12px rgba(var(--color-accent),.08);color:rgb(var(--color-accent));display:inline-flex;font-size:.75rem;gap:.25rem;padding:.25rem 1rem;width:-moz-fit-content;width:fit-content}.animation-builder__title[data-v-6b1f7af3]{font-size:1.5rem;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:20px 0 0}.animation-builder__subtitle[data-v-6b1f7af3]{color:rgba(var(--color-text-secondary),.85);font-size:.875rem;line-height:1.65;margin:20px auto 0;max-width:720px}.animation-builder__community[data-v-6b1f7af3]{background:rgba(var(--color-bg-secondary),.35);border:1px dashed rgba(var(--color-primary),.4);border-radius:.75rem;display:flex;flex-direction:column;gap:.5rem;padding:1.5rem}.animation-builder__community-list[data-v-6b1f7af3]{display:flex;flex-wrap:wrap;gap:.5rem}.animation-builder__community-chip[data-v-6b1f7af3]{background:rgba(var(--color-primary),.12);border:1px solid rgba(var(--color-primary),.3);border-radius:9999px;color:rgb(var(--color-text-primary));cursor:pointer;padding:.25rem 1rem;transition:background-color .2s ease}.animation-builder__community-chip[data-v-6b1f7af3]:hover{background:rgba(var(--color-primary),.2)}.animation-builder__community-empty[data-v-6b1f7af3]{color:rgba(var(--color-text-secondary),.75);font-size:.875rem}.animation-builder__controls[data-v-6b1f7af3]{display:flex;flex-direction:column;gap:1rem}.animation-builder__code[data-v-6b1f7af3]{background:rgba(var(--color-bg-primary),.5);border:1px solid rgba(var(--panel-border),.2);border-radius:.75rem;box-shadow:0 4px 16px #00000014;display:flex;flex-direction:column;gap:1.5rem;padding:3rem 2rem 2rem;position:relative}.animation-builder__code pre[data-v-6b1f7af3]{color:rgb(var(--color-text-secondary));font-family:SF Mono,Monaco,Cascadia Code,Roboto Mono,Consolas,monospace;font-size:.875rem;line-height:1.7;margin:0;max-height:350px;overflow-x:auto;overflow-y:auto;padding-right:.5rem;white-space:pre}.animation-builder__code pre[data-v-6b1f7af3]::-webkit-scrollbar{height:6px;width:6px}.animation-builder__code pre[data-v-6b1f7af3]::-webkit-scrollbar-track{background:rgba(var(--panel-border),.1);border-radius:.25rem}.animation-builder__code pre[data-v-6b1f7af3]::-webkit-scrollbar-thumb{background:rgba(var(--color-primary),.3);border-radius:.25rem}.animation-builder__code pre[data-v-6b1f7af3]::-webkit-scrollbar-thumb:hover{background:rgba(var(--color-primary),.5)}.animation-builder__code-controls[data-v-6b1f7af3]{display:flex;gap:.25rem;left:1.5rem;position:absolute;top:1.5rem}.animation-builder__code-controls span[data-v-6b1f7af3]{background:rgba(var(--panel-border),.3);border-radius:50%;height:11px;transition:background .2s ease-in-out;width:11px}.animation-builder__code-controls span[data-v-6b1f7af3]:first-child{background:rgba(var(--color-error),.7)}.animation-builder__code-controls span[data-v-6b1f7af3]:nth-child(2){background:rgba(var(--color-warning),.7)}.animation-builder__code-controls span[data-v-6b1f7af3]:nth-child(3){background:rgba(var(--color-success),.7)}.animation-builder__code-toolbar[data-v-6b1f7af3]{align-items:center;display:flex;gap:1rem;justify-content:flex-end;margin-top:.25rem}.animation-builder__code-mode[data-v-6b1f7af3]{color:rgba(var(--color-text-secondary),.7);font-size:.75rem;letter-spacing:.08em;text-transform:uppercase}.animation-builder__toggle[data-v-6b1f7af3]{align-items:center;background:rgba(var(--panel-border),.14);border-radius:9999px;display:inline-flex;gap:2px;padding:4px}.animation-builder__toggle-button[data-v-6b1f7af3]{background:transparent;border:none;border-radius:9999px;color:rgb(var(--color-text-secondary));cursor:pointer;font-size:.875rem;font-weight:600;padding:6px 12px;transition:background .2s ease-in-out,color .2s ease-in-out}.animation-builder__toggle-button.animation-builder__toggle-button_active[data-v-6b1f7af3]{background:rgba(var(--color-primary),.18);box-shadow:0 4px 16px rgba(var(--color-primary),.15);color:rgb(var(--color-text-primary))}.animation-builder__toggle-button[data-v-6b1f7af3]:hover{color:rgb(var(--color-text-primary))}.animation-builder__code-actions[data-v-6b1f7af3]{display:flex;flex-wrap:wrap;gap:1rem;justify-content:flex-end}@media(max-width:768px){.animation-builder__code-actions[data-v-6b1f7af3]{gap:.5rem}}.animation-export[data-v-6b1f7af3]{display:flex;flex-direction:column;gap:1rem}.animation-export__toolbar[data-v-6b1f7af3]{align-items:center;display:flex;flex-wrap:wrap;gap:1rem}.animation-export__actions[data-v-6b1f7af3]{display:flex;gap:.5rem;margin-left:auto}.animation-export__code[data-v-6b1f7af3]{background:rgb(var(--color-bg-secondary));border:1px solid rgba(var(--panel-border),.25);border-radius:.5rem;max-height:min(360px,55vh);overflow:auto;overscroll-behavior:contain;padding:1rem;touch-action:pan-y}.animation-export__code[data-v-6b1f7af3],.animation-export__code .code-block[data-v-6b1f7af3]{-webkit-overflow-scrolling:touch}.motion-preview[data-v-6b1f7af3]{background:radial-gradient(circle at 30% 30%,rgba(var(--color-primary),.08),transparent 60%),rgba(var(--color-bg-primary),.5);border:1px solid rgb(var(--color-border));border-radius:.75rem;display:grid;isolation:isolate;min-height:350px;overflow:hidden;padding:4rem;place-items:center;position:relative;width:100%}@media(max-width:768px){.motion-preview[data-v-6b1f7af3]{min-height:280px;padding:3rem}}@media(max-width:640px){.motion-preview[data-v-6b1f7af3]{min-height:240px;padding:2rem}}.motion-preview__dot[data-v-6b1f7af3]{background:rgb(var(--color-accent));border-radius:50%;box-shadow:0 0 32px rgba(var(--color-accent),.8),0 0 64px rgba(var(--color-accent),.4);height:24px;position:absolute;width:24px}.motion-preview__dot_playing[data-v-6b1f7af3]{animation-direction:normal;animation-duration:var(--motion-total-duration);animation-fill-mode:both;animation-iteration-count:var(--motion-preview-iterations);animation-name:css-zone-motion-preview;animation-timing-function:linear}.motion-preview__card[data-v-6b1f7af3]{background:linear-gradient(145deg,rgba(var(--color-bg-secondary),.9),rgba(var(--color-bg-secondary),.7));border:1px solid rgba(var(--panel-border),.3);border-radius:.75rem;box-shadow:0 8px 24px #00000026;color:rgb(var(--color-text-primary));font-size:1.125rem;font-weight:600;letter-spacing:.01em;padding:1.5rem 3rem}.motion-preview__card_playing[data-v-6b1f7af3]{animation-direction:normal;animation-duration:var(--motion-total-duration);animation-fill-mode:both;animation-iteration-count:var(--motion-preview-iterations);animation-name:css-zone-motion-preview;animation-timing-function:linear}@media(max-width:768px){.motion-preview__card[data-v-6b1f7af3]{font-size:1rem;padding:1rem 1.5rem}}@keyframes css-zone-motion-6b1f7af3{0%{opacity:var(--motion-start-opacity);transform:translate(var(--motion-start-x),var(--motion-start-y)) rotate(var(--motion-start-rotate)) skew(var(--motion-start-skew-x),var(--motion-start-skew-y)) scale(var(--motion-start-scale))}to{opacity:var(--motion-end-opacity);transform:translate(var(--motion-end-x),var(--motion-end-y)) rotate(var(--motion-end-rotate)) skew(var(--motion-end-skew-x),var(--motion-end-skew-y)) scale(var(--motion-end-scale))}}@media(max-width:640px){.animation-builder__code-toolbar[data-v-6b1f7af3]{align-items:flex-start;flex-direction:column}.animation-builder__code-mode[data-v-6b1f7af3]{white-space:normal}.animation-builder__toggle[data-v-6b1f7af3]{flex-wrap:wrap;width:100%}.animation-builder__toggle-button[data-v-6b1f7af3]{flex:1 1 140px;text-align:center}.animation-builder__code-actions[data-v-6b1f7af3]{align-items:stretch;flex-direction:column;gap:.5rem;width:100%}.animation-builder__code-actions[data-v-6b1f7af3] .button{width:100%}.animation-builder__code-actions[data-v-6b1f7af3] .button__text{white-space:normal}}.animation-examples[data-v-afd87dc1]{display:flex;flex-direction:column;gap:4rem;width:100%}@media(max-width:768px){.animation-examples[data-v-afd87dc1]{gap:3rem}}.animation-page__gallery-header[data-v-afd87dc1]{align-items:flex-start;display:flex;flex-wrap:wrap;gap:3rem;justify-content:space-between;margin-bottom:2rem;width:100%}@media(max-width:768px){.animation-page__gallery-header[data-v-afd87dc1]{gap:1.5rem;margin-bottom:1.5rem}}.animation-page__gallery-tag[data-v-afd87dc1]{align-items:center;background:linear-gradient(135deg,rgba(var(--color-secondary),.12),rgba(var(--color-accent),.08));border:1px solid rgba(var(--color-secondary),.2);border-radius:9999px;box-shadow:0 2px 12px rgba(var(--color-secondary),.08);color:rgb(var(--color-secondary));display:inline-flex;font-size:.75rem;font-weight:600;gap:.25rem;letter-spacing:.08em;margin-bottom:.5rem;padding:.25rem 1rem;text-transform:uppercase}.animation-page__gallery-title[data-v-afd87dc1]{font-size:1.875rem;font-weight:700;letter-spacing:-.015em;line-height:1.2;margin:0 0 1rem}@media(max-width:768px){.animation-page__gallery-title[data-v-afd87dc1]{font-size:1.5rem}}.animation-page__gallery-subtitle[data-v-afd87dc1]{color:rgba(var(--color-text-secondary),.85);font-size:1rem;line-height:1.7;margin:0;max-width:720px}.animation-page__legend[data-v-afd87dc1]{align-items:center;background:rgba(var(--color-bg-secondary),.5);border:1px solid rgba(var(--panel-border),.2);border-radius:9999px;box-shadow:0 2px 12px #00000014;color:rgba(var(--color-text-secondary),.85);display:inline-flex;font-size:.75rem;font-weight:500;gap:.5rem;padding:.5rem 1.5rem}.animation-page__dot[data-v-afd87dc1]{border-radius:50%;height:10px;width:10px}.animation-page__dot_primary[data-v-afd87dc1]{background:linear-gradient(135deg,rgb(var(--color-primary)),rgb(var(--color-accent)));box-shadow:0 0 12px rgba(var(--color-primary),.4),0 0 6px rgba(var(--color-accent),.3)}.animation-page__cards[data-v-afd87dc1]{display:grid;gap:3rem;grid-template-columns:repeat(3,minmax(0,1fr));position:relative;width:100%;z-index:1}@media(max-width:1280px){.animation-page__cards[data-v-afd87dc1]{gap:2rem;grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}}@media(max-width:768px){.animation-page__cards[data-v-afd87dc1]{grid-template-columns:repeat(auto-fit,minmax(280px,1fr));grid-template-columns:repeat(2,minmax(0,1fr))}}@media(max-width:640px){.animation-page__cards[data-v-afd87dc1]{gap:1.5rem;grid-template-columns:1fr}}.animation-card[data-v-afd87dc1]{background:rgba(var(--color-bg-secondary),.5);border:1px solid rgba(var(--panel-border),.25);border-radius:.75rem;box-shadow:0 4px 24px #00000014;display:grid;gap:1.5rem;grid-template-rows:auto 1fr auto;overflow:hidden;padding:2rem;position:relative;transition:transform .2s ease-in-out,border-color .2s ease-in-out,box-shadow .2s ease-in-out}.animation-card[data-v-afd87dc1]:before{background:linear-gradient(90deg,transparent,rgba(var(--color-primary),.5),transparent);content:"";height:2px;left:0;opacity:0;position:absolute;right:0;top:0;transition:opacity .2s ease-in-out}@media(max-width:768px){.animation-card[data-v-afd87dc1]{padding:1.5rem}}@media(max-width:400px){.animation-card[data-v-afd87dc1]{padding:1rem}}.animation-card[data-v-afd87dc1]:hover{border-color:rgba(var(--color-primary),.4);box-shadow:0 12px 40px #0000001f,0 8px 20px rgba(var(--color-primary),.08);transform:translateY(-6px)}.animation-card[data-v-afd87dc1]:hover:before{opacity:1}.animation-card__head[data-v-afd87dc1]{align-items:flex-start;display:flex;flex-wrap:wrap;gap:1rem;justify-content:space-between}.animation-card__tag[data-v-afd87dc1]{align-items:center;background:linear-gradient(135deg,rgba(var(--color-accent),.12),rgba(var(--color-primary),.08));border:1px solid rgba(var(--color-accent),.2);border-radius:9999px;box-shadow:0 2px 8px rgba(var(--color-accent),.06);color:rgb(var(--color-accent));display:inline-flex;font-size:.75rem;font-weight:600;gap:.25rem;letter-spacing:.08em;margin-bottom:.25rem;padding:.25rem .5rem;text-transform:uppercase}.animation-card__title[data-v-afd87dc1]{font-size:1.125rem;font-weight:700;letter-spacing:-.01em;line-height:1.3;margin:0 0 .5rem}.animation-card__description[data-v-afd87dc1]{color:rgba(var(--color-text-secondary),.8);font-size:.875rem;line-height:1.6;margin:0;max-width:540px}.animation-card__author[data-v-afd87dc1]{align-items:center;color:rgb(var(--color-text-secondary));display:flex;font-size:.75rem;gap:.25rem}.animation-card__avatar[data-v-afd87dc1]{background-position:50%;background-size:cover;border-radius:9999px;color:#fff;display:grid;font-size:.75rem;font-weight:700;height:30px;place-items:center;width:30px}.animation-card__author-name[data-v-afd87dc1]{color:rgb(var(--color-text-primary));display:block;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.animation-card__author-badge[data-v-afd87dc1]{background:rgba(var(--color-accent),.15);border-radius:9999px;color:rgb(var(--color-accent));display:inline-flex;font-size:.65rem;letter-spacing:.1em;margin-left:.25rem;margin-top:2px;padding:2px 8px;text-transform:uppercase}.animation-card__preview[data-v-afd87dc1]{align-items:center;aspect-ratio:4/3;background:radial-gradient(circle at 30% 30%,rgba(var(--color-primary),.06),transparent 50%),rgba(var(--color-bg-primary),.4);border:1px solid rgba(var(--panel-border),.15);border-radius:.5rem;box-shadow:0 4px 16px #00000014;display:grid;justify-items:stretch;min-height:200px;overflow:hidden;padding:2rem;width:100%}@media(max-width:768px){.animation-card__preview[data-v-afd87dc1]{min-height:160px;padding:1.5rem}}.animation-card__preview_placeholder[data-v-afd87dc1]{background:rgba(var(--color-bg-secondary),.6);display:grid;place-items:center;text-align:center}.animation-card__preview-text[data-v-afd87dc1]{color:rgba(var(--color-text-secondary),.8);font-size:.875rem;margin:0;max-height:100%;overflow:hidden;white-space:pre-wrap;word-break:break-word}.animation-card__link[data-v-afd87dc1]{align-items:center;align-self:flex-start;background:rgba(var(--color-bg-primary),.08);border:1px solid rgba(var(--color-border),.4);border-radius:9999px;box-shadow:inset 0 1px rgba(var(--color-border),.15);color:rgb(var(--color-text-primary));display:inline-flex;font-size:.875rem;font-weight:500;justify-content:center;margin-top:auto;padding:.5rem 1rem;text-decoration:none;transition:border-color .2s ease-in-out,transform .2s ease-in-out,box-shadow .2s ease-in-out,background-color .2s ease-in-out;white-space:nowrap}.animation-card__link[data-v-afd87dc1]:hover{background:rgba(var(--color-primary),.08);border-color:rgba(var(--color-primary),.6);box-shadow:inset 0 1px rgba(var(--color-border),.15),0 4px 12px #0000001a;transform:translateY(-2px)}.animation-card__link[data-v-afd87dc1]:active{transform:translateY(0)}.animation-page__controls[data-v-afd87dc1]{align-items:end;background:rgba(var(--color-bg-secondary),.5);border:1px solid rgba(var(--panel-border),.2);border-radius:.75rem;display:grid;gap:2rem;grid-template-columns:1fr auto auto;padding:2rem}@media(max-width:1024px){.animation-page__controls[data-v-afd87dc1]{grid-template-columns:1fr 1fr}.animation-page__controls .animation-page__results[data-v-afd87dc1]{grid-column:1/-1;text-align:center}}@media(max-width:768px){.animation-page__controls[data-v-afd87dc1]{gap:1.5rem;grid-template-columns:1fr}.animation-page__controls .animation-page__results[data-v-afd87dc1]{order:-1}}@media(max-width:400px){.animation-page__controls[data-v-afd87dc1]{padding:1rem}}.animation-page__search[data-v-afd87dc1]{min-width:280px}@media(max-width:768px){.animation-page__search[data-v-afd87dc1]{min-width:unset;width:100%}}.animation-page__filter[data-v-afd87dc1]{min-width:220px}@media(max-width:768px){.animation-page__filter[data-v-afd87dc1]{min-width:unset;width:100%}}.animation-page__results[data-v-afd87dc1]{color:rgba(var(--color-text-secondary),.8);font-size:.875rem;font-weight:500}.animation-page__empty[data-v-afd87dc1]{align-items:center;background:rgba(var(--color-bg-secondary),.5);border:1px solid rgba(var(--panel-border),.2);border-radius:.75rem;display:flex;flex-direction:column;gap:1.5rem;justify-content:center;min-height:400px;padding:5rem 3rem;text-align:center}.animation-page__empty-icon[data-v-afd87dc1]{color:rgba(var(--color-text-secondary),.4)}.animation-page__empty-title[data-v-afd87dc1]{color:rgba(var(--color-text-primary),.9);font-size:1.25rem;font-weight:700;margin:0}.animation-page__empty-text[data-v-afd87dc1]{color:rgba(var(--color-text-secondary),.7);font-size:1rem;margin:0;max-width:400px}.animation-page__pagination[data-v-afd87dc1]{align-items:center;display:flex;flex-wrap:wrap;gap:1rem;justify-content:center;padding:3rem 0}.animation-page__pagination-button[data-v-afd87dc1]{background:rgba(var(--color-bg-secondary),.5);border:1px solid rgba(var(--panel-border),.3);border-radius:.5rem;color:rgba(var(--color-text-primary),1);cursor:pointer;font-size:.875rem;font-weight:600;padding:.5rem 1.5rem;transition:background-color .2s ease-in-out,border-color .2s ease-in-out,transform .2s ease-in-out}.animation-page__pagination-button[data-v-afd87dc1]:hover:not(:disabled){background:rgba(var(--color-primary),.1);border-color:rgb(var(--color-primary));transform:translateY(-2px)}.animation-page__pagination-button[data-v-afd87dc1]:disabled{cursor:not-allowed;opacity:.4}.animation-page__pagination-numbers[data-v-afd87dc1]{display:flex;gap:.25rem}.animation-page__pagination-number[data-v-afd87dc1]{background:rgba(var(--color-bg-secondary),.5);border:1px solid rgba(var(--panel-border),.3);border-radius:.5rem;color:rgba(var(--color-text-primary),1);cursor:pointer;font-size:.875rem;font-weight:600;min-width:40px;padding:.5rem 1rem;transition:background-color .2s ease-in-out,border-color .2s ease-in-out,transform .2s ease-in-out}.animation-page__pagination-number[data-v-afd87dc1]:hover{background:rgba(var(--color-primary),.1);border-color:rgb(var(--color-primary));transform:translateY(-2px)}.animation-page__pagination-number.active[data-v-afd87dc1]{background:rgb(var(--color-primary));border-color:rgb(var(--color-primary));color:#fff}.animation-page__loading[data-v-afd87dc1]{align-items:center;background:rgba(var(--color-bg-secondary),.5);border:1px solid rgba(var(--panel-border),.2);border-radius:.75rem;display:flex;flex-direction:column;gap:1.5rem;justify-content:center;min-height:400px;padding:5rem 3rem}.animation-page__loader[data-v-afd87dc1]{align-items:center;display:flex;gap:.5rem}.animation-page__loader span[data-v-afd87dc1]{animation:loaderBounce-afd87dc1 1s ease-in-out infinite;background:rgb(var(--color-primary));border-radius:50%;height:12px;width:12px}.animation-page__loader span[data-v-afd87dc1]:first-child{animation-delay:0s}.animation-page__loader span[data-v-afd87dc1]:nth-child(2){animation-delay:.1s}.animation-page__loader span[data-v-afd87dc1]:nth-child(3){animation-delay:.2s}.animation-page__loader span[data-v-afd87dc1]:nth-child(4){animation-delay:.3s}.animation-page__loading-text[data-v-afd87dc1]{color:rgba(var(--color-text-secondary),.8);font-size:1rem;font-weight:500;margin:0}@keyframes loaderBounce-afd87dc1{0%,80%,to{opacity:1;transform:translateY(0) scale(1)}40%{opacity:.8;transform:translateY(-16px) scale(1.1)}}.animation-page{background:radial-gradient(ellipse 100% 80% at 50% 0,rgba(var(--color-primary),.15),transparent 60%),radial-gradient(circle 120% at 10% 20%,rgba(var(--color-accent),.08),transparent 50%),radial-gradient(circle 130% at 90% 80%,rgba(var(--color-secondary),.12),transparent 50%),rgb(var(--color-bg-primary));color:rgb(var(--color-text-primary));isolation:isolate;min-height:calc(var(--app-vh, 1vh)*100);overflow:hidden;padding:120px 0 5rem;position:relative}@media(max-width:768px){.animation-page{padding:120px 0 4rem}}@media(max-width:480px){.animation-page{padding:110px 0 3rem}}@media(max-width:400px){.animation-page{padding-top:100px}}.animation-page__background{inset:0;overflow:hidden;pointer-events:none;position:absolute;z-index:0}.animation-page__beam{border-radius:50%;height:600px;mix-blend-mode:soft-light;opacity:.4;position:absolute;width:600px}.animation-page__beam_left{animation:float-left 20s ease-in-out infinite;backface-visibility:hidden;background:radial-gradient(circle,rgba(var(--color-primary),.6),transparent 70%);left:-200px;top:-200px;will-change:transform}.animation-page__beam_right{animation:float-right 25s ease-in-out infinite;backface-visibility:hidden;background:radial-gradient(circle,rgba(var(--color-accent),.5),transparent 70%);bottom:-250px;right:-250px;will-change:transform}@media(max-width:768px){.animation-page__beam{height:400px;width:400px}}.animation-page__grid-lines{background-image:linear-gradient(90deg,rgba(var(--panel-border),.08) 1px,transparent 1px),linear-gradient(0deg,rgba(var(--panel-border),.08) 1px,transparent 1px);background-size:60px 60px;border-radius:1.25rem;height:80%;left:50%;-webkit-mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,#000 30%,transparent 80%);mask-image:radial-gradient(ellipse 100% 100% at 50% 50%,#000 30%,transparent 80%);pointer-events:none;position:absolute;top:50%;transform:translate(-50%,-50%);width:min(1400px,95vw);z-index:0}.animation-page__builder-section{margin:0 auto 5rem;max-width:1280px;padding:0 2rem;position:relative;width:100%;z-index:1}@media(max-width:768px){.animation-page__builder-section{margin-bottom:4rem;padding:0 1rem}}@media(max-width:400px){.animation-page__builder-section{margin-bottom:3rem;padding:0 .5rem}}.animation-page__examples{margin:0 auto;max-width:1280px;padding:0 2rem;position:relative;width:100%;z-index:1}@media(max-width:768px){.animation-page__examples{padding:0 1rem}}@media(max-width:400px){.animation-page__examples{padding:0 .5rem}}.animation-page__seo{margin:3rem auto 0;max-width:1280px;padding:0 2rem;position:relative;width:100%;z-index:1}@media(max-width:768px){.animation-page__seo{padding:0 1rem}}.animation-page__seo-title{font-size:1.5rem;margin:0 0 .5rem}.animation-page__seo-text{color:rgba(var(--color-text-secondary),.94);line-height:1.7;margin:0 0 .5rem}.animation-page__seo-link{color:rgb(var(--color-primary));font-weight:600;margin-left:.25rem}@keyframes float-left{0%,to{transform:translateZ(0) scaleX(1)}33%{transform:translate3d(30px,-40px,0) scale3d(1.1,1.1,1)}66%{transform:translate3d(-20px,30px,0) scale3d(.95,.95,1)}}@keyframes float-right{0%,to{transform:translateZ(0) scaleX(1)}33%{transform:translate3d(-40px,30px,0) scale3d(.9,.9,1)}66%{transform:translate3d(20px,-25px,0) scale3d(1.05,1.05,1)}}@media(prefers-reduced-motion:reduce){.animation-page__beam{animation:none!important}}