/* Floating rings and shapes for product page heroes (matches homepage hero) */
.ys-hs {
    position: absolute;
    inset: 0;
    overflow: hidden;
    pointer-events: none;
    z-index: 0;
}
header.header {
    position: relative;
}
header.header > .container {
    position: relative;
    z-index: 2;
}
.ys-hs span {
    position: absolute;
    display: block;
}

/* Rings */
.ys-hs-ring {
    border-radius: 50%;
    border-style: solid;
    border-color: rgba(255, 106, 31, 0.6);
}
.ys-hs-ring-a {
    width: 130px;
    height: 130px;
    top: 18%;
    right: 9%;
    border-width: 14px;
    animation: ys-hs-bob 7s ease-in-out infinite;
}
.ys-hs-ring-b {
    width: 64px;
    height: 64px;
    left: -20px;
    top: 42%;
    border-width: 9px;
    border-color: rgba(255, 167, 122, 0.45);
    animation: ys-hs-drift 11s ease-in-out infinite;
}
.ys-hs-ring-c {
    width: 22px;
    height: 22px;
    right: 30%;
    bottom: 16%;
    border-width: 4px;
    animation: ys-hs-bob 5s ease-in-out infinite reverse;
}

/* Dots, triangle and diamond */
.ys-hs-dot {
    border-radius: 50%;
    background: #ed5000;
}
.ys-hs-dot-a {
    width: 12px;
    height: 12px;
    left: 8%;
    top: 22%;
    animation: ys-hs-orbit 12s linear infinite;
}
.ys-hs-dot-b {
    width: 8px;
    height: 8px;
    right: 4%;
    bottom: 26%;
    opacity: 0.7;
    animation: ys-hs-orbit 10s linear infinite reverse;
}
.ys-hs-tri {
    left: 52%;
    top: 16%;
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 17px solid #ff6a1f;
    animation: ys-hs-spin 16s linear infinite;
}
.ys-hs-diamond {
    width: 14px;
    height: 14px;
    left: 4%;
    bottom: 14%;
    background: #ed5000;
    opacity: 0.85;
    animation: ys-hs-spin 12s linear infinite reverse;
}

@keyframes ys-hs-orbit {
    0% {
        transform: rotate(0deg) translateX(14px) rotate(0deg);
    }
    100% {
        transform: rotate(360deg) translateX(14px) rotate(-360deg);
    }
}
@keyframes ys-hs-spin {
    50% {
        transform: translate(10px, 12px) rotate(180deg);
    }
    100% {
        transform: rotate(360deg);
    }
}
@keyframes ys-hs-bob {
    50% {
        transform: translateY(-12px);
    }
}
@keyframes ys-hs-drift {
    50% {
        transform: translate(14px, 18px);
    }
}

@media (max-width: 768px) {
    .ys-hs-ring-a {
        width: 70px;
        height: 70px;
        border-width: 9px;
        top: 10%;
        right: -10px;
    }
    .ys-hs-tri,
    .ys-hs-ring-c {
        display: none;
    }
}
@media (prefers-reduced-motion: reduce) {
    .ys-hs span {
        animation: none !important;
    }
}

/* 1.2.521: smaller rings, shapes travel across the whole hero */
.ys-hs-ring-a {
    width: 78px;
    height: 78px;
    border-width: 9px;
}
.ys-hs-ring-b {
    width: 44px;
    height: 44px;
    border-width: 6px;
}
.ys-hs-ring-c {
    width: 16px;
    height: 16px;
    border-width: 3px;
}
.ys-hs-dot-a {
    animation: ys-hs-fly-a 26s ease-in-out infinite;
}
.ys-hs-dot-b {
    animation: ys-hs-fly-b 32s ease-in-out infinite;
}
.ys-hs-tri {
    animation: ys-hs-fly-c 30s linear infinite;
}
.ys-hs-diamond {
    animation: ys-hs-fly-d 36s ease-in-out infinite;
}
.ys-hs-ring-c {
    animation: ys-hs-fly-b 40s ease-in-out infinite reverse;
}
@keyframes ys-hs-fly-a {
    0% { left: 6%; top: 20%; }
    25% { left: 40%; top: 78%; }
    50% { left: 88%; top: 55%; }
    75% { left: 60%; top: 12%; }
    100% { left: 6%; top: 20%; }
}
@keyframes ys-hs-fly-b {
    0% { left: 92%; top: 75%; }
    30% { left: 55%; top: 30%; }
    60% { left: 15%; top: 65%; }
    100% { left: 92%; top: 75%; }
}
@keyframes ys-hs-fly-c {
    0% { left: 50%; top: 14%; transform: rotate(0deg); }
    25% { left: 82%; top: 40%; transform: rotate(90deg); }
    50% { left: 70%; top: 85%; transform: rotate(180deg); }
    75% { left: 20%; top: 50%; transform: rotate(270deg); }
    100% { left: 50%; top: 14%; transform: rotate(360deg); }
}
@keyframes ys-hs-fly-d {
    0% { left: 4%; top: 82%; transform: rotate(0deg); }
    33% { left: 35%; top: 18%; transform: rotate(120deg); }
    66% { left: 75%; top: 70%; transform: rotate(240deg); }
    100% { left: 4%; top: 82%; transform: rotate(360deg); }
}
@media (max-width: 768px) {
    .ys-hs-ring-a {
        width: 52px;
        height: 52px;
        border-width: 7px;
    }
}