/* The screen and frame share an exact aspect ratio: no letterboxed bezel. */
.hero-swipe { height: 640px; min-width: 0; }
.swipe-demo {
  display: grid;
  place-items: center;
  height: 560px;
  overflow: hidden;
  overflow: clip;
  isolation: isolate;
  --demo-cycle: 12s;
}
.swipe-device {
  --device-width: 228px;
  --device-radius: 35px;
  --device-bezel: 4px;
  box-sizing: content-box;
  position: relative;
  width: var(--device-width);
  aspect-ratio: 390 / 844;
  border: var(--device-bezel) solid #071114;
  outline: 1px solid #71878d80;
  border-radius: var(--device-radius);
  background: var(--bg);
  box-shadow: 10px 25px 45px var(--shadow);
  transform: rotate(7deg);
}
.swipe-device-screen {
  position: absolute;
  inset: 0;
  border-radius: calc(var(--device-radius) - var(--device-bezel));
  overflow: hidden;
}
.swipe-device-screen picture,
.swipe-device-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.swipe-media-mask {
  position: absolute;
  left: 4.1%; top: 14.1%; width: 91.8%; height: 66.2%;
  border-radius: 8% / 5%;
  background: var(--bg);
}
.swipe-photo-stack {
  position: absolute;
  left: 4.1%; top: 14.1%; width: 91.8%; height: 66.2%;
  animation: demo-stack-reset var(--demo-cycle) linear infinite;
}
.swipe-photo {
  position: absolute;
  inset: 0;
  border: 1px solid #ffffff50;
  border-radius: 16px;
  overflow: hidden;
  background: var(--bg);
  box-shadow: 0 12px 20px #0002;
  transform-origin: 50% 75%;
  will-change: transform, opacity;
}
.swipe-photo > img { width: 100%; height: 100%; display: block; object-fit: cover; }
.swipe-photo-boat { z-index: 3; animation: demo-keep-card var(--demo-cycle) cubic-bezier(.4,0,.2,1) infinite; }
.swipe-photo-lighthouse { z-index: 2; animation: demo-delete-card var(--demo-cycle) cubic-bezier(.4,0,.2,1) infinite; }
.swipe-photo-van { z-index: 1; }
.swipe-feedback {
  position: absolute;
  inset: 0;
  opacity: 0;
}
.swipe-feedback-keep {
  background: #00c85330;
  animation: demo-keep-feedback var(--demo-cycle) linear infinite;
}
.swipe-feedback-delete {
  background: #e5393536;
  animation: demo-delete-feedback var(--demo-cycle) linear infinite;
}
.swipe-feedback-label {
  position: absolute;
  top: 7%;
  padding: 6px 10px;
  font-size: calc(var(--device-width) * .055);
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: .025em;
  border-radius: 9px;
  visibility: hidden;
}
.swipe-feedback-keep .swipe-feedback-label { right: 6%; background: #00c853; color: #001b0c; animation: demo-keep-label var(--demo-cycle) steps(1,end) infinite; }
.swipe-feedback-delete .swipe-feedback-label { left: 6%; background: #111d; border: 2px solid #e53935; color: white; animation: demo-delete-label var(--demo-cycle) steps(1,end) infinite; }

/* All animated elements share one CSS clock, including pause and resume. */
@keyframes demo-keep-card {
  0%, 12% { transform: none; opacity: 1; }
  20%, 25% { transform: translate(28%, -2%) rotate(8deg); opacity: 1; }
  30%, 94% { transform: translate(150%, -8%) rotate(23deg); opacity: 0; }
  94.01%, 100% { transform: none; opacity: 1; }
}
@keyframes demo-delete-card {
  0%, 45% { transform: none; opacity: 1; }
  53%, 58% { transform: translate(-28%, -2%) rotate(-8deg); opacity: 1; }
  64%, 94% { transform: translate(-150%, -8%) rotate(-23deg); opacity: 0; }
  94.01%, 100% { transform: none; opacity: 1; }
}
@keyframes demo-keep-feedback {
  0%, 12%, 31%, 100% { opacity: 0; }
  19%, 29% { opacity: 1; }
}
@keyframes demo-delete-feedback {
  0%, 45%, 65%, 100% { opacity: 0; }
  52%, 63% { opacity: 1; }
}
@keyframes demo-keep-label { 0%, 30% { visibility: hidden; } 19% { visibility: visible; } }
@keyframes demo-delete-label { 0%, 64% { visibility: hidden; } 52% { visibility: visible; } }
@keyframes demo-stack-reset {
  0%, 86%, 100% { opacity: 1; }
  93%, 95% { opacity: 0; }
}

/* Cover only the captured numbers, retaining the source icons and layout. */
.demo-counter {
  position: absolute;
  display: grid;
  place-items: center;
  font-weight: 750;
  line-height: 1;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}
.demo-counter > span, .demo-inline-count > span { grid-area: 1 / 1; opacity: 0; visibility: hidden; }
.demo-counter > span:first-child, .demo-inline-count > span:first-child { opacity: 1; visibility: visible; }
.demo-session-count {
  left: 46%; top: 8%; width: 15.3%; height: 3%;
  background: #112a2e; color: white;
  font-size: calc(var(--device-width) * .041);
}
.demo-trash-count, .demo-heart-count {
  top: 81.6%; width: 9.4%; aspect-ratio: 1;
  border-radius: 50%; color: #111718;
  font-size: calc(var(--device-width) * .043);
}
.demo-trash-count { left: 21.4%; background: #e53935; }
.demo-heart-count { left: 74.8%; background: #00c853; }
.demo-delete-summary {
  position: absolute;
  left: 4.1%; top: 90%; width: 91.8%; height: 5.3%;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  background: #c62828; color: white; border-radius: 999px;
  font-size: calc(var(--device-width) * .044); font-weight: 700; line-height: 1;
}
.demo-delete-summary > svg { width: 13px; height: 13px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.demo-inline-count { display: inline-grid; }
html[data-theme=light] .demo-session-count { background: white; color: #132a30; }
html[data-theme=light] .demo-trash-count { background: #b3261e; color: white; }
html[data-theme=light] .demo-heart-count { background: #167344; color: white; }
html[data-theme=light] .demo-delete-summary { background: #b3261e; }
.demo-count-initial { animation: demo-count-initial var(--demo-cycle) steps(1,end) infinite; }
.demo-count-kept { animation: demo-count-kept var(--demo-cycle) steps(1,end) infinite; }
.demo-count-complete { animation: demo-count-complete var(--demo-cycle) steps(1,end) infinite; }
.demo-count-before-keep { animation: demo-count-initial var(--demo-cycle) steps(1,end) infinite; }
.demo-count-after-keep { animation: demo-count-after-keep var(--demo-cycle) steps(1,end) infinite; }
.demo-count-before-delete { animation: demo-count-before-delete var(--demo-cycle) steps(1,end) infinite; }
.demo-count-after-delete { animation: demo-count-complete var(--demo-cycle) steps(1,end) infinite; }
@keyframes demo-count-initial { 0%, 94% { opacity: 1; visibility: visible; } 30% { opacity: 0; visibility: hidden; } }
@keyframes demo-count-kept { 0%, 64% { opacity: 0; visibility: hidden; } 30% { opacity: 1; visibility: visible; } }
@keyframes demo-count-complete { 0%, 94% { opacity: 0; visibility: hidden; } 64% { opacity: 1; visibility: visible; } }
@keyframes demo-count-after-keep { 0%, 94% { opacity: 0; visibility: hidden; } 30% { opacity: 1; visibility: visible; } }
@keyframes demo-count-before-delete { 0%, 94% { opacity: 1; visibility: visible; } 64% { opacity: 0; visibility: hidden; } }
.swipe-demo[data-paused=true] *, .swipe-demo[data-paused=true] *:before { animation-play-state: paused; }

.swipe-demo-footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px 18px; padding-top: 15px; text-align: center; }
.swipe-demo-footer p { font-size: 11px; }
.swipe-demo-footer p > span { color: var(--accent); margin-right: 5px; }
.animation-toggle { display: inline-flex; align-items: center; gap: 7px; min-height: 36px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 30px; background: var(--surface); color: var(--secondary); font-size: 10px; }
.animation-toggle:hover { border-color: var(--accent); color: var(--text); }
.animation-icon { color: var(--accent); font-size: 12px; }
.demo-example-label { flex-basis: 100%; color: var(--secondary); font-size: 9px; }
@media (min-width: 621px) and (max-width: 1100px) {
  .hero-swipe { height: 575px; }
  .swipe-demo { height: 490px; }
  .swipe-device { --device-width: 200px; --device-radius: 31px; }
  .swipe-demo-footer { gap: 7px; padding-top: 10px; }
  .swipe-demo-footer p { flex-basis: 100%; font-size: 10px; }
}
@media (max-width: 620px) {
  .hero-swipe { height: 590px; margin-top: 0; margin-bottom: 0; }
  .swipe-demo { height: 510px; }
  .swipe-device { --device-width: 210px; --device-radius: 32px; }
  .swipe-demo-footer { gap: 6px 12px; padding-top: 10px; }
  .swipe-demo-footer p { font-size: 10px; }
  .animation-toggle { font-size: 9px; }
}
@media (max-width: 359px) {
  .hero-swipe { height: 530px; }
  .swipe-demo { height: 450px; }
  .swipe-device { --device-width: 182px; --device-radius: 28px; --device-bezel: 3px; }
  .swipe-photo { border-radius: 12px; }
  .swipe-demo-footer p { flex-basis: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .swipe-photo { will-change: auto; }
  .animation-toggle { display: none; }
}