/* ========================================================
   BUILDER TUTORIAL — Spotlight walkthrough (v7.6.5)
   Animated cursor + live demos + state restore
   ======================================================== */

/* ── Overlay: blocks page interaction ── */
.tutorial-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: auto;
  /* Transparent — the spotlight box-shadow provides the dimming */
  background: transparent;
}

/* ── Spotlight cutout ── */
.tutorial-spotlight {
  position: fixed;
  z-index: 9999;
  border-radius: var(--radius-md, 8px);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.72);
  pointer-events: none;
  transition: top 0.15s var(--ease-out, ease),
              left 0.15s var(--ease-out, ease),
              width 0.15s var(--ease-out, ease),
              height 0.15s var(--ease-out, ease);
}

/* Pulsing border on the spotlight */
.tutorial-spotlight::after {
  content: '';
  position: absolute;
  inset: -3px;
  border: 2px solid rgba(184, 154, 87, 0.5);
  border-radius: inherit;
  animation: tutorialPulse 2s ease-in-out infinite;
  pointer-events: none;
}

@keyframes tutorialPulse {
  0%, 100% { border-color: rgba(184, 154, 87, 0.3); }
  50%      { border-color: rgba(184, 154, 87, 0.7); }
}

/* ── Tooltip ── */
.tutorial-tooltip {
  position: fixed;
  z-index: 10001;
  width: 320px;
  max-width: calc(100vw - 24px);
  background: linear-gradient(160deg, #2d2637 0%, #1c1820 100%);
  border: 1px solid var(--gold-700, #8A7340);
  border-radius: var(--radius-lg, 12px);
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(184, 154, 87, 0.1);
  padding: 16px 18px 14px;
  color: var(--text-secondary, #C4B79F);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.25s ease, transform 0.25s var(--ease-out, ease);
  pointer-events: auto;
}

.tutorial-tooltip.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* ── Arrow ── */
.tutorial-tooltip__arrow {
  position: absolute;
  width: 14px;
  height: 14px;
  background: #2d2637;
  border: 1px solid var(--gold-700, #8A7340);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Arrow positions */
.tutorial-tooltip[data-placement="bottom"] .tutorial-tooltip__arrow {
  top: -8px;
  border-right: none;
  border-bottom: none;
}
.tutorial-tooltip[data-placement="top"] .tutorial-tooltip__arrow {
  bottom: -8px;
  border-left: none;
  border-top: none;
}
.tutorial-tooltip[data-placement="left"] .tutorial-tooltip__arrow {
  right: -8px;
  border-left: none;
  border-bottom: none;
}
.tutorial-tooltip[data-placement="right"] .tutorial-tooltip__arrow {
  left: -8px;
  border-right: none;
  border-top: none;
}

/* ── Step counter (top of tooltip) ── */
.tutorial-tooltip__step {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 8px;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold-600, #B89A57);
}

.tutorial-tooltip__step-dots {
  display: flex;
  gap: 4px;
}

.tutorial-tooltip__step-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: rgba(184, 154, 87, 0.2);
  transition: background 0.2s ease;
}

.tutorial-tooltip__step-dot--active {
  background: var(--gold-600, #B89A57);
}

.tutorial-tooltip__step-dot--done {
  background: rgba(184, 154, 87, 0.45);
}

/* ── Title ── */
.tutorial-tooltip__title {
  margin: 0 0 4px;
  font-family: var(--font-family-heading, inherit);
  font-size: 0.88rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold-400, #E4D7B8);
  line-height: 1.2;
}

/* ── Description ── */
.tutorial-tooltip__desc {
  margin: 0 0 14px;
  font-size: 0.76rem;
  line-height: 1.5;
  color: var(--text-secondary, #C4B79F);
}

/* ── Button row ── */
.tutorial-tooltip__buttons {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tutorial-tooltip__buttons .tutorial-btn {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 7px 14px;
  border: none;
  border-radius: var(--radius-sm, 4px);
  font-family: var(--font-family-heading, inherit);
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
  -webkit-tap-highlight-color: transparent;
  -webkit-appearance: none;
  appearance: none;
}

/* Primary (Next / Finish) */
.tutorial-btn--next {
  background: var(--gradient-gold, linear-gradient(135deg, #B89A57, #8A7340));
  color: var(--bg-darkest, #120F17);
  box-shadow: 0 2px 8px rgba(184, 154, 87, 0.2);
}

.tutorial-btn--next:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(184, 154, 87, 0.35);
}

.tutorial-btn--next:active {
  transform: translateY(0);
}

/* Secondary (Back) */
.tutorial-btn--back {
  background: rgba(255, 255, 255, 0.06);
  color: var(--text-secondary, #C4B79F);
  border: 1px solid rgba(255, 255, 255, 0.1);
}

.tutorial-btn--back:hover {
  background: rgba(255, 255, 255, 0.1);
  color: var(--text-primary, #E7DFCF);
}

/* Ghost (Skip) */
.tutorial-btn--skip {
  background: transparent;
  color: var(--text-muted, #7A7282);
  margin-left: auto;
  padding: 7px 10px;
}

.tutorial-btn--skip:hover {
  color: var(--text-secondary, #C4B79F);
}

.tutorial-btn i {
  font-size: 0.58rem;
}

/* ── Mobile: bottom drawer ── */
@media (max-width: 480px) {
  .tutorial-tooltip {
    position: fixed !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    top: auto !important;
    width: 100% !important;
    max-width: 100% !important;
    border-radius: var(--radius-lg, 12px) var(--radius-lg, 12px) 0 0;
    border-bottom: none;
    padding: 16px 16px calc(16px + env(safe-area-inset-bottom, 0px));
    transform: translateY(16px);
  }

  .tutorial-tooltip.is-visible {
    transform: translateY(0);
  }

  .tutorial-tooltip__arrow {
    display: none;
  }

  .tutorial-tooltip__buttons .tutorial-btn {
    padding: 10px 16px;
    min-height: 44px;
  }
}

/* ── Animated cursor ── */
.tutorial-cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10002;
  width: 24px;
  height: 24px;
  pointer-events: none;
  opacity: 0;
  transition: top 0.4s cubic-bezier(0.33, 1, 0.68, 1),
              left 0.4s cubic-bezier(0.33, 1, 0.68, 1),
              opacity 0.2s ease;
  filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.5));
  will-change: top, left, opacity;
}

.tutorial-cursor i {
  font-size: 20px;
  color: #fff;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.6);
}

.tutorial-cursor.is-visible {
  opacity: 1;
}

/* Click ripple effect */
.tutorial-cursor.is-clicking::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 36px;
  height: 36px;
  margin: -18px 0 0 -18px;
  border-radius: 50%;
  background: rgba(184, 154, 87, 0.4);
  animation: tutorialClickRipple 0.35s ease-out forwards;
  pointer-events: none;
}

@keyframes tutorialClickRipple {
  0%   { transform: scale(0.3); opacity: 1; }
  100% { transform: scale(1.8); opacity: 0; }
}

/* Hide cursor on mobile (demos still run but cursor is distracting at small widths) */
@media (max-width: 480px) {
  .tutorial-cursor {
    display: none;
  }
}