/* ==========================================================================
   Product tour (2026-11-07): the 1-minute film under the hero and the
   lightbox that plays it with sound. (The six short clips live in the guide.) Video files are
   /assets/video/pulse-*.mp4 (made in ~/maxia-pulse-showcase-video).
   ========================================================================== */

/* the quiet link in the hero */
.hero__tour {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 14px 0 0; padding: 4px 0; border: 0; background: none; cursor: pointer;
  color: var(--violet-text); font: inherit; font-size: .98rem; font-weight: 600; letter-spacing: .005em;
  text-decoration: underline; text-decoration-color: rgb(185 150 255 / .35); text-underline-offset: 4px;
  transition: color 160ms var(--sc-ease-out), text-decoration-color 160ms var(--sc-ease-out);
}
.hero__tour svg { width: 22px; height: 22px; flex: none; }
.hero__tour:focus-visible { outline: 2px solid #fff; outline-offset: 4px; border-radius: 6px; }
@media (hover: hover) and (pointer: fine) {
  .hero__tour:hover { color: #fff; text-decoration-color: rgb(255 255 255 / .6); }
}

/* the section */
.tour { padding-block: clamp(3rem, 6vw, 5.5rem) 0; }
.tour__head { max-width: 46rem; margin: 0 auto clamp(24px, 3.4vw, 40px); text-align: center; }
.tour__head .sec-p { margin-inline: auto; }

.tour__film {
  position: relative; display: block; width: 100%; padding: 0; cursor: pointer;
  aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--r-lg);
  border: 1px solid transparent;
  background:
    linear-gradient(#0b0910, #0b0910) padding-box,
    linear-gradient(120deg, rgb(116 39 200 / .8), rgb(143 60 250 / .35) 40%, rgb(228 63 251 / .75)) border-box;
  box-shadow: 0 40px 100px -40px rgb(143 60 250 / .65), 0 0 0 1px rgb(0 0 0 / .25), 0 2px 8px rgb(0 0 0 / .4);
  transition: box-shadow 320ms var(--sc-ease-out), transform 320ms var(--sc-ease-out);
}
.tour__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; }
.tour__play {
  position: absolute; left: clamp(14px, 2vw, 24px); bottom: clamp(14px, 2vw, 24px);
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px 10px 12px; border-radius: 999px;
  background: rgb(14 12 20 / .72); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgb(243 240 250 / .18);
  color: #fff; font-weight: 600; font-size: .98rem;
}
.tour__play svg { width: 30px; height: 30px; flex: none; }
.tour__film:focus-visible { outline: 2px solid #fff; outline-offset: 4px; }
@media (hover: hover) and (pointer: fine) {
  .tour__film:hover { box-shadow: 0 40px 110px -36px rgb(143 60 250 / .85), 0 0 0 1px rgb(0 0 0 / .25), 0 2px 8px rgb(0 0 0 / .4); }
  .tour__film:hover .tour__play { background: var(--sc-accent); border-color: transparent; }
}

/* the lightbox */
.tour-box { width: min(1280px, 94vw); max-width: none; max-height: none; padding: 0; border: 0; background: transparent; overflow: visible; }
.tour-box::backdrop { background: rgb(8 6 12 / .88); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.tour-box__in { position: relative; }
.tour-box__v { display: block; width: 100%; aspect-ratio: 16 / 9; max-height: 86vh; border-radius: 16px; background: #000; box-shadow: 0 40px 120px rgb(0 0 0 / .6); }
.tour-box__x {
  position: absolute; right: 0; top: -52px; width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid rgb(243 240 250 / .3); background: rgb(14 12 20 / .7); color: #fff;
  font-size: 26px; line-height: 1; cursor: pointer;
}
.tour-box__x:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
.tour-box__cta { display: flex; justify-content: center; margin-top: 18px; }
@media (max-width: 640px) {
  .tour-box { width: 100vw; }
  .tour-box__v { border-radius: 0; }
  .tour-box__x { right: 12px; }
}