/* P. 10 Paper to data: a wall of real sample documents flips over card by card in a ripple and each card turns into a
   structured row; the rows assemble into a softly glowing table. Hover a row to flip it back to its paper. */
.flip-sec { position: relative; overflow: hidden; }
@supports (overflow: clip) { .flip-sec { overflow: visible; overflow-x: clip; } }
.flip-head .lead { max-width: 40ch; }
.flip { position: relative; }
.flip__stage { position: relative; list-style: none; margin: 0; padding: 0; height: 820px; --tw: 96px; --th: 124px; --rw: 400px; --rh: 30px; }

/* table panels (behind the rows) */
.flip-panel { position: absolute; top: 0; z-index: 0; border-radius: var(--r-md); background: linear-gradient(180deg, rgba(30, 34, 42, 0.72), rgba(18, 21, 26, 0.86)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08), inset 0 0 0 1px rgba(255, 255, 255, 0.06), 0 40px 90px -50px rgba(0, 0, 0, 0.9); opacity: 0; transform: scale(0.985); transition: opacity 0.9s var(--ease-out), transform 1.1s var(--ease-out), box-shadow 1.4s var(--ease-out); overflow: hidden; }
.flip-panel::before { content: ""; position: absolute; inset: -1px; border-radius: inherit; pointer-events: none; background: radial-gradient(70% 50% at 50% 0%, rgba(110, 162, 232, 0.12), transparent 70%), radial-gradient(60% 40% at 50% 100%, rgba(70, 199, 156, 0.08), transparent 70%); opacity: 0; transition: opacity 1.6s var(--ease-out); }
.flip-panel::after { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--red-lift) 15%, var(--red-lift) 85%, transparent); box-shadow: 0 0 18px rgba(226, 85, 60, 0.75); opacity: 0; pointer-events: none; }
.flip__stage.is-table .flip-panel { opacity: 1; transform: none; }
.flip__stage.is-done .flip-panel { box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 40px 90px -50px rgba(0, 0, 0, 0.9), 0 0 80px -20px rgba(110, 162, 232, 0.22); }
.flip__stage.is-done .flip-panel::before { opacity: 1; }
.flip__stage.is-done .flip-panel::after { animation: flip-scan 1.6s var(--ease-io) both; animation-delay: calc(var(--g, 0) * 120ms); }
@keyframes flip-scan { 0% { top: 0; opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
.flip-panel__head { position: absolute; left: 8px; right: 8px; top: 0; display: grid; grid-template-columns: var(--cols); align-items: center; gap: 10px; padding: 0 12px; font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--line); }
.flip-panel__head span:last-child { justify-self: end; }

/* cards */
.flip-card { position: absolute; left: 0; top: 0; width: 0; height: 0; z-index: 1; }
.flip__stage.is-anim .flip-card, .flip__stage.is-anim .flip-card__in { will-change: transform; }
.flip-card.is-up { z-index: 6; }
.flip-card__in { position: absolute; left: 0; top: 0; transform-style: preserve-3d; }
.flip-card__front, .flip-card__back { position: absolute; -webkit-backface-visibility: hidden; backface-visibility: hidden; pointer-events: none; }
.flip-card__front { left: calc(var(--tw) / -2); top: calc(var(--th) / -2); width: var(--tw); height: var(--th); border-radius: 3px; overflow: hidden; background: #F4F2EC; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06), 0 14px 30px -14px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.35); transition: box-shadow 0.4s; }
.flip-card__front img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.flip-card.is-up .flip-card__front { box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.2), 0 30px 60px -20px rgba(0, 0, 0, 0.9); }
.flip-card__back { left: calc(var(--rw) / -2); top: calc(var(--rh) / -2); width: var(--rw); height: var(--rh); display: grid; grid-template-columns: var(--cols); align-items: center; gap: 10px; padding: 0 12px; border-radius: 6px; background: rgba(34, 38, 47, 0.96); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07); font: 500 0.75rem/1 var(--f-mono); color: var(--fg-2); transform: rotateY(180deg); transition: background 0.8s var(--ease-out), box-shadow 0.8s var(--ease-out); white-space: nowrap; }
.flip__stage.is-done .flip-card__back { background: rgba(255, 255, 255, 0); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, 0.05); border-radius: 0; }
.flip__stage.is-done .flip-card:nth-child(odd) .flip-card__back { background: rgba(255, 255, 255, 0.018); }
.flip-card.is-up .flip-card__back { background: rgba(40, 45, 56, 0.98); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14), 0 20px 40px -16px rgba(0, 0, 0, 0.8); border-radius: 6px; }
.flip-card__type { display: flex; align-items: center; gap: 7px; min-width: 0; color: var(--tc, var(--gold)); }
.flip-card__type i { width: 5px; height: 5px; border-radius: 50%; background: currentColor; box-shadow: 0 0 8px currentColor; flex: none; }
.flip-card__type span, .flip-card__doc, .flip-card__from { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.flip-card__doc { color: var(--fg); }
.flip-card__from { color: var(--fg-2); }
.flip-card__ok { justify-self: end; display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; color: var(--green-lift); font-size: 0.75rem; transform: scale(0); }
.flip-card__ok b { font-weight: 600; }
.flip-card.is-landed .flip-card__ok { animation: flip-ok 0.55s var(--ease-out) both; }
@keyframes flip-ok { 0% { transform: scale(0); background: rgba(70, 199, 156, 0.4); } 60% { transform: scale(1.3); background: rgba(70, 199, 156, 0.18); } 100% { transform: scale(1); background: rgba(70, 199, 156, 0); } }

/* summary bar */
.flip__bar { display: flex; align-items: center; gap: 16px 24px; flex-wrap: wrap; margin-top: clamp(24px, 3vw, 36px); padding-top: 22px; border-top: 1px solid var(--line); }
.flip__sum { display: inline-flex; align-items: center; gap: 10px; margin: 0; font: 500 0.875rem/1 var(--f-mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-2); }
.flip__sum b { font: 600 1.6rem/1 var(--f-disp); letter-spacing: -0.02em; color: var(--fg); min-width: 1.4em; text-align: right; }
.flip__sum-ring { width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 2px rgba(70, 199, 156, 0.3); position: relative; }
.flip__sum-ring::after { content: "✓"; position: absolute; inset: 0; display: grid; place-items: center; font-size: 0.75rem; color: var(--green-lift); opacity: 0; transition: opacity 0.4s; }
.flip.is-complete .flip__sum-ring { box-shadow: inset 0 0 0 2px var(--green-lift); }
.flip.is-complete .flip__sum-ring::after { opacity: 1; }
.flip__hint { margin: 0 0 0 auto; font: 500 0.75rem/1 var(--f-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-3); }
.flip__toggle { height: 46px; padding: 0 20px; font-size: 0.9rem; }
.flip__toggle-ico { width: 14px; height: 18px; border-radius: 2px; box-shadow: inset 0 0 0 1.5px currentColor; position: relative; opacity: 0.8; }
.flip__toggle-ico::after { content: ""; position: absolute; left: 3px; right: 3px; top: 5px; height: 1.5px; background: currentColor; box-shadow: 0 3px 0 currentColor, 0 6px 0 currentColor; }
@media (max-width: 700px) {
  .flip__hint { display: none; }
  .flip__toggle { margin-left: auto; }
  .flip__sum { font-size: 0.75rem; letter-spacing: 0.06em; }
  .flip__sum b { font-size: 1.35rem; }
  .flip-card__back { gap: 8px; padding: 0 10px; }
  .flip-panel__head { gap: 8px; padding: 0 10px; }
}