/* ═══════════════════════════════════════════════════════════════
   SWIPECLEAN V2 — INTERACTIVE EXPERIENCE LAYER
   ═══════════════════════════════════════════════════════════════ */

/* ── Custom Cursor ─────────────────────────────────────────────── */
body.custom-cursor,
body.custom-cursor a,
body.custom-cursor button,
body.custom-cursor [data-cursor],
body.custom-cursor [data-magnetic] { cursor: none; }

.cursor-dot {
  position: fixed;
  top: 0; left: 0;
  width: 7px; height: 7px;
  background: var(--accent);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 100000;
  will-change: transform;
  transition: opacity .25s;
}

.cursor-ring {
  position: fixed;
  top: 0; left: 0;
  min-width: 34px; height: 34px;
  border: 1.5px solid rgba(139,92,246,0.55);
  border-radius: var(--r-full);
  transform: translate(-50%, -50%);
  pointer-events: none;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(139,92,246,0);
  transition: width .28s var(--ease-out), height .28s var(--ease-out),
              background .28s var(--ease-out), border-color .28s var(--ease-out),
              padding .28s var(--ease-out);
  will-change: transform;
}

.cursor-ring .cr-label {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: white;
  opacity: 0;
  white-space: nowrap;
  transform: scale(0.6);
  transition: opacity .2s, transform .2s;
}

body.cursor-hover .cursor-ring {
  width: 52px; height: 52px;
  border-color: rgba(139,92,246,0.8);
  background: rgba(139,92,246,0.10);
}
body.cursor-hover .cursor-dot { opacity: 0; }

body.cursor-label .cursor-ring {
  height: 30px;
  padding: 0 14px;
  border-color: transparent;
  background: linear-gradient(135deg, var(--primary), var(--secondary));
  box-shadow: 0 6px 20px rgba(70,72,212,0.45);
}
body.cursor-label .cursor-ring .cr-label { opacity: 1; transform: scale(1); }
body.cursor-label .cursor-dot { opacity: 0; }

body.cursor-down .cursor-ring { transform: translate(-50%, -50%) scale(0.82); }

/* ── Swipe Demo ────────────────────────────────────────────────── */
.swipe-demo {
  position: relative;
  width: 340px;
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.swipe-demo .orbit-ring {
  top: 46%;
  left: 50%;
  will-change: transform;
}
/* spin + live mouse-parallax via CSS vars (--ox/--oy set by JS) */
@keyframes demo-orbit {
  from { transform: translate(-50%, -50%) translate(var(--ox, 0px), var(--oy, 0px)) rotate(0deg); }
  to   { transform: translate(-50%, -50%) translate(var(--ox, 0px), var(--oy, 0px)) rotate(360deg); }
}
.swipe-demo .orbit-ring-1 { width: 430px; height: 430px; animation: demo-orbit 26s linear infinite; }
.swipe-demo .orbit-ring-2 { width: 320px; height: 320px; animation: demo-orbit 19s linear infinite reverse; }

/* Live counter */
.demo-counter {
  position: absolute;
  top: -8px;
  right: -14px;
  z-index: 30;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,0.08);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,0.16);
  border-radius: var(--r-md);
  box-shadow: 0 10px 30px rgba(0,0,0,0.25);
  will-change: transform;
}
.demo-counter.pulse { animation: counter-pulse 0.5s var(--ease-out); }
@keyframes counter-pulse {
  0%,100% { transform: scale(1); }
  40%     { transform: scale(1.09); }
}
.dc-icon {
  width: 34px; height: 34px;
  border-radius: 9px;
  background: linear-gradient(135deg, var(--success), #16a34a);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(34,197,94,0.4);
}
.dc-text { display: flex; flex-direction: column; line-height: 1.15; }
.dc-value { font-size: 1.05rem; font-weight: 800; color: white; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.dc-unit { font-size: 0.7rem; font-weight: 600; opacity: 0.7; }
.dc-label { font-size: 0.62rem; color: rgba(255,255,255,0.55); font-weight: 500; letter-spacing: 0.04em; }

/* Phone-framed deck */
.demo-phone {
  position: relative;
  width: 272px;
  margin-top: 30px;
  z-index: 10;
}
.demo-phone-glow {
  position: absolute;
  inset: -30px;
  border-radius: 60px;
  background: radial-gradient(ellipse 80% 70% at 50% 45%, rgba(70,72,212,0.32) 0%, transparent 70%);
  filter: blur(20px);
  pointer-events: none;
  z-index: -1;
}

.demo-deck {
  position: relative;
  width: 272px;
  height: 440px;
  perspective: 1200px;
}

.deck-glow {
  position: absolute;
  top: 0; bottom: 0;
  width: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 28px;
  opacity: 0;
  pointer-events: none;
  z-index: 11;
  transition: opacity .15s;
}
.deck-glow-left  { left: -54px;  background: radial-gradient(circle at 30% 50%, rgba(239,68,68,0.35), transparent 70%); }
.deck-glow-right { right: -54px; background: radial-gradient(circle at 70% 50%, rgba(34,197,94,0.35), transparent 70%); }
.deck-glow svg { filter: drop-shadow(0 0 8px currentColor); }

/* Cards */
.demo-card {
  position: absolute;
  inset: 0;
  border-radius: 26px;
  overflow: hidden;
  background: #1a1535;
  box-shadow: 0 18px 50px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.06) inset;
  will-change: transform, opacity;
  transform-origin: center bottom;
  user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.demo-card.dragging { transition: none !important; }
.demo-card.settle  { transition: transform .55s var(--ease-out), opacity .55s var(--ease-out); }
.demo-card.fly     { transition: transform .5s cubic-bezier(0.4,0,0.6,1), opacity .5s ease; }

.dcard-photo { position: absolute; inset: 0; }
.dcard-photo svg { width: 100%; height: 100%; display: block; }

.dcard-grain {
  position: absolute; inset: 0;
  background:
    radial-gradient(ellipse at 30% 18%, rgba(255,255,255,0.12), transparent 50%),
    linear-gradient(180deg, transparent 45%, rgba(0,0,0,0.5) 100%);
  pointer-events: none;
}

.dcard-top {
  position: absolute; top: 0; left: 0; right: 0;
  display: flex; justify-content: space-between; align-items: center;
  padding: 12px 14px; z-index: 2;
  font-size: 0.68rem; font-weight: 600; color: rgba(255,255,255,0.85);
}

.dcard-meta {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 14px 14px 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 2;
}
.dcard-tag {
  align-self: flex-start;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: white;
  background: rgba(255,255,255,0.18);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(255,255,255,0.25);
  padding: 3px 9px;
  border-radius: var(--r-full);
}
.dcard-info { display: flex; justify-content: space-between; align-items: flex-end; }
.dcard-name { font-size: 0.78rem; font-weight: 600; color: white; }
.dcard-size { font-size: 0.72rem; font-weight: 700; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0.3); padding: 2px 8px; border-radius: 6px; }

.dcard-stamp {
  position: absolute;
  top: 30px;
  padding: 6px 14px;
  font-size: 1.05rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  border-radius: 10px;
  border: 3px solid currentColor;
  opacity: 0;
  z-index: 3;
  pointer-events: none;
}
.dcard-keep { right: 16px; color: #22C55E; transform: rotate(14deg); }
.dcard-del  { left: 16px;  color: #EF4444; transform: rotate(-14deg); }

/* Completion overlay */
.demo-complete {
  position: absolute;
  inset: 0;
  z-index: 25;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  text-align: center;
  padding: 24px;
  border-radius: 26px;
  background: rgba(12,12,29,0.82);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.12);
  opacity: 0;
  visibility: hidden;
  transform: scale(0.94);
  transition: opacity .5s var(--ease-out), transform .5s var(--ease-out), visibility .5s;
}
.demo-complete.show { opacity: 1; visibility: visible; transform: scale(1); }
.dco-badge {
  width: 60px; height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--success), #16a34a);
  display: flex; align-items: center; justify-content: center;
  color: white;
  margin-bottom: 8px;
  box-shadow: 0 8px 24px rgba(34,197,94,0.45);
  animation: dco-pop 0.6s var(--ease-out);
}
@keyframes dco-pop { 0% { transform: scale(0); } 60% { transform: scale(1.15); } 100% { transform: scale(1); } }
.demo-complete h3 { color: white; font-size: 1.15rem; }
.demo-complete p { color: rgba(255,255,255,0.6); font-size: 0.85rem; line-height: 1.5; }
.demo-complete strong { color: white; font-size: 1.7rem; font-weight: 800; display: inline-block; margin-top: 4px; background: linear-gradient(135deg,#4ade80,#86efac); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.demo-restart {
  margin-top: 14px;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  padding: 9px 18px;
  border-radius: var(--r-full);
  transition: background .2s, transform .2s;
}
.demo-restart:hover { background: rgba(255,255,255,0.18); transform: translateY(-1px); }

/* Controls */
.demo-controls {
  margin-top: 26px;
  width: 272px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  z-index: 12;
}
.demo-progress {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.6);
}
.dp-count { font-weight: 700; color: rgba(255,255,255,0.9); font-variant-numeric: tabular-nums; }
.dp-label { color: rgba(255,255,255,0.45); }
.dp-bar { flex: 1; height: 4px; background: rgba(255,255,255,0.12); border-radius: 2px; overflow: hidden; margin-left: 4px; }
.dp-fill { height: 100%; width: 0%; background: linear-gradient(90deg, var(--primary), var(--accent)); border-radius: 2px; transition: width .5s var(--ease-out); }

.demo-actions { display: flex; align-items: center; gap: 18px; }
.demo-btn {
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  color: white;
  transition: transform .2s var(--ease-out), box-shadow .2s, background .2s;
  will-change: transform;
}
.demo-btn:hover { transform: translateY(-3px) scale(1.06); }
.demo-btn:active { transform: scale(0.92); }
.db-delete { width: 56px; height: 56px; background: linear-gradient(135deg, #f87171, var(--danger)); box-shadow: 0 8px 22px rgba(239,68,68,0.4); }
.db-keep   { width: 56px; height: 56px; background: linear-gradient(135deg, #4ade80, var(--success)); box-shadow: 0 8px 22px rgba(34,197,94,0.4); }
.db-undo   { width: 44px; height: 44px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); color: rgba(255,255,255,0.75); box-shadow: none; }
.db-undo:hover { background: rgba(255,255,255,0.18); }
.demo-btn:disabled { opacity: 0.35; pointer-events: none; }

/* Particle canvas */
.demo-particles {
  position: absolute;
  inset: -40px;
  width: calc(100% + 80px);
  height: calc(100% + 80px);
  pointer-events: none;
  z-index: 20;
}

/* ── Magnetic helper ───────────────────────────────────────────── */
[data-magnetic] { will-change: transform; }

/* ── Logo spark (playful) ──────────────────────────────────────── */
.nav-logo { position: relative; }
.logo-spark {
  position: absolute;
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
  box-shadow: 0 0 6px var(--accent);
  z-index: 5;
}

/* ── AI Lab expandable ─────────────────────────────────────────── */
.ai-grid { align-items: start; }
.ai-card { cursor: pointer; }
.ai-card-detail {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height .45s var(--ease-out), opacity .35s, margin-top .35s;
}
.ai-card.expanded .ai-card-detail { max-height: 240px; opacity: 1; margin-top: 14px; }
.ai-card-detail-inner {
  border-top: 1px solid rgba(139,92,246,0.15);
  padding-top: 14px;
}
.ai-detail-row { display: flex; gap: 8px; margin-bottom: 8px; font-size: 0.8rem; line-height: 1.5; }
.ai-detail-row b { color: var(--text); font-weight: 700; min-width: 62px; flex-shrink: 0; }
.ai-detail-row span { color: var(--text-secondary); }
.ai-detail-status {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.65rem; font-weight: 700; letter-spacing: 0.08em;
  color: var(--accent); background: rgba(139,92,246,0.1);
  padding: 4px 10px; border-radius: var(--r-full); margin-top: 4px;
}
.ai-card-expand-hint {
  display: flex; align-items: center; gap: 4px;
  margin-top: 14px;
  font-size: 0.68rem; font-weight: 600; color: var(--accent);
  opacity: 0.75; transition: opacity .2s;
}
.ai-card:hover .ai-card-expand-hint { opacity: 1; }
.ai-card.expanded .ach-plus { transform: rotate(45deg); }
.ach-plus { transition: transform .3s; display: inline-block; font-size: 0.95rem; line-height: 1; }

/* ── Storage tip toast ─────────────────────────────────────────── */
.tip-toast {
  position: fixed;
  bottom: 24px; left: 50%;
  transform: translate(-50%, 20px);
  z-index: 9000;
  display: flex; align-items: center; gap: 10px;
  max-width: 90vw;
  padding: 12px 18px;
  background: var(--glass);
  backdrop-filter: blur(18px);
  border: 1px solid var(--glass-border);
  border-radius: var(--r-full);
  box-shadow: var(--shadow-lg);
  font-size: 0.85rem; font-weight: 500; color: var(--text);
  opacity: 0;
  pointer-events: none;
  transition: opacity .4s, transform .4s var(--ease-out);
}
.tip-toast.show { opacity: 1; transform: translate(-50%, 0); }
.tip-toast .tip-emoji { font-size: 1.1rem; }

/* ── Touch / reduced-motion fallbacks ──────────────────────────── */
@media (hover: none), (pointer: coarse) {
  .cursor-dot, .cursor-ring { display: none !important; }
  body.custom-cursor, body.custom-cursor * { cursor: auto; }
}
@media (prefers-reduced-motion: reduce) {
  .cursor-dot, .cursor-ring { display: none !important; }
  .swipe-demo .orbit-ring { animation: none; }
}

/* ── Demo responsive ───────────────────────────────────────────── */
@media (max-width: 960px) {
  .swipe-demo { margin-top: 10px; }
  .demo-counter { top: -22px; right: 50%; transform: translateX(50%); }
}
@media (max-width: 420px) {
  .swipe-demo { width: 300px; }
  .demo-phone, .demo-deck, .demo-controls { width: 240px; }
  .demo-deck { height: 400px; }
  .swipe-demo .orbit-ring-1 { width: 360px; height: 360px; }
  .swipe-demo .orbit-ring-2 { width: 270px; height: 270px; }
}