/* ============================================================
   31 DAY TRANSITIONS — one unique animation per date 1..31
   Apply via: .fc-swap[data-day="N"]
   ============================================================ */

/* BACK TRANSITION — returning from detail to calendar.
   Soft Depth Pull: small zoom-out with a brief blur clearing, plus a
   gentle settle. Apple-style "coming home" — subtle and composed. */
.fc-swap.is-calendar {
  animation: tx-back 480ms cubic-bezier(0.22, 1, 0.36, 1) both;
  transform-origin: center top;
}
@keyframes tx-back {
  0%   { opacity: 0; transform: scale(1.035) translateY(-8px); }
  100% { opacity: 1; transform: scale(1) translateY(0); }
}

.fc-swap[data-day] {
  transform-origin: var(--origin-x, 50%) var(--origin-y, 50%);
  will-change: transform, opacity, filter, clip-path;
}

/* ── 1 · Spatial Zoom ─────────────────────────────────────── */
.fc-swap[data-day="1"] { animation: tx-d1 520ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tx-d1 {
  0%   { opacity: 0; transform: scale(0.6); filter: blur(8px); }
  40%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── 2 · Crystal Bloom ────────────────────────────────────── */
.fc-swap[data-day="2"] { animation: tx-d2 560ms cubic-bezier(0.16, 1, 0.3, 1) both; }
@keyframes tx-d2 {
  0%   { opacity: 0; transform: scale(0.88); filter: brightness(1.6) blur(6px); }
  50%  { opacity: 1; filter: brightness(1.15) blur(0); }
  100% { opacity: 1; transform: scale(1); filter: brightness(1); }
}

/* ── 3 · Slide Up ────────────────────────────────────────── */
.fc-swap[data-day="3"] { animation: tx-d3 460ms cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes tx-d3 {
  0%   { opacity: 0; transform: translateY(80px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* ── 4 · Iris Open ──────────────────────────────────────── */
.fc-swap[data-day="4"] { animation: tx-d4 700ms cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes tx-d4 {
  0%   { clip-path: circle(0% at var(--origin-x, 50%) var(--origin-y, 50%)); opacity: 0.4; }
  30%  { opacity: 1; }
  100% { clip-path: circle(160% at var(--origin-x, 50%) var(--origin-y, 50%)); opacity: 1; }
}

/* ── 5 · Page Fold ──────────────────────────────────────── */
.fc-swap[data-day="5"] { animation: tx-d5 620ms cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: left center; }
@keyframes tx-d5 {
  0%   { opacity: 0; transform: perspective(1400px) rotateY(-72deg); }
  100% { opacity: 1; transform: perspective(1400px) rotateY(0); }
}

/* ── 6 · Liquid Drop ────────────────────────────────────── */
.fc-swap[data-day="6"] { animation: tx-d6 680ms cubic-bezier(0.34, 1.26, 0.64, 1) both; transform-origin: top center; }
@keyframes tx-d6 {
  0%   { opacity: 0; transform: scaleY(0.05) scaleX(0.7); filter: blur(6px); }
  40%  { opacity: 1; filter: blur(0); }
  70%  { transform: scaleY(1.05) scaleX(0.98); }
  100% { opacity: 1; transform: scaleY(1) scaleX(1); }
}

/* ── 7 · Light Sweep ────────────────────────────────────── */
.fc-swap[data-day="7"] { animation: tx-d7 720ms cubic-bezier(0.65, 0, 0.35, 1) both; position: relative; }
@keyframes tx-d7 {
  0%   { clip-path: inset(0 0 100% 0); opacity: 0.6; }
  60%  { opacity: 1; }
  100% { clip-path: inset(0); opacity: 1; }
}
.fc-swap[data-day="7"]::before {
  content: ""; position: absolute; left: -10%; right: -10%; height: 3px;
  background: linear-gradient(90deg, transparent, var(--text), transparent);
  opacity: 0.5; pointer-events: none; z-index: 2;
  animation: tx-d7-line 720ms cubic-bezier(0.65, 0, 0.35, 1) both;
}
@keyframes tx-d7-line {
  0%   { top: 0; opacity: 0; }
  10%  { opacity: 0.6; }
  90%  { opacity: 0.6; }
  100% { top: 100%; opacity: 0; }
}

/* ── 8 · Depth Push ─────────────────────────────────────── */
.fc-swap[data-day="8"] { animation: tx-d8 640ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tx-d8 {
  0%   { opacity: 0; transform: perspective(1200px) translateZ(-360px); filter: blur(22px); }
  60%  { opacity: 1; filter: blur(0); }
  100% { opacity: 1; transform: perspective(1200px) translateZ(0); filter: blur(0); }
}

/* ── 9 · Origami Unfold ─────────────────────────────────── */
.fc-swap[data-day="9"] { animation: tx-d9 640ms cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes tx-d9 {
  0%   { clip-path: polygon(0 0, 0 0, 0 0, 0 0); opacity: 0.5; }
  40%  { clip-path: polygon(0 0, 50% 0, 50% 50%, 0 50%); opacity: 1; }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
}

/* ── 10 · Magnetic Snap ──────────────────────────────────── */
.fc-swap[data-day="10"] { animation: tx-d10 540ms cubic-bezier(0.34, 1.36, 0.64, 1) both; }
@keyframes tx-d10 {
  0%   { opacity: 0; transform: scale(0.8); }
  55%  { opacity: 1; transform: scale(1.06); }
  80%  { transform: scale(0.98); }
  100% { transform: scale(1); }
}

/* ── 11 · Frosted Glass ──────────────────────────────────── */
.fc-swap[data-day="11"] { animation: tx-d11 580ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tx-d11 {
  0%   { opacity: 0; filter: blur(40px) saturate(2) brightness(1.2); }
  100% { opacity: 1; filter: blur(0) saturate(1) brightness(1); }
}

/* ── 12 · Cinema Slide ───────────────────────────────────── */
.fc-swap[data-day="12"] { animation: tx-d12 500ms cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes tx-d12 {
  0%   { opacity: 0; transform: translateX(100px); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ── 13 · Letterbox ──────────────────────────────────────── */
.fc-swap[data-day="13"] { animation: tx-d13 620ms cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes tx-d13 {
  0%   { clip-path: inset(45% 0); opacity: 0.4; }
  30%  { opacity: 1; }
  100% { clip-path: inset(0); opacity: 1; }
}

/* ── 14 · Color Shift ───────────────────────────────────── */
.fc-swap[data-day="14"] { animation: tx-d14 580ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tx-d14 {
  0%   { opacity: 0; transform: scale(0.96); filter: hue-rotate(60deg) saturate(1.5) brightness(1.2); }
  60%  { opacity: 1; }
  100% { opacity: 1; transform: scale(1); filter: hue-rotate(0) saturate(1) brightness(1); }
}

/* ── 15 · Spotlight ──────────────────────────────────────── */
.fc-swap[data-day="15"] { animation: tx-d15 720ms cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes tx-d15 {
  0%   { clip-path: ellipse(0% 0% at var(--origin-x, 50%) var(--origin-y, 50%)); opacity: 0.5; }
  30%  { opacity: 1; }
  100% { clip-path: ellipse(140% 140% at var(--origin-x, 50%) var(--origin-y, 50%)); opacity: 1; }
}

/* ── 16 · Curtain Reveal ─────────────────────────────────── */
.fc-swap[data-day="16"] { animation: tx-d16 700ms cubic-bezier(0.65, 0, 0.35, 1) both; position: relative; }
@keyframes tx-d16 {
  0%   { clip-path: inset(0 0 100% 0); opacity: 0.8; }
  60%  { opacity: 1; }
  100% { clip-path: inset(0); opacity: 1; }
}

/* ── 17 · Helix Tilt ────────────────────────────────────── */
.fc-swap[data-day="17"] { animation: tx-d17 620ms cubic-bezier(0.22, 1, 0.36, 1) both; transform-origin: center bottom; }
@keyframes tx-d17 {
  0%   { opacity: 0; transform: perspective(800px) rotateX(-35deg) translateY(60px); }
  100% { opacity: 1; transform: perspective(800px) rotateX(0) translateY(0); }
}

/* ── 18 · Velocity Blur ─────────────────────────────────── */
.fc-swap[data-day="18"] { animation: tx-d18 540ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tx-d18 {
  0%   { opacity: 0; transform: translateX(160px) scaleX(1.4); filter: blur(14px); }
  60%  { filter: blur(0); }
  100% { opacity: 1; transform: translateX(0) scaleX(1); filter: blur(0); }
}

/* ── 19 · Quantum Flicker ───────────────────────────────── */
.fc-swap[data-day="19"] { animation: tx-d19 640ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tx-d19 {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 0.4; transform: translateX(-3px); filter: brightness(1.4); }
  20%  { opacity: 0.1; transform: translateX(4px); }
  30%  { opacity: 0.6; transform: translateX(-2px); filter: brightness(1); }
  40%  { opacity: 0.3; transform: translateX(2px); }
  60%  { opacity: 1; transform: translateX(0); }
  100% { opacity: 1; transform: translateX(0); }
}

/* ── 20 · Hue Bloom ─────────────────────────────────────── */
.fc-swap[data-day="20"] { animation: tx-d20 620ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tx-d20 {
  0%   { opacity: 0; transform: scale(0.4); filter: hue-rotate(-80deg) saturate(0.3) brightness(0.7); }
  100% { opacity: 1; transform: scale(1); filter: hue-rotate(0) saturate(1) brightness(1); }
}

/* ── 21 · Vinyl Spin ────────────────────────────────────── */
.fc-swap[data-day="21"] { animation: tx-d21 620ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tx-d21 {
  0%   { opacity: 0; transform: rotate(-18deg) scale(0.8); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

/* ── 22 · Card Flip ─────────────────────────────────────── */
.fc-swap[data-day="22"] { animation: tx-d22 720ms cubic-bezier(0.65, 0, 0.35, 1) both; transform-origin: center; }
@keyframes tx-d22 {
  0%   { opacity: 0; transform: perspective(1400px) rotateY(95deg); }
  49%  { opacity: 0; }
  51%  { opacity: 1; }
  100% { opacity: 1; transform: perspective(1400px) rotateY(0); }
}

/* ── 23 · Blueprint Build ───────────────────────────────── */
.fc-swap[data-day="23"] { animation: tx-d23 620ms cubic-bezier(0.22, 1, 0.36, 1) both; position: relative; }
@keyframes tx-d23 {
  0%   { opacity: 0; transform: translateY(20px) scale(0.97); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.fc-swap[data-day="23"]::before {
  content: ""; position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, color-mix(in oklch, var(--text) 10%, transparent) 1px, transparent 1px),
    linear-gradient(to bottom, color-mix(in oklch, var(--text) 10%, transparent) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
  animation: tx-d23-grid 620ms ease both;
}
@keyframes tx-d23-grid {
  0%   { opacity: 0.8; }
  100% { opacity: 0; }
}

/* ── 24 · Zoom Crash ────────────────────────────────────── */
.fc-swap[data-day="24"] { animation: tx-d24 460ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tx-d24 {
  0%   { opacity: 0; transform: scale(1.6); filter: blur(24px); }
  50%  { filter: blur(0); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

/* ── 25 · Veil Lift ─────────────────────────────────────── */
.fc-swap[data-day="25"] { animation: tx-d25 580ms cubic-bezier(0.32, 0.72, 0, 1) both; }
@keyframes tx-d25 {
  0%   { opacity: 0; transform: translateY(-40px); filter: brightness(1.5); }
  100% { opacity: 1; transform: translateY(0); filter: brightness(1); }
}

/* ── 26 · Diagonal Wipe ─────────────────────────────────── */
.fc-swap[data-day="26"] { animation: tx-d26 700ms cubic-bezier(0.65, 0, 0.35, 1) both; }
@keyframes tx-d26 {
  0%   { clip-path: polygon(0 0, 0 0, 0 0, 0 100%); opacity: 0.5; }
  40%  { opacity: 1; }
  100% { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); opacity: 1; }
}

/* ── 27 · Echo Pulse ────────────────────────────────────── */
.fc-swap[data-day="27"] { animation: tx-d27 680ms cubic-bezier(0.34, 1.26, 0.64, 1) both; }
@keyframes tx-d27 {
  0%   { opacity: 0; transform: scale(0.5); }
  30%  { opacity: 1; transform: scale(1.12); }
  50%  { transform: scale(0.96); }
  70%  { transform: scale(1.03); }
  100% { opacity: 1; transform: scale(1); }
}

/* ── 28 · Aurora Pass ───────────────────────────────────── */
.fc-swap[data-day="28"] { animation: tx-d28 720ms cubic-bezier(0.22, 1, 0.36, 1) both; position: relative; }
@keyframes tx-d28 {
  0%   { opacity: 0; transform: translateY(24px); filter: hue-rotate(45deg) brightness(1.2); }
  100% { opacity: 1; transform: translateY(0); filter: hue-rotate(0) brightness(1); }
}
.fc-swap[data-day="28"]::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(135deg, transparent 0%, color-mix(in oklch, var(--h-strong) 22%, transparent) 40%, color-mix(in oklch, var(--h-soldout) 22%, transparent) 60%, transparent 100%);
  pointer-events: none; mix-blend-mode: screen;
  animation: tx-d28-aurora 720ms ease both;
}
@keyframes tx-d28-aurora {
  0%   { transform: translateX(-100%); opacity: 1; }
  100% { transform: translateX(100%); opacity: 0; }
}

/* ── 29 · Galaxy Spiral ─────────────────────────────────── */
.fc-swap[data-day="29"] { animation: tx-d29 820ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tx-d29 {
  0%   { opacity: 0; transform: rotate(-540deg) scale(0.3); }
  100% { opacity: 1; transform: rotate(0) scale(1); }
}

/* ── 30 · Glitch Shift ──────────────────────────────────── */
.fc-swap[data-day="30"] { animation: tx-d30 540ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tx-d30 {
  0%   { opacity: 0; transform: translateX(0); }
  10%  { opacity: 0.6; transform: translateX(-10px); filter: hue-rotate(-40deg); }
  20%  { transform: translateX(10px); filter: hue-rotate(40deg); }
  30%  { transform: translateX(-5px); }
  45%  { transform: translateX(3px); filter: hue-rotate(-15deg); }
  60%  { opacity: 1; transform: translateX(0); filter: hue-rotate(0); }
  100% { opacity: 1; }
}

/* ── 31 · Stardust Settle ───────────────────────────────── */
.fc-swap[data-day="31"] { animation: tx-d31 700ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes tx-d31 {
  0%   { opacity: 0; transform: scale(0.96) translateY(10px); filter: contrast(0.4) brightness(1.5) blur(2px); }
  60%  { filter: contrast(0.85) brightness(1.1) blur(0.5px); }
  100% { opacity: 1; transform: scale(1) translateY(0); filter: contrast(1) brightness(1) blur(0); }
}

/* ============================================================
   ANIMATION NAME OVERLAY
   ============================================================ */
.fc-anim-toast {
  position: fixed;
  top: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 200;
  background: color-mix(in oklch, var(--text) 96%, transparent);
  color: var(--bg);
  border-radius: 12px;
  padding: 10px 16px 12px;
  display: flex;
  align-items: center;
  gap: 14px;
  box-shadow: 0 12px 40px oklch(0 0 0 / 0.18);
  font-size: 12px;
  letter-spacing: -0.005em;
  animation: tx-toast 3200ms cubic-bezier(0.22, 1, 0.36, 1) both;
  pointer-events: auto;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
@keyframes tx-toast {
  0%   { opacity: 0; transform: translate(-50%, -8px); }
  10%  { opacity: 1; transform: translate(-50%, 0); }
  85%  { opacity: 1; transform: translate(-50%, 0); }
  100% { opacity: 0; transform: translate(-50%, -4px); }
}
.fc-anim-toast-num {
  font-variant-numeric: tabular-nums;
  font-size: 22px;
  font-weight: 500;
  letter-spacing: -0.02em;
  line-height: 1;
}
.fc-anim-toast-meta { display: flex; flex-direction: column; gap: 1px; }
.fc-anim-toast-eyebrow {
  font-size: 9.5px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  opacity: 0.55;
}
.fc-anim-toast-name {
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
}
.fc-anim-toast-blurb {
  font-size: 11px;
  opacity: 0.7;
  line-height: 1.3;
  max-width: 220px;
}
.fc-anim-toast-pick {
  margin-left: 6px;
  padding: 6px 12px;
  border-radius: 7px;
  font-size: 11px;
  font-weight: 500;
  background: color-mix(in oklch, var(--bg) 18%, transparent);
  color: var(--bg);
  transition: background 120ms;
}
.fc-anim-toast-pick:hover { background: color-mix(in oklch, var(--bg) 30%, transparent); }
.fc-anim-toast-pick.is-picked { background: var(--h-strong); }