/* Lightning intro + page-to-page "deck" scrolling with shatter transitions (homepage only). Styles for intro.js.
   Safe to delete intro.css, intro.js and the three lines in build_site.py that load them. */

/* ---------- intro ---------- */
#cl-intro { display: none; }
html.cl-intro-on { overflow: hidden; background: #000; }
html.cl-intro-on body { overflow: hidden; }
html.cl-intro-on #cl-intro { display: block; position: fixed; inset: 0; z-index: 99999; background: #000; touch-action: none; overscroll-behavior: none; }
#cl-intro canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.cl-cue { position: absolute; left: 50%; bottom: 34px; transform: translateX(-50%); text-align: center; pointer-events: none;
  font: 600 11px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .32em; text-transform: uppercase; color: #8fe3a9; transition: opacity .5s; }
.cl-cue i { display: block; width: 1px; height: 38px; margin: 12px auto 0; background: linear-gradient(#14b24a, transparent);
  transform-origin: top; animation: cl-drip 1.6s ease-in-out infinite; }
@keyframes cl-drip { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.cl-skip { position: absolute; top: 22px; right: 24px; background: none; border: 1px solid rgba(20, 178, 74, .45); color: #8fe3a9; cursor: pointer;
  font: 600 11px/1 var(--font-mono, ui-monospace, monospace); letter-spacing: .2em; text-transform: uppercase; padding: 10px 14px; }
.cl-skip:hover { background: rgba(20, 178, 74, .15); }

/* ---------- deck: every section is its own screen ---------- */
html.cl-deck { scroll-behavior: auto; }
.cl-spacer { width: 1px; pointer-events: none; opacity: 0; }
.cl-deck .promo-bar, .cl-deck .nav { position: fixed; left: 0; right: 0; }
.cl-deck .promo-bar { top: 0; z-index: 210; }
.cl-deck .nav { top: var(--cl-promo, 0px); z-index: 200; }
.cl-slide { display: none; }
.cl-deck .cl-slide { display: block; position: fixed; left: 0; right: 0; bottom: 0; top: var(--cl-top, 0px); overflow: hidden; visibility: hidden; background: #000; z-index: 1; scrollbar-width: none; }
.cl-deck .cl-slide::-webkit-scrollbar { display: none; }
.cl-deck .cl-slide.on { visibility: visible; z-index: 2; }
.cl-in { min-height: 100%; backface-visibility: hidden; display: flex; flex-direction: column; justify-content: center; }
.cl-in > * { flex: 0 0 auto; }
/* fx.js fades sections by page scroll; in deck mode the shatter does that job */
.cl-deck .hero-fx, .cl-deck .alert-wrap, .cl-deck .lux-logo { translate: none !important; }
.cl-deck .cl-in section { opacity: 1 !important; transform: none !important; }
.cl-deck .hero { padding-top: 28px; }
.cl-deck footer { padding-bottom: 40px; }
.cl-deck .sticky-cta { z-index: 150; }

/* transition layer: shards of the outgoing and incoming screens */
.cl-layer { position: fixed; left: 0; right: 0; bottom: 0; top: var(--cl-top, 0px); z-index: 120; perspective: 1100px; perspective-origin: 50% 45%; overflow: hidden; pointer-events: none; }
.cl-shard { position: absolute; inset: 0; will-change: transform, opacity; backface-visibility: hidden; }
.cl-deck .cl-slide.cl-clone { position: absolute; inset: 0; top: 0; visibility: visible; overflow: hidden; z-index: auto; }
.cl-clone .cl-in { will-change: auto; }
#cl-bolt { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 130; }

/* page dots */
.cl-rail { position: fixed; right: 14px; top: 50%; transform: translateY(-50%); z-index: 160; display: flex; flex-direction: column; gap: 3px; }
.cl-rail button { position: relative; width: 18px; height: 18px; padding: 0; background: none; border: 0; cursor: pointer; }
.cl-rail button::before { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%;
  background: #1c2a20; transition: background .3s, box-shadow .3s, transform .3s; }
.cl-rail button:hover::before { background: #4c7a5b; }
.cl-rail button.on::before { background: #14b24a; box-shadow: 0 0 10px #14b24a, 0 0 2px #14b24a; transform: scale(1.5); }
@media (max-width: 700px) { .cl-rail { right: 4px; } .cl-rail button { width: 14px; height: 14px; } }
@media (prefers-reduced-motion: reduce) { .cl-rail, #cl-bolt { display: none; } }