/* HSPingal Wishes: the card frame and the builder, shared by every occasion.
   Each card is a size container, so the same design scales from a thumbnail to a full screen:
   anything inside a card is sized in cq units, never px. */

/* ---------- The card ---------- */

.wc {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
  container-type: size;
  isolation: isolate;
  background: var(--wc-bg, #15101f);
  color: var(--wc-ink, #fff);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, Roboto, sans-serif;
  text-align: center;
}
.wc-art { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.wc svg { max-width: none; }

/* Art layers. "fill" covers the card. "top" and "bottom" stay pinned to their edge and only ever
   lose width when cropped, which is why each band's height follows both the card's height and
   its width. Set --top and --band to suit the layer's viewBox. */
.wc-fx { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
.wl { position: absolute; display: block; }
.wl-fill { inset: 0; width: 100%; height: 100%; }
.wl-top { top: 0; left: 0; width: 100%; height: var(--top, 30cqh); }
.wl-bottom { bottom: 0; left: 0; width: 100%; height: var(--band, 30cqh); }

.wc-copy {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--pad-t, 6cqmin) 7cqmin var(--pad-b, 6cqmin);
}
.wc-copy > * { margin: 0; max-width: 100%; }
.wc-eyebrow { font-size: min(4.6cqw, 3.6cqh); letter-spacing: 0.04em; opacity: 0.92; color: var(--wc-accent, inherit); }
.wc-title { font-family: var(--wc-title-font, inherit); font-size: min(14.5cqw, 13cqh); font-weight: 400; line-height: 1.08; letter-spacing: -0.01em; margin: 0.08em 0 0.12em; padding: 0 0.06em; }
.wc-line { max-width: min(84cqw, 92cqh); font-size: min(4.5cqw, 3.3cqh); line-height: 1.4; opacity: 0.92; text-wrap: balance; }
.wc-sign { margin-top: min(4.5cqw, 3.2cqh); line-height: 1.15; }
.wc-sign[hidden] { display: none; }
.wc-sign-pre { display: block; font-size: min(3.8cqw, 2.8cqh); opacity: 0.85; }
.wc-sign b { display: block; font-family: var(--wc-name-font, inherit); font-size: min(8.6cqw, 6.6cqh); font-weight: var(--wc-name-weight, 500); color: var(--wc-name, inherit); overflow-wrap: anywhere; text-wrap: balance; }
.wc-sign[data-len="m"] b { font-size: min(6.6cqw, 5.2cqh); }
.wc-sign[data-len="l"] b { font-size: min(5.2cqw, 4.2cqh); }
.wc-badge svg { display: block; width: min(24cqw, 17cqh); height: auto; margin-inline: auto; }

/* Wide but short, like a phone on its side: the supporting line gives way first. */
@container (max-height: 430px) { .wc-line { display: none; } }
.is-thumb .wc-line { display: none; }

@media (prefers-reduced-motion: no-preference) {
  .wc:not(.is-thumb) .wc-copy > * { animation: wc-rise 1.1s cubic-bezier(.2, .7, .2, 1) both; animation-delay: calc(var(--intro, 0.2s) + var(--i, 0) * 0.28s); }
  .wc:not(.is-thumb) .wc-copy > :nth-child(2) { --i: 1; }
  .wc:not(.is-thumb) .wc-copy > :nth-child(3) { --i: 2; }
  .wc:not(.is-thumb) .wc-copy > :nth-child(4) { --i: 3; }
  .wc:not(.is-thumb) .wc-copy > :nth-child(5) { --i: 4; }
  @keyframes wc-rise { from { opacity: 0; transform: translateY(14px); } }

  /* Thumbnails hold still until they are selected or hovered. */
  .is-thumb:not(.is-live) * { animation-play-state: paused !important; }
  .wb-tile:hover .is-thumb * { animation-play-state: running !important; }
}

/* ---------- The visitor's full-screen view ---------- */

#wish-card { display: none; }
.is-card, .is-card body { height: 100%; background: #0d0a14; }
.is-card body { overflow: hidden; }
.is-card #wish-card { display: block; position: fixed; inset: 0; z-index: 10; }
.is-card .site-header, .is-card .site-footer, .is-card main, .is-card .skip-link, .is-card .consent { display: none; }

.wc-foot {
  position: absolute;
  left: 50%;
  bottom: max(12px, env(safe-area-inset-bottom));
  z-index: 20;
  transform: translateX(-50%);
  max-width: calc(100% - 24px);
  padding: 5px 13px;
  border-radius: 999px;
  background: rgba(10, 8, 18, 0.62);
  color: #fff;
  font-size: 0.75rem;
  line-height: 1.4;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s;
}
.wc-foot:hover { background: rgba(10, 8, 18, 0.86); color: #fff; }

/* ---------- The builder ---------- */

.wb { padding: clamp(28px, 5vw, 56px) 0 clamp(40px, 6vw, 72px); }
.wb-head { max-width: 40rem; margin-bottom: clamp(22px, 3vw, 34px); }
.wb-head .h-section { font-size: clamp(2rem, 4.2vw, 3rem); margin-top: 6px; }
.wb-head .lede { margin: 0; }
.wb-layout { display: grid; gap: clamp(24px, 4vw, 48px); align-items: start; }
.wb-layout > * { min-width: 0; }
@media (min-width: 960px) { .wb-layout { grid-template-columns: minmax(0, 1fr) minmax(280px, 340px); } }

.wb-step { display: block; margin: 0 0 8px; font-weight: 600; font-size: 0.95rem; color: var(--ink); }
.wb-input {
  display: block;
  width: 100%;
  max-width: 420px;
  min-height: 52px;
  padding: 0 18px;
  border: 1px solid var(--line-hi);
  border-radius: var(--r-sm);
  background: var(--paper-3);
  color: var(--ink);
  font: inherit;
  font-size: 1.05rem;
}
.wb-input:focus { outline: 3px solid var(--signal); outline-offset: 1px; }
.wb-hint { margin: 8px 0 0; font-size: 0.88rem; color: #a2331f; }
.wb-hint[hidden] { display: none; }
.wb-field { margin-bottom: 26px; }

.wb-group + .wb-group { margin-top: 24px; }
.wb-group-name { margin: 0 0 10px; font-family: var(--font); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.02em; color: var(--ink-2); }
.wb-grid { display: grid; gap: 14px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 620px) { .wb-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wb-tile { display: block; padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.wb-thumb { display: block; aspect-ratio: 4 / 5; overflow: hidden; border-radius: var(--r-sm); outline: 2px solid transparent; outline-offset: 2px; transition: outline-color 0.2s, transform 0.25s var(--ease); }
.wb-tile:hover .wb-thumb { transform: translateY(-2px); }
.wb-tile[aria-pressed="true"] .wb-thumb { outline-color: var(--signal); }
.wb-tile:focus-visible { outline: none; }
.wb-tile:focus-visible .wb-thumb { outline: 3px solid var(--ink); }
.wb-label { display: block; padding: 8px 2px 0; line-height: 1.25; }
.wb-label b { display: block; font-size: 0.92rem; font-weight: 600; }
.wb-label small { font-size: 0.8rem; color: var(--ink-3); }

.wb-preview-col { display: none; }
@media (min-width: 960px) {
  .wb-preview-col { display: block; position: sticky; top: 92px; }
}
.wb-phone { aspect-ratio: 9 / 17; max-height: calc(100vh - 130px); margin-inline: auto; overflow: hidden; border: 7px solid var(--ink); border-radius: 30px; background: var(--ink); }
#wish-preview { height: 100%; }
.wb-preview-note { margin: 10px 0 0; text-align: center; font-size: 0.82rem; color: var(--ink-3); }

.wb-send {
  position: sticky;
  bottom: 0;
  z-index: 20;
  margin-top: 26px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--paper-3);
}
.wb-link { display: block; margin-bottom: 10px; font-family: var(--mono); font-size: 0.78rem; line-height: 1.4; color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wb-link.is-empty { color: var(--ink-3); font-family: inherit; }
.wb-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.wb-actions [aria-disabled="true"] { opacity: 0.55; }
.wb-actions [hidden] { display: none; }
@media (max-width: 520px) {
  .wb-send { padding: 10px 12px; }
  .wb-link { margin-bottom: 8px; }
  .wb-actions { flex-wrap: nowrap; }
  .wb-actions .btn { flex: 1 1 auto; padding: 0 10px; min-width: 0; }
}
.wb-note { margin: 14px 0 0; font-size: 0.86rem; color: var(--ink-3); }