/* Publifia — Dashboard onboarding tour · cinematic spotlight */

/* click blocker — eats all interaction with the dimmed dashboard */
.tour-blocker {
  position: fixed; inset: 0; z-index: 9000;
  cursor: default;
  animation: tour-fade-in .4s ease both;
}

/* the spotlight — a transparent rect whose huge box-shadow darkens everything
   outside it, plus a soft breathing purple glow ring around the target. */
.tour-spot {
  position: fixed; z-index: 9001; pointer-events: none;
  border-radius: 18px;
  background: transparent;
  box-shadow:
    0 0 0 9999px rgba(73,75,80,0.74),
    0 0 0 1.5px rgba(119,122,129,0.55),
    0 0 0 6px rgba(119,122,129,0.10),
    0 0 44px 6px rgba(119,122,129,0.34);
  transition:
    top .52s cubic-bezier(.34,1.2,.4,1),
    left .52s cubic-bezier(.34,1.2,.4,1),
    width .52s cubic-bezier(.34,1.2,.4,1),
    height .52s cubic-bezier(.34,1.2,.4,1),
    border-radius .4s ease;
  animation: tour-breathe 3.4s ease-in-out infinite;
}
@keyframes tour-breathe {
  0%, 100% { box-shadow:
    0 0 0 9999px rgba(73,75,80,0.74),
    0 0 0 1.5px rgba(119,122,129,0.50),
    0 0 0 6px rgba(119,122,129,0.08),
    0 0 40px 4px rgba(119,122,129,0.28); }
  50% { box-shadow:
    0 0 0 9999px rgba(73,75,80,0.74),
    0 0 0 1.5px rgba(196,197,200,0.72),
    0 0 0 8px rgba(119,122,129,0.14),
    0 0 62px 10px rgba(119,122,129,0.46); }
}

/* the real highlighted element gently scales up */
.tour-hi {
  position: relative;
  z-index: 8500;
  transform: scale(1.025);
  transition: transform .5s cubic-bezier(.34,1.2,.4,1) !important;
}

/* ===== info card ===== */
.tour-card {
  position: fixed; z-index: 9003;
  width: 342px; max-width: calc(100vw - 32px);
  padding: 18px 18px 15px;
  border-radius: 18px;
  background: rgba(21,21,24,0.86);
  -webkit-backdrop-filter: blur(22px) saturate(1.4);
  backdrop-filter: blur(22px) saturate(1.4);
  border: 1px solid rgba(119,122,129,0.22);
  box-shadow:
    0 1px 0 rgba(255,255,255,0.05) inset,
    0 24px 70px -20px rgba(0,0,0,0.75),
    0 0 40px -10px rgba(119,122,129,0.35);
  color: var(--txt);
  transition: top .52s cubic-bezier(.34,1.2,.4,1), left .52s cubic-bezier(.34,1.2,.4,1);
  animation: tour-card-in .5s cubic-bezier(.2,.9,.3,1) both;
}
@keyframes tour-card-in {
  from { opacity: 0; transform: translateY(8px) scale(.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.tc-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 11px; }
.tc-step { font-family: var(--mono); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--pp2);
  text-transform: uppercase; }
.tc-skip { background: none; border: none; color: var(--txt3); font-family: inherit; font-size: 12px; font-weight: 500;
  cursor: pointer; padding: 2px 4px; border-radius: 6px; transition: .14s; }
.tc-skip:hover { color: var(--txt2); background: rgba(255,255,255,0.05); }

.tc-progress { height: 3px; border-radius: 999px; background: rgba(255,255,255,0.07); overflow: hidden; margin-bottom: 15px; }
.tc-progress span { display: block; height: 100%; border-radius: 999px;
  background: #777a81;
  box-shadow: 0 0 12px rgba(119,122,129,0.6);
  transition: width .55s cubic-bezier(.34,1.1,.4,1); }

.tc-title { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 7px; }
.tc-body { font-size: 13.5px; line-height: 1.5; color: var(--txt2); font-weight: 450; }

.tc-tip { display: flex; gap: 8px; align-items: flex-start; margin-top: 12px; padding: 9px 11px;
  border-radius: 10px; background: rgba(119,122,129,0.09); border: 1px solid rgba(119,122,129,0.16);
  font-size: 12.5px; line-height: 1.45; color: var(--pp2); font-weight: 500; }
.tc-tip svg { width: 15px; height: 15px; flex: none; margin-top: 1px; }

.tc-nav { display: flex; align-items: center; gap: 10px; margin-top: 17px; }
.tc-dots { display: flex; gap: 5px; flex: 1; justify-content: center; }
.tc-dot { width: 6px; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.16); transition: .3s; }
.tc-dot.on { width: 18px; background: var(--pp2); }

.tc-btn { font-family: inherit; font-size: 13px; font-weight: 600; border-radius: 10px; padding: 9px 15px;
  cursor: pointer; transition: .15s; border: 1px solid transparent; }
.tc-btn.ghost { background: transparent; color: var(--txt2); border-color: var(--line2); }
.tc-btn.ghost:hover { color: var(--txt); border-color: rgba(255,255,255,0.2); }
.tc-btn.ghost:disabled { opacity: 0.35; cursor: not-allowed; }
.tc-btn.primary { background: #777a81; color: #fff;
  box-shadow: 0 6px 18px -8px rgba(119,122,129,0.9); }
.tc-btn.primary:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -8px rgba(119,122,129,1); filter: brightness(1.05); }
.tc-btn.primary:active { transform: translateY(0); }

/* replay-tour control in the sidebar */
.sb-tour { display: flex; align-items: center; gap: 10px; padding: 9px 11px; margin: 2px 0 6px;
  border-radius: 10px; color: var(--txt2); font-size: 13px; font-weight: 500; cursor: pointer;
  border: 1px solid var(--line); background: rgba(255,255,255,0.015); transition: .15s; }
.sb-tour:hover { color: var(--txt); border-color: rgba(119,122,129,0.3); background: rgba(119,122,129,0.06); }
.sb-tour svg { width: 16px; height: 16px; color: var(--pp2); flex: none; }

@keyframes tour-fade-in { from { opacity: 0; } to { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .tour-spot { animation: none; transition: none; }
  .tour-hi { transform: none; }
  .tour-card { animation: none; transition: none; }
}