/* reasons.css — flip cards. Transform owners: .rs-card = entrance / wave / nudge · .rs-flip = 3D flip. */

.rs-center { max-width: 720px; }
.rs-counter { margin-top: 6px; padding: 8px 14px; font-size: 15px; font-weight: 600; text-shadow: var(--text-shadow); }
.rs-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  width: 100%;
  max-width: 420px;
}
@media (min-width: 720px) { .rs-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 680px; } }

.rs-card {
  position: relative;
  display: block;
  width: 100%;
  min-height: 150px;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  perspective: 1000px;
  touch-action: manipulation;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.rs-grid.is-entering .rs-card { animation: slideUp .6s var(--ease-out) both; animation-delay: calc(var(--i) * 60ms); }
.rs-card.is-wave { animation: rsWave .5s var(--ease-out); }
.rs-card.is-nudge { animation: wiggle .3s ease-out; }
@keyframes rsWave { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.04); } }

/* both faces share one grid cell, so the taller face sets the height (long reasons never overflow) */
.rs-flip {
  display: grid;
  width: 100%;
  height: 100%;
  min-height: 150px;
  transform-style: preserve-3d;
  -webkit-transform-style: preserve-3d;
  transition: transform .7s var(--ease-out);
}
.rs-flip.is-open { transform: rotateY(180deg); }
.rs-face {
  grid-area: 1 / 1;
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 150px;
  padding: 16px 12px;
  border-radius: 16px;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  box-shadow: 0 12px 28px rgba(120, 0, 40, .3);
}
.rs-front { background: linear-gradient(var(--flap-1), var(--flap-2)); overflow: hidden; }
.rs-back { background: linear-gradient(#fffdf9, #fff3ea); transform: rotateY(180deg); }
.rs-shimmer {
  position: absolute;
  inset: 0;
  background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .55) 50%, transparent 70%);
  background-size: 200% 100%;
  animation: shimmer 2.8s linear infinite;
  pointer-events: none;
}
.rs-seal {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: radial-gradient(circle at 34% 30%, var(--seal-hi), var(--seal-lo));
  box-shadow: 0 5px 12px rgba(0, 0, 0, .3), inset 0 -2px 4px rgba(0, 0, 0, .25);
  color: #ffd6e0;
}
.rs-seal-heart { width: 20px; height: 18px; }
.rs-num { position: relative; font-size: 22px; font-weight: 700; color: var(--ink); }
.rs-text { font-size: 16px; font-style: italic; line-height: 1.4; color: var(--ink); text-align: center; }
.rs-closing { margin-top: 22px; max-width: 30ch; font-size: 22px; font-style: italic; text-align: center; color: #fff; text-shadow: var(--text-shadow); }

@media (max-width: 350px) {
  .rs-grid { gap: 10px; }
  .rs-text { font-size: 15px; }
}
@media (max-height: 680px) {
  .rs-card, .rs-flip, .rs-face { min-height: 128px; }
}

@media (prefers-reduced-motion: reduce) {
  .rs-flip { transition: none; }
  .rs-flip.is-open { transform: none; }
  .rs-back { transform: none; opacity: 0; transition: opacity .2s ease; }
  .rs-front { transition: opacity .2s ease; }
  .rs-flip.is-open .rs-back { opacity: 1; }
  .rs-flip.is-open .rs-front { opacity: 0; }
  .rs-shimmer { animation: none; }
}