/* Unlimited Images — custom styles */
:root {
  --brand-1: #06b6d4;   /* cyan */
  --brand-2: #6366f1;   /* indigo */
  --brand-3: #ec4899;   /* pink */
  --accent: #facc15;    /* amber */
}

.step-dot {
  width: 36px; height: 36px; border-radius: 12px;
  background: linear-gradient(135deg, var(--brand-1), var(--brand-2));
  color: white; font-weight: 700;
  display: grid; place-items: center; flex-shrink: 0;
  box-shadow: 0 6px 16px -8px rgba(99, 102, 241, .6);
}

.brand-grad { background: linear-gradient(90deg, var(--brand-1), var(--brand-2), var(--brand-3));
              -webkit-background-clip: text; background-clip: text; color: transparent; }

@keyframes fadeIn   { from { opacity: 0; transform: translateY(8px); }  to { opacity: 1; transform: translateY(0); } }
@keyframes slideUp  { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: translateY(0); } }
@keyframes pulseGlow { 0%,100% { box-shadow: 0 0 0 0 rgba(99,102,241,.55); } 50% { box-shadow: 0 0 0 16px rgba(99,102,241,0); } }
@keyframes float    { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
@keyframes shimmer  { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }

.animate-fade-in   { animation: fadeIn 0.4s ease-out; }
.animate-slide-up  { animation: slideUp 0.5s cubic-bezier(.16,1,.3,1); }
.animate-pulse-glow { animation: pulseGlow 2.2s ease-in-out infinite; }
.animate-float { animation: float 3.4s ease-in-out infinite; }

/* line-clamp util */
.line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* tour overlay */
.tour-backdrop {
  position: fixed; inset: 0; z-index: 80;
  background: radial-gradient(circle at var(--tx, 50%) var(--ty, 50%),
              rgba(0,0,0,0.20) 0%, rgba(0,0,0,0.78) 60%);
  backdrop-filter: blur(2px);
}
.tour-callout {
  position: fixed; z-index: 90; max-width: 360px;
  background: white; color: #0f172a;
  border-radius: 18px; padding: 18px 20px;
  box-shadow: 0 30px 80px -20px rgba(0,0,0,.4);
  animation: slideUp 0.35s cubic-bezier(.16,1,.3,1);
}
.dark .tour-callout { background: #0f172a; color: #f1f5f9; }
.tour-highlight {
  position: relative; z-index: 85;
  outline: 3px solid var(--accent);
  outline-offset: 6px; border-radius: 14px;
  animation: pulseGlow 2s ease-in-out infinite;
}

/* position picker grid */
.pos-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.pos-btn {
  aspect-ratio: 1.6/1; border-radius: 8px;
  border: 2px solid #cbd5e1;
  background: #f8fafc;
  position: relative; cursor: pointer; transition: all .15s;
}
.dark .pos-btn { border-color: #334155; background: #1e293b; }
.pos-btn.active { border-color: var(--brand-2); background: rgba(99,102,241,.12); }
.pos-btn::before {
  content: ""; position: absolute; width: 12px; height: 12px;
  background: var(--brand-2); border-radius: 3px;
}
.pos-btn.tl::before { top: 4px; left: 4px; }
.pos-btn.tc::before { top: 4px; left: 50%; transform: translateX(-50%); }
.pos-btn.tr::before { top: 4px; right: 4px; }
.pos-btn.bl::before { bottom: 4px; left: 4px; }
.pos-btn.bc::before { bottom: 4px; left: 50%; transform: translateX(-50%); }
.pos-btn.br::before { bottom: 4px; right: 4px; }

/* modal */
.modal-backdrop { position: fixed; inset: 0; background: rgba(2,6,23,0.7); backdrop-filter: blur(6px); z-index: 70; }
.modal-card { animation: slideUp 0.4s cubic-bezier(.16,1,.3,1); }

[x-cloak] { display: none !important; }