/* Krem á forsíðu: kremið eitt og sér yfir myndbandinu, nafn og verð undir. Dofnar yfir í næsta. */
.cream-reel{position:absolute;z-index:1;left:clamp(28px,6vw,120px);top:50%;transform:translateY(-50%);display:block;width:clamp(150px,13vw,210px);height:clamp(300px,30vw,400px);color:#fff;text-decoration:none;text-align:center}
.cream-reel-slide{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;gap:14px;opacity:0;transform:translateY(10px);transition:opacity .7s ease,transform .7s ease;pointer-events:none}
.cream-reel-slide.is-active{opacity:1;transform:none}
.cream-reel-slide img{display:block;width:100%;height:calc(100% - 64px);object-fit:contain;object-position:center bottom;filter:drop-shadow(0 0 3px #ff15f499) drop-shadow(0 0 10px #ff15f466) drop-shadow(0 0 22px #ff15f433);animation:cream-glow 2.8s ease-in-out infinite}
@keyframes cream-glow{0%,100%{filter:drop-shadow(0 0 3px #ff15f499) drop-shadow(0 0 10px #ff15f466) drop-shadow(0 0 22px #ff15f433)}50%{filter:drop-shadow(0 0 4px #ff15f4bb) drop-shadow(0 0 14px #ff15f488) drop-shadow(0 0 30px #ff15f44d)}}
.cream-reel-name{display:block;font-size:.8125rem;font-weight:650;line-height:1.3;letter-spacing:.01em;max-width:100%;text-shadow:0 0 5px #ff15f499,0 0 12px #ff15f455}
.cream-reel-price{display:block;margin-top:3px;font-size:.75rem;font-weight:600;color:#ffd6f6;letter-spacing:.04em;text-shadow:0 0 5px #ff15f499,0 0 10px #ff15f444}
.cream-reel-caption{min-height:50px}
.cream-reel:hover .cream-reel-name{text-decoration:underline;text-underline-offset:3px}
.cream-reel:focus-visible{outline:2px solid #fff;outline-offset:6px;border-radius:6px}
@media(max-width:1023px){.cream-reel{position:relative;left:auto;top:auto;transform:none;margin:30px auto 0;width:180px;height:250px}}
@media(prefers-reduced-motion:reduce){.cream-reel-slide{transform:none}.cream-reel-slide img{animation:none}}
/* Merkið á forsíðunni glóir mjúklega neon-bleikt */
.hero-logo{filter:drop-shadow(0 0 4px #ff15f4aa) drop-shadow(0 0 14px #ff15f477) drop-shadow(0 0 30px #ff15f444);animation:logo-neon 3.4s ease-in-out infinite}
.hero-logo:hover{animation:logo-neon 1.6s ease-in-out infinite}
@keyframes logo-neon{0%,100%{filter:drop-shadow(0 0 4px #ff15f4aa) drop-shadow(0 0 14px #ff15f477) drop-shadow(0 0 30px #ff15f444)}50%{filter:drop-shadow(0 0 6px #ff15f4dd) drop-shadow(0 0 20px #ff15f499) drop-shadow(0 0 42px #ff15f466)}}
@media(prefers-reduced-motion:reduce){.hero-logo,.hero-logo:hover{animation:none}}