/* Designz dashboard: small touches of colour and motion, kept separate from dashboard.css. */
.side-nav a:nth-child(7n+1) { --c: var(--red); }
.side-nav a:nth-child(7n+2) { --c: var(--blue); }
.side-nav a:nth-child(7n+3) { --c: #e0a400; }
.side-nav a:nth-child(7n+4) { --c: #3d9a5b; }
.side-nav a:nth-child(7n+5) { --c: #e2557f; }
.side-nav a:nth-child(7n+6) { --c: #7a5cff; }
.side-nav a:nth-child(7n+7) { --c: #1f8a9a; }
.side-nav a svg { transition: color 0.2s, rotate 0.35s cubic-bezier(.3, 1.6, .5, 1), scale 0.35s cubic-bezier(.3, 1.6, .5, 1); }
.side-nav a:hover svg { color: var(--c); rotate: -10deg; scale: 1.12; }
.side-nav a.on svg { color: var(--c); }
.side-nav a.on { box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--c); }
.create span { display: inline-block; transition: rotate 0.35s cubic-bezier(.3, 1.6, .5, 1); }
.create:hover span { rotate: 90deg; }
.hello h1 em { background: linear-gradient(transparent 58%, rgba(255, 197, 49, 0.6) 58%, rgba(255, 197, 49, 0.6) 92%, transparent 92%) no-repeat 0 0 / 100% 100%; animation: dz-marker 0.7s 0.25s cubic-bezier(.6, 0, .2, 1) backwards; }
@keyframes dz-marker { from { background-size: 0 100%; } }
.size { transition: border-color 0.15s, transform 0.2s cubic-bezier(.3, 1.4, .5, 1), box-shadow 0.2s; }
.size:hover { box-shadow: 4px 4px 0 var(--ink); transform: translate(-2px, -3px); }
.size .sz-pv i { transition: background 0.2s, rotate 0.35s cubic-bezier(.3, 1.6, .5, 1); }
.size:hover .sz-pv i { rotate: -4deg; }
.d-thumb:hover { transform: translateY(-3px) rotate(-0.8deg); }
@media (prefers-reduced-motion: reduce) {
  .side-nav a svg, .create span, .size, .size .sz-pv i { transition: none; }
  .side-nav a:hover svg, .size:hover .sz-pv i, .create:hover span { rotate: none; scale: none; }
  .hello h1 em { animation: none; }
}