/* PROJECTED REALITY — live lighting page only. Loads after css/services.css and uses its tokens.
   1. "Pick your ingredients": 2D canvas stage (js/svc-lighting.js paints the light), recipe buttons
      and the fixture-type rack. Everything around the canvas is tokens only.
   2. "Looks" marquee: pure CSS, duplicated track, pauses on hover / off-screen. */

/* ===== 1. Pick your ingredients ===== */
.ing{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:1.5rem 2.5rem;align-items:start}
.ing-stage{padding:1rem 1rem 1.1rem;border:1px solid var(--border);border-radius:16px;background:var(--surface);display:grid;gap:.7rem}
.ing-hud{display:flex;justify-content:space-between;align-items:center;gap:.4rem 1.4rem;flex-wrap:wrap;padding:0 .25rem .7rem;border-bottom:1px solid var(--border);font:400 .68rem/1.6 var(--font-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--text-3)}
.ing-hud b{font-weight:500;color:var(--text)}
.ing-run{display:inline-flex;align-items:center;gap:.55em;color:var(--text-2)}
.ing-run i{width:6px;height:6px;border-radius:50%;background:var(--live);animation:ing-pulse 1.8s ease-in-out infinite}
@keyframes ing-pulse{50%{opacity:.35}}
.ing-canvas{display:block;width:100%;height:auto;aspect-ratio:16/9;border-radius:10px;background:var(--bg)}
.ing-progress{height:1px;background:var(--border);overflow:hidden}
.ing-progress i{display:block;height:100%;background:var(--accent);transform-origin:left;transform:scaleX(0)}
.ing-panel{display:grid;gap:1.25rem;align-content:start;padding-top:.2rem}
.ing-label{font:500 .66rem/1.4 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);margin-bottom:.55rem}
.ing-recipes{display:flex;flex-wrap:wrap;gap:.45rem}
.ing-recipe{min-height:44px;padding:0 1rem;border:1px solid var(--border);border-radius:999px;background:transparent;color:var(--text-2);font:500 .88rem/1.2 var(--font-body);display:inline-flex;align-items:center;gap:.6em;cursor:pointer;transition:color .25s,background .25s,border-color .25s}
.ing-recipe .n{font:400 .64rem/1 var(--font-mono);letter-spacing:.12em;color:var(--text-3);transition:color .25s}
.ing-recipe:hover{color:var(--text);border-color:var(--border-hover)}
.ing-recipe[aria-pressed="true"]{background:var(--text);color:var(--bg);border-color:var(--text)}
.ing-recipe[aria-pressed="true"] .n{color:rgba(var(--bg-rgb),.6)}
.ing-recipe:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ing-desc{color:var(--text-2);font-size:.95rem;line-height:1.55;min-height:4.6em;max-width:46ch}
.ing-rack{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.5rem}
.ing-chip{position:relative;min-height:60px;padding:.65rem 1.6rem .65rem .8rem;border:1px solid var(--border);border-radius:12px;background:var(--surface);color:var(--text-3);display:flex;align-items:center;gap:.65rem;text-align:left;font:500 .84rem/1.2 var(--font-body);letter-spacing:-.005em;cursor:pointer;transition:color .25s,border-color .25s,background .25s}
.ing-chip svg{width:26px;height:26px;flex:none;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round;transition:color .25s}
.ing-chip::after{content:"";position:absolute;top:.6rem;right:.6rem;width:6px;height:6px;border-radius:50%;background:var(--text-3);opacity:.35;transition:background .25s,opacity .25s}
.ing-chip:hover{color:var(--text-2);border-color:var(--border-hover)}
.ing-chip[aria-pressed="true"]{color:var(--text);border-color:var(--border-hover);background:var(--surface-2)}
.ing-chip[aria-pressed="true"] svg{color:var(--accent)}
.ing-chip[aria-pressed="true"]::after{background:var(--accent);opacity:1}
.ing-chip:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ing-note{color:var(--text-3);font-size:.88rem;line-height:1.55;max-width:46ch}

/* ===== 2. Looks marquee ===== */
.looks .section-head{margin-bottom:clamp(1.5rem,3vh,2.25rem)}
.looks-track{overflow:hidden;width:100%;padding-left:var(--gutter);-webkit-mask-image:linear-gradient(90deg,transparent,var(--bg) 7%,var(--bg) 93%,transparent);mask-image:linear-gradient(90deg,transparent,var(--bg) 7%,var(--bg) 93%,transparent)}
.looks-rail{display:flex;width:max-content;animation:looks-scroll 44s linear infinite;will-change:transform}
.looks-track.is-idle .looks-rail{animation-play-state:paused}
@keyframes looks-scroll{to{transform:translateX(-50%)}}
.looks-set{--lgap:1rem;list-style:none;display:flex;gap:var(--lgap);padding:0 var(--lgap) 0 0}
.look{flex:none;width:280px;border:1px solid var(--border);border-radius:14px;background:var(--surface);overflow:hidden;transition:border-color .3s}
.look:hover{border-color:var(--border-hover)}
.look figure{display:grid;gap:0}
.look img{width:280px;height:170px;object-fit:cover;filter:saturate(.85);border-bottom:1px solid var(--border)}
.look figcaption{display:grid;gap:.35rem;padding:.95rem 1rem 1.05rem}
.look-n{font:400 .66rem/1 var(--font-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.look-name{font:600 1.05rem/1.2 var(--font-display);letter-spacing:-.015em;color:var(--text)}
.look p{color:var(--text-2);font-size:.88rem;line-height:1.5}
.look-sw{display:flex;gap:.35rem;margin-top:.45rem}
.look-sw i{width:12px;height:12px;border-radius:3px;background:var(--sw);border:1px solid rgba(var(--text-rgb),.12)}

/* ===== responsive ===== */
@media (max-width:1000px){
  .ing{grid-template-columns:1fr}
  .ing-panel{padding-top:0}
}
@media (max-width:640px){
  .ing-stage{padding:.8rem .8rem .9rem}
  .ing-hud{padding-bottom:.6rem}
  .ing-run{display:none}
  .ing-rack{grid-template-columns:repeat(2,minmax(0,1fr))}
  .ing-chip{min-height:56px;padding:.6rem 1.4rem .6rem .7rem;gap:.55rem}
  .ing-recipe{padding:0 .85rem}
  .ing-desc{min-height:0}
  .looks-set{--lgap:.75rem}
}
@media (prefers-reduced-motion:reduce){
  .looks-track{overflow-x:auto;-webkit-mask-image:none;mask-image:none;padding-bottom:.5rem}
  .looks-rail{width:auto;animation:none}
  .looks-set{padding-right:var(--gutter)}
  .looks-set[aria-hidden="true"]{display:none}
  .ing-progress i{transform:scaleX(1)}
  .ing-run i{animation:none}
}