.connection-demo{--connect-progress:0;border:1px solid var(--line);border-radius:1rem;background:radial-gradient(ellipse at 60% 35%,#efb84d0b,transparent 65%),#0c0c0a;padding:clamp(1rem,2.4vw,2rem);overflow:hidden}
.connect-heading{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:.5rem;margin-bottom:1.3rem}.connect-heading h3{margin:0;font-weight:450;font-size:1.65rem;letter-spacing:-.04em}.connect-heading>span{font-size:.75rem;color:var(--muted)}
.connect-modes{display:flex;gap:.4rem;padding:.25rem;border:1px solid var(--line-soft);border-radius:999px;width:fit-content}.connect-modes button{min-height:2.75rem;padding:.5rem 1.2rem;border:0;border-radius:999px;background:transparent;color:var(--muted);font-size:.875rem;cursor:pointer}.connect-modes button[aria-pressed=true]{background:#efb84d;color:var(--ink)}
.connect-stage{display:grid;min-height:26rem;position:relative;margin-top:1.3rem}.connect-stage>div{grid-area:1/1;min-width:0;animation:connect-reveal .65s var(--ease) both}.connect-art{position:relative;overflow:hidden;border-radius:.6rem;height:16rem;display:grid;place-items:center;background:#080807}.brand-photo .connect-art>img{border:0;width:100%;height:100%;object-fit:cover;transition:transform 1.5s var(--ease),opacity .65s}.connection-demo[data-phase="1"] .connect-art>img{transform:scale(1.06)}
.connect-scan{position:absolute;inset:1.5rem auto;aspect-ratio:1;display:none;overflow:hidden;background:var(--paper);padding:.6rem;border-radius:.35rem}.brand-photo .connect-scan img{width:100%;height:100%;aspect-ratio:1;border:0;object-fit:contain}.connection-demo[data-mode=qr] .connect-scan{display:block}.connection-demo[data-mode=qr] .connect-art>img{opacity:.2}.connect-scan>span{position:absolute;left:0;right:0;top:0;height:2px;background:#b4781f;box-shadow:0 0 16px #efb84d;animation:connect-scan 2.2s ease-in-out infinite;animation-play-state:paused}.connection-demo[data-playing=true] .connect-scan>span{animation-play-state:running}
.connect-instruction{display:flex;align-items:center;justify-content:center;gap:.8rem;margin-top:1.5rem}.connect-method-icon{color:var(--gold);font-size:2rem}.connect-instruction p{margin:0;font-size:1rem}.connect-instruction small{display:block;margin-top:.3rem;color:var(--muted);font-size:.875rem}.connect-notification{position:absolute;left:1rem;right:1rem;top:10.5rem;display:flex;align-items:center;gap:.75rem;padding:1rem;border:1px solid #c5974666;border-radius:.75rem;background:#181710f5;box-shadow:0 1rem 3rem #0008;opacity:0;transform:translateY(12px);transition:opacity .5s,transform .65s var(--ease)}.connection-demo[data-phase="1"] .connect-notification{opacity:1;transform:none}.brand-photo .connect-notification img{width:2.25rem;height:2.25rem;border:0;object-fit:contain}.connect-notification div{flex:1}.connect-notification strong{display:block;font-size:.9375rem;font-weight:500}.connect-notification span{display:block;font-size:.8rem;color:var(--muted);margin-top:.2rem}
.connect-profile{padding:1.25rem;border:1px solid var(--line-soft);border-radius:.8rem;background:linear-gradient(155deg,#25201455,transparent 60%),#11110e;text-align:center}.connect-profile-bar{display:flex;justify-content:space-between;color:var(--muted);font-size:.75rem}.brand-photo .connect-emblem{width:4rem;height:4rem;object-fit:contain;border:0;margin:1.5rem auto .8rem;aspect-ratio:1}.connect-profile h4{font-size:1.6rem;letter-spacing:.18em;margin:0;font-weight:550}.connect-profile>p{margin:.3rem 0 1.2rem;color:var(--muted);font-size:.875rem}.connect-contact{display:grid;gap:.5rem;font-size:.875rem;color:var(--muted)}.connect-contact strong{font-weight:450;color:var(--paper);font-size:1.1rem}.connect-save{display:flex;gap:.7rem;align-items:center;justify-content:center;width:100%;min-height:3rem;margin:1.4rem 0 .6rem;border:1px solid var(--gold);border-radius:999px;background:var(--gold);color:var(--ink);font-size:1rem;cursor:pointer}.connect-preview-note{font-size:.75rem;color:var(--muted)}
.connect-complete{text-align:center;padding:1.4rem .6rem}.connect-complete>svg{width:4rem;height:4rem;color:var(--gold)}.connect-complete h4{margin:1.25rem 0 1rem;font-size:clamp(2rem,3vw,2.6rem);line-height:1.05;font-weight:450;letter-spacing:-.045em}.connect-complete p{color:var(--muted);font-size:1rem;margin:0 0 1.5rem}.connect-saved-card{display:flex;align-items:center;gap:.8rem;padding:1rem;border:1px solid var(--line);border-radius:.65rem;text-align:left;margin-bottom:1rem}.brand-photo .connect-saved-card img{width:2.5rem;height:2.5rem;border:0;object-fit:contain}.connect-saved-card>span:nth-child(2){flex:1}.connect-saved-card strong{display:block;font-weight:500}.connect-saved-card small{display:block;font-size:.875rem;color:var(--muted)}.connect-saved-card>span:last-child{color:var(--gold)}.connect-complete>small{font-size:.75rem;color:var(--muted)}
.connect-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.7rem;margin-top:1.5rem}.connect-steps button{position:relative;display:flex;flex-wrap:wrap;gap:.4rem;min-height:2.75rem;padding:.4rem 0 .8rem;border:0;background:transparent;color:var(--muted);font-size:.875rem;cursor:pointer;text-align:left}.connect-steps button>span{color:#918265;font-size:.75rem}.connect-steps i{position:absolute;bottom:0;left:0;right:0;height:1px;background:var(--line)}.connect-steps button[aria-pressed=true]{color:var(--gold-bright)}.connect-steps button[aria-pressed=true] i{background:var(--gold)}.connect-controls{display:flex;justify-content:space-between;margin-top:.7rem}.connect-controls button{display:flex;align-items:center;gap:.5rem;min-height:2.75rem;padding:.4rem 0;border:0;background:transparent;color:var(--gold-bright);font-size:.875rem;cursor:pointer}.connect-controls button:last-child{color:var(--muted)}.connect-status{min-height:2.8em;margin:.4rem 0 0;font-size:.875rem;color:#c6bca8;line-height:1.5}.connect-footnote{margin:1rem 0 0;padding-top:1rem;border-top:1px solid var(--line-soft);color:var(--muted);font-size:.75rem;line-height:1.6}.product-collection{margin-top:1.25rem}.product-collection>summary{padding:1rem 0;font-size:.9375rem;color:var(--gold-bright);cursor:pointer}.product-collection[open]>summary{margin-bottom:.5rem}.connection-demo button:focus-visible{outline:2px solid var(--gold-bright);outline-offset:3px}
@keyframes connect-reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}@keyframes connect-scan{0%,100%{transform:translateY(10px)}50%{transform:translateY(195px)}}
@media(max-width:680px){.connect-heading h3{font-size:1.5rem}.connect-stage{min-height:26rem}.connect-art{height:15rem}.connect-notification{left:.4rem;right:.4rem;padding:.8rem}.connect-heading{align-items:flex-start}.brand-photo:has(.connection-demo){position:static}.connect-complete h4{font-size:2.25rem}}
@media(prefers-reduced-motion:reduce){.connection-demo *,.connection-demo *::before,.connection-demo *::after{animation:none!important;transition:none!important}}