/* The video is a shared foreground, never clipped into individual arches. */
.connection-story{position:relative;isolation:isolate;background:linear-gradient(90deg,#211128 0%,#211128e8 26%,#21112800 64%),radial-gradient(ellipse at 77% 77%,#603348 0%,#3d1e30 42%,#2d1627 80%);color:#faf0ff;overflow:clip;overflow-anchor:none;scroll-margin-top:55px}
.connection-story:before{content:'';position:absolute;inset:0;pointer-events:none;z-index:-1;background:linear-gradient(#211128,transparent 160px)}
.experiences-motion .connection-story{height:auto}
.connection-story [hidden]{display:none!important}
.connection-layout{max-width:1600px;margin:auto;padding:85px 5.5% 95px;min-height:min(850px,100svh);display:grid;grid-template-columns:minmax(260px,.77fr) minmax(0,1.6fr);grid-template-rows:auto 1fr;column-gap:3%;align-items:center;box-sizing:border-box}
.connection-label{grid-column:1/-1;font-size:23px;letter-spacing:-1px;font-weight:650;margin:0 0 35px;line-height:1.3}
.connection-copy{position:relative;z-index:3;align-self:center;padding-bottom:30px}
.connection-copy h3{font-size:clamp(35px,3.6vw,60px);line-height:1.08;letter-spacing:-.055em;font-weight:650;margin:0;max-width:440px}
.connection-copy h3 em{font-style:normal;color:#cfa3ee}
.connection-description{color:#cdb4dc;font-size:15px;line-height:1.8;max-width:330px;margin:25px 0 0}
.connection-game{margin-top:26px;animation:connection-rise .45s both}
.connection-prompt{font-size:13px;color:#f5eaf9;margin:0 0 14px}
.connection-choices{display:grid;gap:9px;max-width:355px}
.connection-choices button{font:inherit;line-height:1.5;display:flex;align-items:center;justify-content:space-between;gap:14px;text-align:left;background:#34203f;border:1px solid #b895cb40;color:#f9f0fe;padding:14px 17px;border-radius:17px 17px 17px 4px;font-size:13px;cursor:pointer;transition:background .2s,border-color .2s,transform .2s}
.connection-choices button>span:last-child{font-size:18px;color:#d4a8ef}
.connection-choices button:hover{background:#4a2a59;border-color:#cfa3ee;transform:translateX(4px)}
.connection-story button:focus-visible{outline:2px solid #e7c6ff;outline-offset:5px}
.connection-visual{position:relative;min-width:0;align-self:center}
.connection-visual:before{content:'';position:absolute;inset:-45% -35%;z-index:-1;background:radial-gradient(ellipse at 50% 55%,#42223455,transparent 72%);pointer-events:none}
.connection-film-wrap{position:relative;width:100%;aspect-ratio:854/480;isolation:isolate}
#connectionVideo,.connection-kiss{width:100%;height:100%;display:block;object-fit:contain;background:transparent;mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 86%,transparent);mask-composite:intersect;-webkit-mask-image:linear-gradient(90deg,transparent,#000 11%,#000 89%,transparent),linear-gradient(0deg,transparent,#000 10%,#000 86%,transparent);-webkit-mask-composite:source-in}
.connection-kiss{position:absolute;inset:0}
.connection-notifications{position:absolute;inset:0;pointer-events:none;opacity:0;transition:opacity .35s,transform .35s;transform:translateY(8px)}
.connection-story.has-notifications .connection-notifications{opacity:1;transform:translateY(0)}
.connection-notification{position:absolute;top:5%;width:clamp(142px,14vw,195px);padding:11px 12px;display:flex;gap:9px;align-items:center;background:#f4eafbeF;color:#321c40;border:1px solid #fff6;border-radius:17px 17px 17px 5px;box-shadow:0 8px 30px #12091c35;transform:translateX(-50%);backdrop-filter:blur(14px);font-size:12px;line-height:1.5}
.connection-notification:after{content:'';position:absolute;bottom:-6px;left:21px;width:13px;height:13px;background:#f4eafb;clip-path:polygon(0 0,100% 0,0 100%)}
.connection-notification-man{left:25%}.connection-notification-woman{left:75%}
.connection-notification strong{font-size:11px;display:block;font-weight:750}.connection-notification span span{display:block;white-space:nowrap}
.connection-app-icon{width:28px;height:28px;display:grid;place-items:center;border-radius:8px;background:#6c3b8d;color:white;font-size:19px;font-weight:800;flex:none;letter-spacing:-1px}
.connection-phone-reply{position:absolute;top:5%;left:75%;transform:translateX(-50%) translateY(8px);width:clamp(155px,16vw,215px);border-radius:18px 18px 4px 18px;padding:14px 16px;background:#efe2f7;color:#321c40;font-size:13px;line-height:1.5;opacity:0;transition:opacity .3s,transform .3s;pointer-events:none;box-shadow:0 8px 30px #12091c35}
.connection-story.has-phone-reply .connection-phone-reply{opacity:1;transform:translateX(-50%)}
.connection-controls{display:flex;justify-content:space-between;align-items:center;gap:20px;margin:14px 9% 0;color:#bca4ca;font-size:11px}
.connection-controls button,.connection-restart,.connection-error button{font:inherit;background:none;color:#e3c8f6;border:0;border-bottom:1px solid #cfa3ee55;padding:8px 0;cursor:pointer;white-space:nowrap}
.connection-controls button:disabled{opacity:.6;cursor:default;border-color:transparent}
.connection-controls button span{margin-left:10px}.connection-status{text-align:right;line-height:1.6}
.connection-chat{margin-top:28px;max-width:350px;display:flex;flex-direction:column;align-items:flex-start;gap:12px;font-size:14px;line-height:1.6}
.connection-chat p{margin:0;padding:14px 18px;border-radius:18px;animation:connection-rise .35s both}
.connection-chat .connection-sent{align-self:flex-end;background:#734395;color:white;border-bottom-right-radius:4px}
.connection-chat .connection-reply{background:#efe2f7;color:#321c40;border-bottom-left-radius:4px}
.connection-typing{background:#ffffff0b;display:flex;gap:4px}.connection-typing i{display:inline-block;width:5px;height:5px;background:#cdb4dc;border-radius:50%;margin-right:4px;animation:connection-dot 1s infinite}.connection-typing i:nth-child(2){animation-delay:.15s}.connection-typing i:nth-child(3){animation-delay:.3s}
.connection-takeaway{margin-top:25px;color:#cdb4dc;font-size:14px;line-height:1.8;animation:connection-rise .5s both}.connection-takeaway p{margin:0 0 15px}.connection-restart{color:#e3c8f6;font-size:12px}.connection-restart span{margin-left:12px}.connection-error{font-size:12px;color:#e4c9ef;margin:10px 9%}
.connection-sr{position:absolute!important;width:1px;height:1px;padding:0!important;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
@keyframes connection-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
@keyframes connection-dot{50%{opacity:.35;transform:translateY(-3px)}}
@media(min-width:1600px){.connection-layout{padding-left:6%;padding-right:6%}}
@media(max-width:900px){.connection-layout{column-gap:0;grid-template-columns:minmax(245px,.85fr) minmax(0,1.35fr);padding-left:5%;padding-right:3%}.connection-copy h3{font-size:37px}.connection-choices button{font-size:12px;padding:12px}.connection-notification{width:139px;padding:8px;font-size:11px;gap:6px}.connection-app-icon{width:23px;height:23px;font-size:17px}.connection-controls{margin-left:9%;margin-right:8%;gap:10px}.connection-status{max-width:145px}}
@media(max-width:680px){.connection-layout{min-height:0;padding:48px 6% 55px;grid-template-columns:1fr;gap:0}.connection-label{font-size:19px;margin-bottom:25px}.connection-copy{display:contents}.connection-copy h3{grid-row:2;font-size:40px;max-width:none}.connection-description{grid-row:3;font-size:13px;line-height:1.7;max-width:310px;margin-top:16px}.connection-visual{grid-row:4;margin:20px -5% 0;width:110%}.connection-game,.connection-chat,.connection-takeaway{grid-row:5;margin-top:24px;width:100%;max-width:none}.connection-choices{max-width:none}.connection-choices button{font-size:13px;padding:13px 16px}.connection-notification{width:132px;top:0;padding:7px 9px;font-size:10px;border-radius:13px 13px 13px 3px;gap:5px}.connection-notification strong{font-size:9px}.connection-app-icon{width:20px;height:20px;font-size:15px}.connection-notification-man{left:25%}.connection-notification-woman{left:75%}.connection-phone-reply{width:145px;font-size:11px;padding:10px 12px;top:0}.connection-controls{font-size:10px;margin-top:10px}.connection-status{max-width:160px}.connection-chat{font-size:13px}.connection-chat p{max-width:90%}.connection-takeaway p{margin-top:0}}
@media(prefers-reduced-motion:reduce){.connection-story *{animation:none!important;transition:none!important}}
/* The notification opens into a focused, keyboard-accessible conversation. */
.connection-dialog{margin:auto;width:min(460px,calc(100% - 32px));max-height:calc(100dvh - 40px);padding:0;overflow:auto;overscroll-behavior:contain;border:1px solid #d5abea;border-radius:27px;background:#f7eefc;color:#2d163c;box-shadow:0 0 0 6px #c490eb10,0 24px 100px #10071680;font:inherit;transform-origin:center}
.connection-dialog::backdrop{background:#160b2459;backdrop-filter:blur(5px);animation:connection-backdrop .45s both}
.connection-dialog-header{display:flex;align-items:center;gap:11px;padding:20px 24px;background:#eadbf4;border-bottom:1px solid #d6bee7}
.connection-dialog-header .connection-app-icon{width:38px;height:38px;font-size:26px;border-radius:11px;box-shadow:0 4px 14px #70408025}
.connection-dialog-header>span:nth-child(2){display:grid;gap:3px;font-size:11px;color:#765c87}
.connection-dialog-header strong{color:#3b204e;font-size:14px}
#connectionDialogClose{margin-left:auto;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:#d8c1e866;color:#654376;font-size:25px;line-height:1}
.connection-dialog-body{padding:28px 28px 30px;position:relative;min-height:395px}
#connectionDialogTitle{font-size:33px;line-height:1.15;letter-spacing:-1.5px;color:#351843;margin:0 0 10px}
#connectionDialogHint{font-size:13px;line-height:1.7;color:#775d85;max-width:310px}
.connection-dialog .connection-game{margin-top:28px;animation:none}
.connection-dialog .connection-prompt{display:flex;align-items:center;gap:9px;color:#643980;font-size:12px;font-weight:750;margin-bottom:17px}
.connection-dialog .connection-prompt:before{content:'';width:7px;height:7px;flex:none;background:#a85ee4;border-radius:50%;box-shadow:0 0 10px #a85ee4}
.connection-dialog .connection-choices{max-width:none;gap:13px}
.connection-dialog .connection-choices button{min-height:60px;padding:15px 17px;font-size:13px;line-height:1.5;background:linear-gradient(115deg,#754198,#56306f);border:1px solid #be85e5;border-radius:17px 17px 5px 17px;color:#fff;box-shadow:0 0 0 3px #b377d51c,0 4px 18px #9a57c947;animation:connection-reply-glow 2.8s ease-in-out infinite}
.connection-dialog .connection-choices button:nth-child(2){animation-delay:.3s}.connection-dialog .connection-choices button:nth-child(3){animation-delay:.6s}
.connection-dialog .connection-choices button>span:last-child{width:29px;height:29px;display:grid;place-items:center;flex:none;border-radius:50%;background:#ffffff18;color:#fff;font-size:18px}
.connection-dialog .connection-choices button:hover{background:linear-gradient(115deg,#8d4eb6,#683482);transform:translateY(-2px);border-color:#e8b9ff;box-shadow:0 0 0 3px #b377d540,0 6px 25px #9a57c977}
.connection-dialog button:focus-visible{outline:3px solid #a465c8;outline-offset:4px}
.connection-dialog .connection-chat{margin-top:25px;max-width:none;min-height:160px;font-size:14px}
.connection-dialog .connection-chat p{max-width:90%}.connection-dialog .connection-chat .connection-reply{background:#e6d7ef}.connection-dialog .connection-typing{background:#e6d7ef}.connection-dialog .connection-typing i{background:#8b669f}
.connection-open-chat{display:flex;align-items:center;justify-content:space-between;gap:35px;margin-top:30px;padding:15px 21px;border:1px solid #c18ce4;border-radius:16px;background:linear-gradient(115deg,#754198,#56306f);color:white;font-size:14px;box-shadow:0 0 25px #b577e15c;animation:connection-reply-glow 2.8s infinite;cursor:pointer}
.connection-story.chat-popup-open .connection-notifications{opacity:0}
@keyframes connection-reply-glow{0%,100%{box-shadow:0 0 0 3px #b377d51c,0 4px 18px #9a57c947}50%{box-shadow:0 0 0 4px #b377d53c,0 5px 27px #b477df80}}
@keyframes connection-backdrop{from{background:#160b2400;backdrop-filter:blur(0)}to{background:#160b2459;backdrop-filter:blur(5px)}}
@media(max-width:680px){.connection-open-chat{grid-row:5;justify-self:start}.connection-dialog .connection-game,.connection-dialog .connection-chat{width:auto}.connection-dialog-body{padding:25px 22px 27px}.connection-dialog-header{padding:17px 21px}.connection-dialog .connection-choices button{font-size:13px;padding:14px}#connectionDialogTitle{font-size:30px}}
@media(prefers-reduced-motion:reduce){.connection-dialog::backdrop,.connection-dialog .connection-choices button,.connection-open-chat{animation:none!important}.connection-dialog .connection-choices button{box-shadow:0 0 0 3px #b377d53c,0 5px 25px #9a57c960}}
.connection-magic{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;align-items:center;text-align:center;gap:19px;animation:connection-dissolve 2.2s both;outline:0}
.connection-magic>span{display:block;font-size:47px;line-height:1;color:#9957bf;text-shadow:0 0 30px #b97ce980}
.connection-magic p{font-size:36px;line-height:1.12;letter-spacing:-1.5px;color:#3b204e;font-weight:650}.connection-magic em{font-style:normal;color:#9654b9}
.show-magic #connectionDialogTitle,.show-magic #connectionDialogHint,.show-magic .connection-chat{visibility:hidden}
@keyframes connection-dissolve{0%{opacity:0;filter:blur(9px);transform:translateY(8px) scale(.97)}30%,77%{opacity:1;filter:blur(0);transform:none}100%{opacity:0;filter:blur(5px);transform:scale(1.025)}}
/* The plate and its caption trade places at the transformation, then return at the ending. */
.experiences-motion .nutrition-film{--nutrition-gap:20px;--nutrition-caption-width:16vw}
.experiences-motion .nutrition-film .film-surface{transition:transform 1.05s cubic-bezier(.22,.7,.18,1)}
.experiences-motion .nutrition-film .film-caption-new{width:var(--nutrition-caption-width);left:calc(100% + var(--nutrition-gap));transition:left 1.05s cubic-bezier(.22,.7,.18,1),opacity .4s}
.experiences-motion .nutrition-swapped .nutrition-film .film-surface{transform:translateX(calc(var(--nutrition-caption-width) + var(--nutrition-gap)))}
.experiences-motion .nutrition-swapped .nutrition-film .film-caption-new{left:0;animation:nutrition-caption-switch 1.05s both}
@keyframes nutrition-caption-switch{0%,100%{opacity:1}40%{opacity:.12}75%{opacity:.9}}
@media(max-width:760px){.experiences-motion .nutrition-film{--nutrition-caption-width:39vw}.connection-story{background:linear-gradient(#211128 0%,#2e182b 34%,#432337 70%,#351c2e 100%)}.connection-magic p{font-size:32px}}
@media(max-width:760px) and (max-height:730px){.experiences-motion .nutrition-film{--nutrition-gap:17px;--nutrition-caption-width:40vw}}
@media(prefers-reduced-motion:reduce){.connection-magic{animation:none}.nutrition-film .film-surface,.nutrition-film .film-caption-new{transition:none!important;animation:none!important}}