/* ===== URIN ORBITAL VISUALIZATION — UNIVERSAL 5-SPORT COMPONENT ===== */
/* Usage: <div class="orbital-container" data-sport="nascar"> */
/* Valid: horse, f1, nascar, indycar, motogp */

.orbital-container{position:relative;width:min(400px,100%);aspect-ratio:1;overflow:hidden}
@media(orientation:landscape) and (max-height:500px){.orbital-container{width:min(280px,40vh)}}
.orbital-core{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:80px;height:80px;background:rgba(8,8,8,.95);border-radius:50%;display:flex;align-items:center;justify-content:center;border:1px solid rgba(255,255,255,.06);z-index:10;overflow:hidden}
.orbital-core svg{width:26px;height:26px;stroke:rgba(255,255,255,.4);stroke-width:1.5;fill:none;position:relative;z-index:2}
.orbit{position:absolute;top:50%;left:50%;border-radius:50%;border:1px solid rgba(255,255,255,.03)}
.orbit-0{width:120px;height:120px;margin-left:-60px;margin-top:-60px;animation:orbit-rotate 12s linear infinite}
.orbit-1{width:185px;height:185px;margin-left:-92.5px;margin-top:-92.5px;animation:orbit-rotate 16s linear infinite}
.orbit-2{width:250px;height:250px;margin-left:-125px;margin-top:-125px;animation:orbit-rotate 22s linear infinite}
.orbit-3{width:315px;height:315px;margin-left:-157.5px;margin-top:-157.5px;animation:orbit-rotate 28s linear infinite}
.orbit-4{width:380px;height:380px;margin-left:-190px;margin-top:-190px;animation:orbit-rotate 36s linear infinite}
@keyframes orbit-rotate{to{transform:rotate(360deg)}}
@keyframes core-spin{to{transform:rotate(360deg)}}
@keyframes pulse-expand{0%{transform:scale(1);opacity:.8}100%{transform:scale(5);opacity:0}}

/* All dots: 8x8px, subdued by default */
.orbit .dot{position:absolute;width:8px;height:8px;border-radius:50%;opacity:0.4}
.orbit .dot.horse{display:block;padding:0;margin:0;border:none;background:#d4a853;top:-4px;left:50%;margin-left:-4px;box-shadow:0 0 4px rgba(212,168,83,.2)}
.orbit .dot.f1{background:#E10600;top:50%;right:-4px;margin-top:-4px;box-shadow:0 0 4px rgba(225,6,0,.2)}
.orbit .dot.nascar{background:#007AC2;top:50%;left:-4px;margin-top:-4px;box-shadow:0 0 4px rgba(0,122,194,.2)}
.orbit .dot.indycar{background:#C0C0C0;bottom:-4px;left:50%;margin-left:-4px;box-shadow:0 0 4px rgba(192,192,192,.2)}
.orbit .dot.motogp{background:#FF6600;top:50%;right:-4px;margin-top:-4px;box-shadow:0 0 4px rgba(255,102,0,.2)}

/* Pulse rings: staggered delays for radar sweep effect */
.pulse-ring{position:absolute;top:50%;left:50%;width:80px;height:80px;margin-left:-40px;margin-top:-40px;border:1px solid rgba(220,38,38,.08);border-radius:50%;animation:pulse-expand 6s ease-out infinite}
.pulse-ring:nth-child(2){animation-delay:1.5s}
.pulse-ring:nth-child(3){animation-delay:3s}
.pulse-ring:nth-child(4){animation-delay:4.5s}

/* ===== HORSE RACING: gold core, gold pulse, horse dot full ===== */
.orbital-container[data-sport="horse"] .orbital-core::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0%,rgba(212,168,83,.5) 15%,transparent 30%);animation:core-spin 12s linear infinite}
.orbital-container[data-sport="horse"] .pulse-ring{border-color:rgba(212,168,83,.08)}
.orbital-container[data-sport="horse"] .dot.horse{opacity:1;box-shadow:0 0 12px rgba(212,168,83,.7),4px 0 8px rgba(212,168,83,.4)}

/* ===== F1: red core, red pulse, f1 dot full ===== */
.orbital-container[data-sport="f1"] .orbital-core::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0%,rgba(225,6,0,.5) 15%,transparent 30%);animation:core-spin 12s linear infinite}
.orbital-container[data-sport="f1"] .pulse-ring{border-color:rgba(225,6,0,.08)}
.orbital-container[data-sport="f1"] .dot.f1{opacity:1;box-shadow:0 0 12px rgba(225,6,0,.7),0 -4px 8px rgba(225,6,0,.4)}

/* ===== NASCAR: blue core, blue pulse, nascar dot full ===== */
.orbital-container[data-sport="nascar"] .orbital-core::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0%,rgba(0,122,194,.5) 15%,transparent 30%);animation:core-spin 12s linear infinite}
.orbital-container[data-sport="nascar"] .pulse-ring{border-color:rgba(0,122,194,.08)}
.orbital-container[data-sport="nascar"] .dot.nascar{opacity:1;box-shadow:0 0 12px rgba(0,122,194,.7),0 4px 8px rgba(0,122,194,.4)}

/* ===== INDYCAR: silver core, silver pulse, indycar dot full ===== */
.orbital-container[data-sport="indycar"] .orbital-core::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0%,rgba(192,192,192,.5) 15%,transparent 30%);animation:core-spin 12s linear infinite}
.orbital-container[data-sport="indycar"] .pulse-ring{border-color:rgba(192,192,192,.08)}
.orbital-container[data-sport="indycar"] .dot.indycar{opacity:1;box-shadow:0 0 12px rgba(192,192,192,.7),-4px 0 8px rgba(192,192,192,.4)}

/* ===== MOTOGP: orange core, orange pulse, motogp dot full ===== */
.orbital-container[data-sport="motogp"] .orbital-core::before{content:'';position:absolute;inset:-2px;border-radius:50%;background:conic-gradient(from 0deg,transparent 0%,rgba(255,102,0,.5) 15%,transparent 30%);animation:core-spin 12s linear infinite}
.orbital-container[data-sport="motogp"] .pulse-ring{border-color:rgba(255,102,0,.08)}
.orbital-container[data-sport="motogp"] .dot.motogp{opacity:1;box-shadow:0 0 12px rgba(255,102,0,.7),0 -5px 8px rgba(255,102,0,.4)}