/* glow3d lamp Light / RGB controls on lamp photos (lamp-rgb.js adds the markup).
   Pill + buttons: same look as chakra-lotus-lamp.html (.lamp-controls / .light-toggle / .rgb-btn / .lamp-status),
   namespaced lrgb-* so they never touch a page's own buttons. Light off draws nothing over the photo.
   --lrgb-c is the lamp colour: warm white (~2700 K, the 3D page's 255,170,110) or the live RGB cycle. */
@property --lrgb-c { syntax: '<color>'; inherits: true; initial-value: #ffaa6e; }

.lrgb-host { position: relative; --lrgb-c: #ffaa6e; }
.lrgb-host[data-lrgb="rgb"] { animation: lrgb-cycle 8s linear infinite; }
.lrgb-host[data-lrgb-away] { animation-play-state: paused; }

/* ---- the glow on the photo ---- */
.lrgb-tint, .lrgb-halo {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
/* the photo's lit areas take the lamp colour, darks stay dark (colour blend keeps the photo's own brightness) */
.lrgb-tint { background: var(--lrgb-c); mix-blend-mode: color; }
/* soft bloom-like halo around the light (screen = only adds light) + a faint glow at the frame edge */
.lrgb-halo {
  background:
    radial-gradient(ellipse 50% 42% at 50% 46%, var(--lrgb-c), transparent 72%),
    radial-gradient(ellipse 85% 70% at 50% 50%, color-mix(in srgb, var(--lrgb-c) 45%, transparent), transparent 80%);
  box-shadow: inset 0 0 90px color-mix(in srgb, var(--lrgb-c) 16%, transparent);
  mix-blend-mode: screen;
}
.lrgb-host[data-lrgb="on"] > .lrgb-tint, .lrgb-host[data-lrgb="on"] > .lrgb-halo,
.lrgb-host[data-lrgb="rgb"] > .lrgb-tint, .lrgb-host[data-lrgb="rgb"] > .lrgb-halo { visibility: visible; transition: opacity 0.6s ease, visibility 0s; }
.lrgb-host[data-lrgb="on"] > .lrgb-tint { opacity: 0.3; }
.lrgb-host[data-lrgb="on"] > .lrgb-halo { opacity: 0.28; }
.lrgb-host[data-lrgb="rgb"] > .lrgb-tint { opacity: 0.62; }
.lrgb-host[data-lrgb="rgb"] > .lrgb-halo { opacity: 0.26; }
/* product page: the halo around the frame, same levels as the 3D page's stage (0.16 / 0.07) */
.stage.lrgb-host[data-lrgb="on"][data-view="main"], .stage.lrgb-host[data-lrgb="rgb"][data-view="main"] {
  box-shadow: 0 30px 80px rgba(0,0,0,0.45), 0 0 90px color-mix(in srgb, var(--lrgb-c) 16%, transparent), 0 0 160px color-mix(in srgb, var(--lrgb-c) 7%, transparent);
}
.stage.lrgb-host[data-lrgb="rgb"] { transition: none; }
/* galleries: only on the main picture */
.lrgb-host[data-view]:not([data-view="main"]) > .lrgb-tint,
.lrgb-host[data-view]:not([data-view="main"]) > .lrgb-halo,
.lrgb-host[data-view]:not([data-view="main"]) > .lrgb-ui { display: none; }

/* ---- controls: overlaid at the bottom centre of the picture; only the buttons take pointer events ---- */
.lrgb-ui { position: absolute; inset: 0; z-index: 4; pointer-events: none; container-type: inline-size; }
.lrgb-pill {
  position: absolute;
  left: 50%;
  bottom: 14px;
  transform: translateX(-50%);
  width: max-content;
  max-width: calc(100% - 24px);
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 0.4rem 0.6rem;
  padding: 0.45rem 0.45rem 0.35rem;
  border-radius: 30px;
  background: rgba(8,8,12,0.55);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.08);
  pointer-events: none;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  line-height: 1.6;
  text-align: left;
  -webkit-tap-highlight-color: transparent;
}
.lrgb-pill button { pointer-events: auto; min-height: 44px; margin: 0; touch-action: manipulation; }
.lrgb-light {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.7rem 1.4rem 0.7rem 0.8rem;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.15);
  background: #101016;
  color: #eee;
  font: inherit;
  font-size: 0.88rem;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s;
}
.lrgb-light:hover { border-color: rgba(0,229,255,0.5); }
.lrgb-track {
  position: relative;
  width: 42px;
  height: 24px;
  flex: none;
  border-radius: 50px;
  background: #2a2a33;
  transition: background 0.4s;
}
.lrgb-track::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #888;
  transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), background 0.4s, box-shadow 0.4s;
}
.lrgb-light[aria-pressed="true"] .lrgb-track { background: linear-gradient(90deg, #00e5ff, #ff6b4a); }
.lrgb-light[aria-pressed="true"] .lrgb-track::after { transform: translateX(18px); background: #fff; box-shadow: 0 0 12px rgba(255,200,150,0.8); }
.lrgb-light[aria-pressed="true"] { box-shadow: 0 0 24px rgba(255,170,110,0.12); }
.lrgb-rgb {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 1.4rem;
  border-radius: 50px;
  border: 1px solid rgba(255,255,255,0.15);
  background: #101016;
  color: #eee;
  font: inherit;
  font-size: 0.88rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  cursor: pointer;
  transition: border-color 0.3s, box-shadow 0.3s, color 0.3s;
}
.lrgb-rgb:hover { border-color: rgba(0,229,255,0.5); }
.lrgb-dot {
  width: 14px;
  height: 14px;
  flex: none;
  border-radius: 50%;
  background: conic-gradient(#ff3b3b, #ffd23b, #3bff6b, #3bd8ff, #3b5bff, #d23bff, #ff3b3b);
  opacity: 0.55;
  transition: opacity 0.3s, box-shadow 0.3s;
}
.lrgb-rgb[aria-pressed="true"] {
  color: #fff;
  border-color: color-mix(in srgb, var(--lrgb-c) 90%, transparent);
  box-shadow: 0 0 22px color-mix(in srgb, var(--lrgb-c) 35%, transparent), inset 0 0 12px color-mix(in srgb, var(--lrgb-c) 12%, transparent);
  transition: color 0.3s;
}
.lrgb-rgb[aria-pressed="true"] .lrgb-dot { opacity: 1; background: var(--lrgb-c); box-shadow: 0 0 12px color-mix(in srgb, var(--lrgb-c) 90%, transparent); transition: opacity 0.3s; }
/* contain: the status line never widens the pill (it wraps under the buttons instead) */
.lrgb-status { flex-basis: 100%; contain: inline-size; text-align: center; color: #aaa; font-size: 0.75rem; letter-spacing: 0.05em; font-weight: 300; line-height: 1.3; }
.lrgb-light:focus-visible, .lrgb-rgb:focus-visible { outline: 2px solid #00e5ff; outline-offset: 3px; }

/* narrow pictures: phone cards (and the product photo beside its corner counter) keep the switch, RGB and status
   line with the "Light on/off" text kept for screen readers only; tiny "You may also like" cards keep just the two buttons */
@container (max-width: 459px) {
  .lrgb-tight .lrgb-pill { bottom: 10px; }
  .lrgb-tight .lrgb-light { gap: 0; padding: 0.55rem 0.7rem; }
  .lrgb-tight .lrgb-rgb { padding: 0.55rem 1rem; }
  .lrgb-tight .lrgb-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@container (max-width: 319px) {
  .lrgb-pill { bottom: 10px; }
  .lrgb-light { gap: 0; padding: 0.55rem 0.7rem; }
  .lrgb-rgb { padding: 0.55rem 1rem; }
  .lrgb-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
}
@container (max-width: 219px) {
  .lrgb-pill { bottom: 8px; gap: 0.35rem; padding: 0.3rem; max-width: calc(100% - 12px); flex-wrap: nowrap; }
  .lrgb-rgb { padding: 0.55rem 0.9rem; }
  .lrgb-rgb-text, .lrgb-status { display: none; }
}

/* RGB cycle: the 3D page's colours (saturated LED hues stepped evenly in OKLab hue, red -> yellow -> green ->
   cyan -> blue -> magenta -> red), sampled 48 times per 8 s loop */
@keyframes lrgb-cycle {
  0% { --lrgb-c: #ff0000; }
  2.083% { --lrgb-c: #ff4c00; }
  4.167% { --lrgb-c: #ff6800; }
  6.25% { --lrgb-c: #ff7d00; }
  8.333% { --lrgb-c: #ff8e00; }
  10.417% { --lrgb-c: #ff9d00; }
  12.5% { --lrgb-c: #ffac00; }
  14.583% { --lrgb-c: #ffba00; }
  16.667% { --lrgb-c: #ffca00; }
  18.75% { --lrgb-c: #ffda00; }
  20.833% { --lrgb-c: #ffee00; }
  22.917% { --lrgb-c: #f8ff00; }
  25% { --lrgb-c: #dcff00; }
  27.083% { --lrgb-c: #bbff00; }
  29.167% { --lrgb-c: #8dff00; }
  31.25% { --lrgb-c: #2dff00; }
  33.333% { --lrgb-c: #00ff73; }
  35.417% { --lrgb-c: #00ff9c; }
  37.5% { --lrgb-c: #00ffb8; }
  39.583% { --lrgb-c: #00ffcd; }
  41.667% { --lrgb-c: #00ffdf; }
  43.75% { --lrgb-c: #00ffef; }
  45.833% { --lrgb-c: #00fffe; }
  47.917% { --lrgb-c: #00f2ff; }
  50% { --lrgb-c: #00e5ff; }
  52.083% { --lrgb-c: #00d9ff; }
  54.167% { --lrgb-c: #00ccff; }
  56.25% { --lrgb-c: #00bfff; }
  58.333% { --lrgb-c: #00b0ff; }
  60.417% { --lrgb-c: #009fff; }
  62.5% { --lrgb-c: #0087ff; }
  64.583% { --lrgb-c: #005eff; }
  66.667% { --lrgb-c: #2c00ff; }
  68.75% { --lrgb-c: #4a00ff; }
  70.833% { --lrgb-c: #6300ff; }
  72.917% { --lrgb-c: #7900ff; }
  75% { --lrgb-c: #9000ff; }
  77.083% { --lrgb-c: #a900ff; }
  79.167% { --lrgb-c: #c400ff; }
  81.25% { --lrgb-c: #e200ff; }
  83.333% { --lrgb-c: #ff00fb; }
  85.417% { --lrgb-c: #ff00da; }
  87.5% { --lrgb-c: #ff00bd; }
  89.583% { --lrgb-c: #ff00a3; }
  91.667% { --lrgb-c: #ff008a; }
  93.75% { --lrgb-c: #ff0072; }
  95.833% { --lrgb-c: #ff0059; }
  97.917% { --lrgb-c: #ff003c; }
  100% { --lrgb-c: #ff0000; }
}
@media (prefers-reduced-motion: reduce) {
  /* no cycling: RGB holds one colour (the site's cyan) */
  .lrgb-host[data-lrgb="rgb"] { animation: none; --lrgb-c: #00e5ff; }
  .lrgb-tint, .lrgb-halo, .lrgb-light, .lrgb-track, .lrgb-track::after, .lrgb-rgb, .lrgb-dot { transition: none; }
}