@font-face{font-family:WorkspaceMonolove;src:url("../monolove/assets/fonts/wild-magnolia.otf") format("opentype");font-display:swap}
.workspace-transition{--switch-bg:#102842;--switch-accent:#a9d0ff;position:fixed;inset:0;z-index:2147483100;display:grid;place-content:center;gap:22px;padding:24px;background:radial-gradient(ellipse at 50% 58%,color-mix(in srgb,var(--switch-accent) 12%,transparent),transparent 65%),var(--switch-bg);color:#f7f4ed;font-family:Arial,sans-serif;text-align:center;isolation:isolate}
.workspace-transition[hidden]{display:none}
.workspace-transition[data-destination="monolog"]{--switch-bg:#1d5943;--switch-accent:#cee8d5}
.workspace-transition[data-destination="hymne-monolog"]{--switch-bg:#11191c;--switch-accent:#c2ac87}
.workspace-transition[data-destination="monolove"]{--switch-bg:#0b160f;--switch-accent:#c2ac87}
.workspace-transition[data-destination="vr-lab"]{--switch-bg:#142d48;--switch-accent:#b6d7f6}
.workspace-transition::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.12;background-image:radial-gradient(var(--switch-accent) .7px,transparent .7px);background-size:10px 10px;mask-image:radial-gradient(ellipse,#000,transparent 75%)}
.workspace-transition__eyebrow{margin:0;color:var(--switch-accent);font-size:9px;font-weight:600;letter-spacing:.24em;text-transform:uppercase}
.workspace-transition__journey{display:flex;align-items:flex-start;justify-content:center;gap:12px;width:min(100%,360px);margin:auto}
.workspace-transition__brand{display:grid;justify-items:center;gap:12px;flex:1;min-width:0}
.workspace-transition__orb{width:80px;height:80px;border-radius:50%;display:grid;place-items:center;background:#ffffff0b;border:1px solid #ffffff2b;box-shadow:inset 0 1px 0 #ffffff14}
.workspace-transition__brand:first-child .workspace-transition__orb{opacity:.4;transform:scale(.7);animation:workspace-switch-source 780ms ease-in-out both}
.workspace-transition__brand:last-child .workspace-transition__orb{transform:scale(1.16);border-color:var(--switch-accent);box-shadow:0 0 38px color-mix(in srgb,var(--switch-accent) 12%,transparent);animation:workspace-switch-destination 780ms ease-in-out both}
.workspace-transition__orb img{width:70%;height:62%;object-fit:contain;filter:brightness(0) invert(1)}
.workspace-transition__orb[data-brand="vibesroom"] img{width:43%;height:62%}
.workspace-transition__orb[data-brand="monolove"] img{width:80%}
.workspace-transition__name{font-size:11px;font-weight:600;line-height:1.5}
.workspace-transition__arrow{display:grid;place-items:center;height:80px;width:42px;flex-shrink:0;color:var(--switch-accent)}
.workspace-transition__arrow svg{width:36px;height:20px;overflow:visible}
.workspace-transition__arrow circle{animation:workspace-travel 780ms ease-in-out both}
@media(max-width:360px){.workspace-transition__orb{width:72px;height:72px}.workspace-transition__arrow{height:72px;width:30px}.workspace-transition__arrow svg{width:32px}.workspace-transition__journey{gap:8px}}

.workspace-transition__wordmark{display:none;font:400 23px/1.2 WorkspaceMonolove,cursive;letter-spacing:0;color:#f4f0e8}
.workspace-transition__orb[data-brand="monolove"] .workspace-transition__wordmark{display:block}
.workspace-transition__orb img[hidden]{display:none}

@keyframes workspace-switch-source{
  0%,22%{opacity:1;transform:scale(1.16);border-color:var(--switch-accent);box-shadow:0 0 38px color-mix(in srgb,var(--switch-accent) 32%,transparent),inset 0 0 20px #ffffff12}
  80%,100%{opacity:.4;transform:scale(.7);border-color:#ffffff2b;box-shadow:0 0 0 transparent}
}
@keyframes workspace-switch-destination{
  0%,22%{opacity:.35;transform:scale(.7);border-color:#ffffff2b;box-shadow:0 0 0 transparent}
  80%,100%{opacity:1;transform:scale(1.16);border-color:var(--switch-accent);box-shadow:0 0 38px color-mix(in srgb,var(--switch-accent) 32%,transparent),inset 0 0 20px #ffffff12}
}
@keyframes workspace-travel{
  0%,20%{transform:translateX(-7px);opacity:0}
  30%{opacity:1}
  75%{transform:translateX(29px);opacity:1}
  90%,100%{transform:translateX(29px);opacity:0}
}
@media(prefers-reduced-motion:reduce){.workspace-transition__arrow circle,.workspace-transition__brand:first-child .workspace-transition__orb,.workspace-transition__brand:last-child .workspace-transition__orb{animation:none}}

/* Every workspace uses the same source-to-destination logo transfer. */
.workspace-transition__dots{display:none}
.workspace-transition[data-logo-transfer="true"]{--switch-bg:#edf4f7;--switch-accent:#6b93a4;background:linear-gradient(145deg,#f9fcfdeb,#e8f1f5f2);backdrop-filter:blur(24px) saturate(135%);-webkit-backdrop-filter:blur(24px) saturate(135%);color:#183c50}
.workspace-transition[data-logo-transfer="true"]::before{opacity:.16}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__eyebrow{color:#5d7685}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__journey{align-items:flex-start;gap:0;width:200px}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__brand{flex:none;width:60px;grid-template-columns:minmax(0,1fr);gap:10px}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__orb{width:60px;height:60px;border:1px solid #ffffff2b;background:#ffffff0b;box-shadow:none;transform:none;animation:none}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__orb img,.workspace-transition[data-logo-transfer="true"] .workspace-transition__orb[data-brand="vibesroom"] img{width:100%;height:100%;border-radius:50%;filter:none}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__brand:first-child .workspace-transition__orb{animation:workspace-pair-source 1.4s ease-in-out both}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__brand:last-child .workspace-transition__orb{animation:workspace-pair-target 1.4s ease-in-out both}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__arrow{width:80px;height:60px}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__arrow svg{display:none}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__dots{display:flex;align-items:center;justify-content:center;gap:10px;height:4px;line-height:0}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__dots i{display:block;flex:0 0 4px;width:4px;height:4px;margin:0;padding:0;border-radius:50%;background:#d6e8ec;opacity:.3;animation:workspace-pair-dot .8s ease-in-out both}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__dots i:nth-child(2){animation-delay:.17s}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__dots i:nth-child(3){animation-delay:.34s}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__name{color:#436579;font-size:11px;white-space:nowrap;width:92px;justify-self:center;text-align:center}
.workspace-transition[data-logo-transfer="true"] .workspace-transition__brand:has([data-brand="hymne-monolog"]) .workspace-transition__name{font-size:9px;font-weight:500}
@keyframes workspace-pair-source{0%,25%{opacity:1;transform:scale(1.2);filter:none;box-shadow:none}75%,100%{opacity:.4;transform:scale(.72);filter:none;box-shadow:none}}
@keyframes workspace-pair-target{0%,25%{opacity:.4;transform:scale(.72);filter:none;box-shadow:none}70%{opacity:1;transform:scale(1.2);filter:none;box-shadow:none}85%,100%{opacity:1;transform:scale(1.2);filter:none;box-shadow:0 0 28px #9fe9d6a8,0 0 12px #ffffff30}}
@keyframes workspace-pair-dot{0%,100%{opacity:.3;transform:scale(.8)}48%{opacity:1;transform:scale(1.45)}}
@media(prefers-reduced-motion:reduce){.workspace-transition[data-logo-transfer="true"] .workspace-transition__orb,.workspace-transition[data-logo-transfer="true"] .workspace-transition__dots i{animation:none!important}.workspace-transition[data-logo-transfer="true"] .workspace-transition__brand:first-child .workspace-transition__orb{opacity:.4;filter:none;transform:scale(.72);box-shadow:none}.workspace-transition[data-logo-transfer="true"] .workspace-transition__brand:last-child .workspace-transition__orb{opacity:1;filter:none;transform:scale(1.2);box-shadow:0 0 28px #9fe9d6a8}}

/* Glass tint moves from the current workspace palette to the destination palette. */
.workspace-transition[data-origin="vibesroom"]{--workspace-from:#104f93}
.workspace-transition[data-origin="monolog"]{--workspace-from:#1d5943}
.workspace-transition[data-origin="monolove"]{--workspace-from:#466047}
.workspace-transition[data-origin="hymne-monolog"]{--workspace-from:#65563b}
.workspace-transition[data-origin="vr-lab"]{--workspace-from:#285c76}
.workspace-transition[data-destination="vibesroom"]{--workspace-to:#104f93}
.workspace-transition[data-destination="monolog"]{--workspace-to:#1d5943}
.workspace-transition[data-destination="monolove"]{--workspace-to:#466047}
.workspace-transition[data-destination="hymne-monolog"]{--workspace-to:#65563b}
.workspace-transition[data-destination="vr-lab"]{--workspace-to:#285c76}
.workspace-transition[data-origin][data-destination]{background:radial-gradient(ellipse at 18% 16%,#ffffff32,transparent 48%),linear-gradient(145deg,color-mix(in srgb,var(--workspace-from) 70%,transparent),color-mix(in srgb,var(--workspace-from) 82%,transparent));backdrop-filter:blur(28px) saturate(135%);-webkit-backdrop-filter:blur(28px) saturate(135%);color:#f8fbfc}
.workspace-transition[data-origin][data-destination]::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;background:radial-gradient(ellipse at 82% 14%,#ffffff36,transparent 48%),linear-gradient(145deg,color-mix(in srgb,var(--workspace-to) 65%,transparent),color-mix(in srgb,var(--workspace-to) 84%,transparent));mask-image:none;pointer-events:none;animation:workspace-glass-color .8s ease-in-out both}
.workspace-transition[data-origin][data-destination]::after{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(125deg,#ffffff23,transparent 32%,#ffffff09 62%,transparent);box-shadow:inset 0 1px 0 #ffffff4d}
.workspace-transition[data-origin][data-destination] .workspace-transition__eyebrow,.workspace-transition[data-origin][data-destination] .workspace-transition__name{color:#f8fbfced;text-shadow:0 1px 8px #071b1533}
.workspace-transition[data-logo-transfer="true"]::before{animation-duration:1.35s}
@keyframes workspace-glass-color{from{opacity:0}to{opacity:1}}
@media(prefers-reduced-motion:reduce){.workspace-transition[data-origin][data-destination]::before{animation:none;opacity:1}}
