/* ==========================================================
   vault.css — 5-step interactive vault experience.
   Architecture: Steps 1-5 are absolutely positioned full-screen
   sections that fade in/out. Mobile-first, 375px target.

   Card-specific theming: The vault body receives --card-accent*
   CSS custom properties from the card registry via the template.
   All interactive accent colors reference these variables so each
   card can carry its own palette (e.g. water blues for Blow Me
   Bubbles, warm pinks for a future card). Fallback values ensure
   the UI renders even without injected theme vars.

   Extends theme.css tokens.
   ========================================================== */

/* ── LAYOUT ──────────────────────────────────────────────── */
.vault-body {
  background: var(--bg);
  color: var(--fg);
  font-family: var(--font-body);
  overflow: hidden;
  height: 100dvh;
  width: 100%;
  position: relative;
  touch-action: manipulation;
}

.vault-header {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: rgba(10,10,10,0.9);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255,255,255,0.06);
}

.vault-brand {
  font-family: var(--font-display);
  font-size: 20px;
  color: var(--gold);
  text-decoration: none;
  letter-spacing: 1px;
  text-shadow: 0 0 10px rgba(212,175,55,0.4);
}

.vault-step-dots {
  display: flex;
  gap: 8px;
  align-items: center;
}

.vault-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  transition: all 0.35s ease;
  cursor: default;
}
.vault-dot.dot-done     { background: var(--card-accent, #6dc8e8); }
.vault-dot.dot-active   { background: var(--card-accent, #6dc8e8); transform: scale(1.35); box-shadow: 0 0 8px var(--card-accent-glow, rgba(109,200,232,0.6)); }
.vault-dot.dot-pending  { background: rgba(255,255,255,0.1); }

.vault-timer-pill {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--fg-muted);
  font-weight: 500;
  letter-spacing: 0.5px;
}

/* ── STEP SECTIONS ───────────────────────────────────────── */
.vault-step {
  position: fixed;
  inset: 0;
  top: 56px; /* below header */
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 24px 20px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.5s ease, transform 0.5s ease;
  transform: translateY(16px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.vault-step.step-active {
  opacity: 1;
  pointer-events: all;
  transform: translateY(0);
}

.vault-step.step-exiting {
  opacity: 0;
  transform: translateY(-16px);
  pointer-events: none;
}

/* ── STEP 1: HANDWRITTEN INTRO ───────────────────────────── */
@keyframes penWrite {
  from { clip-path: inset(0 100% 0 0); }
  to   { clip-path: inset(0 0% 0 0); }
}

@keyframes fadeUpIn {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}

.intro-card {
  background: linear-gradient(145deg, #0d0d12, #08080c);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 40px 32px;
  max-width: 420px;
  width: 100%;
  box-shadow: 0 24px 60px rgba(0,0,0,0.6), 0 0 40px var(--card-accent-faint, rgba(109,200,232,0.06));
  position: relative;
  overflow: hidden;
}

.intro-card::before {
  content: '';
  position: absolute;
  top: 0; left: -100%; width: 200%; height: 100%;
  background: linear-gradient(90deg, transparent, var(--card-accent-faint, rgba(109,200,232,0.04)), transparent);
  animation: shimmerSlide 4s infinite;
  pointer-events: none;
}

.intro-to-from {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: var(--fg-muted);
  margin-bottom: 20px;
}

.intro-note-text {
  font-family: var(--font-display);
  font-size: 28px;
  line-height: 1.4;
  color: var(--fg);
  min-height: 40px;
  word-break: break-word;
}

.intro-pen-cursor {
  display: inline-block;
  width: 2px;
  height: 1.2em;
  background: var(--card-accent, #6dc8e8);
  margin-left: 3px;
  vertical-align: text-bottom;
  animation: penBlink 0.8s step-end infinite;
}

@keyframes penBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.intro-seal {
  margin-top: 28px;
  font-size: 22px;
  color: var(--fg-muted);
  text-align: right;
  opacity: 0;
  animation: fadeUpIn 0.6s ease forwards;
  animation-delay: var(--seal-delay, 3s);
}

.intro-sender {
  font-family: var(--font-serif);
  font-size: 14px;
  color: var(--fg-muted);
  font-style: italic;
  margin-top: 16px;
  opacity: 0;
  animation: fadeUpIn 0.6s ease forwards;
  animation-delay: var(--sender-delay, 3.2s);
}

.step-cta-btn {
  margin-top: 32px;
  background: transparent;
  border: 1px solid var(--card-accent-muted, rgba(109,200,232,0.35));
  color: var(--card-accent, #6dc8e8);
  font-family: var(--font-body);
  font-size: 13px;
  letter-spacing: 3px;
  text-transform: uppercase;
  padding: 14px 40px;
  border-radius: 100px;
  cursor: pointer;
  transition: all 0.3s ease;
  opacity: 0;
  animation: fadeUpIn 0.6s ease forwards;
  animation-delay: var(--btn-delay, 4s);
}

.step-cta-btn:hover, .step-cta-btn:active {
  background: var(--card-accent-faint, rgba(109,200,232,0.08));
  border-color: var(--card-accent, #6dc8e8);
  box-shadow: 0 0 20px var(--card-accent-glow, rgba(109,200,232,0.15));
}

/* ── STEP 2: THE MASK ────────────────────────────────────── */
.mask-container {
  position: relative;
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3/4;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}

.mask-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(18px) brightness(0.4);
  transition: filter 1.2s ease;
  border-radius: 20px;
}

.mask-photo.photo-revealed {
  filter: blur(0) brightness(1);
}

.mask-photo.photo-partial {
  filter: blur(var(--blur-px, 18px)) brightness(var(--brightness, 0.4));
}

/* Bubble canvas sits over the photo */
.bubble-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 20px;
  touch-action: none;
}

.mask-label {
  margin-top: 20px;
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
  letter-spacing: 0.5px;
}

/* ── STEP 3: THE TASK ────────────────────────────────────── */
.task-container {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.task-header {
  text-align: center;
}

.task-badge {
  display: inline-block;
  padding: 4px 14px;
  border-radius: 100px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 3px;
  text-transform: uppercase;
  background: var(--card-accent-subtle, rgba(109,200,232,0.12));
  color: var(--card-accent, #6dc8e8);
  margin-bottom: 14px;
}

.task-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 700;
  color: var(--fg);
  margin-bottom: 8px;
}

.task-subtitle {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.6;
}

/* Mic blow indicator — uses card theme accent */
.mic-indicator {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--card-accent-subtle, rgba(109,200,232,0.1));
  border: 2px solid var(--card-accent-muted, rgba(109,200,232,0.3));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 40px;
  position: relative;
  transition: all 0.15s ease;
}

.mic-indicator.mic-active {
  background: var(--card-accent-subtle, rgba(109,200,232,0.25));
  border-color: var(--card-accent-solid, rgba(109,200,232,0.7));
  transform: scale(1.08);
  box-shadow: 0 0 30px var(--card-accent-glow, rgba(109,200,232,0.4));
}

.mic-ring {
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  border: 2px solid var(--card-accent-subtle, rgba(109,200,232,0.2));
  animation: micRingPulse 2s ease-in-out infinite;
}

@keyframes micRingPulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.15); opacity: 0.1; }
}

.mic-level-bar {
  width: 100%;
  max-width: 280px;
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 100px;
  overflow: hidden;
}

.mic-level-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--card-accent-muted, rgba(109,200,232,0.5)), var(--card-accent, #6dc8e8));
  border-radius: 100px;
  width: 0%;
  transition: width 0.1s ease;
}

.mic-status {
  font-size: 13px;
  color: var(--fg-muted);
  text-align: center;
  min-height: 20px;
}

.mic-status.status-active { color: var(--card-accent, #6dc8e8); }
.mic-status.status-success { color: var(--gold); }

/* Tap fallback — uses card theme accent */
.tap-fallback-btn {
  width: 100px; height: 100px;
  border-radius: 50%;
  background: var(--card-accent-subtle, rgba(109,200,232,0.12));
  border: 2px solid var(--card-accent-muted, rgba(109,200,232,0.35));
  font-size: 36px;
  cursor: pointer;
  transition: all 0.15s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}

.tap-fallback-btn:active {
  transform: scale(0.92);
  background: var(--card-accent-subtle, rgba(109,200,232,0.28));
}

.tap-counter {
  font-family: var(--font-serif);
  font-size: 32px;
  font-weight: 700;
  color: var(--fg-muted);
  min-width: 60px;
  text-align: center;
}

/* ── STEP 4: PENALTY BOX ─────────────────────────────────── */
.penalty-container {
  text-align: center;
  max-width: 380px;
  width: 100%;
}

.penalty-ring {
  width: 140px; height: 140px;
  margin: 0 auto 28px;
  position: relative;
}

.penalty-ring svg {
  width: 100%; height: 100%;
  transform: rotate(-90deg);
}

.penalty-track { fill: none; stroke: rgba(255,255,255,0.06); stroke-width: 6; }
.penalty-fill  { fill: none; stroke: var(--card-accent-muted, rgba(109,200,232,0.5)); stroke-width: 6; stroke-linecap: round; transition: stroke-dashoffset 1s linear; }

.penalty-time-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.penalty-time-num {
  font-family: var(--font-serif);
  font-size: 26px;
  font-weight: 700;
  color: var(--fg);
  line-height: 1;
}

.penalty-time-unit {
  font-size: 11px;
  color: var(--fg-muted);
  text-transform: uppercase;
  letter-spacing: 2px;
  margin-top: 4px;
}

.penalty-title {
  font-family: var(--font-serif);
  font-size: clamp(22px, 5vw, 28px);
  font-weight: 700;
  margin-bottom: 16px;
  color: var(--fg);
}

.penalty-body {
  font-size: 14px;
  line-height: 1.7;
  color: var(--fg-muted);
  max-width: 320px;
  margin: 0 auto;
}

.penalty-taunt {
  margin-top: 24px;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  color: var(--card-accent, #6dc8e8);
  opacity: 0.8;
}

/* ── STEP 4/5: THE REVEAL ───────────────────────────────── */
.reveal-container {
  width: 100%;
  max-width: 420px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.reveal-image-wrap {
  width: 100%;
  max-width: 380px;
  aspect-ratio: 3/4;
  border-radius: 20px;
  overflow: hidden;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.7);
}

.reveal-photo {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  border-radius: 20px;
}

@keyframes shimmerReveal {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.reveal-shimmer-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent, var(--card-accent-glow, rgba(109,200,232,0.25)), transparent);
  animation: shimmerReveal 0.9s ease forwards;
}

/* System message card */
.system-message-card {
  background: linear-gradient(145deg, #0d0d12, #08080c);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 24px 28px;
  width: 100%;
  max-width: 380px;
  text-align: center;
}

.system-message-text {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 16px;
  line-height: 1.65;
  color: var(--fg);
}

/* Voice player */
.vault-voice-player {
  width: 100%;
  max-width: 380px;
  background: var(--bg-elevated);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 14px;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 14px;
}

.vault-play-btn {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--card-accent-muted, rgba(109,200,232,0.35));
  border: none;
  color: var(--fg);
  font-size: 16px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.vault-play-btn:hover { background: var(--card-accent, #6dc8e8); transform: scale(1.05); }

.vault-viz {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 3px;
  height: 28px;
}

.viz-bar {
  width: 3px;
  background: var(--card-accent-muted, rgba(109,200,232,0.3));
  border-radius: 2px;
  height: 4px;
  transition: height 0.1s ease;
}

.vault-viz.viz-playing .viz-bar {
  animation: vizDance 0.8s ease-in-out infinite alternate;
}

@keyframes vizDance {
  from { height: 4px; }
  to   { height: 20px; }
}

.viz-bar:nth-child(odd)  { animation-delay: 0.1s; }
.viz-bar:nth-child(even) { animation-delay: 0.2s; }

.vault-voice-duration {
  font-size: 12px;
  color: var(--fg-muted);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

/* ── DESTRUCT FOOTER ─────────────────────────────────────── */
.vault-destruct-footer {
  margin-top: 8px;
  font-size: 12px;
  color: rgba(255,255,255,0.25);
  text-align: center;
  letter-spacing: 1px;
}

/* ── POP PARTICLE BURST ──────────────────────────────────── */
.pop-particle {
  position: fixed;
  pointer-events: none;
  border-radius: 50%;
  width: 6px; height: 6px;
  background: var(--card-accent, #6dc8e8);
  z-index: 500;
  animation: particleBurst var(--dur, 0.7s) ease-out forwards;
}

@keyframes particleBurst {
  0%   { opacity: 1; transform: translate(0, 0) scale(1); }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(0.3); }
}

/* ── EXPIRED OVERLAY ─────────────────────────────────────── */
.vault-expired-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.9);
  z-index: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.vault-expired-card {
  background: var(--bg-elevated);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 20px;
  padding: 40px 32px;
  text-align: center;
  max-width: 380px;
}

.vault-expired-card h2 {
  font-family: var(--font-serif);
  font-size: 22px;
  margin: 16px 0 10px;
  color: var(--fg);
}

.vault-expired-card p {
  font-size: 14px;
  color: var(--fg-muted);
  line-height: 1.6;
}

/* ── FOG PROGRESS (step 2 + step 3 swipe) ───────────────── */
.fog-progress-bar {
  width: 100%;
  max-width: 380px;
  height: 5px;
  background: rgba(255,255,255,0.07);
  border-radius: 100px;
  overflow: hidden;
}

.fog-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--card-accent-muted, rgba(168,200,232,0.45)), var(--card-accent, #a8c8e8));
  border-radius: 100px;
  width: 0%;
  transition: width 0.25s ease;
}

.fog-progress-label {
  font-size: 12px;
  color: var(--fg-muted);
  text-align: center;
  margin-top: 8px;
  letter-spacing: 0.5px;
}

/* ── SWIPE-WIPE INTERFACE (Foggy Mirror step 3) ──────────── */
.swipe-mirror-wrap {
  position: relative;
  width: 100%;
  max-width: 340px;
  aspect-ratio: 3/4;
  border-radius: 20px;
  overflow: hidden;
  /* Minimal mirror frame — elegant, not ornate */
  box-shadow:
    0 0 0 1px rgba(200,220,240,0.18),
    0 20px 60px rgba(0,0,0,0.6);
}

.swipe-mirror-photo {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: blur(18px) brightness(0.3);
  transition: filter 0.9s ease;
  border-radius: 20px;
  /* Silhouette hint — slightly brightened than mask step */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* Fog canvas sits over photo; erased with destination-out */
.swipe-fog-canvas {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  border-radius: 20px;
  touch-action: none;
  cursor: crosshair;
}

.swipe-progress-bar {
  max-width: 340px;
}

/* Timeout countdown bar — shrinks from 100% → 0% over task duration */
.swipe-timeout-bar-wrap {
  width: 100%;
  max-width: 340px;
  height: 3px;
  background: rgba(255,255,255,0.05);
  border-radius: 100px;
  overflow: hidden;
}

.swipe-timeout-bar {
  height: 100%;
  width: 100%;
  background: linear-gradient(90deg, var(--card-accent, #a8c8e8), rgba(255,255,255,0.4));
  border-radius: 100px;
  transition: width 0s linear; /* set dynamically */
}

/* ── BOTTLE MASK (Message in a Bottle) ──────────────────── */

/* Bottle canvas — full mask container overlay */
.bottle-mask-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 20px;
  /* Pointer events off: the step 2 mask is non-interactive */
  pointer-events: none;
}

/* ── SHAKE TASK ──────────────────────────────────────────── */

/* Bottle canvas in step 3 shake task — fixed 240×340 centered */
.shake-bottle-wrap {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 280px;
}

.shake-bottle-canvas {
  display: block;
  border-radius: 16px;
  background: transparent;
  /* Subtle water glow */
  filter: drop-shadow(0 0 18px rgba(126,184,212,0.18));
  max-width: 100%;
}

/* Crack overlay — purely decorative, overlaid by JS canvas */
.shake-crack-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none;
  border-radius: 16px;
}

/* Shard pip indicators — progress dots styled as shards */
.shake-progress-wrap {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: center;
}

.shake-shard-pip {
  width: 12px;
  height: 16px;
  clip-path: polygon(50% 0%, 100% 60%, 70% 100%, 30% 100%, 0% 60%);
  background: rgba(126,184,212,0.20);
  border: 1px solid rgba(126,184,212,0.30);
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.2s ease;
}

.shake-shard-pip.shard-active {
  background: var(--card-accent, #7eb8d4);
  border-color: var(--card-accent-solid, rgba(126,184,212,0.7));
  box-shadow: 0 0 8px var(--card-accent-glow, rgba(126,184,212,0.4));
  transform: scale(1.2) rotate(-5deg);
}

/* ── RESPONSIVE ──────────────────────────────────────────── */
@media (max-width: 390px) {
  .intro-card { padding: 28px 20px; }
  .intro-note-text { font-size: 22px; }
  .mask-container { max-width: 320px; }
}

@media (min-height: 800px) {
  .vault-step { justify-content: center; }
}