/* Surprises — visitor widget. Scoped under .sx-*; override the custom properties to theme it. */
:root {
  --sx-z: 2147480000;
  --sx-surface: #ffffff;
  --sx-text: #0f172a;
  --sx-muted: #64748b;
  --sx-border: rgb(15 23 42 / 0.08);
  --sx-radius: 1.25rem;
  --sx-font: inherit;
  --sx-safe-bottom: 1.25rem;
}
@media (max-width: 767px) { :root { --sx-safe-bottom: 5.5rem; } } /* clear mobile bottom navigation bars */
@media (prefers-color-scheme: dark) { :root:not(.light) { --sx-surface: #1e293b; --sx-text: #f1f5f9; --sx-muted: #94a3b8; --sx-border: rgb(255 255 255 / 0.1); } }
.dark { --sx-surface: #1e293b; --sx-text: #f1f5f9; --sx-muted: #94a3b8; --sx-border: rgb(255 255 255 / 0.1); }

.sx-visually-hidden { position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------- floating trigger */
.sx-float { position: fixed; z-index: var(--sx-z); display: flex; align-items: flex-start; gap: .25rem; opacity: 0; transform: scale(.6) translateY(12px); transition: opacity .35s ease, transform .45s cubic-bezier(.34,1.56,.64,1); pointer-events: none; font-family: var(--sx-font); }
.sx-float.is-visible { opacity: 1; transform: none; pointer-events: auto; }
.sx-pos-bottom_start { bottom: var(--sx-safe-bottom); inset-inline-start: 1.25rem; }
.sx-pos-bottom_end   { bottom: var(--sx-safe-bottom); inset-inline-end: 1.25rem; }
.sx-pos-middle_start { top: 50%; inset-inline-start: .75rem; }
.sx-pos-middle_end   { top: 50%; inset-inline-end: .75rem; }
.sx-pos-top_start    { top: 6.5rem; inset-inline-start: 1.25rem; }
.sx-pos-top_end      { top: 6.5rem; inset-inline-end: 1.25rem; }

.sx-trigger { all: unset; box-sizing: border-box; cursor: pointer; width: 4rem; height: 4rem; display: grid; place-items: center; border-radius: 1.1rem; background: var(--sx-surface); box-shadow: 0 10px 30px -8px rgb(15 23 42 / .35), 0 0 0 1px var(--sx-border); transition: transform .2s ease, box-shadow .2s ease; animation: sx-bob 3.2s ease-in-out infinite; }
.sx-trigger:hover { transform: translateY(-3px) rotate(-4deg); }
.sx-trigger:focus-visible { outline: 3px solid var(--sx-accent); outline-offset: 3px; }
.sx-trigger__art { width: 2.75rem; height: 2.75rem; display: grid; place-items: center; font-size: 2rem; line-height: 1; }
.sx-trigger__art svg { width: 100%; height: 100%; overflow: visible; }
.sx-pres-gift_box .sx-art__lid, .sx-pres-treasure_chest .sx-art__lid { transform-origin: 50% 70%; animation: sx-lid 3.2s ease-in-out infinite; }
.sx-pres-floating_icon { border-radius: 50%; animation: sx-spin-bob 5s ease-in-out infinite; }
.sx-pres-mystery_card .sx-trigger__art { animation: sx-flip 4s ease-in-out infinite; }
.sx-trigger.is-subtle { width: 2.25rem; height: 2.25rem; border-radius: .7rem; opacity: .55; box-shadow: none; background: transparent; }
.sx-trigger.is-subtle .sx-trigger__art { width: 1.6rem; height: 1.6rem; font-size: 1.2rem; }
.sx-trigger.is-subtle:hover, .sx-trigger.is-subtle:focus-visible { opacity: 1; }
.sx-float__dismiss { all: unset; cursor: pointer; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: grid; place-items: center; font-size: .95rem; line-height: 1; color: var(--sx-muted); background: var(--sx-surface); box-shadow: 0 0 0 1px var(--sx-border); }
.sx-float__dismiss:hover { color: var(--sx-text); }
.sx-float__dismiss:focus-visible { outline: 2px solid var(--sx-accent); outline-offset: 2px; }
.sx-float.is-preview .sx-trigger { box-shadow: 0 0 0 3px #f59e0b, 0 10px 30px -8px rgb(15 23 42 / .35); }

/* ---------- toast / progress */
.sx-toast { position: fixed; z-index: var(--sx-z); bottom: calc(var(--sx-safe-bottom) + 5rem); inset-inline: 0; margin-inline: auto; width: max-content; max-width: calc(100vw - 2rem); padding: .7rem 1.1rem; border-radius: 999px; background: var(--sx-text); color: var(--sx-surface); font: 600 .875rem/1.5 var(--sx-font); box-shadow: 0 10px 30px -10px rgb(0 0 0 / .45); opacity: 0; transform: translateY(10px); transition: opacity .3s, transform .3s; border-inline-start: 4px solid var(--sx-accent, #e11d48); }
.sx-toast.is-visible { opacity: 1; transform: none; }
.sx-progress-chip { position: fixed; z-index: var(--sx-z); display: grid; gap: .3rem; min-width: 8.5rem; padding: .55rem .8rem; border-radius: .9rem; background: var(--sx-surface); color: var(--sx-text); font: 600 .75rem/1.4 var(--sx-font); box-shadow: 0 8px 24px -10px rgb(15 23 42 / .4), 0 0 0 1px var(--sx-border); transition: opacity .6s; }
.sx-progress-chip.is-faded { opacity: .35; }
.sx-progress-chip:hover { opacity: 1; }
.sx-progress-chip__bar { height: .3rem; border-radius: 999px; background: var(--sx-border); overflow: hidden; }
.sx-progress-chip__bar i { display: block; height: 100%; background: var(--sx-accent); border-radius: inherit; }

/* ---------- modal */
.sx-modal-open { overflow: hidden; }
.sx-backdrop { position: fixed; inset: 0; z-index: calc(var(--sx-z) + 1); display: grid; place-items: center; padding: 1rem; background: rgb(15 23 42 / .55); backdrop-filter: blur(3px); opacity: 0; transition: opacity .25s ease; font-family: var(--sx-font); }
.sx-backdrop.is-visible { opacity: 1; }
.sx-modal { position: relative; width: min(24rem, 100%); max-height: calc(100vh - 2rem); overflow: auto; padding: 2rem 1.5rem 1.5rem; border-radius: var(--sx-radius); background: var(--sx-surface); color: var(--sx-text); text-align: center; box-shadow: 0 30px 80px -20px rgb(0 0 0 / .5); transform: scale(.85) translateY(20px); transition: transform .45s cubic-bezier(.34,1.56,.64,1); outline: none; }
.sx-backdrop.is-visible .sx-modal { transform: none; }
.sx-modal::before { content: ""; position: absolute; inset: 0 0 auto; height: 6.5rem; border-radius: var(--sx-radius) var(--sx-radius) 0 0; background: radial-gradient(circle at 50% 0, color-mix(in srgb, var(--sx-accent) 28%, transparent), transparent 70%); pointer-events: none; }
.sx-modal__close { all: unset; cursor: pointer; position: absolute; top: .75rem; inset-inline-end: .75rem; width: 2rem; height: 2rem; border-radius: 50%; display: grid; place-items: center; font-size: 1.35rem; color: var(--sx-muted); }
.sx-modal__close:hover { background: var(--sx-border); color: var(--sx-text); }
.sx-modal__close:focus-visible { outline: 2px solid var(--sx-accent); }
.sx-modal__burst { position: relative; display: grid; place-items: center; margin: 0 auto .75rem; width: 4.5rem; height: 4.5rem; border-radius: 50%; background: color-mix(in srgb, var(--sx-accent) 14%, var(--sx-surface)); }
.sx-modal__burst-art { font-size: 2.25rem; animation: sx-pop .6s cubic-bezier(.34,1.56,.64,1) both; }
.sx-modal__title { margin: 0 0 .35rem; font-size: 1.25rem; font-weight: 800; line-height: 1.5; }
.sx-modal__highlight { margin: .25rem 0; font-size: 2.25rem; font-weight: 900; line-height: 1.2; color: var(--sx-accent); }
.sx-modal__name { margin: 0 0 .5rem; font-weight: 700; }
.sx-modal__message, .sx-modal__hint { margin: .25rem 0 .75rem; font-size: .875rem; line-height: 1.8; color: var(--sx-muted); white-space: pre-line; }
.sx-modal__meta { margin: .75rem 0 0; font-size: .75rem; color: var(--sx-muted); }
.sx-modal__error { margin: .6rem 0 0; font-size: .8125rem; color: #e11d48; }
.sx-modal__success { margin: .6rem 0; font-size: .875rem; font-weight: 700; color: #059669; }
.sx-modal__actions { display: grid; gap: .6rem; margin-top: 1rem; }
.sx-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 2.75rem; padding: 0 1.25rem; border-radius: .85rem; border: 1px solid var(--sx-border); background: transparent; color: var(--sx-text); font: 700 .9375rem/1 var(--sx-font); text-decoration: none; cursor: pointer; transition: filter .15s, transform .15s; }
.sx-btn:hover { filter: brightness(.96); }
.sx-btn:active { transform: scale(.98); }
.sx-btn:focus-visible { outline: 3px solid var(--sx-accent); outline-offset: 2px; }
.sx-btn[disabled] { opacity: .65; cursor: progress; }
.sx-btn--primary { background: var(--sx-accent); border-color: transparent; color: #fff; box-shadow: 0 8px 20px -8px var(--sx-accent); }
.sx-code-row { display: grid; grid-template-columns: 1fr auto; gap: .5rem; align-items: stretch; }
.sx-code { display: grid; place-items: center; padding: .5rem .75rem; border-radius: .85rem; border: 2px dashed var(--sx-accent); font: 800 1.25rem/1.2 ui-monospace, SFMono-Regular, Menlo, monospace; letter-spacing: .12em; color: var(--sx-text); user-select: all; }
.sx-badge { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin: 0 auto; padding: .6rem 1.1rem; border-radius: 999px; font-weight: 800; color: #fff; background: var(--sx-badge, var(--sx-accent)); }
.sx-badge__icon { font-size: 1.5rem; }
.sx-preview-note { margin: 0 0 .75rem; padding: .45rem .75rem; border-radius: .6rem; background: #fef3c7; color: #92400e; font-size: .75rem; font-weight: 700; }
.sx-confetti { position: fixed; inset: 0; z-index: calc(var(--sx-z) + 2); pointer-events: none; }

@keyframes sx-bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -6px; } }
@keyframes sx-spin-bob { 0%, 100% { rotate: 0deg; translate: 0 0; } 50% { rotate: 12deg; translate: 0 -6px; } }
@keyframes sx-lid { 0%, 70%, 100% { transform: none; } 78% { transform: rotate(-8deg) translateY(-2px); } 86% { transform: rotate(6deg) translateY(-1px); } }
@keyframes sx-flip { 0%, 80%, 100% { transform: none; } 90% { transform: rotateY(180deg); } }
@keyframes sx-pop { from { transform: scale(0) rotate(-30deg); } to { transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .sx-float, .sx-trigger, .sx-trigger *, .sx-backdrop, .sx-modal, .sx-toast, .sx-modal__burst-art { animation: none !important; transition: opacity .01s !important; }
  .sx-float, .sx-backdrop .sx-modal { transform: none !important; }
}
@media (max-width: 480px) {
  .sx-trigger { width: 3.4rem; height: 3.4rem; }
  .sx-trigger__art { width: 2.3rem; height: 2.3rem; }
  .sx-modal { padding: 1.75rem 1.1rem 1.1rem; }
}
@media print { .sx-float, .sx-toast, .sx-progress-chip, .sx-backdrop { display: none !important; } }