/* ═══════════════════════════════════════════════════════════════════════════
   TOUR LAUNCHER

   A button that opens the product tour full screen over whatever page the
   visitor is already reading, and an exit that puts them back exactly where
   they were — same scroll position, same page state, nothing reloaded.

   The tour is loaded in an iframe rather than injected into the host page.
   Three reasons, in order of how much trouble each one saves:

     1. Style isolation. for-teachers.html already has a .cap class, and so
        does the tour. Two documents cannot collide.
     2. Scroll isolation. The tour drives Lenis and pins with ScrollTrigger.
        Inside its own document that is just a page scrolling; injected, it
        would have to be re-plumbed onto a scroll container and every pin
        recalculated against it.
     3. One copy. The tour is maintained in one file and every page that
        offers it gets the same thing.

   The open animation is a clip-path inset that starts at the button's own
   rectangle and opens to the full viewport, so the panel grows out of the
   thing that was pressed rather than appearing on top of it.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─── The button ─────────────────────────────────────────────────────────── */

.tour-launch {
  display: inline-flex;
  align-items: center;
  gap: 1rem;
  padding: 0.95rem 1.5rem 0.95rem 1.05rem;
  border-radius: 16px;
  border: 1px solid rgba(33, 216, 252, 0.28);
  background: linear-gradient(135deg, rgba(33, 216, 252, 0.11), rgba(139, 92, 246, 0.09));
  color: inherit;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s, background 0.25s;
  box-shadow: 0 18px 46px -22px rgba(0, 0, 0, 0.9);
}

.tour-launch:hover {
  border-color: rgba(33, 216, 252, 0.5);
  background: linear-gradient(135deg, rgba(33, 216, 252, 0.16), rgba(139, 92, 246, 0.13));
  transform: translateY(-2px);
  box-shadow: 0 26px 60px -24px rgba(0, 0, 0, 0.95), 0 0 40px -22px rgba(33, 216, 252, 0.8);
}

.tour-launch:active { transform: translateY(0); }

.tour-launch:focus-visible {
  outline: 2px solid #21d8fc;
  outline-offset: 3px;
}

.tl-icon {
  flex: none;
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #21d8fc, #8b5cf6);
  color: #050508;
  font-size: 0.9rem;
}

.tl-text { display: block; line-height: 1.3; }

.tl-text strong {
  display: block;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  font-weight: 700;
}

.tl-text em {
  display: block;
  font-style: normal;
  margin-top: 0.2rem;
  font-family: 'Martian Mono', monospace;
  font-size: 0.56rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  opacity: 0.5;
}

/* ─── The overlay ────────────────────────────────────────────────────────── */

.tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: #050508;
  /* Set inline by the launcher from the button's rectangle, then opened to
     inset(0). Declared here so the property is animatable from the very first
     frame rather than transitioning from "none". */
  clip-path: inset(50% round 18px);
  transition: clip-path 0.6s cubic-bezier(0.22, 1, 0.36, 1);
  will-change: clip-path;
}

.tour-overlay.is-open { clip-path: inset(0% round 0px); }

.tour-overlay iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  opacity: 0;
  transition: opacity 0.45s ease;
}

.tour-overlay.is-loaded iframe { opacity: 1; }

/* Holding screen. The iframe is a document fetch, so there is a beat before
   anything paints; without this the panel opens onto flat black and reads as
   broken rather than as loading. */
.tour-boot {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  justify-items: center;
  gap: 1.1rem;
  pointer-events: none;
  transition: opacity 0.35s ease;
}

.tour-overlay.is-loaded .tour-boot { opacity: 0; }

.tour-boot img { width: 60px; height: 60px; object-fit: contain; opacity: 0.9; }

.tour-boot span {
  font-family: 'Martian Mono', monospace;
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237, 237, 242, 0.35);
}

.tour-boot i {
  display: block;
  width: 120px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.08);
  overflow: hidden;
  position: relative;
}

.tour-boot i::after {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: 2px;
  background: linear-gradient(90deg, #21d8fc, #8b5cf6);
  transform: translateX(-100%);
  animation: tourBoot 1.15s ease-in-out infinite;
}

@keyframes tourBoot {
  to { transform: translateX(100%); }
}

/* Host page while the tour is open. */
html.tour-open, body.tour-open { overflow: hidden !important; }

@media (prefers-reduced-motion: reduce) {
  .tour-overlay {
    transition: opacity 0.25s ease;
    clip-path: none;
    opacity: 0;
  }
  .tour-overlay.is-open { opacity: 1; clip-path: none; }
  .tour-boot i::after { animation: none; transform: none; }
  .tour-launch { transition: none; }
  .tour-launch:hover { transform: none; }
}