/* harrhys.com · extras.css · Daft Punk touches, helmets, dynamic effects (load last) */
/* ---------- Daft Punk touches: chrome + gold helmets, LED matrix, rainbow panels, pyramid ---------- */
:root{--chrome:linear-gradient(180deg,#3d474f 0%,#11161a 48%,#56616b 52%,#2a3238 100%);--gold:linear-gradient(180deg,#a8761b 0%,#7a520e 48%,#c9922a 52%,#8a5d12 100%);
  --rainbow:linear-gradient(90deg,#FF3B5C,#FF9F1C,#FCEE0A,#2BFF88,#3BB8FF,#B46BFF,#FF3B5C)}
:root[data-theme="dark"]{--chrome:linear-gradient(180deg,#ffffff 0%,#c9d1d9 46%,#6b7580 54%,#e6edf3 100%);--gold:linear-gradient(180deg,#fff6c2 0%,#f2c94c 46%,#a8761b 54%,#ffe27a 100%)}
/* logo: LED dot-matrix sign. Letters are filled with a grid of round "pixels" (green, yellow for .com) */
.logo{--dot:var(--sage-d);font:700 1.45rem/1 Rajdhani,"Exo 2",sans-serif;letter-spacing:.12em;display:inline-flex;align-items:center;
  background:radial-gradient(circle,var(--dot) 1px,transparent 1.35px) 0 0/2.6px 2.6px;-webkit-background-clip:text;background-clip:text;color:transparent}
.logo span{--dot:var(--blue-ink);background:radial-gradient(circle,var(--dot) 1px,transparent 1.35px) 0 0/2.6px 2.6px;-webkit-background-clip:text;background-clip:text;color:transparent;text-shadow:none}
:root[data-theme="dark"] .logo{--dot:#2BFF88;filter:drop-shadow(0 0 5px rgba(43,255,136,.55))}
:root[data-theme="dark"] .logo span{--dot:#FCEE0A;text-shadow:none}
.logo::after{font-family:"Share Tech Mono",ui-monospace,monospace}
/* rainbow LED equaliser, like the helmet side panels */
.eq{display:inline-flex;align-items:flex-end;gap:2px;height:15px;margin-right:9px}
.eq i{width:3px;height:100%;border-radius:1px;transform-origin:bottom;animation:eq .9s ease-in-out infinite alternate;box-shadow:0 0 6px currentColor}
.eq i:nth-child(1){background:#FF3B5C;color:#FF3B5C;animation-duration:.7s}
.eq i:nth-child(2){background:#FF9F1C;color:#FF9F1C;animation-duration:1.1s;animation-delay:-.3s}
.eq i:nth-child(3){background:#FCEE0A;color:#FCEE0A;animation-duration:.8s;animation-delay:-.5s}
.eq i:nth-child(4){background:#2BFF88;color:#2BFF88;animation-duration:1.3s;animation-delay:-.2s}
.eq i:nth-child(5){background:#3BB8FF;color:#3BB8FF;animation-duration:.95s;animation-delay:-.7s}
@keyframes eq{0%{transform:scaleY(.2)}100%{transform:scaleY(1)}}
/* theme button: Daft Punk helmets instead of sun/moon */
.themebtn span{width:28px;height:28px}.themebtn svg{display:block;width:28px;height:28px;filter:drop-shadow(0 0 4px rgba(255,255,255,.15))}
/* clock digits as an LED panel too */
.clock .tm{position:relative;display:inline-block;font-family:Rajdhani,"Exo 2",sans-serif;font-weight:700;font-size:3rem;letter-spacing:.06em;font-variant-numeric:tabular-nums}
.clock .tm::after{content:"";position:absolute;inset:-2px;pointer-events:none;background:radial-gradient(circle,transparent .95px,color-mix(in srgb,var(--card) 88%,transparent) 1.35px) 0 0/3px 3px}
/* finished builds get a rainbow progress bar */
.rainbow span{background:var(--rainbow)!important;background-size:200% 100%!important;animation:rainbowslide 4s linear infinite;box-shadow:0 0 10px rgba(255,255,255,.25)}
@keyframes rainbowslide{to{background-position:-200% 0}}
/* splash: Alive-style LED pyramid behind the logo, lines chasing through colours */
.sp-in{position:relative}
.sp-pyr{position:absolute;left:50%;top:50%;width:min(600px,96vw);transform:translate(-50%,-62%);z-index:-1;opacity:.5;fill:none;stroke-width:2;overflow:visible}
.sp-pyr path{stroke:#2BFF88;filter:drop-shadow(0 0 6px currentColor);animation:pyr 2.4s linear infinite}
.sp-pyr path:nth-child(2){animation-delay:-.3s}.sp-pyr path:nth-child(3){animation-delay:-.6s}.sp-pyr path:nth-child(4){animation-delay:-.9s}.sp-pyr path:nth-child(5){animation-delay:-1.2s}.sp-pyr path:nth-child(6){animation-delay:-1.5s}.sp-pyr path:nth-child(7){animation-delay:-1.8s}
@keyframes pyr{0%{stroke:#2BFF88;color:#2BFF88}20%{stroke:#FCEE0A;color:#FCEE0A}40%{stroke:#FF9F1C;color:#FF9F1C}60%{stroke:#FF3B5C;color:#FF3B5C}80%{stroke:#3BB8FF;color:#3BB8FF}100%{stroke:#2BFF88;color:#2BFF88}}
#splash .sp-in{isolation:isolate}
@media (prefers-reduced-motion:reduce){.eq i,.rainbow span,.sp-pyr path{animation:none}}
@media (max-width:599px){.eq{margin-right:6px}}
/* while fonts load (see "fw" in the head) keep text hidden rather than flashing a fallback font */
/* only the header's text waits for fonts; its solid background shows from the first moment, because Safari
   decides the status-bar colour while the page loads and needs to see the header then */
html.fw header.top .topin,html.fw #app,html.fw footer{visibility:hidden}
/* load curtain: a solid full-screen layer in the page colour while fonts load (~0.25s), then fades.
   iOS Safari picks its status-bar colour from a solid full-screen layer at load (it works when the splash
   shows), so this gives it the same thing on refreshes too */
#curtain{position:fixed;inset:0;z-index:90;background:var(--paper);transition:opacity .25s ease}
html:not(.fw) #curtain{opacity:0;pointer-events:none}
/* ---------- dynamic touches ---------- */
/* scroll reveal: things below the fold fade + rise in as they scroll into view (uses `translate`, so hover transforms still work) */
.rv{opacity:0;translate:0 22px;transition:opacity .55s var(--ease),translate .55s var(--ease)}
.rv.rv-in{opacity:1;translate:0 0}
/* in-progress bars: faint, slow-drifting stripes (finished ones keep the rainbow) */
.meter .bar span,.mini span{background:repeating-linear-gradient(45deg,rgba(0,0,0,.08) 0 10px,transparent 10px 20px),linear-gradient(90deg,var(--sage),var(--blue));background-size:28px 28px,100% 100%;animation:stripes 4s linear infinite}
@keyframes stripes{to{background-position:28px 0,0 0}}
/* live dot on builds that are still in progress */
.live{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--sage);margin:0 8px 2px 0;vertical-align:middle;animation:livepulse 1.8s ease-out infinite}
@keyframes livepulse{0%{box-shadow:0 0 0 0 rgb(from var(--sage) r g b / .65)}100%{box-shadow:0 0 0 8px rgb(from var(--sage) r g b / 0)}}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;translate:none}}
@media (prefers-reduced-motion:reduce){#splash{display:none}.au{animation:none}}