/* ==========================================================
   Célya : deux noms reliés, trois piliers, spoiler flouté
   ========================================================== */
.celya { overflow: hidden; }
.celya::before { /* pétales de cerisier en fond */
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .14;
  background: url("../images/seoul/cerisiers.jpg") center / cover;
  -webkit-mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
          mask: linear-gradient(180deg, transparent, #000 30%, #000 70%, transparent);
}
.celya .wrap { position: relative; z-index: 1; }
.duo { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 4vw, 48px); margin-bottom: 44px; }
.duo .n { text-align: center; display: grid; gap: 4px; }
.duo .n .ko { font-family: var(--f-display); font-size: clamp(2.6rem, 1.4rem + 5vw, 5.4rem); font-weight: 800; line-height: 1; }
.duo .n:last-child .ko { font-weight: 200; color: var(--sun); }
.duo .n .lat { font-size: .8rem; letter-spacing: .3em; text-transform: uppercase; color: var(--ink-soft); }
.duo .bridge { position: relative; width: clamp(70px, 14vw, 170px); height: 2px; background: linear-gradient(90deg, var(--ink), var(--sun)); }
.duo .bridge::after {
  content: ""; position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; transform: translate(-50%, -50%);
  border-radius: 50%; background: radial-gradient(circle at 40% 35%, var(--honey), var(--sun)); box-shadow: 0 0 0 6px var(--glow);
  animation: heartbeat 2.4s ease-in-out infinite;
}
@keyframes heartbeat { 0%, 100% { transform: translate(-50%, -50%) scale(1); } 15% { transform: translate(-50%, -50%) scale(1.25); } 30% { transform: translate(-50%, -50%) scale(1); } }

.pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 36px; }
.pillars div { padding: 22px; border-radius: 18px; background: var(--card); border: 1px solid var(--line); display: grid; gap: 6px; }
.pillars b { font-family: var(--f-display); font-size: 1.25rem; }
.pillars span { color: var(--ink-soft); font-size: .96rem; }

.secret { margin-top: 36px; max-width: 70ch; padding: 20px 22px; border-radius: 18px; border: 1px dashed var(--ink-soft); display: grid; gap: 12px; background: color-mix(in srgb, var(--card) 70%, transparent); }
.secret .content { filter: blur(7px); user-select: none; transition: filter .6s; }
.secret.open .content { filter: none; user-select: auto; }
.secret .btn { justify-self: start; padding: 8px 16px; font-size: .85rem; }

@media (max-width: 860px) { .pillars { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 480px) {
  .duo { grid-template-columns: minmax(0, 1fr); }
  .duo .bridge { justify-self: center; width: 2px; height: 56px; background: linear-gradient(var(--ink), var(--sun)); }
}