/* Pictures teach the effect. The library's own chrome stays quiet. */
.categories{grid-template-columns:repeat(5,minmax(0,1fr))}
.categories [data-category=effects]{--icon:#a16c22;--icon-light:#f0c97e}
.effect-picture{width:100%;background:#eeeee7}
.effect-canvas{position:relative;aspect-ratio:8/5;width:100%;overflow:hidden;isolation:isolate}
.effect-canvas>img{display:block;width:100%;height:100%;object-fit:contain}
.effect-live{background:transparent}
.effect-live .effect-canvas{border:1px solid var(--line)}
.effect-toggle{display:block;margin:16px 0 0;min-height:44px;min-width:130px;padding:10px 18px;background:var(--ink);color:white;border:1px solid var(--ink);border-radius:24px}
.effect-toggle:hover{background:#353535}
.effect-toggle:disabled{background:#edede9;color:#62625f;border-color:#d7d7d2;cursor:default}
.effect-note,.motion-message{font-size:13px;line-height:1.5;color:var(--muted);margin:12px 0 0}
.effect-overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.moving-trace{visibility:hidden}
.is-playing .moving-trace{visibility:visible;animation:trace 4s linear infinite}
.effect-sheen{position:absolute;top:13%;left:26.875%;width:46.25%;height:74%;border-radius:14px;overflow:hidden;pointer-events:none}
.effect-sheen:after{content:"";position:absolute;inset:-40%;background:linear-gradient(110deg,transparent 35%,#fff9 48%,transparent 61%);transform:translateX(-85%);opacity:0}
.is-playing .effect-sheen:after{opacity:1;animation:sheen 2.8s ease-in-out infinite}
.effect-particles{position:absolute;inset:0;pointer-events:none}
.effect-particles i{position:absolute;width:9px;height:9px;background:#b97c39;clip-path:polygon(50% 0,65% 35%,100% 50%,65% 65%,50% 100%,35% 65%,0 50%,35% 35%);opacity:0}
.effect-particles i:nth-child(1){left:20%;top:62%}
.effect-particles i:nth-child(2){left:78%;top:52%;animation-delay:.7s}
.effect-particles i:nth-child(3){left:81%;top:29%;animation-delay:1.4s}
.is-playing .effect-particles i{animation-name:drift;animation-duration:3s;animation-iteration-count:infinite;animation-timing-function:ease-out}
.effect-live[data-effect=tilt]{perspective:900px}
.effect-live[data-effect=tilt] .effect-canvas{transition:transform 160ms ease-out}
.effect-live[data-effect=tilt].is-playing .effect-canvas{transform:rotateX(var(--tilt-x,-3deg)) rotateY(var(--tilt-y,4deg))}
@keyframes trace{to{stroke-dashoffset:-1170}}
@keyframes sheen{0%,15%{transform:translateX(-85%)}80%,100%{transform:translateX(85%)}}
@keyframes drift{0%{opacity:0;transform:translateY(15px) scale(.65)}25%{opacity:1}100%{opacity:0;transform:translateY(-42px) scale(1.2)}}
@media(max-width:1050px){.categories{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:640px){.categories{grid-template-columns:repeat(2,minmax(0,1fr))}.studio nav a{min-height:44px;display:flex;align-items:center}}
@media(prefers-reduced-motion:reduce){.effect-picture *,.effect-picture *:after{animation:none!important;transition:none!important}.moving-trace{visibility:hidden!important}.effect-sheen:after,.effect-particles i{opacity:0!important}.effect-live[data-effect=tilt] .effect-canvas{transform:none!important}}