/* ============================================================
   SHARED
   Loaded on every page, ahead of styles.css (old design) or
   v2.css (new design). Holds what both designs use: the form
   embed loader, the floating CTA and side tabs from footer.html,
   the PIP video player, and the .reveal scroll animations.

   Moved here verbatim from styles.css. Nothing earlier in
   styles.css styles these classes, so loading them first leaves
   every old page exactly as it was.

   Written against the old token names (--ink, --teal, --gold…).
   styles.css defines those on old pages; v2.css maps them onto
   the new palette on v2 pages. Keep new design work out of here.
   ============================================================ */


/* ============================================================
   1. FORM EMBED LOADER
   ============================================================ */

/* GHL embed loading state (shared, injected by main.js) */
.ghl-embed { position: relative; }
.ghl-embed.is-loading { min-height: 480px; }
.ghl-embed__loader {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  text-align: center;
  background: var(--cream);
  border-radius: 14px;
  transition: opacity 0.4s ease;
}
.ghl-embed__loader.is-hidden { opacity: 0; pointer-events: none; }
.ghl-embed__spinner {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 4px solid rgba(0, 180, 179, 0.2);
  border-top-color: var(--teal);
  animation: ghl-spin 0.8s linear infinite;
}
.ghl-embed__loading-text { color: var(--ink); font-weight: 600; font-size: 1rem; margin: 0; }
.ghl-embed__loading-sub { color: var(--ink3); font-size: 0.875rem; margin: 0; }
@keyframes ghl-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ghl-embed__spinner { animation-duration: 2s; } }


/* ============================================================
   2. FLOATING CTA, SIDE TABS, SCROLL REVEALS
   ============================================================ */

/* ============================================================
   FLOATING FOOTER CTA
   ============================================================ */
.floating-footer-cta {
  --floating-footer-bottom: 16px;
  position: fixed;
  left: 50%;
  bottom: var(--floating-footer-bottom);
  transform: translateX(-50%);
  width: min(calc(100% - (var(--pad-x) * 2)), var(--max-w));
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(12px, 2vw, 20px);
  padding: clamp(12px, 1.8vw, 18px) clamp(14px, 2vw, 24px);
  border-radius: 14px;
  background: rgba(43,38,34,0.88);
  /* Its own near-black ground, floating over whatever the page is. The ink
     ring would land at roughly 1:1 on it. */
  --focus-ring: #fff;
  border: 1px solid rgba(159, 225, 203, 0.24);
  box-shadow: 0 16px 42px rgba(43,38,34,0.28);
  backdrop-filter: blur(10px);
  z-index: 90;
  opacity: 1;
  transition: opacity 0.3s ease, transform 0.3s ease, bottom 0.3s ease;
}

.floating-footer-cta__toggle {
  position: absolute;
  top: -14px;
  right: 12px;
  border: none;
  background: var(--gold);
  color: var(--ink);
  border-radius: 999px;
  font-size: calc(11px * 1.065);
  font-weight: 700;
  letter-spacing: 0.02em;
  line-height: 1;
  padding: 8px 15px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.38);
}

.floating-footer-cta__toggle:hover {
  background: #ffb020;
  color: var(--ink);
}

.floating-footer-cta__text {
  color: rgba(255, 255, 255, 0.9);
  font-size: calc(clamp(12px, 1.25vw, 14px) * 1.065);
  line-height: 1.5;
  margin: 0;
  flex: 1 1 auto;
  max-width: 780px;
}

.floating-footer-cta__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: nowrap;
  text-decoration: none;
  font-size: calc(12px * 1.065);
  font-weight: 500;
  letter-spacing: 0.03em;
  color: var(--ink);
  background: var(--teal);
  border: 1px solid rgba(0, 180, 179, 0.6);
  border-radius: var(--radius-pill);
  padding: 10px 16px;
  transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}

.floating-footer-cta__button:hover {
  background: #1ecfce;
  color: var(--ink);
  opacity: 1;
}

body.is-scrolling .floating-footer-cta {
  opacity: 0;
  transform: translateX(-50%) translateY(16px);
  pointer-events: none;
}

.floating-footer-cta.floating-footer-cta--hidden {
  opacity: 0;
  transform: translateX(-50%) translateY(16px);
  pointer-events: none;
}

.floating-footer-cta.floating-footer-cta--minimized {
  opacity: 0;
  transform: translateX(-50%) translateY(16px);
  pointer-events: none;
}

.floating-footer-cta-restore {
  position: fixed;
  right: max(var(--pad-x), 14px);
  bottom: 14px;
  z-index: 91;
  border: 1px solid rgba(159, 225, 203, 0.38);
  background: rgba(20, 10, 41, 0.92);
  color: rgba(255, 255, 255, 0.9);
  border-radius: 999px;
  font-size: calc(11px * 1.065);
  line-height: 1;
  padding: 9px 13px;
  cursor: pointer;
  box-shadow: 0 10px 26px rgba(16, 8, 33, 0.36);
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
  transition: opacity 0.25s ease, transform 0.25s ease;
}

.floating-footer-cta-restore.floating-footer-cta-restore--visible {
  opacity: 1;
  pointer-events: auto;
  transform: translateY(0);
}

body.is-scrolling .floating-footer-cta-restore,
.floating-footer-cta-restore.floating-footer-cta-restore--hidden {
  opacity: 0;
  pointer-events: none;
  transform: translateY(12px);
}

@media (max-width: 767px) {
  .floating-footer-cta {
    flex-direction: column;
    align-items: stretch;
    padding-top: 22px;
  }

  .floating-footer-cta__button {
    width: 100%;
  }

  .floating-footer-cta__toggle {
    top: -14px;
    right: 10px;
  }

  /* On phones the floating banner no longer docks above the footer (it would need about 190px of empty
     space reserved there, which left a big gap under the last section); main.js fades it out as the
     footer comes into view instead. */
}

/* ============================================================
   FLOATING REVIEWS SIDE TAB
   ============================================================ */
.reviews-tab {
  position: fixed;
  left: 0;
  top: 70%;
  z-index: 9000;
  display: flex;
  align-items: center;
  transform: translateY(-50%) translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.reviews-tab.is-open {
  transform: translateY(-50%) translateX(0);
}

.reviews-tab__panel {
  width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 20px;
  background: var(--card);
  border: 1px solid rgba(43,38,34,0.08);
  border-left: none;
  border-radius: 0 16px 16px 0;
  box-shadow: 12px 16px 42px rgba(43,38,34,0.22);
}

.reviews-tab__logo {
  width: 100%;
  max-width: 160px;
  height: auto;
  display: block;
}

.reviews-tab__stars {
  color: var(--gold);
  font-size: 22px;
  letter-spacing: 3px;
  line-height: 1;
}

.reviews-tab__btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--radius-pill);
  padding: 11px 16px;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.reviews-tab__btn--primary {
  background: var(--gold);
  color: var(--ink);
  border: 1px solid var(--gold);
}

.reviews-tab__btn--primary:hover {
  background: #ffb020;
  border-color: #ffb020;
}

.reviews-tab__btn--outline {
  background: transparent;
  color: var(--ink);
  border: 1px solid rgba(43,38,34,0.3);
}

.reviews-tab__btn--outline:hover {
  background: var(--ink);
  color: #fff;
  border-color: var(--ink);
}

.reviews-tab__handle {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  border: none;
  cursor: pointer;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 9px;
  border-radius: 0 12px 12px 0;
  box-shadow: 6px 6px 18px rgba(43,38,34,0.28);
}

.reviews-tab__handle:hover {
  background: #ffb020;
}

@media (max-width: 767px) {
  .reviews-tab__panel {
    width: 190px;
    padding: 18px 16px;
  }

  .reviews-tab__handle {
    font-size: 12px;
    padding: 13px 8px;
  }
}

/* ============================================================
   FLOATING NEWSLETTER SIDE TAB
   ============================================================ */
.newsletter-tab {
  position: fixed;
  left: 0;
  top: 45%;
  z-index: 9000;
  display: flex;
  align-items: center;
  transform: translateY(-50%) translateX(-100%);
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

.newsletter-tab.is-open {
  transform: translateY(-50%) translateX(0);
}

.newsletter-tab__panel {
  width: 300px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px 18px;
  background: var(--card);
  border: 1px solid rgba(43,38,34,0.08);
  border-left: none;
  border-radius: 0 16px 16px 0;
  box-shadow: 12px 16px 42px rgba(43,38,34,0.22);
}

.newsletter-tab__headline {
  font-family: var(--font-display);
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--ink);
  line-height: 1.35;
  margin: 0;
  text-align: center;
}

.newsletter-tab__handle {
  position: absolute;
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  border: none;
  cursor: pointer;
  background: var(--teal);
  color: #fff;
  font-family: var(--font-body);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 16px 9px;
  border-radius: 0 12px 12px 0;
  box-shadow: 6px 6px 18px rgba(43,38,34,0.28);
}

.newsletter-tab__handle:hover {
  background: var(--teal-dk);
}

@media (max-width: 767px) {
  .newsletter-tab__panel {
    width: 260px;
    padding: 16px 14px;
  }

  .newsletter-tab__handle {
    font-size: 12px;
    padding: 13px 8px;
  }
}

/* ------------------------------------------------------------------
   Mobile: both side tabs move to the right edge.

   Anchored left, the ~28px handles sit on top of the first characters
   of every line of body copy at 375px — the page padding is only 20px,
   so text starts underneath them and the hero reads as broken. The
   bottom edge isn't available either; the floating footer CTA is full
   width down there. The right edge is the ragged end of left-aligned
   text, so a handle there covers almost nothing.

   This flips anchor, slide direction, corner radii and shadow
   direction together — they all have to agree or the panel slides the
   wrong way or shows a seam.
   ------------------------------------------------------------------ */
@media (max-width: 767px) {
  .reviews-tab,
  .newsletter-tab {
    left: auto;
    right: 0;
    transform: translateY(-50%) translateX(100%);
  }
  .reviews-tab.is-open,
  .newsletter-tab.is-open {
    transform: translateY(-50%) translateX(0);
  }

  .reviews-tab__panel,
  .newsletter-tab__panel {
    border-left: 1px solid rgba(43,38,34,0.08);
    border-right: none;
    border-radius: 16px 0 0 16px;
    box-shadow: -12px 16px 42px rgba(43,38,34,0.22);
  }

  /* Vertical text handles are ~200px tall; even on the right edge they clip
     the ends of long lines. On mobile they become compact icon buttons — the
     label stays in the DOM (font-size:0, not display:none) so the button keeps
     its accessible name and aria-controls wiring. */
  .reviews-tab__handle,
  .newsletter-tab__handle {
    left: auto;
    right: 100%;
    writing-mode: horizontal-tb;
    width: 40px;
    height: 40px;
    padding: 0;
    font-size: 0;
    display: grid;
    place-items: center;
    border-radius: 12px 0 0 12px;
    box-shadow: -6px 6px 18px rgba(43,38,34,0.28);
  }
  .reviews-tab__handle::before,
  .newsletter-tab__handle::before {
    font-size: 17px;
    line-height: 1;
  }
  .reviews-tab__handle::before { content: '\2605'; }      /* star */
  .newsletter-tab__handle::before { content: '\2709'; }   /* envelope */
}

/* ============================================================
   ANIMATIONS — fade up on scroll
   ============================================================ */
/* Without JS the observer never runs, so everything below stays invisible —
   including the h1. Same for anyone who has asked for less motion. */
.no-js .reveal,
.no-js .reveal--delay-1,
.no-js .reveal--delay-2,
.no-js .reveal--delay-3 { opacity: 1 !important; transform: none !important; }
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal--delay-1, .reveal--delay-2, .reveal--delay-3 {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.65s ease, transform 0.65s ease;
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal--delay-1 { transition-delay: 0.1s; }
.reveal--delay-2 { transition-delay: 0.2s; }
.reveal--delay-3 { transition-delay: 0.3s; }
.reveal--delay-4 { transition-delay: 0.4s; }

/* The FAQ staggers up to five items; styles.css stopped at four. */
.reveal--delay-5 { transition-delay: 0.5s; }


/* ============================================================
   3. PIP VIDEO PLAYER
   ============================================================ */

/* ---------- Floating PIP player ---------- */
.pip {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: min(360px, calc(100vw - 40px));
  z-index: 9000;
  background: var(--ink);
  color: #fff;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(43,38,34,0.4);
  touch-action: none;
  opacity: 0;
  transform: translateY(12px) scale(0.98);
  transition: opacity 0.22s ease, transform 0.22s ease, width 0.22s ease;
}
.pip[hidden] { display: none; }
.pip.is-open { opacity: 1; transform: none; }
.pip.is-large { width: min(640px, calc(100vw - 40px)); }
.pip.is-dragging { transition: none; }

.pip__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 10px 9px 14px;
  cursor: grab;
  user-select: none;
  background: rgba(0,0,0,0.22);
}
.pip.is-dragging .pip__bar { cursor: grabbing; }
.pip__title {
  font-family: var(--font-display);
  font-size: calc(13px * 1.065);
  font-weight: 600;
}
.pip__controls { display: flex; gap: 4px; }
.pip__btn {
  width: 30px; height: 30px;
  border: 0; border-radius: 6px;
  background: transparent;
  color: #fff;
  font-size: 13px;
  cursor: pointer;
}
.pip__btn:hover, .pip__btn:focus-visible { background: rgba(255,255,255,0.14); outline: none; }
.pip video { display: block; width: 100%; aspect-ratio: 16 / 9; background: #000; }

@media (max-width: 640px) {
  .pip { right: 12px; bottom: 12px; width: calc(100vw - 24px); }
  .pip.is-large { width: calc(100vw - 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .pip, .meet-portrait__play, .meet-watch, .meet-watch__icon { transition: none; }
}