/* Programs shine: the characters in the lineup glow in their own colours and ring out when picked, the record powers on
   section by section, and each portrait gets one small signature touch of its own.
   Soft and dim, dimmer at night (US Central). Loaded after programs-palette.css.
   Decoration only: nothing here takes the pointer or changes any record. */

/* --- the lineup: a slow breathing glow under every character, a stronger one for the chosen program --- */
.program-hotspot{animation:hotspot-breathe 6s ease-in-out infinite}
.program-hotspot:nth-child(2){animation-delay:-.9s}
.program-hotspot:nth-child(3){animation-delay:-1.8s}
.program-hotspot:nth-child(4){animation-delay:-2.7s}
.program-hotspot:nth-child(5){animation-delay:-3.6s}
.program-hotspot:nth-child(6){animation-delay:-4.5s}
.program-hotspot:nth-child(7){animation-delay:-5.4s}
@keyframes hotspot-breathe{0%,100%{box-shadow:inset 0 -26px 26px -26px color-mix(in srgb,var(--program-color,#65faff) 18%,transparent)}50%{box-shadow:inset 0 -26px 30px -22px color-mix(in srgb,var(--program-color,#65faff) 42%,transparent)}}
.program-hotspot.active{animation:hotspot-chosen 3.6s ease-in-out infinite;border-color:color-mix(in srgb,var(--program-color,#65faff) 55%,transparent)}
@keyframes hotspot-chosen{0%,100%{box-shadow:0 0 12px color-mix(in srgb,var(--program-color,#65faff) 40%,transparent),inset 0 -26px 30px -22px color-mix(in srgb,var(--program-color,#65faff) 40%,transparent)}50%{box-shadow:0 0 24px color-mix(in srgb,var(--program-color,#65faff) 70%,transparent),inset 0 -26px 34px -20px color-mix(in srgb,var(--program-color,#65faff) 60%,transparent)}}
.program-hotspot:hover,.program-hotspot:focus-visible{animation:none}
.lineup[data-focus]:not([data-focus="overview"]) .program-hotspot:not(.active):not(:hover){background:rgba(2,4,10,.26)}
.pick-ring{position:absolute;z-index:3;width:90px;height:90px;border:2px solid var(--c,#fff);border-radius:50%;pointer-events:none;transform:translate(-50%,-50%) scale(.2);opacity:0;
  box-shadow:0 0 14px var(--c,#fff),inset 0 0 14px var(--c,#fff);animation:pick-ring 1.1s ease-out forwards}
@keyframes pick-ring{0%{transform:translate(-50%,-50%) scale(.2);opacity:.9}100%{transform:translate(-50%,-50%) scale(3.2);opacity:0}}

/* --- the record powers on, one section after another --- */
.program-record.powering .record-heading,
.program-record.powering .record-summary,
.program-record.powering .record-layout>div,
.program-record.powering .record-columns section,
.program-record.powering .limits,
.program-record.powering .record-portrait{animation:power-on .7s ease-out both}
.program-record.powering .record-summary{animation-delay:.12s}
.program-record.powering .record-layout>div{animation-delay:.22s}
.program-record.powering .record-columns section:nth-child(1){animation-delay:.34s}
.program-record.powering .record-columns section:nth-child(2){animation-delay:.46s}
.program-record.powering .limits{animation-delay:.58s}
.program-record.powering .limits.boundary{animation-delay:.7s}
.program-record.powering .record-portrait{animation-delay:.18s}
@keyframes power-on{0%{opacity:0;transform:translateY(8px);filter:brightness(1.8)}60%{opacity:1}100%{opacity:1;transform:none;filter:none}}

/* --- the portrait: a slow glow in the program's colour, and one signature touch each --- */
.record-portrait .portrait-frame{position:relative}
.record-portrait .portrait-frame{box-shadow:0 0 18px color-mix(in srgb,var(--program-color,#65faff) 30%,transparent);animation:portrait-glow 6s ease-in-out infinite}
@keyframes portrait-glow{0%,100%{box-shadow:0 0 14px color-mix(in srgb,var(--program-color,#65faff) 22%,transparent)}50%{box-shadow:0 0 28px color-mix(in srgb,var(--program-color,#65faff) 48%,transparent)}}
.sig{position:absolute;inset:0;z-index:2;pointer-events:none;overflow:hidden;mix-blend-mode:screen}
.sig b{display:none}
.sig::before,.sig::after{content:"";position:absolute;pointer-events:none}

/* PRIME: a slow pulse of gold around the crown */
.program-record[data-program="prime"] .sig::before{inset:0;background:radial-gradient(ellipse 62% 34% at 50% 14%,rgba(255,214,110,.75),rgba(255,180,60,.28) 45%,transparent 74%);animation:sig-crown 4.5s ease-in-out infinite}
.program-record[data-program="prime"] .sig::after{left:50%;top:13%;width:46%;height:2px;transform:translateX(-50%);background:linear-gradient(90deg,transparent,rgba(255,236,170,.95),transparent);box-shadow:0 0 12px rgba(255,200,90,.9);animation:sig-crown-line 4.5s ease-in-out infinite}
@keyframes sig-crown{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes sig-crown-line{0%,100%{opacity:.15;width:30%}50%{opacity:.9;width:50%}}

/* VALOR: a sweeping beam of light across the portrait */
.program-record[data-program="valor"] .sig::before{inset:0;background:linear-gradient(115deg,transparent 38%,rgba(234,255,255,.34) 50%,transparent 62%) -80% 0/250% 100% no-repeat;animation:sig-beam 7s ease-in-out infinite}
@keyframes sig-beam{0%,20%{background-position:-80% 0}70%,100%{background-position:180% 0}}

/* DOT: fine lines of writing appear and fade */
.program-record[data-program="dot"] .sig::before{left:12%;right:12%;top:62%;bottom:10%;background:repeating-linear-gradient(0deg,rgba(214,190,255,.5) 0 1px,transparent 1px 9px);
  animation:sig-write 7s steps(24,end) infinite}
@keyframes sig-write{0%{clip-path:inset(0 100% 0 0);opacity:.9}55%{clip-path:inset(0 0 0 0);opacity:.9}85%{clip-path:inset(0 0 0 0);opacity:0}100%{clip-path:inset(0 100% 0 0);opacity:0}}

/* TAIL: a trail of small lavender dots drifting around the frame */
.program-record[data-program="tail"] .sig b{display:block;position:absolute;width:5px;height:5px;border-radius:50%;background:#efe3ff;box-shadow:0 0 6px #c6a0ff,0 0 12px rgba(198,160,255,.7);animation:sig-orbit 11s linear infinite}
.program-record[data-program="tail"] .sig b:nth-child(2){animation-delay:-.5s;width:4px;height:4px;opacity:.75}
.program-record[data-program="tail"] .sig b:nth-child(3){animation-delay:-1s;width:3px;height:3px;opacity:.55}
.program-record[data-program="tail"] .sig b:nth-child(4){animation-delay:-1.5s;width:2px;height:2px;opacity:.4}
@keyframes sig-orbit{0%{left:6%;top:6%}25%{left:92%;top:8%}50%{left:90%;top:92%}75%{left:8%;top:90%}100%{left:6%;top:6%}}

/* PULSE: a heartbeat ripple from the centre */
.program-record[data-program="pulse"] .sig::before{left:50%;top:48%;width:70%;aspect-ratio:1;border:2px solid rgba(255,79,168,.8);border-radius:50%;box-shadow:0 0 14px rgba(255,79,168,.7),inset 0 0 14px rgba(255,79,168,.4);animation:sig-ripple 2.6s ease-out infinite}
@keyframes sig-ripple{0%{transform:translate(-50%,-50%) scale(.15);opacity:0}8%{opacity:.9}20%{transform:translate(-50%,-50%) scale(.5);opacity:.4}30%{opacity:.8}100%{transform:translate(-50%,-50%) scale(1.5);opacity:0}}

/* RIG: forge sparks rising from the bottom */
.program-record[data-program="rig"] .sig b{display:block;position:absolute;bottom:4%;width:3px;height:3px;border-radius:50%;background:#ffd0a0;box-shadow:0 0 6px #ff7a18,0 0 12px rgba(255,59,66,.8);opacity:0;animation:sig-spark 4.6s linear infinite}
.program-record[data-program="rig"] .sig b:nth-child(1){left:22%;animation-delay:-.4s}
.program-record[data-program="rig"] .sig b:nth-child(2){left:36%;animation-delay:-1.8s;animation-duration:5.4s}
.program-record[data-program="rig"] .sig b:nth-child(3){left:50%;animation-delay:-3s}
.program-record[data-program="rig"] .sig b:nth-child(4){left:63%;animation-delay:-.9s;animation-duration:5s}
.program-record[data-program="rig"] .sig b:nth-child(5){left:74%;animation-delay:-2.4s;animation-duration:4s}
.program-record[data-program="rig"] .sig b:nth-child(6){left:44%;animation-delay:-3.8s;animation-duration:6s;background:#fff}
@keyframes sig-spark{0%{transform:translate(0,0);opacity:0}12%{opacity:.95}70%{opacity:.5}100%{transform:translate(14px,-210px);opacity:0}}

/* LOX: a gate of light that slowly opens and closes at the sides */
.program-record[data-program="lox"] .sig::before,.program-record[data-program="lox"] .sig::after{top:0;bottom:0;width:0;animation:sig-gate 8s ease-in-out infinite}
.program-record[data-program="lox"] .sig::before{left:0;background:linear-gradient(90deg,rgba(101,250,255,.5),transparent)}
.program-record[data-program="lox"] .sig::after{right:0;background:linear-gradient(270deg,rgba(101,250,255,.5),transparent)}
@keyframes sig-gate{0%,100%{width:0;opacity:.2}50%{width:26%;opacity:.9}}

/* --- dimmer at dusk and at night (data-time is set by js/programs-shine.js) --- */
html[data-time="dusk"] .sig{opacity:.8}
html[data-time="night"] .sig{opacity:.6}
html[data-time="night"] .program-hotspot{animation-duration:9s}

@media(prefers-reduced-motion:reduce){
  .program-hotspot,.program-hotspot.active,.record-portrait .portrait-frame,.sig::before,.sig::after,.sig b,.pick-ring,
  .program-record.powering .record-heading,.program-record.powering .record-summary,.program-record.powering .record-layout>div,
  .program-record.powering .record-columns section,.program-record.powering .limits,.program-record.powering .record-portrait{animation:none}
  .sig,.pick-ring{display:none}
}