/* ==========================================================================
   Bakersfield Lighting — live layer
   Loaded after site.css. The hero follows the real sun and clock in
   Bakersfield, and the home page has a sign demo. Behaviour lives in live.js.
   ========================================================================== */

/* ---------- Header: the phone dot breathes while the shop is open ---------- */
.hdr__tel.is-open::before { background: var(--lamp); box-shadow: 0 0 10px var(--lamp); animation: breathe 2.6s ease-in-out infinite; }
@keyframes breathe { 50% { opacity: .35; } }

/* ---------- Hero sky: follows the real sun over Bakersfield ---------- */
.hero.is-day { background: linear-gradient(#14264a 0%, #0d1626 36%, var(--ink) 64%); }
.hero.is-dusk { background: linear-gradient(#1d1b38 0%, #3b1c25 32%, var(--ink) 66%); }

/* the moon at tonight's phase: washed out by the street, clear once the lights go off */
.moon {
  position: absolute; z-index: -1; pointer-events: none;
  right: clamp(24px, 9vw, 150px); top: calc(var(--hdr) + clamp(28px, 9vh, 96px)); width: clamp(34px, 4vw, 54px);
  opacity: .42; transition: opacity 1.2s var(--ease), filter 1.2s var(--ease);
}
.moon svg { width: 100%; height: auto; }
.moon__dark { fill: rgba(255, 255, 255, .05); }
.moon__lit { fill: var(--lamp); }
.hero[data-lights="off"] .moon { opacity: 1; filter: drop-shadow(0 0 16px rgba(255, 241, 220, .55)); }
.hero.is-day .moon { display: none; }

/* ---------- Hero readout: Bakersfield's clock, and what the sky is doing ---------- */
.live {
  position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px;
  width: min(100% - 2 * var(--gut), var(--wrap)); min-height: 1.5rem; margin: 0 auto -1.5rem;
  font-weight: 600; font-size: .75rem; line-height: 1.25; letter-spacing: .08em; text-transform: uppercase; color: var(--d-mute);
}
.live[hidden] { display: none; }
.live__dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--lamp); box-shadow: 0 0 10px var(--lamp); animation: breathe 2.6s ease-in-out infinite; }
.live__clock { font-weight: 600; color: #fff; }
.live__say { transition: opacity .3s; }
.live__say.is-swap { opacity: 0; }
.hero[data-lights="off"] .live__dot { background: #55555b; box-shadow: none; animation: none; }

/* ---------- Sign demo: what an outage does to a sign ---------- */
.signlab__say { margin-top: 18px; max-width: 46ch; font-size: clamp(1.0625rem, 1.3vw, 1.1875rem); line-height: 1.5; color: var(--muted); }
.signlab__stage {
  --glow: 1; --glowc: 224, 26, 18;
  position: relative; isolation: isolate; overflow: hidden; margin-top: clamp(28px, 4vw, 52px);
  border-radius: var(--r-xl); background: var(--char); color: #fff; box-shadow: 0 40px 90px -50px rgba(10, 10, 11, .9);
}
.signlab__wall {
  container-type: inline-size; position: relative; display: grid; place-items: center;
  min-height: clamp(230px, 32vw, 430px); padding: clamp(40px, 7vw, 96px) clamp(16px, 4vw, 56px) clamp(56px, 7vw, 96px);
  /* siding boards, and the grain the rest of the site uses */
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, .04) 0 1px, transparent 1px 38px);
}
/* the light the sign throws on the wall: it dims with every letter that is out */
.signlab__wall::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: var(--glow); transition: opacity .8s var(--ease);
  background: radial-gradient(58% 64% at 50% 50%, rgba(var(--glowc), .4), transparent 72%);
}
.signlab__wall::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: var(--grain); opacity: .22; mix-blend-mode: overlay; pointer-events: none; }
.signlab__sign {
  position: relative; margin: 0; text-align: center; line-height: 1.1;
  font-family: var(--neon); font-weight: 400; letter-spacing: -.01em; color: #fff3ee; text-shadow: var(--tube);
  font-size: clamp(2.25rem, 8vw, 7rem);
  font-size: min(calc(100cqi / (var(--n, 14) * var(--cw, .6))), 7.5rem);
}
.signlab__word { position: relative; display: inline-block; white-space: nowrap; }
/* the raceway each word is mounted on */
.signlab__word::before { content: ""; position: absolute; left: -.12em; right: -.12em; top: calc(50% - .07em); height: .16em; z-index: -1; border-radius: 3px; background: #0e0e10; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); }
.ltr { display: inline-block; transition: color .3s, text-shadow .3s; }
.ltr.is-out { color: #3e3437; text-shadow: none; cursor: pointer; }
.ltr.is-dying { cursor: pointer; animation: buzz 2.3s steps(1) infinite; }
.ltr.is-new { animation: tube 1.1s both; }
.ltr:focus-visible { outline: 2px solid #fff; outline-offset: .04em; border-radius: 6px; }
@media (hover: hover) { .ltr.is-out:hover { color: #7b5d61; } }

.signlab__stage[data-mode="led"] { --glowc: 255, 241, 220; }
.signlab__stage[data-mode="led"] .signlab__sign { --cw: .72; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #fff; text-shadow: 0 0 .05em #fff, 0 0 .35em rgba(255, 241, 220, .75), 0 0 1em rgba(255, 241, 220, .35); }
.signlab__stage[data-mode="led"] .ltr.is-out { color: #2f2f34; text-shadow: none; }
.signlab__stage[data-mode="led"] .ltr.is-new { animation: fade .5s both; }

.signlab__status { position: absolute; left: clamp(14px, 2vw, 22px); top: clamp(14px, 1.8vw, 20px); margin: 0; font-weight: 600; font-size: .75rem; line-height: 1.2; letter-spacing: .08em; text-transform: uppercase; color: var(--d-mute); }
.signlab__cta { position: absolute; right: clamp(14px, 2vw, 22px); bottom: clamp(14px, 1.8vw, 20px); font-size: .9375rem; }
.signlab__bar { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; padding: clamp(12px, 1.8vw, 18px); border-top: 1px solid var(--d-line); background: rgba(255, 255, 255, .03); }
.signlab__bar input {
  flex: 1 1 220px; min-width: 0; min-height: 54px; padding: 0 18px; border-radius: 12px;
  border: 1px solid rgba(255, 255, 255, .16); background: rgba(255, 255, 255, .06); color: #fff; font-size: 1rem;
}
.signlab__bar input::placeholder { color: var(--d-mute); }
.signlab__bar input:focus { outline: 2px solid #fff; outline-offset: 2px; }
.signlab__modes { display: inline-flex; border: 1px solid rgba(255, 255, 255, .16); border-radius: 12px; overflow: hidden; }
.signlab__modes button { min-height: 52px; padding: 0 16px; white-space: nowrap; border: 0; background: none; color: var(--d-text); font-weight: 600; font-size: .9375rem; transition: background .2s, color .2s; }
.signlab__modes button[aria-pressed="true"] { background: rgba(255, 255, 255, .14); color: #fff; }
.signlab__bar .btn:disabled { opacity: .45; cursor: default; box-shadow: none; }

@media (max-width: 720px) {
  .moon { top: auto; right: 20px; bottom: calc(clamp(240px, 38svh, 340px) - 58px); width: 34px; }
  .live { margin-bottom: -2.5rem; }
  .signlab__wall { padding-top: 68px; }
  .signlab__bar .btn, .signlab__modes { flex: 1 1 auto; justify-content: center; }
  .signlab__modes button { flex: 1; }
  .signlab__status { right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .hdr__tel.is-open::before, .live__dot, .ltr.is-dying, .ltr.is-new { animation: none; }
}

/* ---------- Careers: the address stays visible, for visitors whose computer has no email app set up ---------- */
.hiring__act { display: grid; justify-items: start; gap: 12px; }
.hiring .hiring__addr { margin-top: 0; font-size: .9375rem; line-height: 1.5; color: var(--d-text); }
.hiring__addr a { color: #fff; font-weight: 600; text-decoration: none; overflow-wrap: anywhere; background: linear-gradient(var(--red), var(--red)) 0 100% / 100% 2px no-repeat; }
.copy { margin-left: 4px; padding: 3px 10px; border: 1px solid rgba(255, 255, 255, .24); border-radius: 999px; background: none; color: #fff; font-weight: 600; font-size: .8125rem; line-height: 1.4; transition: background .2s; }
.copy:hover { background: rgba(255, 255, 255, .12); }

/* ---------- Call-back form: site.css gives .form a display value, which beats the hidden attribute ---------- */
.form[hidden], .form__done[hidden] { display: none !important; }

/* ---------- Privacy policy ---------- */
.legal__date { margin-top: 18px; font-size: .9375rem; color: var(--d-mute); }
.legal { max-width: 68ch; }
.legal .h3 { margin: 2.2em 0 .7em; }
.legal ul { list-style: disc; padding-left: 1.2em; color: #46444a; }
.legal li + li { margin-top: .55em; }
.legal ul + p { margin-top: 1.1em; }
.legal a { color: var(--ink); font-weight: 600; text-decoration-color: var(--red); text-underline-offset: 3px; }