/* Animasjoner for kategori-logoene */
.logo { width: 100%; height: 100%; overflow: visible; }
.logo * { transform-box: fill-box; transform-origin: center; }
.logo .blush { fill: #ff9ec0; opacity: .8; }

/* Kaffeteria: damp som stiger, koppen vugger, hjertet banker */
.logo-kaffe .s { fill: none; stroke: #fff; stroke-width: 5; stroke-linecap: round; opacity: 0; animation: steam 2.6s ease-in-out infinite; }
.logo-kaffe .s2 { animation-delay: .8s; }
.logo-kaffe .s3 { animation-delay: 1.6s; }
.logo-kaffe .cup { animation: sway 3s ease-in-out infinite; transform-origin: 50% 100%; }
.logo-kaffe .heart { animation: beat 1.2s ease-in-out infinite; }
@keyframes steam { 0% { opacity: 0; transform: translateY(8px); } 40% { opacity: .95; } 100% { opacity: 0; transform: translateY(-10px); } }

/* Leker: bamsen vipper, ballen spretter, øynene blunker */
.logo-leker .bear { animation: wiggle 2.4s ease-in-out infinite; transform-origin: 50% 90%; }
.logo-leker .ball { animation: bounce 1.1s cubic-bezier(.3,0,.6,1) infinite alternate; }
.logo-leker .eyes { animation: blink 4s infinite; }

/* Julepynt: lys som blinker, stjerne som glitrer, snø som faller */
.logo-jul .light { animation: twinkle 1.6s ease-in-out infinite; }
.logo-jul .l1 { fill: #ff4f8b; }
.logo-jul .l2 { fill: #7b5cff; animation-delay: .3s; }
.logo-jul .l3 { fill: #ffd23f; animation-delay: .6s; }
.logo-jul .l4 { fill: #3ec1ff; animation-delay: .9s; }
.logo-jul .l5 { fill: #ff6b6b; animation-delay: 1.2s; }
.logo-jul .star { animation: starspin 4s ease-in-out infinite; }
.logo-jul .f { fill: #fff; animation: snow 4s linear infinite; }
.logo-jul .f2 { animation-delay: 1s; }
.logo-jul .f3 { animation-delay: 2s; }
.logo-jul .f4 { animation-delay: 3s; }

/* Armbånd: perlene glitrer i en bølge rundt armbåndet, hjerteanhenget svinger */
.logo-armband .ring { animation: sway 4s ease-in-out infinite; }
.logo-armband .bead { animation: beadpop 2.4s ease-in-out infinite; }
.logo-armband .charm { animation: swing 1.6s ease-in-out infinite; transform-origin: 50% 0%; }

/* Hårpynt: sløyfa vipper og spretter, stjerner som blinker */
.logo-harpynt .bow { animation: bow 2.2s ease-in-out infinite; }
.logo-harpynt .spark { animation: twinkle 1.6s ease-in-out infinite; }
.logo-harpynt .s2 { animation-delay: .5s; }
.logo-harpynt .s3 { animation-delay: 1s; }

/* Malerier: fargeklatter som skifter farge, pensel som maler */
.logo-maling .blob { animation: colors 6s linear infinite, pop 2s ease-in-out infinite; }
.logo-maling .b2 { animation-delay: -1.2s, .2s; }
.logo-maling .b3 { animation-delay: -2.4s, .4s; }
.logo-maling .b4 { animation-delay: -3.6s, .6s; }
.logo-maling .b5 { animation-delay: -4.8s, .8s; }
.logo-maling .brush { animation: paint 1.8s ease-in-out infinite; transform-origin: 0% 100%; }
.logo-maling .tip { animation: colors 6s linear infinite; }

@keyframes sway { 0%,100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@keyframes wiggle { 0%,100% { transform: rotate(-6deg); } 50% { transform: rotate(6deg); } }
@keyframes beat { 0%,100% { transform: scale(1); } 30% { transform: scale(1.25); } 60% { transform: scale(.95); } }
@keyframes bounce { from { transform: translateY(0); } to { transform: translateY(-22px); } }
@keyframes blink { 0%,92%,100% { transform: scaleY(1); } 95% { transform: scaleY(.1); } }
@keyframes twinkle { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.7); } }
@keyframes starspin { 0%,100% { transform: rotate(0) scale(1); } 50% { transform: rotate(72deg) scale(1.2); } }
@keyframes snow { 0% { transform: translateY(0); opacity: 0; } 10% { opacity: 1; } 100% { transform: translateY(110px); opacity: 0; } }
@keyframes beadpop { 0%,70%,100% { transform: scale(1); } 20% { transform: scale(1.3); } }
@keyframes swing { 0%,100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
@keyframes bow { 0%,100% { transform: rotate(-6deg) scale(1); } 25% { transform: rotate(0) scale(1.08); } 50% { transform: rotate(6deg) scale(1); } 75% { transform: rotate(0) scale(1.08); } }
@keyframes colors {
  0%,100% { fill: #ff4f8b; } 20% { fill: #ffb13d; } 40% { fill: #ffd23f; }
  60% { fill: #3ec1a0; } 80% { fill: #7b5cff; }
}
@keyframes pop { 0%,100% { transform: scale(1); } 50% { transform: scale(1.15); } }
@keyframes paint { 0%,100% { transform: rotate(0); } 50% { transform: rotate(-12deg); } }

@media (prefers-reduced-motion: reduce) {
  .logo * { animation: none !important; }
}