/* couple.css — Aarav & Riya Wedding */

/* ===================== COUPLE / SCRATCH ===================== */
#couple {
  position: relative;
  padding: 6rem 2rem;
  overflow: hidden;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  isolation: isolate;
  background: linear-gradient(145deg, var(--dark) 0%, color-mix(in srgb, var(--rose) 22%, var(--dark)) 48%, var(--copper) 130%);
}

.couple__bg {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    repeating-linear-gradient(
      45deg,
      transparent,
      transparent 20px,
      rgba(212,160,23,0.03) 20px,
      color-mix(in srgb, var(--gold) 10%, transparent) 21px
    ),
    repeating-linear-gradient(
      -45deg,
      transparent,
      transparent 20px,
      rgba(212,160,23,0.03) 20px,
      color-mix(in srgb, var(--gold) 10%, transparent) 21px
    ),
    radial-gradient(ellipse at 50% 50%, color-mix(in srgb, var(--rose) 42%, var(--dark)) 0%, var(--dark) 100%);
}

#couple .couple__watermark { color: color-mix(in srgb, var(--gold) 12%, transparent); }
#couple .couple__header p,
#couple .card-title { color: color-mix(in srgb, var(--ivory) 72%, var(--rose)); }
#couple .card__back svg text { fill: var(--gold) !important; }

.couple__watermark {
  position: absolute;
  font-family: var(--font-display);
  font-size: clamp(180px, 35vw, 380px);
  font-weight: 700;
  color: rgba(212,160,23,0.04);
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  letter-spacing: -0.05em;
  user-select: none;
  white-space: nowrap;
}

.couple__header {
  text-align: center;
  margin-bottom: 3rem;
  position: relative;
  z-index: 2;
}

.couple__header h2 {
  font-family: var(--font-script);
  font-size: clamp(2.2rem, 6vw, 4rem);
  color: var(--gold);
  margin-bottom: 0.5rem;
}

.couple__header p {
  font-family: var(--font-body);
  font-size: 0.85rem;
  letter-spacing: 0.2em;
  color: rgba(250,243,224,0.5);
  text-transform: uppercase;
}

.couple__cards {
  display: flex;
  align-items: center;
  justify-content: center;
  column-gap: clamp(7rem, 16vw, 14rem);
  row-gap: 3rem;
  flex-wrap: wrap;
  position: relative;
  z-index: 2;
}

/* Show the bride first, followed by the groom. */
.couple__cards #bride-wrap { order: 1; }
.couple__cards .couple__and { order: 2; }
.couple__cards #groom-wrap { order: 3; }

.couple__and {
  font-family: var(--font-script);
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--gold);
  line-height: 1;
  animation: heartbeat 1.5s ease-in-out infinite;
  flex-shrink: 0;
  margin-inline: 1.5rem;
}

/* Give the watermark, heading, and scratch cards clear breathing room. */
#couple .couple__watermark { top: clamp(10rem, 18vh, 15rem); }
#couple .couple__header { margin-bottom: clamp(4rem, 7vw, 6rem); }
#couple .couple__cards { row-gap: clamp(4rem, 8vw, 7rem); }

@media (max-width: 700px) {
  #couple .couple__watermark { top: 9rem; }
  #couple .couple__header { margin-bottom: 3.5rem; }
  #couple .couple__cards { row-gap: 3.75rem; }
}

@keyframes heartbeat {
  0%, 100% { transform: scale(1); }
  14% { transform: scale(1.08); }
  28% { transform: scale(1); }
  42% { transform: scale(1.05); }
  70% { transform: scale(1); }
}

.card-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
}

.playing-card {
  position: relative;
  width: clamp(160px, 30vw, 240px);
  height: clamp(224px, 42vw, 336px);
  border-radius: 16px;
  overflow: hidden;
  box-shadow:
    0 25px 60px rgba(0,0,0,0.5),
    0 0 0 1px rgba(212,160,23,0.3),
    inset 0 0 0 1px rgba(212,160,23,0.1);
  cursor: crosshair;
}

.card-groom { transform: rotate(-4deg); }
.card-bride { transform: rotate(4deg); }

.card__back {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--rose), var(--dark));
  display: flex;
  align-items: center;
  justify-content: center;
}

.card__pattern {
  position: absolute;
  inset: 8px;
  border: 1px solid rgba(212,160,23,0.3);
  border-radius: 10px;
}

.card__pattern::before {
  content: '';
  position: absolute;
  inset: 6px;
  border: 1px solid rgba(212,160,23,0.15);
  border-radius: 7px;
  background:
    repeating-linear-gradient(
      0deg, transparent, transparent 12px,
      rgba(212,160,23,0.04) 12px, rgba(212,160,23,0.04) 13px
    ),
    repeating-linear-gradient(
      90deg, transparent, transparent 12px,
      rgba(212,160,23,0.04) 12px, rgba(212,160,23,0.04) 13px
    );
}

.card__rank {
  position: absolute;
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  z-index: 1;
}

.card__rank.top { top: 12px; left: 14px; }
.card__rank.bottom { bottom: 12px; right: 14px; transform: rotate(180deg); }

.card__rank span {
  display: block;
  font-size: 1rem;
  text-align: center;
  line-height: 1;
  margin-top: 2px;
}

.card__reveal {
  position: absolute;
  inset: 0;
  background: var(--ivory);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.card__reveal img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Placeholder photo */
.card__photo-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f0e6d3, #e8d5c4);
  flex-direction: column;
  gap: 0.5rem;
}

.card__photo-placeholder svg {
  width: 64px;
  height: 64px;
  opacity: 0.3;
}

.card__photo-placeholder span {
  font-family: var(--font-script);
  font-size: 1.4rem;
  color: var(--copper);
  opacity: 0.6;
}

.scratch-canvas {
  position: absolute;
  inset: 0;
  z-index: 2;
  cursor: crosshair;
  border-radius: 16px;
}

.card-name {
  font-family: var(--font-script);
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  color: var(--gold);
  text-align: center;
}

.card-title {
  font-family: var(--font-display);
  font-size: 0.75rem;
  letter-spacing: 0.35em;
  color: rgba(250,243,224,0.5);
  text-align: center;
  text-transform: uppercase;
}

.couple__reveal-msg {
  margin-top: 2.5rem;
  font-family: var(--font-script);
  font-size: clamp(1.8rem, 5vw, 3rem);
  color: var(--gold);
  text-align: center;
  opacity: 0;
  transform: translateY(20px);
  transition: all 0.8s ease;
  position: relative;
  z-index: 2;
}

.couple__reveal-msg.show {
  opacity: 1;
  transform: translateY(0);
}

/* Larger, real-card proportions with a generous white photo mat. */
.playing-card {
  width: clamp(210px, 34vw, 300px);
  height: clamp(294px, 48vw, 420px);
  border-radius: 8px;
  background: #fff;
  box-shadow: 0 28px 70px rgba(0,0,0,.55), 0 0 0 5px rgba(255,255,255,.92), 0 0 0 7px rgba(212,160,23,.55);
}
.card__back { inset: 0; background: linear-gradient(135deg, var(--rose), var(--dark)); border: 6px solid #fff; border-radius: 8px; }
.card__pattern { inset: 9px; border: 1px solid color-mix(in srgb, var(--gold) 58%, transparent); }
.card__pattern::before { inset: 7px; border-color: color-mix(in srgb, var(--gold) 35%, transparent); background: repeating-linear-gradient(45deg, transparent, transparent 12px, color-mix(in srgb, var(--gold) 12%, transparent) 12px, color-mix(in srgb, var(--gold) 12%, transparent) 13px), repeating-linear-gradient(-45deg, transparent, transparent 12px, color-mix(in srgb, var(--gold) 12%, transparent) 12px, color-mix(in srgb, var(--gold) 12%, transparent) 13px); }
.card__rank { color: #b13b42; font-size: 1.55rem; z-index: 4; }
.card__rank.top { top: 6px; left: 8px; text-align: center; }
.card__rank.bottom { right: 8px; bottom: 6px; text-align: center; }
.card__rank span { color: #b13b42; font-size: .78rem; }
.card__reveal { inset: 30px 24px; padding: 22px 16px; background: #fff; border-radius: 4px; }
.card__reveal img { width: 100%; height: 100%; object-fit: cover; object-position: center top; border-radius: 3px; box-shadow: 0 0 0 1px rgba(91,23,56,.14); }
.scratch-canvas { border-radius: 8px; }
@media (max-width: 700px) {
  .playing-card { width: min(72vw, 260px); height: calc(min(72vw, 260px) * 1.4); }
}