/* ── Gimmicks: Layer 1 (shared across Task 7+ modules) ────────── */

.cursor-trail-canvas {
  position: fixed; inset: 0; pointer-events: none; z-index: 9999;
}
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .cursor-trail-canvas { display: none; }
}

body.konami-invert { filter: invert(1) hue-rotate(180deg); transition: filter 500ms ease; }
.konami-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 10000; }

.pixel-rain-canvas { position: fixed; inset: 0; pointer-events: none; z-index: 9998; }

/* SFX toggle button (Layer 1 / Task 11) */
.sfx-toggle {
  position: fixed; bottom: 12px; right: 12px; z-index: 50;
  width: 44px; height: 44px; border-radius: 50%;
  background: oklch(0.18 0.02 280 / 0.85); color: white; border: 1px solid oklch(1 0 0 / 0.1);
  font-size: 1.1rem; cursor: pointer; backdrop-filter: blur(6px);
  transition: transform 150ms ease;
}
.sfx-toggle:hover { transform: scale(1.05); }
.sfx-toggle:focus-visible { outline: 2px solid oklch(0.75 0.2 290); outline-offset: 2px; }

/* Magnetic elements (Layer 1 / Task 13) */
.magnetic { transition: transform 150ms ease-out; will-change: transform; display: inline-block; }
@media (pointer: coarse), (prefers-reduced-motion: reduce) {
  .magnetic { transform: none !important; transition: none; }
}

/* Fingerprint badge (Layer 1 / Task 15) */
.fingerprint-badge {
  position: fixed; bottom: 12px; left: 12px; z-index: 40;
  width: 40px; height: 40px; cursor: pointer;
  border: 1px solid oklch(1 0 0 / 0.15);
  backdrop-filter: blur(6px);
  transition: transform 200ms ease, width 200ms ease, height 200ms ease;
}
.fingerprint-badge:hover { transform: scale(1.05); }
.fingerprint-badge.expanded { width: 240px; height: 240px; }
@media (max-width: 640px) { .fingerprint-badge { bottom: 64px; } }

/* Ambient zone toggle (Layer 1 / Task 18) — fixed cluster with sfx-toggle */
.ambient-toggle {
  position: fixed; bottom: 12px; right: 64px; z-index: 50;
  height: 44px; padding: 0 14px; border-radius: 22px;
  background: oklch(0.18 0.02 280 / 0.85); color: white; border: 1px solid oklch(1 0 0 / 0.15);
  font-size: 0.82rem; cursor: pointer; backdrop-filter: blur(6px);
  transition: transform 150ms ease, background 150ms ease;
}
.ambient-toggle:hover { background: oklch(0.22 0.03 280 / 0.95); transform: translateY(-2px); }
.ambient-toggle:focus-visible { outline: 2px solid oklch(0.75 0.2 290); outline-offset: 2px; }
@media (max-width: 640px) { .ambient-toggle { bottom: 64px; right: 64px; } }

/* Session gimmicks (Layer 1 / Task 19) */
.milestone-toast {
  position: fixed; top: 20px; right: 20px; z-index: 60;
  padding: 12px 16px; background: oklch(0.2 0.02 280 / 0.95); color: white;
  border-radius: 12px; box-shadow: 0 8px 24px rgba(0,0,0,0.4);
  opacity: 0; transform: translateX(20px); transition: opacity 250ms ease, transform 250ms ease;
  max-width: 320px;
}
.milestone-toast.visible { opacity: 1; transform: translateX(0); }
.breadcrumb { font-size: 0.85rem; opacity: 0.75; padding: 4px 0; }
.breadcrumb a { color: inherit; text-decoration: none; }
.breadcrumb a:hover { text-decoration: underline; }
.time-spent { font-size: 0.8rem; opacity: 0.6; text-align: center; padding: 4px; }

/* Modes: focus / screenshot / pull-refresh (Layer 1 / Task 21) */
html.mode-focus main > *:not(:focus-within):not(:hover) { opacity: 0.2; transition: opacity 200ms ease; }
html.mode-focus main > *:hover, html.mode-focus main > *:focus-within { opacity: 1; box-shadow: 0 0 40px -10px var(--accent, oklch(0.65 0.18 290)); }

html.mode-screenshot .page-header, html.mode-screenshot .scroll-progress,
html.mode-screenshot .fingerprint-badge, html.mode-screenshot .sfx-toggle,
html.mode-screenshot .ambient-toggle, html.mode-screenshot footer { display: none !important; }
html.mode-screenshot body { box-shadow: inset 0 0 0 4px oklch(1 0 0 / 0.1); }

.pull-refresh-toast {
  position: fixed; top: 10px; left: 50%; transform: translateX(-50%);
  padding: 8px 16px; background: oklch(0.2 0.02 280 / 0.95); color: white; border-radius: 20px;
  font-family: "JetBrains Mono", monospace; font-size: 0.85rem; z-index: 60;
}

/* Cursor ghosts (Layer 1 / Task 22) */
.ghost-cursor {
  position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9997;
  display: flex; align-items: center; gap: 4px;
  opacity: 0.3; transition: transform 80ms linear, opacity 300ms ease;
}
.ghost-cursor::before { content: "▲"; color: oklch(0.7 0.2 var(--ghost-hue, 290)); font-size: 14px; }
.ghost-cursor__label { font-size: 10px; font-family: "JetBrains Mono", monospace; background: oklch(0 0 0 / 0.6); color: white; padding: 2px 4px; border-radius: 3px; }

/* Back-to-top (Layer 1 / Task 25) — sits left of sfx + ambient cluster */
.back-to-top {
  position: fixed; bottom: 12px; right: 12px;
  width: 44px; height: 44px; border-radius: 50%;
  background: oklch(0.2 0.02 280 / 0.9); color: white; border: none;
  opacity: 0; pointer-events: none; transition: opacity 200ms ease, transform 200ms ease;
  cursor: pointer; z-index: 40; font-size: 1.2rem;
}
.back-to-top.visible { opacity: 1; pointer-events: auto; }
.back-to-top:hover { transform: translateY(-4px); }
.back-to-top:focus-visible { outline: 2px solid oklch(0.75 0.2 290); outline-offset: 2px; }
/* On zone pages where .ambient-toggle exists, slide back-to-top further left to avoid the cluster. */
body[data-zone] .back-to-top { right: 168px; }
@media (max-width: 640px) {
  .back-to-top { right: 12px; bottom: 64px; }
  body[data-zone] .back-to-top { right: 168px; bottom: 64px; }
}

/* Achievement toast (Layer 2 / Task 3) */
.achievement-toast {
  position: fixed; top: 20px; right: 20px; z-index: 70;
  padding: 12px 16px; background: oklch(0.2 0.04 290 / 0.95); color: white;
  border: 1px solid oklch(0.65 0.22 290 / 0.5); border-radius: 12px;
  box-shadow: 0 8px 24px oklch(0.65 0.22 290 / 0.3);
  opacity: 0; transform: translateX(20px); transition: opacity 250ms ease, transform 250ms ease;
  max-width: 320px; font-size: 0.9rem;
}
.achievement-toast.visible { opacity: 1; transform: translateX(0); }
.achievement-toast strong { color: oklch(0.85 0.15 290); }

/* Journey mode (Layer 2 / Task 11) — guided tour overlay */
.journey-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 9000; }
.journey-tip {
  position: fixed; max-width: 320px; pointer-events: auto;
  background: oklch(0.18 0.02 280 / 0.97); color: white;
  padding: 16px; border-radius: 12px; box-shadow: 0 12px 32px rgba(0,0,0,0.5);
  border: 1px solid oklch(0.65 0.22 290 / 0.4);
  transition: top 300ms ease, left 300ms ease;
}
.journey-tip p { margin: 0 0 12px; font-size: 0.9rem; }
.journey-actions { display: flex; gap: 8px; justify-content: flex-end; }
.journey-actions button { padding: 6px 12px; border-radius: 6px; cursor: pointer; }
#journey-next { background: oklch(0.65 0.22 290); color: white; border: none; }
#journey-skip { background: transparent; color: white; border: 1px solid oklch(1 0 0 / 0.2); }