/* Before the launch: "ordering opens at the end of November" dialog (Views/Shared/Marketing/_StartWkrotce.cshtml). */
.start-soon{position:fixed;inset:0;margin:auto;width:min(440px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);padding:0;border:0;background:transparent;color:var(--ink,#f5f2fa);font-family:var(--font,"Inter","Segoe UI",Arial,sans-serif);overflow:visible;overscroll-behavior:contain}
.start-soon::backdrop{background:radial-gradient(120% 90% at 50% 40%,rgba(64,36,104,.42),rgba(10,7,18,.78) 70%);backdrop-filter:blur(10px) saturate(115%);-webkit-backdrop-filter:blur(10px) saturate(115%)}
.start-soon[open]{animation:start-soon-in .42s cubic-bezier(.2,.8,.2,1) both}
.start-soon[open]::backdrop{animation:start-soon-fade .35s ease both}
.start-soon.is-closing{animation:start-soon-out .22s ease both}
.start-soon.is-closing::backdrop{animation:start-soon-fade .22s ease reverse both}

.start-soon__card{position:relative;overflow:hidden auto;max-height:calc(100dvh - 32px);padding:34px 30px 28px;border:1px solid rgba(245,231,255,.2);border-radius:28px;text-align:center;
  background:#1b1330 linear-gradient(150deg,#31204e,#160f25 55%,#211636);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.14),0 30px 90px rgba(0,0,0,.5),0 0 0 1px rgba(180,155,232,.06),0 0 80px rgba(150,104,230,.18)}
.start-soon__card:focus{outline:none}
.start-soon__shine{position:absolute;inset:-40% -20% auto;height:70%;background:radial-gradient(50% 60% at 50% 100%,rgba(196,160,255,.22),transparent 70%);pointer-events:none}

.start-soon__close{position:absolute;top:14px;right:14px;z-index:2;display:grid;place-items:center;width:38px;height:38px;padding:0;border:1px solid rgba(245,231,255,.18);border-radius:50%;background:rgba(255,255,255,.05);color:#e6dcf3;cursor:pointer;transition:background .2s,transform .2s}
.start-soon__close svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round}
.start-soon__close:hover{background:rgba(255,255,255,.12);transform:rotate(90deg)}

.start-soon__art{position:relative;width:132px;height:132px;margin:2px auto 18px}
.start-soon__halo{position:absolute;inset:14px;border-radius:50%;background:radial-gradient(circle,rgba(190,150,255,.55),rgba(120,70,220,.18) 55%,transparent 72%);filter:blur(6px);animation:start-soon-pulse 3.6s ease-in-out infinite}
.start-soon__orbit{position:absolute;inset:0;border-radius:50%;border:1px solid rgba(210,186,255,.34);animation:start-soon-spin 14s linear infinite}
.start-soon__orbit::after{content:"";position:absolute;top:9%;left:82%;width:7px;height:7px;border-radius:50%;background:#e9dbff;box-shadow:0 0 12px 3px rgba(210,186,255,.8)}
.start-soon__orbit--two{inset:18px;border-color:rgba(210,186,255,.2);animation-duration:9s;animation-direction:reverse}
.start-soon__orbit--two::after{top:auto;bottom:2%;left:30%;width:5px;height:5px}
.start-soon__spark{position:absolute;width:4px;height:4px;border-radius:50%;background:#f3eaff;box-shadow:0 0 8px 2px rgba(210,186,255,.7);animation:start-soon-twinkle 2.8s ease-in-out infinite}
.start-soon__spark--one{top:6px;left:18px}
.start-soon__spark--two{top:38px;right:-6px;animation-delay:.9s}
.start-soon__spark--three{bottom:4px;left:4px;animation-delay:1.7s}
.start-soon__badge{position:absolute;inset:34px;display:grid;place-items:center;border-radius:50%;border:1px solid rgba(255,255,255,.55);background:linear-gradient(140deg,#f6eefd,#d9c3f2);box-shadow:inset 0 1px 1px #fff,0 10px 34px rgba(150,104,230,.45)}
.start-soon__badge svg{width:30px;height:30px;fill:none;stroke:#3a2650;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

.start-soon__eyebrow{display:inline-flex;align-items:center;gap:9px;margin:0 0 12px;padding:6px 13px;border:1px solid rgba(210,186,255,.24);border-radius:100px;background:rgba(180,155,232,.1);color:#d9c8f2;font-size:11px;font-weight:600;letter-spacing:.08em;text-transform:uppercase}
.start-soon__eyebrow span{width:6px;height:6px;border-radius:50%;background:#cfaeff;box-shadow:0 0 0 4px rgba(207,174,255,.16);animation:start-soon-pulse 2.4s ease-in-out infinite}
.start-soon h2{margin:0 0 12px;font-size:clamp(25px,6.4vw,31px);font-weight:500;line-height:1.15;letter-spacing:-.02em;color:#fbf8ff}
.start-soon__text{margin:0 auto 10px;max-width:34ch;color:#d6cce4;font-size:15px;line-height:1.6}
.start-soon__note{margin:0 auto 24px;max-width:36ch;color:#a99bbd;font-size:13px;line-height:1.6}

.start-soon__actions{display:flex;flex-wrap:wrap;justify-content:center;gap:10px}
.start-soon__primary,.start-soon__secondary{display:inline-flex;align-items:center;justify-content:center;gap:14px;min-height:48px;padding:0 22px;border-radius:100px;font-family:inherit;font-size:13px;font-weight:600;line-height:1;text-decoration:none;cursor:pointer;transition:transform .22s,background .22s,box-shadow .22s}
.start-soon__primary{border:1px solid rgba(255,255,255,.7);background:linear-gradient(120deg,#f3e9fb,#decbf0);color:#2f1d3f;box-shadow:inset 0 1px 1px #fff,0 8px 26px rgba(183,134,226,.25)}
.start-soon__primary svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s}
.start-soon__primary:hover{transform:translateY(-2px);background:#f6effc;box-shadow:inset 0 1px 1px #fff,0 12px 32px rgba(183,134,226,.35)}
.start-soon__primary:hover svg{transform:translate(2px,-2px)}
.start-soon__secondary{border:1px solid rgba(245,231,255,.24);background:rgba(255,255,255,.04);color:#e6dcf3}
.start-soon__secondary:hover{background:rgba(255,255,255,.1);transform:translateY(-2px)}
.start-soon button:focus-visible,.start-soon a:focus-visible{outline:2px solid #d2baff;outline-offset:3px}

@media (max-width:420px){
  .start-soon__card{padding:30px 20px 22px;border-radius:24px}
  .start-soon__art{width:112px;height:112px;margin-bottom:14px}
  .start-soon__badge{inset:29px}
  .start-soon__actions{flex-direction:column}
  .start-soon__primary,.start-soon__secondary{width:100%}
}
@media (max-height:560px){.start-soon__art{display:none}}

@keyframes start-soon-in{from{opacity:0;transform:translateY(18px) scale(.96)}to{opacity:1;transform:none}}
@keyframes start-soon-out{to{opacity:0;transform:translateY(10px) scale(.98)}}
@keyframes start-soon-fade{from{opacity:0}to{opacity:1}}
@keyframes start-soon-spin{to{transform:rotate(360deg)}}
@keyframes start-soon-pulse{0%,100%{opacity:.75;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}
@keyframes start-soon-twinkle{0%,100%{opacity:.25;transform:scale(.7)}50%{opacity:1;transform:scale(1.15)}}
@media (prefers-reduced-motion:reduce){
  .start-soon[open],.start-soon[open]::backdrop,.start-soon.is-closing,.start-soon.is-closing::backdrop{animation:none}
  .start-soon__halo,.start-soon__orbit,.start-soon__spark,.start-soon__eyebrow span{animation:none}
}
