/* Edrianne 2026-11 upgrades: full-width LED ticker, lightbox service panels, neon OPEN sign.
   Loaded after assets/home/styles.css on the front page only. Existing sections are untouched. */

/* 1. LED ticker: same words and motion, now edge to edge */
.led-wrap { padding: 0; }
.led-wrap .led-cabinet {
  width: 100%; max-width: none; margin: 0;
  border-left: 0; border-right: 0; border-radius: 0;
  padding-left: 0; padding-right: 0;
}
.led-wrap .led-screen { border-left: 0; border-right: 0; }
.led-screen:hover .led-track { animation-play-state: paused; }
/* Each run now holds the words 4x, so the loop is 4x longer: 4 x 37s keeps the original speed. */
.led-track { animation-duration: 148s; }
/* The track was centred in its screen, so halfway through each loop the words ran out mid-screen.
   Pin it to the left edge so the loop is seamless. */
.led-wrap .led-screen { display: block; position: relative; }
.led-wrap .led-track { position: absolute; top: 0; left: 0; margin: 0; }
@media (prefers-reduced-motion: reduce) {
  .led-run > :nth-child(n+11) { display: none; }
  .led-wrap .led-track { position: static; }
}

/* 2. Lightbox service panels */
.lightbox-services { background: #0a1737; color: #fff; padding-block: clamp(70px, 9vw, 110px); }
.lightbox-heading { max-width: 640px; margin-bottom: 34px; }
.lightbox-heading .section-number { color: #ffb81c; }
.lightbox-heading h2 {
  margin: 14px 0 12px; font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif;
  font-weight: 900; font-size: clamp(44px, 5.6vw, 72px); line-height: .92; text-transform: uppercase; color: #fff;
}
.lightbox-heading p { margin: 0; font-size: 18px; line-height: 1.6; color: #c9d3df; }
.lightbox-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.lightbox-grid li { display: flex; }
.lightbox-panel {
  flex: 1; display: flex; flex-direction: column; min-height: 176px; padding: 22px; text-decoration: none;
  background: #0d1a3a; border: 2px solid #22345f; color: #c9d3df;
  transition: background .35s, border-color .35s, box-shadow .35s, transform .35s;
}
.lightbox-name {
  font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; font-weight: 900; font-size: 30px; line-height: 1;
  text-transform: uppercase; letter-spacing: .02em; color: #8d9bba; transition: color .35s, text-shadow .35s;
}
.lightbox-desc { margin-top: 10px; font-size: 15px; line-height: 1.5; color: #b7c2d6; }
.lightbox-cta { margin-top: auto; padding-top: 16px; font-weight: 700; font-size: 14px; color: #b7c2d6; transition: color .35s; }
.lightbox-panel:hover, .lightbox-panel:focus-visible {
  background: #14275a; border-color: #ffb81c; transform: translateY(-3px);
  box-shadow: 0 0 0 1px #ffb81c, 0 0 34px rgba(255,184,28,.35), inset 0 0 40px rgba(255,216,74,.12);
}
.lightbox-panel:hover .lightbox-name, .lightbox-panel:focus-visible .lightbox-name {
  color: #ffd84a; text-shadow: 0 0 8px rgba(255,184,28,.9), 0 0 22px rgba(240,122,0,.6);
}
.lightbox-panel:hover .lightbox-cta, .lightbox-panel:focus-visible .lightbox-cta { color: #ffb81c; }
.lightbox-panel:focus-visible { outline: 3px solid #ffd84a; outline-offset: 3px; }

/* Phones have no hover: panels switch on as they scroll into view */
@media (hover: none) {
  @supports (animation-timeline: view()) {
    .lightbox-panel { animation: edr-lightbox-on linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
    .lightbox-panel .lightbox-name { animation: edr-lightbox-name linear both; animation-timeline: view(); animation-range: entry 30% cover 45%; }
  }
}
@keyframes edr-lightbox-on {
  0%, 60% { background: #0d1a3a; border-color: #22345f; box-shadow: none; }
  70% { border-color: #5a4a1a; } 75% { border-color: #22345f; }
  100% { background: #14275a; border-color: #ffb81c; box-shadow: 0 0 0 1px #ffb81c, 0 0 26px rgba(255,184,28,.3); }
}
@keyframes edr-lightbox-name {
  0%, 60% { color: #8d9bba; text-shadow: none; }
  100% { color: #ffd84a; text-shadow: 0 0 8px rgba(255,184,28,.9), 0 0 22px rgba(240,122,0,.6); }
}

/* 3. Neon OPEN sign (yellow) */
.shop-neon { margin-bottom: 26px; }
.shop-neon-window {
  min-height: 210px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  padding: 26px; background: #071329; border: 8px solid #1d2a48; box-shadow: inset 0 0 60px rgba(0,0,0,.6);
}
.location .shop-neon-sign {
  margin: 0; max-width: none; padding: 4px 26px; border-radius: 14px; border: 4px solid #2a3556;
  font-family: "Big Shoulders Display", "Arial Narrow", Impact, sans-serif; font-weight: 900;
  font-size: clamp(60px, 7vw, 100px); line-height: 1; letter-spacing: .08em; color: #3a4566;
}
.location .shop-neon[data-state="open"] .shop-neon-sign {
  color: #fff6c9; border-color: #ffd84a;
  text-shadow: 0 0 6px #ffd84a, 0 0 18px #ffb81c, 0 0 44px #ffb81c; box-shadow: 0 0 16px #ffb81c, inset 0 0 14px #ffb81c;
  animation: edr-neon-hum 4s 1.2s ease-in-out infinite;
}
.location .shop-neon[data-state="lunch"] .shop-neon-sign {
  color: #ffe2b8; border-color: #f07a00; font-size: clamp(46px, 5.6vw, 76px);
  text-shadow: 0 0 6px #f07a00, 0 0 20px #f07a00; box-shadow: 0 0 12px rgba(240,122,0,.6), inset 0 0 10px rgba(240,122,0,.5);
}
.shop-neon[data-state="open"] .shop-neon-sign.is-switching,
.shop-neon[data-state="lunch"] .shop-neon-sign.is-switching { animation: edr-neon-on 1.2s ease-out both, edr-neon-hum 4s 1.2s ease-in-out infinite; }
.location .shop-neon-line { max-width: none; margin: 0; line-height: 1.4; font-weight: 600; font-size: 16px; color: #c9d3df; text-align: center; }
.shop-hours { width: 100%; margin-top: 14px; border-collapse: collapse; font-size: 16px; }
.shop-hours caption { text-align: left; font-weight: 800; font-size: 13px; letter-spacing: .12em; text-transform: uppercase; padding-bottom: 6px; }
.shop-hours th, .shop-hours td { padding: 10px 0; border-top: 1px solid rgba(15,33,80,.15); }
.shop-hours th { text-align: left; font-weight: 500; }
.shop-hours td { text-align: right; font-weight: 700; }
@keyframes edr-neon-on { 0% { opacity: .08; } 12% { opacity: 1; } 18% { opacity: .2; } 30% { opacity: 1; } 36% { opacity: .5; } 48%, 100% { opacity: 1; } }
@keyframes edr-neon-hum { 0%, 100% { opacity: 1; } 50% { opacity: .88; } }

@media (max-width: 760px) {
  .lightbox-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .lightbox-panel { min-height: 136px; padding: 16px; }
  .lightbox-name { font-size: 23px; }
  .lightbox-desc { font-size: 13px; line-height: 1.4; }
  .lightbox-cta { font-size: 13px; padding-top: 10px; }
  .shop-neon-window { min-height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .lightbox-panel, .lightbox-panel .lightbox-name, .shop-neon-sign { animation: none !important; transition: none !important; }
}

/* 4. Accessibility, keeping the premium motion:
   text keeps its scroll slide but is always fully readable (only visuals fade),
   and the "Explore all completed work" link gets a comfortable tap area. */
.site-motion .flow-copy { opacity: 1; }
.project-note a { display: inline-block; padding-block: 10px; }