/* Coming soon: the light switch. The phone is seen side on, so the beam leaves the optic along its own axis and lands on the trail sign ahead.
   Every moving part uses transform and opacity only. */
#s-light .lsw { display: grid; gap: 22px; }
#s-light .lsw__stage { position: relative; aspect-ratio: 600 / 340; max-height: 460px; width: 100%; border-radius: var(--radius); overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08); background: #07080b; }
#s-light .lsw__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
/* the night scene: barely there in the dark, real colour where the light lands */
#s-light .lsw__dark { --w-ground: #090a0d; --w-path: #0e0f12; --w-leaf: #0b0d0f; --w-bark: #111215; --w-post: #121316; --w-board: #15161a; --w-ink: #1d1f24; }
#s-light .lsw__hit { --w-ground: #1e1c18; --w-path: #5d5548; --w-leaf: #2c3a26; --w-bark: #6a543e; --w-post: #7d6346; --w-board: #c7a57a; --w-ink: #3a2a1a; opacity: 0; transition: opacity .4s var(--ease-out); }
#s-light [data-on="true"][data-mode="beam"] .lsw__hit--beam { opacity: 1; transition-delay: .12s; }
#s-light [data-on="true"][data-mode="flood"] .lsw__hit--flood { opacity: .5; transition-delay: .12s; }
#s-light [data-on="true"][data-mode="red"] .lsw__hit--beam { opacity: .3; transition-delay: .12s; }
#s-light [data-mode="red"] .lsw__hit { filter: sepia(1) saturate(4) hue-rotate(-30deg); }
/* the cone reaches out of the optic: an ease-out scale along the axis, no bounce */
#s-light .lsw__beamwrap { transform-box: view-box; transform-origin: 78px 100px; transform: scaleX(0); transition: transform .42s cubic-bezier(.2, .7, .2, 1); }
#s-light [data-on="true"] .lsw__beamwrap { transform: scaleX(1); }
#s-light [data-on="false"] .lsw__beamwrap { transition-duration: .25s; }
#s-light .lsw__cone { opacity: 0; transition: opacity .35s var(--ease-out); }
#s-light [data-mode="beam"] .lsw__cone--beam, #s-light [data-mode="flood"] .lsw__cone--flood, #s-light [data-mode="red"] .lsw__cone--red { opacity: 1; }
/* the optic itself: a dark lens window that glows warm when it is on */
#s-light .lsw__lensface { fill: #1b1e24; transition: fill .2s; }
#s-light .is-warm .lsw__lensface, #s-light [data-on="true"] .lsw__lensface { fill: #fff3dc; }
#s-light [data-on="true"][data-mode="red"] .lsw__lensface { fill: #ff7a6a; }
#s-light .lsw__glow { opacity: 0; transition: opacity .3s var(--ease-out); }
#s-light .is-warm .lsw__glow:not(.lsw__glow--red) { opacity: .5; }
#s-light [data-on="true"] .lsw__glow:not(.lsw__glow--red) { opacity: 1; }
#s-light [data-on="true"][data-mode="red"] .lsw__glow:not(.lsw__glow--red) { opacity: 0; }
#s-light [data-on="true"][data-mode="red"] .lsw__glow--red { opacity: 1; }
/* one soft settle as the LED comes up to full */
#s-light .lsw.is-striking .lsw__lit { animation: lsw-strike .34s ease-out; }
@keyframes lsw-strike { 0% { opacity: .55; } 30% { opacity: 1; } 55% { opacity: .82; } 100% { opacity: 1; } }
/* dust drifting along the beam */
#s-light .lsw__motes { opacity: 0; transition: opacity .6s var(--ease-out); }
#s-light [data-on="true"][data-mode="beam"] .lsw__motes { opacity: 1; }
#s-light .lsw__motes circle { fill: rgba(251, 235, 205, .5); animation: lsw-mote 9s linear infinite; animation-play-state: paused; }
#s-light .lsw.is-live .lsw__motes circle { animation-play-state: running; }
#s-light .lsw__motes circle:nth-child(2) { animation-duration: 11s; animation-delay: -3s; }
#s-light .lsw__motes circle:nth-child(3) { animation-duration: 8s; animation-delay: -6s; }
#s-light .lsw__motes circle:nth-child(4) { animation-duration: 12s; animation-delay: -1s; }
#s-light .lsw__motes circle:nth-child(5) { animation-duration: 10s; animation-delay: -8s; }
#s-light .lsw__motes circle:nth-child(6) { animation-duration: 13s; animation-delay: -5s; }
@keyframes lsw-mote { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 80% { opacity: .6; } 100% { transform: translate(480px, 4px); opacity: 0; } }
/* tap target over the phone */
#s-light .lsw__tap { position: absolute; left: 0; top: 0; bottom: 0; width: max(30%, 88px); border: 0; padding: 0; background: transparent; cursor: pointer; }
#s-light .lsw__tap:focus-visible { outline: 2px solid var(--beam); outline-offset: -6px; border-radius: var(--radius); }
#s-light .lsw__tag, #s-light .lsw__badge { position: absolute; top: 10px; margin: 0; font-size: 10px; letter-spacing: .16em; color: #8a8f98; pointer-events: none; }
#s-light .lsw__tag { left: 12px; } #s-light .lsw__badge { right: 12px; transition: color .3s; }
#s-light [data-on="true"] .lsw__badge { color: #fbebcd; }
/* LIGHT / ON type: solid word plus a hollow word that fills with light */
#s-light .lsw__ui { display: grid; gap: 16px; align-items: end; }
#s-light .lsw__word { margin: 0; display: flex; flex-direction: column; font: 600 clamp(48px, 7vw, 96px)/.92 var(--f-display); letter-spacing: -.045em; }
#s-light .lsw__hollow { color: transparent; -webkit-text-stroke: 1.2px rgba(238, 240, 243, .85); position: relative; }
#s-light .lsw__hollow::after { content: attr(data-text); position: absolute; left: 0; top: 0; color: #fbebcd; -webkit-text-stroke: 0; text-shadow: 0 0 18px rgba(255, 215, 154, .7); opacity: 0; transition: opacity .5s var(--ease-out); }
#s-light [data-on="true"] .lsw__hollow::after { opacity: 1; }
#s-light [data-mode="red"] .lsw__hollow::after { color: #ff8a7a; text-shadow: 0 0 18px rgba(255, 74, 58, .7); }
#s-light .lsw__ctrls { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }
#s-light .lsw__pill { position: relative; display: inline-flex; padding: 4px; border-radius: 999px; background: #101217; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
#s-light .lsw__pill button { position: relative; z-index: 1; width: 64px; min-height: 44px; border: 0; background: none; font: 600 13px/1 var(--f-mono); letter-spacing: .14em; text-transform: uppercase; color: #8a8f98; transition: color .3s; }
#s-light .lsw__pill button[aria-pressed="true"] { color: #07080b; }
#s-light .lsw__knob { position: absolute; left: 4px; top: 4px; width: 64px; bottom: 4px; border-radius: 999px; background: #fbebcd; transition: transform .35s cubic-bezier(.2, .7, .2, 1), box-shadow .3s; }
#s-light [data-on="true"] .lsw__knob { transform: translate3d(64px, 0, 0); box-shadow: 0 0 14px rgba(255, 215, 154, .6); }
#s-light .lsw__modes { display: inline-flex; gap: 6px; }
#s-light .lsw__modes button { min-height: 44px; padding: 0 16px; border-radius: 999px; border: 1px solid rgba(255, 216, 163, .2); background: transparent; color: var(--bone); font: 500 14px/1 var(--f-body); }
#s-light .lsw__modes button[aria-pressed="true"] { background: rgba(255, 216, 163, .14); border-color: rgba(255, 216, 163, .55); }
#s-light .lsw__cap { margin: 0; }
@media (min-width: 900px) { #s-light .lsw__ui { grid-template-columns: auto 1fr; } #s-light .lsw__ctrls { justify-content: flex-end; } #s-light .lsw__cap { grid-column: 1 / -1; } }
/* Off / On word pushes up and out as the other rises in. */
#s-light .lsw__swap { position: relative; display: block; height: .98em; overflow: hidden; }
#s-light .lsw__swap .lsw__hollow { position: absolute; left: 0; top: 0; transition: transform .42s cubic-bezier(.2, .7, .2, 1), opacity .3s var(--ease-out); }
#s-light .lsw__w-on { transform: translate3d(0, 100%, 0); opacity: 0; }
#s-light [data-on="true"] .lsw__w-on { transform: none; opacity: 1; }
#s-light [data-on="true"] .lsw__w-off { transform: translate3d(0, -100%, 0); opacity: 0; }
#s-light .lsw__w-off::after { display: none; }
@media (prefers-reduced-motion: reduce) {
  #s-light .lsw__beamwrap, #s-light .lsw__knob, #s-light .lsw__swap .lsw__hollow { transition-duration: .2s; }
  #s-light .lsw.is-striking .lsw__lit { animation: none; } #s-light .lsw__motes { display: none; }
}